/*
Theme Name: Perun
Theme URI: https://perun.watch
Description: Custom child theme for the Perun watch shop — a furlanmarri-inspired, editorial storefront built on Twenty Twenty-Five. Slavic heritage meets Swiss precision. Cormorant Garamond + Jost, cool-neutral palette with a garnet accent.
Author: Perun
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: perun
*/

/* ------------------------------------------------------------------
   Most styling lives in theme.json (tokens) and block patterns.
   This file holds the handful of things theme.json can't express:
   all-caps label treatment, link hover transitions, and small
   storefront refinements. Loaded after the parent + theme.json.
   ------------------------------------------------------------------ */

:root {
  --perun-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --perun-small-title-size: 1rem;
  --perun-section-eyebrow-size: var(--perun-small-title-size); /* legacy alias */
}

/* ---- Small title — THE one reusable red uppercase title -------------
   Use class="perun-small-title" in patterns (or the "Small title (red
   uppercase)" block style + accent colour in the editor). One size for
   the whole site: --perun-small-title-size. Everything after the first
   two selectors is a legacy alias — do NOT invent new classes, and do
   NOT re-size small titles per section. */
.perun-small-title,
.is-style-perun-eyebrow.has-accent-color,
.perun-eyebrow,
.perun-blog-kicker,
.perun-quotes__eyebrow,
.perun-featured__eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--perun-small-title-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
/* Block style without an explicit accent colour: neutral small label. */
.is-style-perun-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  line-height: 1.4;
}

/* WP core paints a 2px outline on ANY focused element inside
   .wp-site-blocks (:where(.wp-site-blocks :focus)) — so every mouse
   click on an accordion, dropdown or button leaves a black box. Keep
   the ring for keyboard users (:focus-visible), drop it for clicks. */
.wp-site-blocks :focus:not(:focus-visible) {
  outline: none;
}

/* Smooth, understated link + button transitions */
a,
.wp-element-button,
.wp-block-button__link {
  transition: color 0.25s var(--perun-ease),
              background-color 0.25s var(--perun-ease),
              border-color 0.25s var(--perun-ease),
              opacity 0.25s var(--perun-ease);
}

/* Text links in body copy: garnet, underline on hover only */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.entry-content a:hover,
.wp-block-post-content a:hover {
  text-decoration-color: var(--wp--preset--color--accent);
}

/* Product grid cards: quiet lift on hover */
.wc-block-grid__product,
.wp-block-woocommerce-product-template li,
li.product {
  transition: transform 0.4s var(--perun-ease);
}
.wc-block-grid__product:hover,
li.product:hover {
  transform: translateY(-4px);
}
.wc-block-grid__product img,
li.product img {
  transition: opacity 0.4s var(--perun-ease);
}

/* Outline (secondary) button style */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

/* Fine top hairline used to separate storytelling sections */
.perun-rule {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--border);
  width: 100%;
  margin: 0;
}

/* ---- Header ------------------------------------------------------- */
.perun-header {
  position: relative;
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--body);
  transition: background-color 0.18s ease, border-color 0.18s ease;
  z-index: 80;
}
.perun-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1rem, 1.35vw, 1.25rem) var(--wp--preset--spacing--40);
}

/* Logo (centre column) */
.perun-logo-link { justify-self: center; display: block; line-height: 0; }
.perun-header .perun-logo-img { height: clamp(54px, 3.4vw, 62px); width: auto; display: block; }

/* Primary nav (left column) */
.perun-primary { justify-self: start; }
.perun-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--wp--preset--spacing--40);
}
.perun-menu-item { position: static; }
.perun-menu-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  line-height: 1;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.18s ease;
}
.perun-menu-trigger:hover,
.perun-menu-item.is-open > .perun-menu-trigger {
  color: var(--wp--preset--color--accent);
}

/* Mega dropdown panel */
.perun-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--wp--preset--color--base);
  border-top: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 24px 44px -28px rgba(24, 24, 27, 0.35);
  z-index: 40;
}
.perun-mega[hidden] { display: none; }
.perun-mega-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

/* Text link lists inside a panel */
.perun-mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}
.perun-mega-links a {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.2;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.18s ease;
}
.perun-mega-links a:hover { color: var(--wp--preset--color--accent); }
/* Compact multi-column list (Learn more / Services) */
.perun-mega-links--cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
}
.perun-mega-links--cols a {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.01em;
}

/* Watches panel: links + image cards */
.perun-mega-inner--split {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}
.perun-mega-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.perun-card { display: block; text-decoration: none; color: var(--wp--preset--color--contrast); }
.perun-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.perun-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.perun-card:hover .perun-card-media img { transform: scale(1.04); }
.perun-card-label {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
}
.perun-card:hover .perun-card-label { color: var(--wp--preset--color--accent); }

/* Blog panel: post cards */
.perun-mega-posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.perun-post-card { display: block; text-decoration: none; color: var(--wp--preset--color--contrast); }
.perun-post-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.perun-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.perun-post-media--empty { display: block; width: 100%; height: 100%; background: var(--wp--preset--color--surface-2); }
.perun-post-card:hover .perun-post-media img { transform: scale(1.04); }
.perun-post-title {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.25;
}
.perun-post-card:hover .perun-post-title { color: var(--wp--preset--color--accent); }
.perun-mega-more { margin: var(--wp--preset--spacing--40) 0 0; }
.perun-mega-more a {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}

/* Tools (right column) */
.perun-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}

/* Header switchers: currency and language, one look for both */
.perun-switcher { position: relative; }
.perun-switcher-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  gap: 0.35em;
  line-height: 1;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--contrast);
  transition: color 0.18s ease;
}
.perun-switcher-toggle:hover { color: var(--wp--preset--color--accent); }
.perun-caret { transition: transform 0.2s ease; }
.perun-switcher.is-open .perun-caret { transform: rotate(180deg); }
.perun-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6em);
  min-width: 150px;
  margin: 0;
  padding: 0.35em 0;
  list-style: none;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 18px 34px -22px rgba(24, 24, 27, 0.4);
  z-index: 50;
  display: none;
}
.perun-switcher.is-open .perun-switcher-menu { display: block; }
.perun-switcher-menu a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.55em 1.1em;
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.perun-switcher-menu a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--accent); }
.perun-switcher-menu a[aria-current="true"] { color: var(--wp--preset--color--accent); font-weight: 600; }

/* Cart */
.perun-cart {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.35em;
  text-decoration: none;
  line-height: 1;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--contrast);
  transition: color 0.18s ease;
}
.perun-cart:hover { color: var(--wp--preset--color--accent); }

/* Transparent header on the homepage video hero */
.home .wp-site-blocks > header.wp-block-template-part {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 80;
}
.home .perun-header {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.18);
}
.home .perun-header .perun-logo-img {
  filter: brightness(0) invert(1);
}
.home .perun-header .perun-menu-trigger,
.home .perun-header .perun-switcher-toggle,
.home .perun-header .perun-cart {
  color: var(--wp--preset--color--base);
}
.home .perun-header .perun-menu-trigger:hover,
.home .perun-header .perun-menu-item.is-open > .perun-menu-trigger,
.home .perun-header .perun-switcher-toggle:hover,
.home .perun-header .perun-cart:hover {
  color: var(--wp--preset--color--accent);
}
.home .perun-header .perun-burger-line,
.home .perun-header .perun-burger-line::before,
.home .perun-header .perun-burger-line::after {
  background: var(--wp--preset--color--base);
}
.home .perun-header:hover,
.home .perun-header:focus-within,
.home .perun-header:has(.perun-menu-item.is-open) {
  background: var(--wp--preset--color--base);
  border-bottom-color: var(--wp--preset--color--border);
}
.home .perun-header:hover .perun-logo-img,
.home .perun-header:focus-within .perun-logo-img,
.home .perun-header:has(.perun-menu-item.is-open) .perun-logo-img {
  filter: none;
}
.home .perun-header:hover .perun-menu-trigger,
.home .perun-header:hover .perun-switcher-toggle,
.home .perun-header:hover .perun-cart,
.home .perun-header:focus-within .perun-menu-trigger,
.home .perun-header:focus-within .perun-switcher-toggle,
.home .perun-header:focus-within .perun-cart,
.home .perun-header:has(.perun-menu-item.is-open) .perun-menu-trigger,
.home .perun-header:has(.perun-menu-item.is-open) .perun-switcher-toggle,
.home .perun-header:has(.perun-menu-item.is-open) .perun-cart {
  color: var(--wp--preset--color--contrast);
}
.home .perun-header:hover .perun-menu-trigger:hover,
.home .perun-header:hover .perun-menu-item.is-open > .perun-menu-trigger,
.home .perun-header:focus-within .perun-menu-trigger:hover,
.home .perun-header:focus-within .perun-menu-item.is-open > .perun-menu-trigger,
.home .perun-header:has(.perun-menu-item.is-open) .perun-menu-trigger:hover,
.home .perun-header:has(.perun-menu-item.is-open) .perun-menu-item.is-open > .perun-menu-trigger,
.home .perun-header:hover .perun-switcher-toggle:hover,
.home .perun-header:hover .perun-cart:hover,
.home .perun-header:focus-within .perun-switcher-toggle:hover,
.home .perun-header:focus-within .perun-cart:hover,
.home .perun-header:has(.perun-menu-item.is-open) .perun-switcher-toggle:hover,
.home .perun-header:has(.perun-menu-item.is-open) .perun-cart:hover {
  color: var(--wp--preset--color--accent);
}
.home .perun-header:hover .perun-burger-line,
.home .perun-header:hover .perun-burger-line::before,
.home .perun-header:hover .perun-burger-line::after,
.home .perun-header:focus-within .perun-burger-line,
.home .perun-header:focus-within .perun-burger-line::before,
.home .perun-header:focus-within .perun-burger-line::after,
.home .perun-header:has(.perun-menu-item.is-open) .perun-burger-line,
.home .perun-header:has(.perun-menu-item.is-open) .perun-burger-line::before,
.home .perun-header:has(.perun-menu-item.is-open) .perun-burger-line::after {
  background: var(--wp--preset--color--contrast);
}
.home .perun-header.is-mobile-open {
  background: var(--wp--preset--color--base);
  border-bottom-color: var(--wp--preset--color--border);
}
.home .perun-header.is-mobile-open .perun-logo-img {
  filter: none;
}
.home .perun-header.is-mobile-open .perun-menu-trigger,
.home .perun-header.is-mobile-open .perun-cart {
  color: var(--wp--preset--color--contrast);
}
.home .perun-header.is-mobile-open .perun-burger-line,
.home .perun-header.is-mobile-open .perun-burger-line::before,
.home .perun-header.is-mobile-open .perun-burger-line::after {
  background: var(--wp--preset--color--contrast);
}
.home .perun-header.is-mobile-open .perun-burger-line {
  background: transparent;
}

/* Hamburger (mobile only) */
.perun-burger { display: none; background: none; border: 0; cursor: pointer; padding: 0.5em; justify-self: start; }
.perun-burger-box { display: block; width: 22px; height: 14px; position: relative; }
.perun-burger-line,
.perun-burger-line::before,
.perun-burger-line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--wp--preset--color--contrast);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.perun-burger-line { top: 50%; transform: translateY(-50%); }
.perun-burger-line::before { top: -6px; }
.perun-burger-line::after { top: 6px; }
.perun-header.is-mobile-open .perun-burger-line { background: transparent; }
.perun-header.is-mobile-open .perun-burger-line::before { transform: translateY(6px) rotate(45deg); }
.perun-header.is-mobile-open .perun-burger-line::after { transform: translateY(-6px) rotate(-45deg); }

body.perun-noscroll { overflow: hidden; }

/* ---- Header · mobile --------------------------------------------- */
@media (max-width: 900px) {
  .perun-header-bar { grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); gap: .5rem; padding-inline: 1rem; }
  .perun-header.is-mobile-open { position: fixed; inset: 0 0 auto; }
  .perun-burger { display: inline-flex; min-width: 44px; min-height: 44px; justify-content: center; }
  .perun-tools { gap: var(--wp--preset--spacing--30); }
  /* Reserve the compact bar while JS moves the switchers into the drawer. */
  .perun-tools > .perun-switcher { display: none; }

  .perun-primary {
    position: fixed;
    top: var(--perun-header-h, 5rem);
    left: 0;
    right: 0;
    bottom: 0;
    justify-self: stretch;
    background: var(--wp--preset--color--base);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s;
    z-index: 60;
  }
  .perun-header.is-mobile-open .perun-primary { transform: translateX(0); visibility: visible; }
  .perun-primary > .perun-switcher { margin-top: 1rem; }
  .perun-primary .perun-switcher-toggle { color: var(--wp--preset--color--contrast); }
  .perun-primary .perun-switcher-menu { position: static; margin-top: .5rem; box-shadow: none; }
  .perun-primary .perun-switcher-menu a { box-sizing: border-box; min-height: 44px; }
  .perun-primary .perun-mega-links a { display: inline-flex; align-items: center; min-height: 44px; }

  .perun-menu { flex-direction: column; gap: 0; }
  .perun-menu-item { border-bottom: 1px solid var(--wp--preset--color--border); }
  .perun-menu-trigger {
    width: 100%;
    display: block;
    text-align: left;
    padding: var(--wp--preset--spacing--30) 0;
    font-size: var(--wp--preset--font-size--small);
  }

  .perun-mega { position: static; box-shadow: none; border-top: 0; }
  .perun-mega-inner,
  .perun-mega-inner--split,
  .perun-mega-inner--blog {
    display: block;
    padding: 0 0 var(--wp--preset--spacing--30);
  }
  .perun-mega-links { margin-bottom: var(--wp--preset--spacing--30); }
  .perun-mega-links--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perun-mega-cards,
  .perun-mega-posts { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Footer ------------------------------------------------------- */
/* Two classes on purpose. WooCommerce pages carry body.woocommerce(-page) and
   woocommerce-layout.css sets `.woocommerce img { height: auto; max-width: 100% }`,
   which outranks a single-class rule; together with our `width: auto` the logo
   then fell back to the PNG's 808px and filled the column on /shop/, product,
   category and cart pages while the homepage looked right. */
.perun-footer .perun-logo-img { height: 64px; width: auto; }
.perun-footer .perun-footer-list {
  list-style: none;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
}
.perun-footer .perun-footer-list a { text-decoration: none; }
.perun-footer a { text-decoration: none; }
.perun-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--base); }
.perun-footer-pleter {
  /* interlace divider — same pleter-13.svg tile as the carousel band */
  height: 18px;
  margin-top: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--40);
  background-image: url(assets/img/pleter-13.svg);
  background-repeat: repeat-x;
  background-size: auto 18px;
  background-position: center;
}
@media (max-width: 781px) {
  .perun-footer {
    text-align: center;
  }
  .perun-footer .wp-block-columns {
    align-items: center !important;
  }
  .perun-footer .wp-block-column {
    flex-basis: 100% !important;
    text-align: center;
  }
  .perun-footer .perun-logo-img {
    margin-inline: auto;
  }
  .perun-footer .perun-footer-list {
    text-align: center;
  }
  .perun-footer .wp-block-group.alignwide {
    justify-content: center !important;
    text-align: center;
  }
  .perun-footer .wp-block-navigation,
  .perun-footer .wp-block-navigation__container {
    justify-content: center !important;
  }
}

/* ---- Newsletter form (garnet CTA band) ---------------------------- */
.perun-newsletter-band {
  position: relative;
  overflow: visible;
}
.perun-newsletter-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: var(--wp--preset--spacing--50) auto 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.perun-newsletter-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  padding: 1em 1.25em;
  outline: none;
}
.perun-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.perun-newsletter-form button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1em 1.75em;
  transition: background-color 0.25s var(--perun-ease), color 0.25s var(--perun-ease);
}
.perun-newsletter-form button:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.perun-newsletter-notice {
  box-sizing: border-box;
  max-width: 480px;
  margin: var(--wp--preset--spacing--50) auto 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: center;
}
.perun-newsletter-notice--error {
  border-color: var(--wp--preset--color--base);
}
.perun-newsletter-notice + .perun-newsletter-form {
  margin-top: var(--wp--preset--spacing--30);
}
.perun-newsletter-fineprint {
  text-align: center;
  margin-top: var(--wp--preset--spacing--30);
  font-size: 0.75rem;
  opacity: 0.75;
}
.perun-newsletter-social {
  margin-top: var(--wp--preset--spacing--40);
  text-align: center;
}
.perun-newsletter-social-icons {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
}
.perun-newsletter-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: var(--wp--preset--color--base);
  transition: background-color 0.25s var(--perun-ease), border-color 0.25s var(--perun-ease), color 0.25s var(--perun-ease);
}
.perun-newsletter-social-icons a:hover,
.perun-newsletter-social-icons a:focus-visible {
  background: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--accent);
}
.perun-newsletter-social-icons svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* ---- Media-text about section: let the fill image breathe --------- */
.perun-about .wp-block-media-text__media { min-height: 460px; }

/* ---- Screen-reader-only helper ------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
  .perun-newsletter-form { flex-direction: column; }
}

/* ==================================================================
   2026-07 homepage redesign: logo, video hero, dark carousel,
   collection-card scrims. (Mocked + approved before porting.)
   ================================================================== */

/* ---- Connected sections -------------------------------------------
   The homepage stacks full-bleed coloured sections (dark hero, white
   values, dark carousel, white collections/about, garnet newsletter,
   dark footer). WP's global 1.5rem blockGap puts a margin between the
   header, every section, and the footer, so the white page background
   shows through as seams. Zero those margins so the sections butt
   together — each section carries its own top/bottom padding, so the
   internal breathing room is untouched. Scoped to the home page
   and the static pages (templates/page.html), which butt a surface
   title band directly against the header. */
.home .wp-site-blocks > *,
.home main.wp-block-group > *,
.page .wp-site-blocks > *,
.page main.wp-block-group > *,
.blog .wp-site-blocks > *,
.blog main.wp-block-group > *,
.single-post .wp-site-blocks > *,
.single-post main.wp-block-group > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---- Brand logo ---------------------------------------------------- */
.perun-logo-img { height: 48px; width: auto; display: block; }
.perun-logo-link { display: block; line-height: 0; }
.perun-logo-inverse { filter: brightness(0) invert(1); opacity: .92; }

/* ---- Video hero ----------------------------------------------------
   Furlan-Marri layout: a shorter full-width video band with the copy in a
   left-aligned column over it (not a centred overlay). Video + scrim are
   absolute full-bleed layers; .perun-hero__inner is the only in-flow child,
   vertically centred by the flex container and pinned to the site's 1320px
   content edge (matching the header gutter). */
.perun-hero {
  position: relative;
  min-height: clamp(610px, calc(62vh + 150px), 870px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--wp--preset--color--contrast);
}
.perun-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 180ms linear;
}
/* the double-buffer twin (home.js) waits invisibly behind the scrim */
.perun-hero__video.is-back { opacity: 0; }
/* Scrim weighted to the left so the copy stays legible while the watch
   (centre/right of frame) is left clear; a soft floor anchors the base. */
.perun-hero__scrim {
  position: absolute; inset: 0;
  background:
    /* floor fade into the #131316 sections below (flags/values/carousel) */
    linear-gradient(to top, #131316, rgba(19,19,22,0) 160px),
    linear-gradient(to right, rgba(24,24,27,.82), rgba(24,24,27,.5) 34%, rgba(24,24,27,.12) 62%, rgba(24,24,27,.28)),
    linear-gradient(to top, rgba(24,24,27,.5), rgba(24,24,27,0) 42%);
}
.perun-hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  /* content-box + padding mirrors .perun-header-bar exactly, so the copy's
     left edge lines up with the nav (both content edges at the 1320px grid). */
  box-sizing: content-box;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--60);
}
/* Keep the copy column narrow and left-aligned within that content width. */
.perun-hero__inner > * { max-width: 34rem; margin-inline: 0; }
/* Quiet bottom-left hook — the film carries the hero */
.perun-hero__tagline {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1.8;
  color: var(--wp--preset--color--base);
  opacity: .92;
  margin: 0;
}
/* Hook stack, bottom-centre: gromoviti ornament + inline arrows/tagline. */
.perun-hero__hook {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--wp--preset--spacing--20);
  margin-inline: auto !important;
}
.perun-hero__ornament {
  color: var(--wp--preset--color--base);
  opacity: .6;
  line-height: 0;
}
.perun-hero__ornament svg {
  width: 72px;
  height: auto;
  display: block;
}
.perun-hero__tagline-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3vw, 2.6rem);
}
.perun-hero__arrow {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--wp--preset--color--base);
  opacity: .85;
  animation: perun-arrow 2.6s ease-in-out infinite;
}
@keyframes perun-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .perun-hero__arrow { animation: none; }
}

/* Mobile (matches the burger breakpoint): full-height hero with the copy
   anchored bottom-left, the way Furlan Marri does it on phones — rather than
   the shorter, vertically-centred desktop band. */
@media (max-width: 900px) {
  .perun-hero {
    min-height: 100vh;   /* fallback for browsers without svh */
    min-height: 100svh;
    align-items: flex-end;
  }
  .perun-hero__video,
  .perun-hero__scrim {
    max-width: none !important;
    max-height: none !important;
  }
  .perun-hero__video { object-position: center center; }
  .perun-hero__inner {
    padding-block-start: var(--wp--preset--spacing--70);
    padding-block-end: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
  }
  .perun-hero__tagline-row {
    gap: var(--wp--preset--spacing--30);
  }
  .perun-hero__arrow {
    width: 22px;
    height: 22px;
  }
  /* Copy sits over the lower part of the video, so weight the scrim to the
     bottom instead of the left. */
  .perun-hero__scrim {
    background:
      linear-gradient(to top, #131316, rgba(19,19,22,0) 120px),
      linear-gradient(to top,
      rgba(24,24,27,.85), rgba(24,24,27,.55) 26%, rgba(24,24,27,.12) 58%, rgba(24,24,27,.3));
  }
}

/* ---- Dark watch carousel ------------------------------------------- */
.perun-watches { overflow: hidden; }
.perun-car-arrows { display: flex; gap: 12px; }
.perun-car-btn {
  width: 64px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
  background: transparent; color: #fff;
  cursor: pointer;
  transition: background-color .25s var(--perun-ease), color .25s var(--perun-ease), border-color .25s var(--perun-ease);
}
.perun-car-btn:hover { background: #fff; color: #131316; border-color: #fff; }
.perun-car-btn svg { display: block; }

.perun-carousel { position: relative; margin-top: var(--wp--preset--spacing--50); }
.perun-car-label {
  /* right edge tucks into the slide box: the packshot has ~12vw of
     transparent padding, so the visible watch starts well inside it.
     50% + half slide (27vw/320px) - padding (12vw/150px) = 15vw/170px. */
  position: absolute; right: calc(50% + min(15vw, 170px));
  bottom: calc(50% + 34px);
  z-index: 2;
  transition: opacity .3s var(--perun-ease);
}
.perun-car-label.fading { opacity: 0; }
.perun-car-collection {
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: #9b9ba3; margin: 0 0 10px;
}
.perun-car-name {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500;
  line-height: 1.05;
  color: #fff; margin: 0;
}
.perun-car-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: #fff; text-decoration: none;
  transition: color .25s var(--perun-ease);
}
.perun-car-cta:hover { color: rgba(255,255,255,.7); }
.perun-car-cta.soon {
  pointer-events: none;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.26em;
}
.perun-car-cta.soon .cta-arrow { display: none; }
.perun-carousel__hairline {
  /* hrvatski pleter band — assets/img/pleter-13.svg ("Pleter13" by MaGa,
     Wikimedia Commons, CC BY-SA 4.0; recoloured grey). Tiles seamlessly
     with repeat-x; width follows the 28px height proportionally. */
  position: absolute; left: 50%; top: 50%;
  width: 100vw; height: 54px;
  transform: translate(-50%, -50%);
  background-image: url(assets/img/pleter-13.svg);
  background-repeat: repeat-x;
  background-size: auto 54px;
  background-position: center;
  /* fade out roughly where the dimmed neighbour watches peek in */
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 22%, #000 78%, transparent 96%);
  mask-image: linear-gradient(to right, transparent 4%, #000 22%, #000 78%, transparent 96%);
  z-index: 0;
}
.perun-carousel__track {
  display: flex; align-items: center;
  gap: clamp(24px, 5vw, 80px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative; z-index: 1;
  padding-block: 12px;
  /* Inset so the centered slide sits mid-track. Capped at ~half the track
     width (calc(50% - 8px)): above ~1820px viewport the raw 50vw value would
     exceed the 1320px-capped track and inflate its clientWidth, throwing the
     JS centering ~60px to the right. The cap keeps the framing identical below
     that width and just holds steady above it. */
  padding-inline: min(calc(50vw - min(27vw, 320px)), calc(50% - 8px));
}
.perun-carousel__track::-webkit-scrollbar { display: none; }
.perun-slide {
  flex: 0 0 min(54vw, 640px);
  scroll-snap-align: center;
}
.perun-slide a { display: block; }
.perun-slide:not(.active) { cursor: pointer; }
.perun-slide img {
  width: 100%; height: auto;
  transform: scale(.72);
  opacity: .45;
  transition: transform .6s var(--perun-ease), opacity .6s var(--perun-ease), filter .6s var(--perun-ease);
}
.perun-slide.active img { transform: scale(1); opacity: 1; }
.perun-car-meta { text-align: center; margin-top: 8px; }
.perun-dots { display: flex; gap: 4px; justify-content: center; margin-top: 30px; }
.perun-dot {
  display: grid; place-items: center;
  width: 36px; height: 44px;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
}
.perun-dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background-color .25s var(--perun-ease), transform .25s var(--perun-ease);
}
.perun-dot.active::before { background: #fff; transform: scale(1.25); }
@media (max-width: 900px) {
  .perun-slide { flex: 0 0 78vw; }
  .perun-carousel__track { padding-inline: 11vw; }
  .perun-carousel__hairline {
    top: calc(50% + clamp(58px, 10vw, 96px));
  }
  /* no side room next to the watch — label sits above the carousel, centered */
  .perun-car-label {
    position: static;
    text-align: center; margin-bottom: var(--wp--preset--spacing--40);
  }
}

/* ---- Home — editorial watch gallery -------------------------------- */
.perun-gallery-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.perun-gallery-item {
  margin: 0;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  aspect-ratio: 1 / 1;
}
.perun-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s var(--perun-ease), filter .8s var(--perun-ease);
}
.perun-gallery-item:hover img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}
@media (max-width: 900px) {
  .perun-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .perun-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Kill the core `.has-border-color` collision for text that uses the
   border palette colour — legacy guard while old markup may be cached. */
p.has-border-color:not([style*="border-width"]),
h1.has-border-color, h2.has-border-color, h3.has-border-color {
  border-style: none !important;
}

/* ---- Static pages (templates/page.html) ---------------------------- */
/* Serif title band above every static page (About, FAQ, policies). */
.perun-page-hero .wp-block-post-title { font-weight: 500; letter-spacing: .01em; }

/* Migrated Squarespace bodies ship their own inline fluid-engine <style>;
   add guardrails only, so nothing escapes the content column. */
.perun-page-body img { max-width: 100%; height: auto; }
/* Our column supplies the outer padding — neutralise Squarespace's own
   viewport-based gutters (--grid-gutter = gutter var - 11px, so 11px -> 0). */
.perun-page-body [data-fluid-engine] { --sqs-site-gutter: 11px; --sqs-mobile-site-gutter: 11px; }

/* Dead Squarespace background-video pause buttons carried over in migrated
   content — no background video exists here, so hide them. */
.perun-page-body .background-pause-button { display: none; }

/* Squarespace section dividers don't exist in this theme; without SQS CSS the
   divider's clip-path <svg> gets default inline-SVG dimensions and reserves
   ~900px of empty space before the footer (Privacy, Terms). Drop the remnant. */
.perun-page-body .section-divider-display { display: none; }
.perun-page-body .has-section-divider { padding-bottom: 0 !important; }

/* ---- About page ---------------------------------------------------- */
/* Keep the migrated copy in WordPress, but give both language routes the
   same restrained editorial layout and hierarchy as the rest of the theme. */
.page-id-2 .perun-page-hero {
	padding-block: clamp(2.75rem, 5vw, 4.75rem) !important;
}
.page-id-2 .perun-page-hero .wp-block-post-title {
	font-size: clamp(3.25rem, 6vw, 5.5rem) !important;
	line-height: .95;
}
.page-id-2 .perun-page-body {
	padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(4.5rem, 9vw, 8rem) !important;
}
.page-id-2 .perun-page-body .wp-block-post-content,
.page-id-2 .perun-page-body article.sections {
	width: min(100%, 1160px);
	max-width: 1160px !important;
	margin-inline: auto !important;
}
.page-id-2 .perun-page-body section.page-section,
.page-id-2 .perun-page-body .content-wrapper,
.page-id-2 .perun-page-body .content {
	min-height: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.page-id-2 .perun-page-body [data-fluid-engine] {
	display: block !important;
	min-height: 0 !important;
	height: auto !important;
	width: 100% !important;
	overflow: visible !important;
}
.page-id-2 .perun-page-body .fluid-engine {
	display: grid !important;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
	grid-template-rows: auto auto auto auto auto !important;
	column-gap: clamp(3rem, 7vw, 7rem) !important;
	row-gap: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	width: 100% !important;
	overflow: visible !important;
}
.page-id-2 .perun-page-body .fe-block {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	transform: none !important;
}
.page-id-2 .perun-page-body .fe-block-a6b45b1b8f4a3e1f88ca {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: stretch;
}
.page-id-2 .perun-page-body .fe-block-218441a62cc6853a0a30 {
	grid-column: 2;
	grid-row: 1;
}
.page-id-2 .perun-page-body .fe-block-37de408153b97c30efef {
	grid-column: 2;
	grid-row: 2;
}
.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_12488 {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-block: clamp(4rem, 8vw, 7rem) !important;
}
.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_13339 {
	grid-column: 1 / -1;
	grid-row: 4;
}
.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_14207 {
	grid-column: 1 / -1;
	grid-row: 5;
}
.page-id-2 .perun-page-body .image-block,
.page-id-2 .perun-page-body .image-block .sqs-block-content {
	height: 100%;
}
.page-id-2 .perun-page-body .image-block img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}
.page-id-2 .perun-page-body .horizontalrule-block .sqs-block-content {
	height: 1px;
	background: var(--wp--preset--color--border);
}
.page-id-2 .perun-page-body .sqs-html-content {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
}
.page-id-2 .perun-page-body .sqs-html-content h2,
.page-id-2 .perun-page-body .sqs-html-content h3 {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem) !important;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--perun-small-title-size) !important;
	font-weight: 600 !important;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.page-id-2 .perun-page-body .sqs-html-content p,
.page-id-2 .perun-page-body .sqs-html-content p.sqsrte-small {
	margin: 0 0 1.2rem !important;
	font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
	font-weight: 400 !important;
	line-height: 1.78;
}
.page-id-2 .perun-page-body .sqs-html-content p:last-child {
	margin-bottom: 0 !important;
}
.page-id-2 .perun-page-body .fe-block-37de408153b97c30efef .sqs-html-content p:last-child {
	margin-top: 1.75rem !important;
	color: var(--wp--preset--color--contrast-2);
}

@media (min-width: 821px) {
	/* Why Perun is intentionally text-led: a full-width editorial close avoids
	   making the open left side look like a missing second image. */
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_13339 {
		padding: 0 clamp(1.5rem, 4vw, 3.5rem) 1.25rem !important;
	}
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_13339 .sqs-html-content h2,
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_13339 .sqs-html-content h3 {
		margin-bottom: 0 !important;
	}
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_14207 {
		padding: 0 clamp(1.5rem, 4vw, 3.5rem) clamp(2.75rem, 5vw, 4rem) !important;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_14207 .sqs-html-content {
		columns: 2;
		column-gap: clamp(3rem, 7vw, 6rem);
	}
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_14207 .sqs-html-content p {
		break-inside: avoid;
	}
}

@media (max-width: 820px) {
	.page-id-2 .perun-page-body {
		padding-top: 2.5rem !important;
	}
	.page-id-2 .perun-page-body .fluid-engine {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto !important;
	}
	.page-id-2 .perun-page-body .fe-block-a6b45b1b8f4a3e1f88ca,
	.page-id-2 .perun-page-body .fe-block-218441a62cc6853a0a30,
	.page-id-2 .perun-page-body .fe-block-37de408153b97c30efef,
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_12488,
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_13339,
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_14207 {
		grid-column: 1;
		grid-row: auto;
	}
	.page-id-2 .perun-page-body .image-block img {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}
	.page-id-2 .perun-page-body .fe-block-218441a62cc6853a0a30 {
		margin-top: 2.25rem !important;
	}
	.page-id-2 .perun-page-body .fe-block-yui_3_17_2_1_1726560514233_12488 {
		margin-block: 3.5rem !important;
	}
	.page-id-2 .perun-page-body .sqs-html-content h2,
	.page-id-2 .perun-page-body .sqs-html-content h3 {
		margin-bottom: 1.25rem !important;
	}
}

/* ---- Support pages ------------------------------------------------- */
/* The support and policy pages still contain their original Squarespace grid
   markup. Collapse those one-off grids into one calm editorial system so all
   seven reference pages read as a coherent set. */
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-hero .wp-block-post-title {
  max-width: 11ch;
  margin-inline: auto;
  font-size: clamp(3rem, 6vw, 5.25rem) !important;
  line-height: .95;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body {
  --perun-support-copy-line-height: 1.75;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem) !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .wp-block-post-content,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body article.sections {
  width: min(100%, 760px);
  max-width: 760px !important;
  margin-inline: auto !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body section.page-section,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .content-wrapper,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .content {
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body [data-fluid-engine],
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .fluid-engine {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  overflow: visible !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .fe-block {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content:empty,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .fe-block:has(.sqs-html-content:empty) {
  display: none !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--contrast);
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content h1 {
  display: none;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content h2,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content h3 {
  margin: clamp(2.5rem, 5vw, 4rem) 0 1rem !important;
  padding-top: 1.4rem;
  border-top: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--perun-small-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content h4 {
  margin: 2rem 0 .55rem !important;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important;
  font-weight: 500 !important;
  line-height: 1.2;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content p {
  margin: 0 0 1rem !important;
  font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: var(--perun-support-copy-line-height);
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content p strong,
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content li strong {
  font-weight: 400 !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .perun-support-plain-list p:last-child {
  margin-bottom: 0 !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content ul {
  margin: .65rem 0 1.5rem !important;
  padding: 0 !important;
  list-style: none !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content ul > li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 1.35rem !important;
  font-size: clamp(1rem, 1.15vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: var(--perun-support-copy-line-height);
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content ul > li + li {
  margin-top: .8rem !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content ul > li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: .1rem;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--wp--preset--color--contrast);
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content ul > li > p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content > :first-child {
  margin-top: 0 !important;
}
:is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-body .sqs-html-content > :last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 900px) {
  :is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-hero .wp-block-post-title {
    width: max-content;
    max-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  :is(.page-id-183, .page-id-184, .page-id-185, .page-id-187, .page-id-188, .page-id-189, .page-id-190) .perun-page-hero .wp-block-post-title {
    max-width: 12ch;
    line-height: 1;
  }
}

/* ---- Retailers page ---------------------------------------------- */
/* Page 303 is the English source; 792 is its Croatian content mirror. */
.page-id-303 .perun-page-hero,
.page-id-792 .perun-page-hero {
	padding-block: clamp(1.75rem, 2.75vw, 2.75rem) !important;
}
.page-id-303 .perun-page-hero .wp-block-post-title,
.page-id-792 .perun-page-hero .wp-block-post-title {
	font-size: clamp(2.75rem, 5vw, 4.5rem) !important;
}
.page-id-303 .perun-page-body,
.page-id-792 .perun-page-body {
	padding-block: 0 !important;
}
.perun-retailers {
	width: 100vw;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	font-family: var(--wp--preset--font-family--body);
}
.perun-retailers__intro {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: clamp(2.5rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
}
.perun-retailers__intro-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}
.perun-retailers__intro-copy {
	padding: clamp(2.5rem, 5vw, 4rem);
}
.perun-retailers__locations-head .perun-small-title {
	margin: 0 0 1rem;
}
.perun-retailers__locations h2,
.perun-retailer-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}
.perun-retailers__intro-copy .perun-small-title {
	margin: 0;
}
.perun-retailers__lead {
	max-width: 30rem;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.7;
}
.perun-retailers__intro-media {
	margin: 0;
	background: var(--wp--preset--color--base);
	border-left: 1px solid var(--wp--preset--color--border);
}
.perun-retailers__intro-media img {
	display: block;
	width: 100%;
	height: auto;
}
.perun-retailers__locations {
	background: var(--wp--preset--color--surface);
	padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.perun-retailers__locations-inner {
	max-width: 1120px;
	margin: 0 auto;
}
.perun-retailers__locations-head {
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.perun-retailers__locations h2 {
	margin: 0;
	font-size: clamp(2.8rem, 4.5vw, 4.25rem);
	line-height: 1;
	letter-spacing: -.015em;
}
.perun-retailers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
	gap: 1.25rem;
}
.perun-retailer-card {
	padding: clamp(2rem, 3vw, 2.75rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
}
.perun-retailer-card .perun-small-title {
	margin: 0 0 1rem;
}
.perun-retailer-card h3 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 2.8vw, 2.65rem);
	line-height: 1.06;
}
.perun-retailer-card__note,
.perun-retailer-card__address,
.perun-retailer-card__hours {
	color: var(--wp--preset--color--contrast-2);
	font-size: .98rem;
	line-height: 1.65;
}
.perun-retailer-card__note {
	max-width: 31rem;
	margin: 0 0 1.2rem;
}
.perun-retailer-card__address {
	margin: 0;
	font-style: normal;
}
.perun-retailer-card__hours-label {
	margin: 1.5rem 0 .45rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.perun-retailer-card__hours {
	margin: 0;
}
@media (max-width: 900px) {
	.perun-retailers__intro-inner {
		grid-template-columns: 1fr;
	}
	.perun-retailers__intro-media {
		border-top: 1px solid var(--wp--preset--color--border);
		border-left: 0;
	}
}
@media (max-width: 640px) {
	.page-id-303 .perun-page-hero,
	.page-id-792 .perun-page-hero {
		padding-block: 1.75rem !important;
	}
	.perun-retailers__intro {
		padding-block: 2rem;
	}
	.perun-retailers__intro-copy {
		padding: 2.25rem 1.5rem;
	}
	.perun-retailers__locations {
		padding-inline: 1rem;
	}
	.perun-retailer-card {
		padding: 2rem 1.5rem 2.25rem;
	}
}

/* ---- Contact page -------------------------------------------------- */
.perun-contact-layout {
	align-items: start !important;
}
.perun-contact-form {
	scroll-margin-top: 6rem;
}
.perun-contact-form__field {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.perun-contact-form__field label {
	display: block;
	margin-bottom: .65rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--contrast);
}
.perun-contact-form input,
.perun-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem 1.1rem;
	border-radius: 0;
	outline: none;
	transition: border-color .2s var(--perun-ease), box-shadow .2s var(--perun-ease);
}
.perun-contact-form textarea {
	resize: vertical;
	min-height: 12rem;
}
.perun-contact-form input:focus,
.perun-contact-form textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}
.perun-contact-form__actions {
	margin: var(--wp--preset--spacing--40) 0 0;
}
.perun-contact-form button {
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 1rem 1.45rem;
	transition: background-color .25s var(--perun-ease), border-color .25s var(--perun-ease);
}
.perun-contact-form button:hover,
.perun-contact-form button:focus-visible {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
}
.perun-contact-form__notice {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}
.perun-contact-form__notice--success {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--border));
	color: var(--wp--preset--color--accent-dark);
}
.perun-contact-form__notice--error {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.perun-contact-form__field--hp,
.perun-newsletter-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.perun-contact-details {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}
.perun-contact-details p {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* ---- Consent manager ----------------------------------------------- */
.perun-consent[hidden],
.perun-consent-dialog[hidden],
.perun-cookie-settings[hidden] {
	display: none !important;
}
.perun-consent {
	position: fixed;
	z-index: 100000;
	right: 1.25rem;
	bottom: 1.25rem;
	left: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	color: #fff;
	background: #18181b;
	box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
}
.perun-consent__copy {
	max-width: 680px;
}
.perun-consent__copy h2,
.perun-consent-dialog__panel h2 {
	margin: 0 0 .35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 500;
}
.perun-consent__copy p,
.perun-consent-dialog__panel p {
	margin: 0;
	font-size: .88rem;
	line-height: 1.6;
}
.perun-consent__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .65rem;
	flex-wrap: wrap;
}
.perun-consent__button,
.perun-consent__link {
	min-height: 42px;
	padding: .7rem 1rem;
	border: 1px solid rgb(255 255 255 / 48%);
	border-radius: 0;
	color: inherit;
	background: transparent;
	font: 600 .72rem/1 var(--wp--preset--font-family--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.perun-consent__button--primary {
	border-color: var(--wp--preset--color--accent);
	color: #fff;
	background: var(--wp--preset--color--accent);
}
.perun-consent__link {
	padding-inline: .35rem;
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.perun-consent-dialog {
	position: fixed;
	z-index: 100001;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
}
.perun-consent-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 62%);
}
.perun-consent-dialog__panel {
	position: relative;
	z-index: 1;
	width: min(100%, 600px);
	max-height: calc(100vh - 2rem);
	overflow: auto;
	padding: 2rem;
	color: #18181b;
	background: #fff;
	box-shadow: 0 24px 72px rgb(0 0 0 / 30%);
}
.perun-consent-dialog__close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	color: #18181b;
	background: transparent;
	font-size: 1.6rem;
	cursor: pointer;
}
.perun-consent-dialog__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.perun-consent-dialog__row strong,
.perun-consent-dialog__row span {
	display: block;
}
.perun-consent-dialog__row > div > span,
.perun-consent-dialog__row > span > span {
	margin-top: .25rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: .82rem;
}
.perun-consent-dialog__row input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--wp--preset--color--accent);
}
.perun-consent-dialog__always {
	color: var(--wp--preset--color--contrast-2);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.perun-consent-dialog__legal {
	margin-top: 1rem !important;
}
.perun-cookie-settings {
	position: fixed;
	z-index: 99998;
	right: 1rem;
	bottom: 1rem;
	padding: .55rem .7rem;
	border: 1px solid #18181b;
	border-radius: 0;
	color: #18181b;
	background: rgb(255 255 255 / 94%);
	font: 600 .65rem/1 var(--wp--preset--font-family--body);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.perun-consent-open {
	overflow: hidden;
}
@media (max-width: 760px) {
	.perun-consent {
		align-items: stretch;
		flex-direction: column;
		gap: 1rem;
		padding: 1.1rem;
	}
	.perun-consent__actions {
		justify-content: flex-start;
	}
	.perun-consent__button {
		flex: 1 1 auto;
	}
	.perun-consent-dialog__panel {
		padding: 1.5rem;
	}
}

/* ---- FAQ page ------------------------------------------------------ */
.page-id-186 .perun-page-hero {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.page-id-186 .perun-page-hero .wp-block-post-title {
	max-width: 11ch;
	margin-inline: auto;
	font-size: clamp(3rem, 6vw, 5.25rem) !important;
	line-height: .95;
}
.page-id-186 .perun-page-body {
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem) !important;
}
.page-id-186 .perun-page-body .wp-block-post-content {
	width: min(100%, 760px);
	max-width: 760px !important;
	margin-inline: auto !important;
}
.perun-faq-list {
	counter-reset: perun-faq;
	border-top: 1px solid var(--wp--preset--color--border);
}
.perun-faq-item {
	counter-increment: perun-faq;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background-color .25s var(--perun-ease);
}
.perun-faq-item:hover,
.perun-faq-item[open] {
	background: var(--wp--preset--color--surface);
}
.perun-faq-item summary {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem;
	align-items: center;
	gap: clamp(.8rem, 2vw, 1.35rem);
	cursor: pointer;
	list-style: none;
	outline: none;
	padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 2.3vw, 1.85rem);
	font-weight: 500;
	line-height: 1.18;
	color: var(--wp--preset--color--contrast);
}
.perun-faq-item summary::-webkit-details-marker {
	display: none;
}
.perun-faq-item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}
.perun-faq-item summary::before {
	content: counter(perun-faq, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--wp--preset--color--accent);
}
.perun-faq-item summary::after {
	content: "";
	width: 1rem;
	height: 1rem;
	justify-self: end;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 1px 100% no-repeat;
}
.perun-faq-item[open] summary::after {
	background-size: 100% 1px, 0 0;
}
.perun-faq-answer {
	max-width: 44rem;
	padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(1.75rem, 3vw, 2.25rem) calc(3.4rem + clamp(.8rem, 2vw, 1.35rem));
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1rem, 1.15vw, 1.08rem);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.75;
}
.perun-faq-answer p {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.perun-faq-answer p:last-child {
	margin-bottom: 0;
}
.perun-faq-answer strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}
@media (max-width: 640px) {
	.page-id-186 .perun-page-hero .wp-block-post-title {
		max-width: 12ch;
		line-height: 1;
	}
	.perun-faq-item summary {
		grid-template-columns: 1.85rem minmax(0, 1fr) 1.25rem;
		gap: .7rem;
		padding: 1.35rem .75rem;
	}
	.perun-faq-answer {
		padding: 0 .75rem 1.6rem 3.3rem;
	}
}

/* ---- Blog / Journal ------------------------------------------------ */
.perun-blog-hero h1,
.perun-article-hero .wp-block-post-title {
	font-weight: 500;
	letter-spacing: .01em;
}
.perun-blog-featured-band,
.perun-blog-grid-band {
	background: var(--wp--preset--color--base);
}
.perun-blog-featured {
	max-width: 920px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}
.perun-blog-featured__media,
.perun-blog-card__media {
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
}
.perun-blog-featured__media {
	aspect-ratio: 16 / 9;
}
.perun-blog-featured__media img,
.perun-blog-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .7s var(--perun-ease), filter .7s var(--perun-ease);
}
.perun-blog-featured__media:hover img,
.perun-blog-card__media:hover img {
	transform: scale(1.035);
	filter: saturate(1.04) contrast(1.02);
}
.perun-blog-media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	background:
		linear-gradient(rgba(24,24,27,.18), rgba(24,24,27,.18)),
		url(assets/img/pleter-13.svg) center / auto 42px repeat-x,
		var(--wp--preset--color--surface-2);
}
.perun-blog-kicker {
	margin: 0;
}
.perun-blog-date,
.perun-article-meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: .76rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--contrast-2);
}
.perun-blog-featured__copy .perun-blog-date {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}
.perun-blog-featured__copy {
	max-width: 760px;
	margin-top: var(--wp--preset--spacing--50);
}
.perun-blog-featured__copy h2,
.perun-blog-grid-head h2,
.perun-blog-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.08;
	color: var(--wp--preset--color--contrast);
}
.perun-blog-featured__copy h2 {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: clamp(2.1rem, 5vw, 4.4rem);
}
.perun-blog-featured__copy h2 a,
.perun-blog-card h3 a {
	color: inherit;
	text-decoration: none;
}
.perun-blog-featured__copy h2 a:hover,
.perun-blog-card h3 a:hover {
	color: var(--wp--preset--color--accent);
}
.perun-blog-featured__copy p:not(.perun-blog-kicker),
.perun-blog-card p {
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.75;
}
.perun-blog-read {
	display: inline-flex;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.perun-blog-read::after {
	content: "";
	width: 2.6rem;
	height: 1px;
	margin: .62em 0 0 .85em;
	background: currentColor;
	transition: transform .25s var(--perun-ease);
}
.perun-blog-read:hover::after {
	transform: translateX(.35rem);
}
.perun-blog-grid-band {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--border);
}
.perun-blog-grid-head {
	max-width: 1320px;
	margin-inline: auto;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}
.perun-blog-grid-head h2 {
	margin: 0;
	font-size: clamp(2rem, 3vw, 3.2rem);
}
.perun-blog-grid {
	max-width: 1320px;
	margin: var(--wp--preset--spacing--60) auto 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 36px);
}
.perun-blog-card {
	min-width: 0;
}
.perun-blog-card__media {
	aspect-ratio: 4 / 3;
}
.perun-blog-card__body {
	padding-top: var(--wp--preset--spacing--30);
}
.perun-blog-card h3 {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: clamp(1.45rem, 2vw, 2rem);
}
.perun-blog-card p {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
}
.perun-blog-pagination {
	max-width: 1320px;
	margin: var(--wp--preset--spacing--70) auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
}
.perun-blog-pagination .page-numbers {
	min-width: 2.7rem;
	min-height: 2.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .85rem;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.perun-blog-pagination .page-numbers.current,
.perun-blog-pagination .page-numbers:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---- Single journal articles -------------------------------------- */
.perun-article-featured {
	max-width: min(1120px, calc(100vw - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40)));
	margin: var(--wp--preset--spacing--60) auto 0;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.perun-article-featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.perun-article-meta {
	gap: .75rem 1rem;
}
.perun-article-meta a {
	color: inherit;
	text-decoration: none;
}
.perun-article-meta a:hover {
	color: var(--wp--preset--color--accent);
}
.perun-article-content {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.85;
	color: var(--wp--preset--color--contrast);
}
.perun-article-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
.perun-article-content h2,
.perun-article-content h3,
.perun-article-content h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	line-height: 1.12;
	margin-block-start: var(--wp--preset--spacing--60);
}
.perun-article-content h2 {
	font-size: clamp(2rem, 3vw, 3rem);
}
.perun-article-content h3 {
	font-size: clamp(1.6rem, 2.2vw, 2.25rem);
}
.perun-article-content img,
.perun-article-content video,
.perun-article-content iframe,
.perun-page-body img {
	max-width: 100%;
	height: auto;
}
.perun-article-content figure,
.perun-article-content .wp-block-image {
	max-width: 100%;
}
.perun-article-content .alignwide {
	max-width: min(1120px, calc(100vw - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40)));
	margin-inline: auto;
}
.perun-article-content .alignfull {
	max-width: min(1320px, calc(100vw - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40)));
	margin-inline: auto;
}
.perun-article-content figcaption {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}
.perun-article-footer {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
}
.perun-article-footer a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.perun-article-footer a:hover {
	color: var(--wp--preset--color--accent);
}
@media (max-width: 900px) {
	.perun-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.perun-blog-grid-band,
	.perun-blog-featured {
		padding-inline: var(--wp--preset--spacing--30);
	}
	.perun-blog-grid-head {
		display: block;
	}
	.perun-blog-grid-head h2 {
		margin-top: var(--wp--preset--spacing--20);
	}
	.perun-blog-grid {
		grid-template-columns: 1fr;
	}
	.perun-article-footer {
		display: block !important;
	}
	.perun-article-footer > * + * {
		margin-block-start: var(--wp--preset--spacing--30);
	}
}

/* ---- Home — provenance / origin flags ------------------------------ */
/* Four sourcing-origin flags with a serif caption under each. Shares the
   white block with the assurances strip directly below (no divider). */
.perun-provenance {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.perun-provenance__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	flex: 0 1 auto;
	min-width: 8rem;
}
.perun-provenance__flag {
	width: 32px;
	height: 24px;
	opacity: .75;
	box-shadow: var(--wp--preset--shadow--soft);
	border-radius: 1px;
}
.perun-provenance__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	/* inherit from the section wrapper so the strip works on light and dark */
	color: inherit;
}
@media (max-width: 600px) {
	.perun-provenance {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}
	.perun-provenance__item {
		min-width: 0;
	}
	.perun-provenance__label {
		font-size: clamp(.68rem, 2.7vw, .76rem);
		letter-spacing: .13em;
		white-space: nowrap;
		text-align: center;
	}
}

/* ---- Home — testimonials (light quote slider) ----------------------- */
/* White band directly under the dark carousel (the section boundary is
   the seam). Slides are stacked in one grid cell and cross-faded by
   home.js; the first ships with .active so the section reads fine
   without JS. Viewport height = tallest quote, so nothing jumps
   between slides. */
.perun-quotes { position: relative; }
.perun-quotes__eyebrow {
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--50);
}
.perun-quotes__viewport {
	display: grid;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}
.perun-quote-slide {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	opacity: 0;
	visibility: hidden; /* keeps inactive quotes out of the tab/reader order */
	transition: opacity .5s var(--perun-ease), visibility .5s;
}
.perun-quote-slide.active { opacity: 1; visibility: visible; }
.perun-quote-slide blockquote {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	font-weight: 500;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	margin: 0; padding: 0; border: 0;
}
.perun-quote-slide figcaption {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.2em;
}
.perun-quote-name { color: var(--wp--preset--color--contrast); }
.perun-quote-name::before { content: "— "; color: var(--wp--preset--color--contrast-2); }
.perun-quote-src { color: var(--wp--preset--color--contrast-2); }
.perun-quote-src::before { content: "·"; margin: 0 0.6em; }
/* arrows flank the quote, vertically centered — dark-on-light variant
   of the carousel buttons */
.perun-quotes .perun-car-btn {
	position: absolute; top: 50%;
	border-color: rgba(24,24,27,.25); color: var(--wp--preset--color--contrast);
}
.perun-quotes .perun-car-btn:hover {
	background: var(--wp--preset--color--contrast); color: #fff;
	border-color: var(--wp--preset--color--contrast);
}
.perun-quotes .perun-quotes-prev { left: 0; }
.perun-quotes .perun-quotes-next { right: 0; }
@media (max-width: 900px) {
	/* arrows drop below the quote, centered as a row */
	.perun-quotes { text-align: center; }
	.perun-quotes .perun-car-btn { position: static; display: inline-flex; margin-top: var(--wp--preset--spacing--50); }
	.perun-quotes .perun-quotes-next { margin-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.perun-quote-slide { transition: none; }
}

/* ---- Home — featured in (press logo strip) -------------------------- */
/* Grayscale at rest, colour + full opacity on hover/focus. */
.perun-featured { text-align: center; }
.perun-featured__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--50);
}
.perun-featured__strip {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	justify-content: center; align-items: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.perun-featured__strip a { display: block; }
.perun-featured__strip img {
	display: block;
	/* per-logo width from the pattern (--logo-w on the <li>): the marks
	   range from thin mastheads to a portrait lockup, so a shared height
	   cannot balance them — each width is optically tuned instead. */
	width: var(--logo-w, 150px); height: auto;
	filter: grayscale(1);
	/* keyed + trimmed source files; multiply guards any leftover light
	   pixels on the white band */
	mix-blend-mode: multiply;
	opacity: .55;
	transition: filter .3s var(--perun-ease), opacity .3s var(--perun-ease);
}
.perun-featured__strip a:hover img,
.perun-featured__strip a:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 600px) {
	.perun-featured__strip { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
	.perun-featured__strip img { width: calc(var(--logo-w, 150px) * .78); }
}

/* ---- All watches --------------------------------------------------- */
.perun-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.perun-all-watches {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}
.perun-all-watches__intro {
	margin: 0 0 var(--wp--preset--spacing--40);
}
.perun-all-watches__intro h1 {
	margin: 0;
}
.perun-all-watches__section + .perun-all-watches__section {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border);
}
/* Watches / Accessories heads: house serif, but well short of the product
   page's editorial h2 — this is a catalogue column, not a full-bleed band. */
.perun-all-watches__section-title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3vw, 3.2rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
}
.perun-all-watches__group + .perun-all-watches__group {
	margin-top: var(--wp--preset--spacing--60);
}
/* Collection name above its row; .perun-small-title carries the type. */
.perun-all-watches__group-title {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.perun-watch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.perun-watch-card {
	display: block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.perun-watch-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 4.7;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.perun-watch-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(.75rem, 2.4vw, 2.25rem);
	transform: scale(1.12);
	transition: transform .5s var(--perun-ease), opacity .4s var(--perun-ease);
}
.perun-watch-card:hover .perun-watch-card__media img {
	transform: scale(1.16);
}
.perun-watch-card__placeholder {
	display: block;
	width: 42%;
	aspect-ratio: 1;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}
.perun-watch-card__body {
	display: block;
	padding-top: var(--wp--preset--spacing--30);
	text-align: center;
}
.perun-watch-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	transition: color .25s var(--perun-ease);
}
.perun-watch-card:hover .perun-watch-card__title {
	color: var(--wp--preset--color--accent);
}
.perun-watch-card__price {
	display: block;
	margin-top: .65rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.perun-all-watches__empty {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
}
@media (max-width: 900px) {
	.perun-all-watches {
		padding-top: var(--wp--preset--spacing--40);
	}
	.perun-all-watches__section + .perun-all-watches__section {
		margin-top: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--50);
	}
	.perun-watch-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.perun-watch-card__media img {
		padding: clamp(.75rem, 4vw, 1.75rem);
	}
}
@media (max-width: 560px) {
	.perun-watch-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Woo product page --------------------------------------------- */
.single-product .wp-site-blocks > *,
.single-product main.wp-block-group > *,
.tax-product_cat .wp-site-blocks > *,
.tax-product_cat main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* Product and collection pages sit on a warm off-white ground; the header
   joins it so the white spec panel is the only pure-white surface. The
   header lives outside <main>, so this has to hang off the body class. */
.single-product .perun-header,
.tax-product_cat .perun-header {
	background: #f5f4f1;
}
.perun-product-page {
	--perun-product-black: #010101;
	--perun-product-ink: #161719;
	--perun-product-muted: #6f7176;
	--perun-product-line: #e4e4e7;
	--perun-product-soft: #f5f4f1;
	--perun-product-panel: #edece8;
	--perun-product-dark: #121417;
	--perun-product-ease: cubic-bezier(.25,.46,.45,.94);
	background: var(--perun-product-soft);
	color: var(--perun-product-black);
	font-family: var(--wp--preset--font-family--body);
}

/* Hero: stacked gallery left, sticky summary right (flat, no cards). */
.perun-product-hero {
	background: var(--perun-product-soft);
}
.perun-product-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(25rem, .72fr);
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
	max-width: 1680px;
	margin: 0 auto;
	padding: clamp(.75rem, 1.5vw, 1.25rem) clamp(.75rem, 1.5vw, 1.25rem) clamp(2rem, 4vw, 4rem);
}
.perun-product-gallery {
	min-width: 0;
	display: grid;
	gap: clamp(.5rem, 1vw, .75rem);
}
.perun-product-gallery__item {
	box-sizing: border-box;
	position: relative;
	margin: 0;
	min-height: clamp(30rem, calc(100vh - var(--perun-header-h, 82px) - 3rem), 52rem);
	background: var(--perun-product-soft);
	overflow: hidden;
}
.perun-product-gallery .perun-product-gallery__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.perun-product-gallery__item.is-featured {
	background: transparent;
}
.perun-product-gallery .perun-product-gallery__item.is-featured .perun-product-gallery__image {
	inset: clamp(1.5rem, 4vh, 3rem) 0;
	height: calc(100% - 2 * clamp(1.5rem, 4vh, 3rem));
	object-fit: contain;
	filter: drop-shadow(0 20px 28px rgba(1, 1, 1, .1));
}
.perun-product-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 15rem;
	padding: var(--wp--preset--spacing--40);
	background:
		linear-gradient(135deg, rgba(1,1,1,.06), rgba(1,1,1,0) 45%),
		var(--perun-product-panel);
	color: var(--perun-product-muted);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}
.perun-product-summary {
	box-sizing: border-box;
	min-width: 0;
	position: sticky;
	top: calc(var(--perun-header-h, 82px) + 1rem);
	padding: clamp(1.75rem, 2.6vw, 2.75rem);
	background: #fff;
	border-radius: 1.1rem;
}
.perun-product-breadcrumb {
	display: none;
}
.perun-product-kicker {
	margin: 0 0 .8rem;
}
.perun-product-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.2rem, 3vw, 3.7rem);
	font-weight: 500;
	line-height: .98;
	letter-spacing: 0;
}
.perun-product-price {
	margin: 1rem 0 0;
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.perun-product-price--preorder {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .45rem;
}
.perun-product-price__label {
	color: var(--perun-product-muted);
}
.perun-product-price__label::after {
	content: "\2013";
	margin-left: .45rem;
}

/* Small note under the price — currently the pre-order launch price. */
.perun-product-note {
	margin: .4rem 0 0;
	color: var(--perun-product-muted);
	font-size: .78rem;
	line-height: 1.5;
}

/* Small spec chips under the price — only real attribute values. */
.perun-product-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 1.2rem 0 1.5rem;
	padding: 0;
	list-style: none;
}
.perun-product-facts li {
	display: inline-flex;
	align-items: center;
	padding: .26rem .55rem;
	border-radius: .25rem;
	background: var(--perun-product-soft);
	color: #5c5c62;
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.3;
}
.perun-product-colors {
	margin: 0 0 1.75rem;
}
.perun-product-colors__label {
	margin: 0 0 .6rem;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--perun-product-muted);
}
.perun-product-colors__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.perun-product-color {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid var(--perun-product-line);
	border-radius: .3rem;
	background: var(--perun-product-soft);
	transition: border-color .35s var(--perun-product-ease), background-color .35s var(--perun-product-ease);
}
.perun-product-color.is-current,
.perun-product-color:hover {
	border-color: var(--perun-product-black);
}
.perun-product-color img {
	width: 84%;
	height: 84%;
	object-fit: contain;
}

/* Purchase actions: single full-width button, no quantity stepper. */
.perun-product-actions form.cart {
	display: flex;
	gap: .5rem;
	margin: 0 0 .9rem;
}
.perun-product-actions .quantity {
	display: none;
}
.perun-product-actions .single_add_to_cart_button {
	flex: 1;
	padding: 1.05rem 1.5rem;
	border: 0;
	border-radius: 0;
	background: var(--perun-product-black);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .45s var(--perun-product-ease);
}
.perun-product-actions .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent);
}
/* Stripe express checkout (Apple Pay / Google Pay / Link): three compact
   buttons in one row under Add to cart instead of a full-width stack.
   The buttons live in Stripe iframes sized at mount, so the iframe must
   be forced to track its grid column. */
#wc-stripe-express-checkout-element {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
}
#wc-stripe-express-checkout-element .StripeElement {
	width: 100%;
	min-width: 0;
}
/* Stripe pairs iframe width calc(100% + 8px) with margin -4px — a 4px
   transparent focus-ring bleed on each side. Keep that pairing (a plain
   width:100% override insets every button 4px per side). */
#wc-stripe-express-checkout-element iframe {
	width: calc(100% + 8px) !important;
	min-width: 0 !important;
}
.perun-product-delivery {
	margin: 0;
	color: var(--perun-product-muted);
	font-size: .78rem;
	line-height: 1.5;
}

/* Summary accordions + reinsurance rows. */
.perun-product-accordions {
	margin-top: 1.75rem;
	border-top: 1px solid var(--perun-product-line);
}
.perun-product-accordions details,
.perun-product-reinsurance > div {
	border-bottom: 1px solid var(--perun-product-line);
}
.perun-product-accordions summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem 0;
	font-size: .84rem;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}
.perun-product-accordions summary::-webkit-details-marker {
	display: none;
}
.perun-product-accordions summary::after {
	content: "+";
	color: var(--perun-product-black);
	font-size: 1rem;
	line-height: 1;
	transition: transform .35s var(--perun-product-ease);
}
.perun-product-accordions details[open] summary::after {
	transform: rotate(45deg);
}
.perun-product-accordions details > div {
	padding: 0 0 1.1rem;
	color: #555;
	font-size: .84rem;
	line-height: 1.6;
}
.perun-product-accordions details > div p {
	margin: 0 0 .6rem;
}
.perun-product-reinsurance {
	margin-top: .35rem;
}
.perun-product-reinsurance > div {
	display: grid;
	grid-template-columns: 2.1rem 1fr;
	grid-template-rows: auto auto;
	column-gap: .65rem;
	align-items: center;
	padding: .9rem 0;
}
.perun-product-reinsurance__icon {
	grid-row: 1 / span 2;
	width: 1.4rem;
	height: 1.4rem;
	color: var(--perun-product-ink);
}
.perun-product-reinsurance__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.perun-product-reinsurance strong {
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .02em;
}
.perun-product-reinsurance p {
	grid-column: 2;
	margin: .2rem 0 0;
	color: #555;
	font-size: .78rem;
	line-height: 1.45;
}

/* Shared section rhythm. */
.perun-product-specs,
.perun-product-details,
.perun-product-packaging,
.perun-product-press,
.perun-reviews-section,
.perun-product-related {
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 3vw, 3rem);
}
.perun-product-packaging {
	background: var(--perun-product-dark);
	color: #fff;
}
.perun-product-section-head {
	max-width: none;
	margin: 0 auto clamp(2rem, 4vw, 4rem);
	text-align: center;
}
.perun-product-section-head .perun-small-title,
.perun-product-packaging__copy .perun-small-title {
	margin: 0 0 1rem;
}
/* Big section titles: house serif, like the reference's quarto headings. */
.perun-product-section-head h1,
.perun-product-section-head h2,
.perun-product-packaging__copy h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 4vw, 4.6rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: 0;
}

/* Dark editorial gallery strip. */
/* Photo gallery band — same component as the homepage watch gallery
   (.perun-gallery-grid supplies the tiles); this wrapper only adds the
   band padding and caps the grid width. */
.perun-product-gallery-band {
	background: var(--wp--preset--color--base);
	padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 3rem);
}
.perun-product-gallery-band .perun-gallery-grid {
	max-width: 1320px;
	margin: 0 auto;
}

/* Specifications: real tabs + spec cards. */
.perun-product-specs {
	background: #fff;
	border-bottom: 1px solid var(--perun-product-line);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.perun-product-specs .perun-product-section-head {
	max-width: 1120px;
	text-align: left;
}
.perun-product-specs .perun-product-section-head h2 {
	font-size: clamp(2rem, 3vw, 3.4rem);
}
.perun-product-section-head--specs {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}
.perun-spec-sheet-link {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem 0 .45rem;
	border-bottom: 1px solid color-mix(in srgb, var(--perun-product-ink) 35%, transparent);
	color: var(--perun-product-ink);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s ease, border-color .2s ease;
}
.perun-spec-sheet-link:hover,
.perun-spec-sheet-link:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.perun-spec-sheet-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}
.perun-spec-sheet-link svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}
.perun-spec-sheet-link__meta {
	padding: .18rem .35rem .12rem;
	border: 1px solid currentColor;
	font-size: .58rem;
	letter-spacing: .08em;
}
/* Simple two-column list: label stacked above its serif value. */
.perun-product-specs__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.9rem 4rem;
	max-width: 1120px;
	margin: 0 auto;
}
.perun-product-specs__download {
	max-width: 1120px;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.perun-product-specs__list dt {
	margin: 0 0 .3rem;
	color: var(--perun-product-muted);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.perun-product-specs__list dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--perun-product-ink);
}

/* Detail-card sections ("More than meets the eye", "Details with meaning"). */
.perun-product-details {
	background: #fff;
}
.perun-product-meaning {
	padding-top: 0;
}
.perun-product-detail-grid {
	display: flex;
	gap: 1rem;
	max-width: none;
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: .8rem;
}
.perun-product-detail-card {
	flex: 0 0 min(28vw, 27rem);
	scroll-snap-align: center;
}
.perun-product-detail-card figure {
	aspect-ratio: 432 / 584;
	margin: 0;
	background: var(--perun-product-soft);
	overflow: hidden;
}
.perun-product-detail-card .perun-product-detail-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.perun-product-detail-card h3 {
	margin: 1.25rem 0 .6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.25;
	text-transform: uppercase;
}
.perun-product-detail-card p:not(.perun-small-title) {
	margin: 0;
	color: #555;
	font-size: .86rem;
	line-height: 1.55;
}

/* Leather strap pages: "The leather" band (lineup beside the copy) and the
   fixed three-image details strip underneath it. Both white, so the strip
   drops its top padding and reads as one block with the band. */
.perun-product-craft {
	background: #fff;
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 3vw, 3rem);
}
.perun-product-craft__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(320px, 6fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
	max-width: 1320px;
	margin: 0 auto;
}
.perun-product-craft__media {
	aspect-ratio: 4 / 5;
	margin: 0;
	background: var(--perun-product-soft);
	overflow: hidden;
}
.perun-product-craft__media .perun-product-craft__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.perun-product-craft__copy {
	max-width: 34rem;
}
.perun-product-craft__copy .perun-small-title {
	margin: 0 0 1rem;
}
.perun-product-craft__copy h2 {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 4vw, 4.6rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: 0;
}
.perun-product-craft__copy p:not(.perun-small-title) {
	margin: 0;
	color: #555;
	font-size: .95rem;
	line-height: 1.7;
}
.perun-product-strap-details {
	padding-top: 0;
}
.perun-product-detail-grid--fixed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	max-width: 1320px;
	overflow: visible;
	padding-bottom: 0;
}
.perun-product-detail-grid--fixed .perun-product-detail-card {
	flex: none;
	margin: 0;
}

/* Packaging band (dark). */
.perun-product-packaging {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	max-width: none;
}
.perun-product-packaging__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 3rem);
	background: #20242a;
}
.perun-product-packaging__media .perun-product-packaging__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .35));
}
.perun-product-packaging__copy {
	max-width: 34rem;
}
.perun-product-packaging__copy p:not(.perun-small-title) {
	color: rgba(255,255,255,.72);
	font-size: .92rem;
	line-height: 1.65;
}

/* Press quotes. */
.perun-product-press {
	background: var(--perun-product-soft);
	border-bottom: 1px solid var(--perun-product-line);
}
.perun-product-press__quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	max-width: 1120px;
	margin: 0 auto;
	background: var(--perun-product-line);
	border: 1px solid var(--perun-product-line);
}
.perun-product-press blockquote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 3rem);
	background: #fff;
}
.perun-product-press blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
}
.perun-product-press cite {
	color: var(--perun-product-muted);
	font-size: .7rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Product reviews: one WooCommerce source, reused on product and Reviews pages. */
.perun-reviews-page,
.perun-reviews-section {
	--perun-product-black: #010101;
	--perun-product-ink: #161719;
	--perun-product-muted: #6f7176;
	--perun-product-line: #e4e4e7;
	--perun-product-soft: #f5f4f1;
	--perun-product-panel: #edece8;
	--perun-product-ease: cubic-bezier(.25,.46,.45,.94);
}
.perun-reviews-page {
	background: var(--perun-product-soft);
	color: var(--perun-product-black);
}
.perun-reviews-section {
	background: #fff;
	border-bottom: 1px solid var(--perun-product-line);
	color: var(--perun-product-black);
}
.perun-reviews-section--page {
	background: var(--perun-product-soft);
}
.perun-reviews-section__page-head .perun-small-title {
	margin: 1rem 0 0;
}
.perun-reviews-average {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
	row-gap: .35rem;
	margin: clamp(-1.5rem, -2vw, -.75rem) auto clamp(2rem, 4vw, 4rem);
	text-align: center;
}
.perun-reviews-average > strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 4vw, 3.7rem);
	font-weight: 500;
	line-height: 1;
}
.perun-review-stars {
	display: inline-block;
	color: var(--wp--preset--color--accent);
	font-size: .92rem;
	letter-spacing: .14em;
	line-height: 1;
	white-space: nowrap;
}
.perun-reviews-average .perun-review-stars {
	font-size: clamp(1rem, 1.6vw, 1.3rem);
}
.perun-reviews-average > span:last-child {
	grid-column: 1 / -1;
	color: var(--perun-product-muted);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.perun-reviews-grid {
	display: grid;
	align-items: start;
	gap: 1rem;
	max-width: 1320px;
	margin: 0 auto;
}
.perun-reviews-section--product .perun-reviews-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.perun-reviews-section--page .perun-reviews-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1120px;
}
.perun-review-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 1.35rem;
	padding: clamp(1.35rem, 2.5vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--perun-product-line);
}
.perun-review-card__quote-wrap {
	min-width: 0;
}
.perun-review-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--perun-product-ink);
	font-size: .91rem;
	line-height: 1.72;
}
.perun-review-card__quote p {
	margin: 0;
}
.perun-review-card__quote p + p {
	margin-top: .8rem;
}
.perun-review-card.is-collapsed .perun-review-card__quote {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}
.perun-review-expand {
	margin: .8rem 0 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: var(--perun-product-black);
	font: inherit;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.perun-review-expand:hover,
.perun-review-expand:focus-visible {
	color: var(--wp--preset--color--accent);
}
.perun-review-card__footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.15rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--perun-product-line);
}
.perun-review-card__person {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .65rem;
}
.perun-review-card__person strong {
	font-size: .82rem;
	font-weight: 600;
}
.perun-review-card__person > span:not(.perun-review-card__verified) {
	color: var(--perun-product-muted);
	font-size: .7rem;
}
.perun-review-card__verified {
	color: var(--wp--preset--color--accent);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.perun-review-card__verified::before {
	content: "✓";
	margin-right: .3rem;
}
.perun-review-card__product {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: .8rem;
	color: var(--perun-product-black);
	text-decoration: none;
}
.perun-review-card__product-media {
	display: grid;
	width: 3.5rem;
	height: 4.5rem;
	place-items: center;
	background: var(--perun-product-soft);
}
.perun-review-card__product-media img {
	width: 82%;
	height: 88%;
	object-fit: contain;
	transition: transform .35s var(--perun-product-ease);
}
.perun-review-card__product:hover .perun-review-card__product-media img {
	transform: scale(1.04);
}
.perun-review-card__product small,
.perun-review-card__product strong {
	display: block;
}
.perun-review-card__product small {
	margin-bottom: .2rem;
	color: var(--perun-product-muted);
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.perun-review-card__product strong {
	font-size: .8rem;
	font-weight: 500;
}
.perun-review-card__product:hover strong {
	text-decoration: underline;
	text-underline-offset: .2em;
}
.perun-reviews-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}
.perun-reviews-more > button {
	min-width: 13rem;
	padding: .9rem 1.3rem;
	border: 1px solid var(--perun-product-black);
	background: var(--perun-product-black);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}
.perun-reviews-more > button:hover,
.perun-reviews-more > button:focus-visible {
	background: transparent;
	color: var(--perun-product-black);
}
.perun-reviews-more > button:disabled {
	cursor: wait;
	opacity: .55;
}
.perun-reviews-error {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: .76rem;
}
.perun-reviews-more--mobile-only {
	display: none;
}

/* Related products. */
.perun-product-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
	justify-content: center;
	gap: 1rem;
	max-width: 1320px;
	margin: 0 auto;
}
.perun-product-related__track {
	display: flex;
	gap: 1rem;
	max-width: 1320px;
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: .8rem;
}
.perun-product-related__track::-webkit-scrollbar { display: none; }
.perun-product-related__track .perun-product-related-card {
	flex: 0 0 calc((100% - 2rem) / 3);
	scroll-snap-align: start;
}
.perun-product-related-card {
	color: var(--perun-product-black);
	text-decoration: none;
}
.perun-product-related-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 432 / 584;
	background: var(--perun-product-soft);
}
.perun-product-related-card__media img {
	width: 76%;
	height: 86%;
	object-fit: contain;
	transition: transform .5s var(--perun-product-ease);
}
.perun-product-related-card:hover .perun-product-related-card__media img {
	transform: scale(1.04);
}
.perun-product-related-card__title {
	display: block;
	margin-top: .9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.15;
}
.perun-product-related-card__price {
	display: block;
	margin-top: .25rem;
	color: var(--perun-product-muted);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* "Add a strap": watch-on-strap renders, edge to edge in the card. */
.perun-product-straps .perun-product-related-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Four or more straps: one row that scrolls, snapping card by card, with
   arrows underneath. Same strip idiom as "More than meets the eye". */
.perun-product-straps__track {
	display: flex;
	gap: 1rem;
	max-width: 1320px;
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: .8rem;
}
.perun-product-straps__track::-webkit-scrollbar { display: none; }
.perun-product-straps__track .perun-product-related-card {
	flex: 0 0 min(28vw, 24rem);
	scroll-snap-align: start;
}
.perun-product-straps__nav,
.perun-product-related__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 1.5rem;
}
.perun-car-btn--dark {
	border-color: rgba(19, 19, 22, .3);
	color: var(--perun-product-black);
}
.perun-car-btn--dark:hover {
	background: var(--perun-product-black);
	border-color: var(--perun-product-black);
	color: #fff;
}
.perun-car-btn--dark:disabled {
	opacity: .3;
	pointer-events: none;
}
@media (max-width: 900px) {
	.perun-product-straps__track .perun-product-related-card {
		flex-basis: min(68vw, 24rem);
	}
	.perun-product-related__track .perun-product-related-card {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 1100px) {
	.perun-product-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.perun-product-summary {
		position: static;
		width: min(100%, 44rem);
		margin: 0 auto;
		padding: clamp(1.5rem, 3vw, 3rem);
	}
	/* Gallery becomes a swipeable strip on smaller screens. */
	.perun-product-gallery {
		display: flex;
		gap: .5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.perun-product-gallery__item {
		flex: 0 0 100%;
		min-height: clamp(24rem, 60vh, 34rem);
		scroll-snap-align: center;
	}
	.perun-product-packaging,
	.perun-product-craft__inner {
		grid-template-columns: 1fr;
	}
	.perun-product-specs__list {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}
	.perun-product-section-head--specs {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}
	.perun-product-detail-card {
		flex-basis: min(68vw, 28rem);
	}
	.perun-product-press__quotes {
		grid-template-columns: 1fr;
	}
	.perun-reviews-section--product .perun-reviews-grid,
	.perun-reviews-section--page .perun-reviews-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px) {
	.perun-product-hero__inner {
		padding: 0 0 2rem;
	}
	.perun-product-summary {
		width: auto;
		margin: 0 .75rem 1rem;
		padding: 1.5rem 1.25rem;
	}
	.perun-product-gallery__item {
		min-height: 24rem;
	}
	.perun-product-related__grid {
		grid-template-columns: 1fr;
	}
	.perun-product-related__track .perun-product-related-card {
		flex-basis: min(82vw, 24rem);
	}
	.perun-product-detail-card {
		flex-basis: 82vw;
	}
	.perun-product-detail-grid--fixed {
		grid-template-columns: 1fr;
	}
	.perun-product-title {
		font-size: clamp(2.1rem, 14vw, 3.4rem);
	}
	.perun-review-card--mobile-deferred {
		display: none;
	}
	.perun-reviews-more--mobile-only {
		display: flex;
	}
	.perun-reviews-average {
		column-gap: .7rem;
	}
}

/* ---- Collection archive (/product-category/<slug>/) ----------------
   Rides on the product page's component set: the template gives <main> the
   same .perun-product-page class, which is where the --perun-product-*
   custom properties live, so .perun-product-specs and
   .perun-product-packaging need nothing new. Only the intro, the piece grid
   wrapper and a light/flipped variant of the band are added here. */
.perun-collection-intro {
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 3rem) 0;
}
.perun-collection-intro__inner {
	max-width: 1120px;
	margin: 0 auto;
}
.perun-collection-intro .perun-small-title {
	margin: 0 0 1rem;
}
.perun-collection-intro h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}
.perun-collection-intro__lead {
	max-width: 34rem;
	margin: 1.25rem 0 0;
	color: var(--perun-product-muted);
	font-size: .95rem;
	line-height: 1.65;
}
.perun-collection-intro__lead p {
	margin: 0;
}
.perun-collection-pieces {
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem) clamp(4rem, 8vw, 6rem);
}
.perun-collection-pieces .perun-watch-grid {
	max-width: 1120px;
	margin: 0 auto;
}
/* Light, image-right variant of the band. Which photo gets which variant is
   decided by the photo: the strap lineup is shot on black, the caseback on a
   pale ground. */
.perun-product-packaging--light {
	background: #fff;
	color: var(--perun-product-black);
	border-bottom: 1px solid var(--perun-product-line);
}
.perun-product-packaging--light .perun-product-packaging__media {
	background: var(--perun-product-soft);
}
.perun-product-packaging--light .perun-product-packaging__copy p:not(.perun-small-title) {
	color: var(--perun-product-muted);
}
.perun-product-packaging--reverse {
	grid-template-columns: minmax(320px, 4fr) minmax(0, 8fr);
}
/* The product page feeds this band landscape packaging shots; the collection
   bands are fed portrait ones (strap lineup, caseback), and a grid item's
   automatic min-height is min-content, so a tall image stretches the box past
   its aspect-ratio and leaves the copy floating in dead space. Pin the ratio
   by zeroing the item's min sizes, and use 4/3 rather than 16/9 so a portrait
   source is mounted rather than lost in letterboxing. */
.perun-collection-page .perun-product-packaging__media {
	aspect-ratio: 4 / 3;
}
.perun-collection-page .perun-product-packaging__image {
	min-width: 0;
	min-height: 0;
}
/* Several photos in one media slot (the Knez casebacks: the back that ships,
   then the backs that can be engraved). The column count comes
   from the markup, as --perun-band-columns. All sources are portrait 3:4, so
   each cell carries that ratio and the box sizes itself off the column width
   instead of the band's own aspect-ratio: no letterboxing, no crop. The drop
   shadow is for cut-out product shots; these are full-bleed photographs and it
   only draws a rectangle around them. */
.perun-product-packaging__media--set,
.perun-collection-page .perun-product-packaging__media--set {
	grid-template-columns: repeat(var(--perun-band-columns, 2), minmax(0, 1fr));
	gap: clamp(.75rem, 1.6vw, 1.25rem);
	align-items: start;
	aspect-ratio: auto;
}
.perun-product-packaging__media--set .perun-product-packaging__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: none;
}
@media (max-width: 700px) {
	/* Three across is thumbnail-sized on a phone. The back that ships takes the
	   full width and the options sit under it. */
	.perun-product-packaging__media--set,
	.perun-collection-page .perun-product-packaging__media--set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.perun-product-packaging__media--set > :first-child:nth-last-child(n+3) {
		grid-column: 1 / -1;
	}
}
.perun-product-packaging__link {
	display: inline-block;
	margin-top: 1.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: .2rem;
}
.perun-product-packaging__link:hover {
	color: var(--wp--preset--color--accent);
}
@media (max-width: 1100px) {
	/* The base rule already collapses to one column; --reverse is two
	   classes, so it has to be collapsed again here. Image stays first on a
	   stacked layout whichever variant it is. */
	.perun-product-packaging--reverse {
		grid-template-columns: 1fr;
	}
	.perun-product-packaging--reverse .perun-product-packaging__media {
		order: -1;
	}
}

/* Keep wallet buttons legible instead of squeezing three columns into a phone.
   Link remains available in checkout; do not repeat its express button on the
   mobile product page. The Stripe plugin mounts Link as the third element. */
@media (max-width: 700px) {
	#wc-stripe-express-checkout-element {
		grid-template-columns: minmax(0, 1fr);
	}
	#wc-stripe-express-checkout-element > .StripeElement:nth-child(3) {
		display: none;
	}
}

/* Woo's compact cart uses fixed image/quantity widths. Give the product and
   line total separate rows before those widths exhaust the content column. */
@media (max-width: 480px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr);
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		box-sizing: border-box;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 64px;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
		padding-top: .75rem;
	}
}

/* Consent controls must fit short landscape screens and never cover a CTA. */
.perun-consent {
	box-sizing: border-box;
	max-height: calc(100dvh - 2.5rem);
	overflow-y: auto;
}
.perun-consent-dialog__panel {
	box-sizing: border-box;
	max-height: calc(100dvh - 2rem);
}
@media (max-width: 900px) {
	.perun-cookie-settings {
		position: static;
		display: block;
		min-height: 44px;
		margin: 1rem auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.perun-primary { transition: none; }
}