/* ============================================================================
 * SECTION LAYOUT VARIANTS
 *
 * style.css already carries the element variants (pv-button-*, pv-card-*,
 * pv-footer-minimal, pv-heading-plain): those change colour and edge. This file
 * carries the LAYOUT variants — how many columns a grid has, whether a card is
 * stacked or side-by-side, whether the header centres, whether category tiles
 * are a grid or a rail. Colour alone made every skin look like a re-paint of
 * one site; arrangement is what makes two shops unrecognisable as siblings.
 *
 * Contract, same as the element variants:
 *   - every registry DEFAULT is the theme's existing look, so it has no rules
 *     here at all and an untouched site renders byte-identically;
 *   - each rule is scoped to a pv-* body class emitted by
 *     inc/theme-variants.php, so nothing here can leak into an unset site;
 *   - this file is enqueued AFTER style.css, so at equal specificity it wins —
 *     which is why the handful of !important below beat the !important base
 *     rules over there;
 *   - skin CSS (wp_head:24) lands after both and can still override any of it.
 *
 * Every desktop-shaped variant is wrapped in a min-width query and falls back
 * to the base mobile layout underneath it: a 4-up grid or a side-by-side card
 * is a desktop idea, not a phone one.
 * ========================================================================== */


/* ===========================================================================
 * 1. PRODUCT GRID  (.grid = homepage collection + shop archive, .flash-row = deals)
 * ========================================================================= */

/* --- four-up: dense, catalogue-like --- */
@media (min-width:1081px){
  .pv-grid-four-up .grid,
  .pv-grid-four-up .flash-row{grid-template-columns:repeat(4,1fr);gap:18px}
  .pv-grid-four-up .pc-stage{height:228px}
  .pv-grid-four-up .pc-bottle-wrap img,
  .pv-grid-four-up .pc-bottle{max-height:170px}
  .pv-grid-four-up .pc-notes{display:none}
}
@media (min-width:769px) and (max-width:1080px){
  .pv-grid-four-up .grid,
  .pv-grid-four-up .flash-row{grid-template-columns:repeat(3,1fr)}
}

/* --- two-up: fewer, much larger, gallery-like --- */
@media (min-width:769px){
  .pv-grid-two-up .grid,
  .pv-grid-two-up .flash-row{grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,36px)}
  .pv-grid-two-up .pc-stage{height:clamp(300px,26vw,368px)}
  .pv-grid-two-up .pc-bottle-wrap img,
  .pv-grid-two-up .pc-bottle{max-height:clamp(230px,20vw,286px)}
  .pv-grid-two-up .pc-name-fa{font-size:17px}
}

/* --- mosaic: the first card of every row runs double-width ---
   4 tracks, and every 3rd card starting at the first spans 2 → each row reads
   [ wide ][ narrow ][ narrow ]. The wide card gets a taller stage so the
   rhythm looks deliberate rather than like a stretched thumbnail. */
@media (min-width:1081px){
  .pv-grid-mosaic .grid,
  .pv-grid-mosaic .flash-row{grid-template-columns:repeat(4,1fr);gap:20px}
  .pv-grid-mosaic .grid > .pcard:nth-child(3n+1),
  .pv-grid-mosaic .flash-row > .pcard:nth-child(3n+1){grid-column:span 2}
  .pv-grid-mosaic .grid > .pcard:nth-child(3n+1) .pc-stage,
  .pv-grid-mosaic .flash-row > .pcard:nth-child(3n+1) .pc-stage{height:320px}
  .pv-grid-mosaic .grid > .pcard:nth-child(3n+1) .pc-bottle-wrap img,
  .pv-grid-mosaic .flash-row > .pcard:nth-child(3n+1) .pc-bottle-wrap img{max-height:250px}
  .pv-grid-mosaic .grid > .pcard:nth-child(3n+1) .pc-name-fa,
  .pv-grid-mosaic .flash-row > .pcard:nth-child(3n+1) .pc-name-fa{font-size:18px}
}

/* --- rail: one horizontal, snapping row instead of a wrapped grid ---
   Bleeds to the viewport edge so the cut-off card reads as "scroll me". */
@media (min-width:769px){
  .pv-grid-rail .grid,
  .pv-grid-rail .flash-row{
    display:flex;grid-template-columns:none;gap:20px;
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:10px;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  }
  .pv-grid-rail .grid::-webkit-scrollbar,
  .pv-grid-rail .flash-row::-webkit-scrollbar{display:none}
  .pv-grid-rail .grid > .pcard,
  .pv-grid-rail .flash-row > .pcard{flex:0 0 clamp(260px,23vw,320px);width:auto;scroll-snap-align:start}
}


/* ===========================================================================
 * 2. CARD LAYOUT  (the arrangement INSIDE .pcard)
 * ========================================================================= */

/* --- side: image beside the text instead of above it ---
   Reads as a listing rather than a shelf. The stage loses its fixed height and
   takes a share of the width; the body left-aligns because centred text in a
   narrow right-hand column looks accidental. */
@media (min-width:769px){
  .pv-cardlay-side .pcard{flex-direction:row;align-items:stretch}
  .pv-cardlay-side .pc-stage{
    flex:0 0 42%;height:auto;min-height:190px;padding:14px 14px 0;
    display:flex;align-items:center;
  }
  .pv-cardlay-side .pc-bottle-wrap{height:100%;width:100%}
  .pv-cardlay-side .pc-bottle-wrap img,
  .pv-cardlay-side .pc-bottle{max-height:170px;max-width:86%}
  .pv-cardlay-side .pc-body{flex:1;text-align:start;padding:16px 18px 16px}
  .pv-cardlay-side .pc-name a{align-items:flex-start}
  .pv-cardlay-side .pc-rating,
  .pv-cardlay-side .pc-price-top{justify-content:flex-start}
  .pv-cardlay-side .pc-notes{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* a two-up rail of side-cards is the one combination that would squeeze: give
     the wide grids a single column so each card gets room to be horizontal. */
  .pv-cardlay-side.pv-grid-two-up .grid,
  .pv-cardlay-side.pv-grid-two-up .flash-row{grid-template-columns:1fr}
}

/* --- compact: strip the card back to image, name, price --- */
.pv-cardlay-compact .pc-notes,
.pv-cardlay-compact .pc-stats,
.pv-cardlay-compact .pc-brand,
.pv-cardlay-compact .pc-rating{display:none}
.pv-cardlay-compact .pc-name{margin-top:10px;min-height:0}
.pv-cardlay-compact .pc-body{padding:0 14px 14px}
.pv-cardlay-compact .pc-stage{height:236px}
.pv-cardlay-compact .pc-buy{margin-top:12px;padding:9px 12px}

/* --- editorial: no button, no badges chrome; the price IS the type ---
   Text starts at the line, the buy control becomes a rule-and-link, which is
   how a magazine shop reads. */
.pv-cardlay-editorial .pc-body{text-align:start;padding:0 18px 20px}
.pv-cardlay-editorial .pc-name a{align-items:flex-start}
.pv-cardlay-editorial .pc-name-fa{font-size:16px;font-weight:700;white-space:normal}
.pv-cardlay-editorial .pc-rating,
.pv-cardlay-editorial .pc-price-top{justify-content:flex-start}
.pv-cardlay-editorial .pc-notes{display:none}
.pv-cardlay-editorial .pc-buy{
  background:transparent!important;color:var(--ink)!important;
  border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
  box-shadow:none!important;padding:14px 0 0!important;margin-top:16px;
}
.pv-cardlay-editorial .pc-buy:hover{background:transparent!important;box-shadow:none!important}
.pv-cardlay-editorial .pc-buy .pc-buy-price{font-size:17px;font-weight:800;color:var(--ink)}
.pv-cardlay-editorial .pc-buy .pc-buy-cta{
  border-inline-start:0;padding-inline-start:0;
  color:var(--accent-deep);font-size:12px;text-decoration:underline;text-underline-offset:4px;
}


/* ===========================================================================
 * 3. STAGE  (the plate the bottle stands on — the loudest single tell)
 * ========================================================================= */

/* --- flat: no colour at all, just a neutral plate --- */
.pv-stage-flat .pc-stage{background:var(--paper-2)}
.pv-stage-flat .pc-floor{opacity:.5}

/* --- block: the product's own tint, full strength, hard edge --- */
.pv-stage-block .pc-stage{
  background:var(--tint,var(--stage-fallback));
  border-bottom:1px solid var(--line);
}

/* --- arch: an alcove. Round on top, square at the floor. --- */
.pv-stage-arch .pc-stage{
  border-radius:var(--r-pill) var(--r-pill) 0 0;
  margin:10px 10px 0;padding-top:26px;
}

/* --- framed: a museum mount — inset keyline around the bottle --- */
.pv-stage-framed .pc-stage{position:relative;background:var(--paper-2)}
.pv-stage-framed .pc-stage::after{
  content:"";position:absolute;inset:12px;pointer-events:none;z-index:1;
  border:1px solid var(--line);border-radius:var(--r-6);
}


/* ===========================================================================
 * 4. CATEGORY TILES  (.scent-cats holds the .cat tiles)
 * ========================================================================= */

/* --- stack: one full-width row per category, icon beside the text --- */
.pv-cats-stack .scent-cats{grid-template-columns:1fr;gap:12px}
.pv-cats-stack .cat{
  min-height:0;padding:20px 22px;
  flex-direction:row;align-items:center;gap:18px;
}
.pv-cats-stack .cat > div{flex:1;min-width:0}
.pv-cats-stack .cat h3{margin-top:0;font-size:20px}
.pv-cats-stack .cat .go{margin-top:8px}
.pv-cats-stack .cat::after{display:none}

/* --- rail: a horizontal shelf of tiles --- */
.pv-cats-rail .scent-cats{
  display:flex;grid-template-columns:none;gap:14px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;
}
.pv-cats-rail .scent-cats::-webkit-scrollbar{display:none}
.pv-cats-rail .cat{flex:0 0 clamp(212px,20vw,258px);scroll-snap-align:start}

/* --- frameless: no card at all, only a hairline between entries --- */
.pv-cats-frameless .scent-cats{gap:0}
.pv-cats-frameless .cat{
  background:none!important;border:0;border-radius:0;box-shadow:none!important;
  border-bottom:1px solid var(--line);padding:22px 4px;min-height:0;
}
.pv-cats-frameless .cat::after{display:none}
.pv-cats-frameless .cat:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pv-cats-frameless .cat .cat-ico{background:none;border:0;width:auto;height:auto}
.pv-cats-frameless .cat .go{background:none;border:0;padding:0;min-height:0;backdrop-filter:none}
.pv-cats-frameless .cat:hover .go{background:none;box-shadow:none}


/* ===========================================================================
 * 5. BRAND STRIP  (.brand-chips)
 * ========================================================================= */

/* --- plates: fewer, larger, letterpress-looking blocks --- */
@media (min-width:769px){
  .pv-brands-plates .brand-chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
.pv-brands-plates .brand-chip{
  min-height:74px;font-size:14px;letter-spacing:.14em;font-weight:700;
  background:var(--paper-2);border-color:var(--line);
}
.pv-brands-plates .brand-chip:hover{background:var(--paper);border-color:var(--ink)}

/* --- inline: a run of plain names, dot-separated. No boxes at all. --- */
.pv-brands-inline .brand-chips{display:flex;flex-wrap:wrap;grid-template-columns:none;gap:0 4px;align-items:baseline}
.pv-brands-inline .brand-chip{
  border:0;background:none;padding:5px 8px;border-radius:0;
  font-size:13px;letter-spacing:.04em;
}
.pv-brands-inline .brand-chip::after{
  content:"·";margin-inline-start:12px;color:var(--line);
}
.pv-brands-inline .brand-chip:last-child::after{content:none}
.pv-brands-inline .brand-chip:hover{background:none;color:var(--accent-deep)}

/* --- rail: one scrolling row, no wrapping --- */
.pv-brands-rail .brand-chips{
  display:flex;grid-template-columns:none;gap:10px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:6px;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
}
.pv-brands-rail .brand-chips::-webkit-scrollbar{display:none}
.pv-brands-rail .brand-chip{flex:0 0 auto;padding-inline:20px;white-space:nowrap}


/* ===========================================================================
 * 6. HEADER  (.site-header > .bar)
 * ========================================================================= */

/* --- center: logo on its own centred line, nav underneath ---
   The single fastest way to stop two sites looking related: one has its logo
   in the corner, the other has it on the axis. */
@media (min-width:1081px){
  .pv-header-center .bar{
    flex-wrap:wrap;height:auto;padding-block:18px 0;gap:0 20px;
    justify-content:center;
  }
  .pv-header-center .logo{order:1;flex:0 0 100%;justify-content:center;margin-bottom:14px}
  .pv-header-center .logo img{height:44px;margin-inline:auto}
  .pv-header-center nav.main{
    order:3;flex:1 1 100%;justify-content:center;margin-inline-start:0;
    gap:34px;border-top:1px solid var(--line-soft);padding-block:12px;
  }
  .pv-header-center .tools{order:2;margin-inline-start:0;position:absolute;inset-inline-end:var(--gut);top:24px}
  .pv-header-center .bar{position:relative}
}

/* --- compact: a low, quiet bar --- */
@media (min-width:1081px){
  .pv-header-compact .bar{height:58px;gap:20px}
  .pv-header-compact .logo img{height:30px}
  .pv-header-compact nav.main{gap:22px}
  .pv-header-compact nav.main a{font-size:12.5px}
  .pv-header-compact .utilbar{display:none}
}


/* ===========================================================================
 * 7. FOOTER  ('minimal' already lives in style.css)
 * ========================================================================= */

/* --- center: everything stacked on the axis --- */
.pv-footer-center .site-footer .f-grid{
  grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px;
}
.pv-footer-center .site-footer .f-about{max-width:52ch}
.pv-footer-center .site-footer .f-logo img{margin-inline:auto}
.pv-footer-center .site-footer .f-bottom{justify-content:center;text-align:center}
.pv-footer-center .site-footer .socials{justify-content:center}

/* --- slab: a solid dark block with ruled columns --- */
.pv-footer-slab .site-footer{background:var(--ink-deep);color:var(--paper);border-top:0}
.pv-footer-slab .site-footer .f-grid{gap:0;padding-block:clamp(44px,6vh,72px) 44px}
.pv-footer-slab .site-footer .f-grid > *{
  padding-inline:clamp(18px,2.4vw,34px);
  border-inline-start:1px solid rgba(255,255,255,.14);
}
.pv-footer-slab .site-footer .f-grid > *:first-child{border-inline-start:0;padding-inline-start:0}
.pv-footer-slab .site-footer .f-col h5,
.pv-footer-slab .site-footer .f-contact b{color:var(--paper)}
.pv-footer-slab .site-footer .f-col a,
.pv-footer-slab .site-footer .f-col p,
.pv-footer-slab .site-footer .f-about,
.pv-footer-slab .site-footer .f-bottom{color:rgba(255,255,255,.68)}
.pv-footer-slab .site-footer .f-col a:hover{color:#fff}
.pv-footer-slab .site-footer .f-bottom{border-top-color:rgba(255,255,255,.14)}
.pv-footer-slab .site-footer .socials a{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.8);
}
.pv-footer-slab .site-footer .socials a:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.pv-footer-slab .site-footer .f-trust{background:transparent;border-color:rgba(255,255,255,.14)}
/* The base trust band paints a light tinted surface, an accent top-rule and a
 * pale pill on the bottom bar. On the dark slab those all read as smudges, so
 * each is neutralised rather than merely re-tinted. */
.pv-footer-slab .site-footer .f-trust::before{opacity:.32}
.pv-footer-slab .site-footer .f-bottom .label{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72);
}
.pv-footer-slab .site-footer .pay-block .pb-h{color:rgba(255,255,255,.82)}
.pv-footer-slab .site-footer .pchip{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);box-shadow:none;
}
.pv-footer-slab .site-footer .pchip:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.pv-footer-slab .site-footer .pchip.secure{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff;
}
.pv-footer-slab .site-footer .pchip svg,
.pv-footer-slab .site-footer .pchip.secure svg{color:currentColor}
@media (max-width:768px){
  .pv-footer-slab .site-footer .f-grid > *{border-inline-start:0;padding-inline:0}
}


/* ===========================================================================
 * 8. SECTION HEADING  ('plain' already lives in style.css)
 * The homepage uses three heading wrappers, so each variant targets all three.
 * ========================================================================= */

/* --- center: on the axis, with a short accent rule beneath --- */
.pv-heading-center .sec-head,
.pv-heading-center .flash-head,
.pv-heading-center .brands-head{
  flex-direction:column;align-items:center;text-align:center;
}
.pv-heading-center .flash-head .flash-title{justify-content:center}
.pv-heading-center .sec-head .sub{max-width:56ch;margin-inline:auto}
.pv-heading-center .flash-head .flash-all{margin-inline-start:0}
.pv-heading-center .sec-head h2::after,
.pv-heading-center .flash-head h2::after,
.pv-heading-center .brands-head h2::after{
  content:"";display:block;width:54px;height:2px;margin:16px auto 0;background:var(--accent);
}
.pv-heading-center .prod-tabs{margin-inline:auto}

/* --- rule: the title, then a hairline running to the far edge --- */
.pv-heading-rule .sec-head h2,
.pv-heading-rule .flash-head .flash-title h2,
.pv-heading-rule .brands-head h2{display:flex;align-items:center;gap:20px}
.pv-heading-rule .sec-head h2::after,
.pv-heading-rule .flash-head .flash-title h2::after,
.pv-heading-rule .brands-head h2::after{
  content:"";flex:1 1 auto;min-width:40px;height:1px;background:var(--line);
}
.pv-heading-rule .sec-head > div:first-child,
.pv-heading-rule .brands-head{flex:1;width:100%}
.pv-heading-rule .flash-head .flash-title{flex:1;min-width:0}

/* --- index: a coloured bar standing beside the title, like a chapter mark --- */
.pv-heading-index .sec-head h2,
.pv-heading-index .flash-head .flash-title h2,
.pv-heading-index .brands-head h2{
  display:flex;align-items:center;gap:14px;
}
.pv-heading-index .sec-head h2::before,
.pv-heading-index .flash-head .flash-title h2::before,
.pv-heading-index .brands-head h2::before{
  content:"";flex:none;width:5px;height:1.05em;border-radius:var(--r-5);background:var(--accent);
}
.pv-heading-index .sec-head .label,
.pv-heading-index .flash-head .label,
.pv-heading-index .brands-head .label{padding-inline-start:19px}

/* ==========================================================================
   Empty-wrapper safety net
   PHP gates every wrapper the theme itself prints (see inc/sections.php), so
   these rules exist for markup we do NOT control: shortcodes, plugin output,
   and editor blocks that emit a padded container with nothing inside it.
   Never rely on this instead of gating in PHP — an element hidden here still
   costs a DOM node and still shows up in the HTML source.
   ========================================================================== */
.sec-head:empty,
.flash-head:empty,
.flash-title:empty,
.brands-head:empty,
.f-trust:empty,
.f-trust-in:empty,
.seals:empty,
.pay-block:empty,
.pay-chips:empty,
.f-col:empty,
.socials:empty,
.utilbar:empty,
.u-left:empty,
.u-right:empty,
.promo:empty,
.f-bottom:empty,
.pk-grid:empty,
.scent-cats:empty{display:none}

/* A heading or lead whose text was cleared but whose tag still printed. */
.sec-head h2:empty,
.sec-head p.sub:empty,
.story-body h2:empty,
.story-body p.lead:empty,
.hero p.lead:empty,
.f-about:empty,
.label:empty{display:none;margin:0}

/* Containers that hold only whitespace/comments — :has() lets us catch the
   wrapper whose every child we hid above. Ignored by browsers without :has(),
   which is fine: this is a net, not the mechanism. */
@supports selector(:has(*)){
  .sec-head:has(> div:empty):not(:has(a, h2, p, span:not(:empty))),
  .f-trust:has(> .f-trust-in:empty),
  .f-grid > div:has(> h5:only-child):not(:has(a, p)){display:none}
}

/* Reduced motion: variant animations are decoration, not information. */
@media (prefers-reduced-motion: reduce){
  .hfb-bottle,
  .hfb-pool,
  .hspot-cone,
  .spot-glow{animation:none!important}
}

/* ==========================================================================
   Hero variants — floating-bottle · editorial-type · spotlight · atelier-duo
   Each is a distinct composition, not a recolour of the same band. All four
   inherit the theme tokens, so a skin change restyles them for free.
   ========================================================================== */

/* --- floating-bottle: the object hangs in a dark field under a soft halo --- */
.hfb{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 100% at 78% 12%,var(--brand-shade) 0%,var(--brand-night) 62%,#15112a 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hfb-aura{
  position:absolute;inset-block-start:-28%;inset-inline-end:6%;
  width:min(56vw,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(242,215,142,.22) 0%,rgba(122,106,214,.14) 42%,transparent 68%);
  filter:blur(8px);z-index:-1;
}
.hfb-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding-block:clamp(38px,6vw,84px);
}
.hfb-body{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.hfb-eyebrow{
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.85;
}
.hfb-body h1{
  font-size:clamp(26px,3.6vw,46px);line-height:1.32;font-weight:700;color:#fff;
  text-wrap:balance;
}
.hfb-body h1 em{font-style:normal;color:var(--gold-soft)}
.hfb-body p.lead{
  font-size:clamp(14px,1.2vw,16.5px);line-height:1.9;
  color:rgba(255,255,255,.74);max-width:50ch;
}
.hfb-cta{
  display:inline-flex;align-items:center;gap:8px;margin-block-start:6px;
  padding:12px 24px;border-radius:999px;font-weight:700;font-size:14.5px;
  color:var(--brand-night);background:linear-gradient(120deg,#fff 0%,var(--gold-soft) 100%);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.7);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hfb-cta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(0,0,0,.8)}
.hfb-stage{position:relative;display:grid;place-items:center;min-height:clamp(220px,30vw,380px)}
.hfb-bottle{
  display:block;position:relative;z-index:1;
  animation:hfb-float 6.5s ease-in-out infinite alternate;
  will-change:transform;
}
.hfb-bottle img{
  display:block;width:100%;max-width:min(38vw,340px);height:auto;
  object-fit:contain;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
.hfb-pool{
  position:absolute;inset-block-end:6%;inset-inline-start:50%;translate:-50% 0;
  width:min(26vw,230px);height:26px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55) 0%,transparent 70%);
  filter:blur(6px);
  animation:hfb-pool 6.5s ease-in-out infinite alternate;
}
@keyframes hfb-float{from{transform:translateY(0)}to{transform:translateY(-16px)}}
@keyframes hfb-pool{from{opacity:.75;transform:scaleX(1)}to{opacity:.45;transform:scaleX(.84)}}

/* --- editorial-type: no imagery; the type carries the band --- */
.het{
  background:var(--paper);
  border-block:1px solid var(--line);
}
.het-in{padding-block:clamp(40px,6.5vw,96px)}
.het-kicker{
  display:inline-block;margin-block-end:clamp(16px,2.4vw,30px);
  padding-block-end:9px;border-block-end:1px solid var(--ink);
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
}
.het-h1{
  margin:0;font-size:clamp(30px,6.4vw,84px);line-height:1.1;font-weight:300;
  letter-spacing:-.015em;color:var(--ink);max-width:19ch;text-wrap:balance;
}
.het-h1 em{font-style:normal;font-weight:700;color:var(--accent)}
.het-foot{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(18px,3vw,48px);
  margin-block-start:clamp(24px,3.6vw,52px);padding-block-start:20px;
  border-block-start:1px solid var(--line);
}
.het-lead{
  margin:0;font-size:clamp(14px,1.15vw,16.5px);line-height:1.95;
  color:var(--ink-soft);max-width:46ch;
}
.het-cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:14.5px;color:var(--ink);
  padding-block-end:5px;border-block-end:2px solid var(--accent);
  transition:gap .25s ease,color .25s ease;
}
.het-cta:hover{gap:14px;color:var(--accent)}
.het-cta--solo{margin-block-start:clamp(22px,3vw,40px)}

/* --- spotlight: one lit subject, everything else in shadow --- */
.hspot{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 50% 0%,#221d33 0%,#12101c 55%,#0a0910 100%);
}
.hspot-cone{
  position:absolute;inset-block-start:-6%;inset-inline-start:50%;translate:-50% 0;
  width:min(70vw,760px);height:min(64vw,560px);pointer-events:none;z-index:0;
  background:conic-gradient(from 180deg at 50% 0%,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  filter:blur(14px);
  animation:hspot-breathe 9s ease-in-out infinite alternate;
}
.spot-glow{
  position:absolute;inset-block-start:14%;inset-inline-start:50%;translate:-50% 0;
  width:min(44vw,420px);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,247,224,.20) 0%,transparent 66%);
  animation:hspot-breathe 7s ease-in-out infinite alternate;
}
.hspot-in{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(18px,2.6vw,34px);padding-block:clamp(38px,6vw,84px);
}
.hspot-subject img{
  display:block;width:100%;max-width:min(34vw,300px);height:auto;object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(255,240,205,.18)) drop-shadow(0 30px 44px rgba(0,0,0,.7));
}
.hspot-body{display:flex;flex-direction:column;align-items:center;gap:13px}
.hspot-eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,247,224,.62);
}
.hspot-body h1{
  font-size:clamp(25px,3.6vw,46px);line-height:1.34;font-weight:600;color:#fff;
  max-width:20ch;text-wrap:balance;
}
.hspot-body h1 em{font-style:normal;color:var(--gold-soft)}
.hspot-body p.lead{
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.9;
  color:rgba(255,255,255,.6);max-width:52ch;
}
.hspot-cta{
  display:inline-flex;align-items:center;gap:8px;margin-block-start:4px;
  padding:11px 26px;border-radius:999px;font-weight:700;font-size:14.5px;
  color:#fff;border:1px solid rgba(255,247,224,.36);
  transition:background .25s ease,border-color .25s ease;
}
.hspot-cta:hover{background:rgba(255,247,224,.1);border-color:var(--gold-soft)}
@keyframes hspot-breathe{from{opacity:.72}to{opacity:1}}

/* --- atelier-duo: asymmetric composition with a brand stamp --- */
.hduo{background:var(--paper-2);border-block-end:1px solid var(--line)}
.hduo-grid{
  display:grid;grid-template-columns:.92fr 1.28fr;align-items:center;
  gap:clamp(22px,3.6vw,58px);padding-block:clamp(34px,5vw,74px);
}
/* With one column missing the composition is no longer a duo — let it fill. */
.hduo-grid:has(.hduo-body:only-child),
.hduo-grid:has(.hduo-media:only-child){grid-template-columns:1fr}
.hduo-body{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  padding-inline-end:clamp(16px,2.4vw,34px);
  border-inline-end:1px solid var(--line);
}
.hduo-grid:has(.hduo-body:only-child) .hduo-body{border-inline-end:0;padding-inline-end:0}
.hduo-stamp{
  align-self:flex-start;margin-block-end:2px;padding:5px 11px;
  border:1px solid var(--brass);border-radius:3px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);opacity:.9;
}
.hduo-eyebrow{font-size:11.5px;letter-spacing:.24em;color:var(--ink-soft)}
.hduo-body h1{
  font-size:clamp(24px,3.2vw,42px);line-height:1.34;font-weight:600;
  color:var(--ink);text-wrap:balance;
}
.hduo-body h1 em{font-style:normal;color:var(--brass)}
.hduo-body p.lead{
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.9;color:var(--ink-soft);max-width:44ch;
}
.hduo-cta{
  display:inline-flex;align-items:center;gap:8px;margin-block-start:6px;
  padding:11px 24px;border-radius:2px;font-weight:700;font-size:14.5px;
  color:var(--paper);background:var(--ink);
  transition:background .25s ease,transform .25s ease;
}
.hduo-cta:hover{background:var(--brass);transform:translateY(-2px)}
.hduo-media img{
  display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:3px;
  box-shadow:0 24px 48px -26px rgba(0,0,0,.45);
}

/* --- shared narrow-screen behaviour: every hero collapses to one column --- */
@media (max-width:860px){
  .hfb-grid,
  .hduo-grid{grid-template-columns:1fr}
  .hfb-stage{order:-1;min-height:0}
  .hfb-bottle img{max-width:min(62vw,260px)}
  .hduo-body{border-inline-end:0;padding-inline-end:0}
  .het-foot{grid-template-columns:1fr;align-items:start}
  .hspot-subject img{max-width:min(56vw,230px)}
}

/* ==========================================================================
 * BEYOND THE HOMEPAGE — shop, product, cart, checkout, account
 *
 * Everything above this line dresses the front page. Two shops on this theme
 * still gave themselves away the moment you opened /shop, so these ten
 * elements cover the rest of the journey.
 *
 * Scope rules, in order of importance:
 *
 *   1. Structural rules live inside `@media (min-width:901px)` (shop) or
 *      `(min-width:900px)` (cart/checkout) — the same breakpoints the base
 *      sheets use. Below them the base is already a single column with an
 *      off-canvas drawer, which is the correct phone UX for every variant;
 *      re-arranging it would only make some variants worse on a phone.
 *   2. Every selector starts at the body class, so an untouched site matches
 *      nothing here.
 *   3. variants.css is enqueued LAST (see functions.php), after shop.css /
 *      checkout.css / account.css, so an equal-specificity rule here wins on
 *      source order. Where the base rule carries an extra class (e.g.
 *      `.acc-nav.woocommerce-MyAccount-navigation`) these selectors repeat it
 *      rather than reach for !important.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * shop_layout — where the filters live, and how wide the grid runs
 * ------------------------------------------------------------------------- */
@media (min-width:901px){

  /* --- topbar: the filter form unrolls into a horizontal band above the
       grid. The sidebar markup is unchanged; it just stops being a rail. --- */
  .pv-shop-topbar .shop-grid{display:block}
  .pv-shop-topbar .sidebar{
    position:static;inset:auto;width:auto;max-height:none;overflow:visible;
    display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px;
    padding:16px 18px;margin-bottom:22px;
    background:var(--paper);border:1px solid var(--line);border-radius:14px;
    box-shadow:none;transform:none;
  }
  .pv-shop-topbar .sb-head{flex:0 0 100%;padding-top:0}
  .pv-shop-topbar .fgroup{flex:1 1 190px;min-width:0;border:0;padding:0}
  /* In a band there is no room to scroll a long list open — cap and scroll it. */
  .pv-shop-topbar .fg-body{max-height:190px;overflow-y:auto}
  .pv-shop-topbar .sb-apply{flex:0 0 auto;margin-inline-start:auto;position:static;box-shadow:none}

  /* --- fullwidth: no rail at all. The drawer + its trigger come back so the
       filters stay reachable — dropping them would break the shop, not
       restyle it. --- */
  .pv-shop-fullwidth .shop-grid{display:block}
  .pv-shop-fullwidth .filter-bar-m{display:flex}
  .pv-shop-fullwidth .sb-overlay{display:block}
  .pv-shop-fullwidth .sb-close{display:inline-flex}
  .pv-shop-fullwidth .sidebar{
    position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:91;
    width:min(360px,90vw);max-height:none;
    display:flex;flex-direction:column;
    background:var(--paper);box-shadow:-18px 0 44px rgba(74,74,178,.14);
    transform:translateX(100%);padding:16px var(--gut) 0;
  }
  /* …and the drawer must still be able to open (same specificity as the rule
     above, so this has to come after it). */
  .pv-shop-fullwidth .sidebar.open{transform:translateX(0)}
  .pv-shop-fullwidth .sb-apply{position:sticky;bottom:0}

  /* --- catrail: the filter band again, but as a row of pill triggers whose
       lists float over the grid — it reads as a category rail, not a panel.
       NOTE: no `overflow:auto` here, deliberately. An overflow container clips
       absolutely-positioned descendants (and `overflow-y:visible` computes to
       `auto` the moment the other axis scrolls), which would cut every open
       list off at the rail's edge. The row wraps instead of scrolling. --- */
  .pv-shop-catrail .shop-grid{display:block}
  .pv-shop-catrail .sidebar{
    position:static;inset:auto;width:auto;max-height:none;overflow:visible;
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
    padding:12px 0 16px;margin-bottom:20px;
    background:transparent;border:0;border-bottom:1px solid var(--line);
    border-radius:0;box-shadow:none;transform:none;
  }
  .pv-shop-catrail .sb-head,
  .pv-shop-catrail .sb-apply{display:none}
  .pv-shop-catrail .fgroup{flex:0 0 auto;border:0;padding:0;position:relative}
  .pv-shop-catrail .fg-head{
    white-space:nowrap;padding:8px 15px;
    border:1px solid var(--line);border-radius:999px;background:var(--paper);
  }
  .pv-shop-catrail .fgroup.has-active .fg-head{border-color:var(--accent);color:var(--accent-deep)}
  /* the open list floats over the grid instead of pushing it down */
  .pv-shop-catrail .fg-body{
    position:absolute;z-index:20;inset-inline-start:0;top:calc(100% + 6px);
    min-width:220px;max-height:280px;overflow-y:auto;
    padding:12px;background:var(--paper);
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 40px -22px rgba(20,18,40,.4);
  }
  /* Closed by DEFAULT, not just when `.collapsed` is present: a group that
     already has an active filter is rendered without that class (see
     pershume_filter_group_tax()), so keying off `.collapsed` alone would leave
     every active group's panel floating over the grid on page load — several of
     them overlapping each other. Hover opens it; so does clicking the trigger,
     because that focuses the <button> inside and lands on :focus-within, and
     clicking anywhere else closes it again. Menubar behaviour, and the
     `.collapsed` toggle the script does is simply unused in this variant. */
  .pv-shop-catrail .fg-body{display:none}
  .pv-shop-catrail .fgroup:hover .fg-body,
  .pv-shop-catrail .fgroup:focus-within .fg-body{display:block}
}

/* ---------------------------------------------------------------------------
 * shop_toolbar — the sort + count strip
 * ------------------------------------------------------------------------- */
/* --- minimal: sort only. The count is decoration here, not information — the
     shop header already prints the total. --- */
.pv-toolbar-minimal .toolbar{
  justify-content:flex-end;border-bottom:0;padding-bottom:6px;margin-bottom:10px;
}
.pv-toolbar-minimal .toolbar .tb-count{display:none}

/* --- sticky: the strip follows the scroll so sorting stays in reach on a long
     archive. Opaque background + hairline, or the cards would show through.
     The offsets track the site header, which is itself sticky at z-index:50 and
     would otherwise swallow this strip: .bar is 64px tall up to 768px and 80px
     (+1px border) from 769px up — hence the switch at 769, not at the 901 used
     by the shop's own layout breakpoint. --- */
.pv-toolbar-sticky .toolbar{
  position:sticky;top:72px;z-index:15;
  padding:12px 14px;margin-bottom:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 22px -18px rgba(20,18,40,.5);
}
@media (min-width:769px){
  .pv-toolbar-sticky .toolbar{top:88px}
}

/* ---------------------------------------------------------------------------
 * filters — how one filter group behaves
 * ------------------------------------------------------------------------- */
/* --- chips: every term becomes a tappable pill. `.crow` is the checkbox-row
     markup; the label text and count ride inside the pill. --- */
.pv-filters-chips .fg-body{display:flex;flex-wrap:wrap;gap:8px}
.pv-filters-chips .crow{
  display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;padding:7px 13px;
  min-height:0;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:12.5px;transition:border-color .2s ease,background .2s ease;
}
.pv-filters-chips .crow:hover{border-color:var(--accent)}
.pv-filters-chips .crow .box{display:none}
/* The base hides the real <input> off-screen and paints .box as its visible
   proxy — which also means .box carries the focus ring. With the box gone the
   pill has to take that job, or keyboard users get no focus indicator at all. */
.pv-filters-chips .crow:focus-within{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,107,179,.25);
}
.pv-filters-chips .crow .ct{flex:none}
.pv-filters-chips .crow .cn{font-size:11px;opacity:.6}
.pv-filters-chips .crow.on{
  border-color:var(--accent);background:rgba(107,107,179,.1);color:var(--accent-deep);font-weight:700;
}
/* the price group is two number inputs, not terms — leave it stacked */
.pv-filters-chips .fgroup[data-group="price"] .fg-body{display:block}

/* --- open: nothing collapses. The chevron goes with the interaction.
     No `pointer-events:none` on .fg-head: it is a real <button>, and killing
     pointer events would still leave it in the tab order — an invisible,
     focusable control that does nothing. Since the rule above forces the body
     open whether or not the script has added `.collapsed`, the click is already
     inert; only the cursor needs to stop promising otherwise. --- */
.pv-filters-open .fgroup.collapsed .fg-body{display:block}
.pv-filters-open .fg-head{cursor:default}
.pv-filters-open .fg-ar{display:none}

/* --- drawer: the phone's off-canvas panel, kept on desktop too. Wider than
     the phone version because there is room for it. --- */
@media (min-width:901px){
  .pv-filters-drawer .shop-grid{display:block}
  .pv-filters-drawer .filter-bar-m{display:flex}
  .pv-filters-drawer .sb-overlay{display:block}
  .pv-filters-drawer .sb-close{display:inline-flex}
  .pv-filters-drawer .sidebar{
    position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:91;
    width:min(420px,92vw);max-height:none;
    display:flex;flex-direction:column;
    background:var(--paper);box-shadow:-18px 0 44px rgba(74,74,178,.14);
    transform:translateX(100%);padding:20px var(--gut) 0;
  }
  .pv-filters-drawer .sidebar.open{transform:translateX(0)}
  .pv-filters-drawer .sb-head{padding-top:0}
  .pv-filters-drawer .sb-apply{position:sticky;bottom:0}
}

/* ---------------------------------------------------------------------------
 * product_gallery — the images column on a product page
 *
 * `grid` and `stacked` need every image visible at once, which flexslider
 * refuses to do (it absolutely-positions all but the active slide). So the
 * theme drops `wc-product-gallery-slider` support for those two variants
 * (see pershume_setup() in functions.php) and WooCommerce then prints the
 * images as plain siblings — which is why these rules can be pure layout.
 * ------------------------------------------------------------------------- */
/* --- grid: all of them at once, two across --- */
.pv-gallery-grid .gallery{max-width:none;position:static}
.pv-gallery-grid .gallery .woocommerce-product-gallery{
  aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:none;
}
.pv-gallery-grid .gallery .woocommerce-product-gallery::before{display:none}
.pv-gallery-grid .gallery .woocommerce-product-gallery__wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;height:auto;
}
.pv-gallery-grid .gallery .woocommerce-product-gallery__image{
  height:auto;padding:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);
}
.pv-gallery-grid .gallery .woocommerce-product-gallery__image img{
  height:auto;aspect-ratio:1/1.1;object-fit:contain;padding:14px;box-sizing:border-box;
}
/* first image runs the full width — it is the one people actually look at */
.pv-gallery-grid .gallery .woocommerce-product-gallery__image:first-child{grid-column:1 / -1}
.pv-gallery-grid .gallery .woocommerce-product-gallery__image:first-child img{aspect-ratio:4/3}
.pv-gallery-grid .gallery .flex-control-thumbs{display:none}

/* --- stacked: one column of full-width images that scrolls past a pinned
     buy column. The gallery must NOT be sticky here — the info column is. --- */
.pv-gallery-stacked .gallery{position:static;top:auto;max-width:none}
.pv-gallery-stacked .gallery .woocommerce-product-gallery{
  aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:none;
}
.pv-gallery-stacked .gallery .woocommerce-product-gallery::before{display:none}
.pv-gallery-stacked .gallery .woocommerce-product-gallery__wrapper{
  display:flex;flex-direction:column;gap:14px;height:auto;
}
.pv-gallery-stacked .gallery .woocommerce-product-gallery__image{
  height:auto;padding:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-2);
}
.pv-gallery-stacked .gallery .woocommerce-product-gallery__image img{
  height:auto;aspect-ratio:4/5;object-fit:contain;padding:clamp(16px,2.4vw,34px);box-sizing:border-box;
}
.pv-gallery-stacked .gallery .flex-control-thumbs{display:none}
/* 1081px, not 901px: single.css carries a `@media (max-width:1080px)` block that
 * flattens .pdp-grid to one column with `position:relative !important` on .info.
 * An un-flagged `position:sticky` loses to that, so the variant would silently do
 * nothing between 901 and 1080 — 1081 is where the base actually restores the
 * two-column grid, and therefore where a pinned buy column starts to mean
 * anything. */
@media (min-width:1081px){
  .pv-gallery-stacked .pdp-grid .info{position:sticky;top:104px;align-self:start}
}

/* --- showcase: keeps the slider, but squares the frame and shrinks the thumb
     row into a quiet strip — a museum mount rather than a carousel. --- */
.pv-gallery-showcase .gallery{max-width:none}
.pv-gallery-showcase .gallery .woocommerce-product-gallery{
  aspect-ratio:1/1;border-radius:4px;border-color:var(--brass);
}
.pv-gallery-showcase .gallery .flex-control-thumbs{
  grid-template-columns:repeat(6,1fr);gap:7px;margin-top:10px;
}
.pv-gallery-showcase .gallery .flex-control-thumbs img{
  border-radius:3px;aspect-ratio:1/1;
}
.pv-gallery-showcase .gallery .flex-control-thumbs img.flex-active{
  border-color:var(--brass);box-shadow:0 0 0 2px rgba(176,141,87,.28);
}

/* ---------------------------------------------------------------------------
 * product_summary — the buy column beside the gallery
 * ------------------------------------------------------------------------- */
/* --- compact: price and add-to-cart in one bordered block, everything else
     tightened. Reads as a booking widget rather than a page.
     NOTE: no `gap` on .info — its children already carry their own
     margin-bottom, and a gap would stack on top of every one of them. --- */
.pv-summary-compact .info .i-name{font-size:clamp(19px,2vw,25px);line-height:1.5}
.pv-summary-compact .info .i-name-en{font-size:12px;opacity:.7}
.pv-summary-compact .info .i-price{
  padding:16px;margin-block:4px 0;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
}
.pv-summary-compact .info .i-price + form.cart,
.pv-summary-compact .info .i-price + .vary,
.pv-summary-compact .info form.cart{margin-top:10px}
.pv-summary-compact .info .i-meta{font-size:12px;opacity:.75}
.pv-summary-compact .info .i-rating{margin-block:0}

/* --- editorial: the name is the headline, the rest recedes. A hairline under
     the title, wide leading, no boxes. --- */
.pv-summary-editorial .info .i-brand{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.pv-summary-editorial .info .i-name{
  font-size:clamp(26px,3.4vw,42px);font-weight:300;line-height:1.28;letter-spacing:-.015em;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.pv-summary-editorial .info .i-name-en{
  font-size:13px;letter-spacing:.1em;color:var(--ink-soft);font-style:italic;
}
.pv-summary-editorial .info .i-price{
  padding:0;background:none;border:0;
}
.pv-summary-editorial .info .i-now{font-weight:400;font-size:clamp(20px,2.2vw,28px)}
.pv-summary-editorial .info .i-meta{
  font-size:12px;line-height:2.1;color:var(--ink-soft);
  padding-top:14px;border-top:1px solid var(--line-soft);
}

/* ---------------------------------------------------------------------------
 * product_tabs — the description / reviews / attributes block
 *
 * WooCommerce's tab script hides the inactive panels with an inline
 * `display:none`, so a variant that shows them all has to out-shout that
 * inline style. This is the one place !important is the honest tool: the
 * alternative is de-registering wc-tabs and reimplementing it.
 * ------------------------------------------------------------------------- */
/* --- vertical: the tab list becomes a rail beside the copy --- */
@media (min-width:901px){
  .pv-tabs-vertical .pershume-tabs .woocommerce-tabs{
    display:grid;grid-template-columns:220px minmax(0,1fr);
    gap:clamp(24px,3vw,48px);align-items:start;
  }
  .pv-tabs-vertical .woocommerce-tabs ul.tabs{
    display:block;margin:0;border-bottom:0;border-inline-end:1px solid var(--line);
    position:sticky;top:104px;
  }
  .pv-tabs-vertical .woocommerce-tabs ul.tabs li a{padding:12px 18px 12px 0}
  .pv-tabs-vertical .woocommerce-tabs ul.tabs li:first-child a{padding-inline-start:0}
  /* The base rule pins the bar to the bottom edge with physical
     `bottom/right/left`. Those are cleared FIRST here, then the logical
     properties place it on the rail — the reverse order would let
     `left:auto;right:auto` cancel the `inset-inline-end` that positions it. */
  .pv-tabs-vertical .woocommerce-tabs ul.tabs li a::after{
    top:auto;bottom:auto;left:auto;right:auto;
    inset-block:0;inset-inline-end:-1px;inset-inline-start:auto;
    width:2px;height:auto;
    transform:scaleY(0);
  }
  .pv-tabs-vertical .woocommerce-tabs ul.tabs li.active a::after{transform:scaleY(1)}
  .pv-tabs-vertical .woocommerce-tabs .woocommerce-Tabs-panel{margin-top:0}
}

/* --- sections: no tabs at all. Every panel open, one after another, each
     under its own heading. --- */
.pv-tabs-sections .woocommerce-tabs ul.tabs{display:none}
.pv-tabs-sections .woocommerce-tabs .woocommerce-Tabs-panel{
  display:block !important;
  padding-top:26px;margin-top:26px;border-top:1px solid var(--line);
}
.pv-tabs-sections .woocommerce-tabs .woocommerce-Tabs-panel:first-of-type{
  padding-top:0;margin-top:0;border-top:0;
}
.pv-tabs-sections .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child{
  font-size:19px;font-weight:800;margin:0 0 16px;
}

/* ---------------------------------------------------------------------------
 * cart_layout
 * ------------------------------------------------------------------------- */
/* --- table: the plain stacked list — items first, totals underneath, full
     width. Overrides the base two-column desktop grid. --- */
@media (min-width:900px){
  .pv-cart-table .cart-layout{display:flex;flex-direction:column;gap:clamp(28px,4vw,42px)}
  .pv-cart-table .cart-layout .summary{position:static;max-width:none}
  .pv-cart-table .cart-collaterals .cart_totals{max-width:520px;margin-inline-start:auto}
}

/* --- cards: each line becomes a standalone tile in a two-across grid; the
     photo sits above the text instead of beside it.
     The base treats .cart-list as ONE panel — border, radius, overflow:hidden,
     background — with the rows divided by a bottom border. All of that has to
     come off, or the tiles would sit inside an outer box with a stray rule
     running between them. --- */
.pv-cart-cards .cart-list{
  display:grid;grid-template-columns:1fr;gap:12px;
  border:0;border-radius:0;overflow:visible;background:none;
}
.pv-cart-cards .citem,
.pv-cart-cards .citem:last-child{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--paper);
}
.pv-cart-cards .ci-photo{width:100%;height:auto;aspect-ratio:4/3}
.pv-cart-cards .ci-photo img{width:100%;height:100%;object-fit:contain}
.pv-cart-cards .ci-price{
  flex-direction:row;align-items:baseline;justify-content:space-between;
  text-align:start;padding-top:12px;border-top:1px solid var(--line-soft);
}
@media (min-width:700px){
  .pv-cart-cards .cart-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- split: no rules, deliberately. It is the registry default, and the base
     checkout.css already paints exactly this shape (two columns + sticky totals
     from 900px up). Giving the default its own rules — e.g. pulling the grid
     down to 760px — would mean upgrading the theme silently restyled every cart
     that had never opened the panel. The default is the thing you match, not a
     variant you get to improve. --- */

/* ---------------------------------------------------------------------------
 * checkout_layout
 * ------------------------------------------------------------------------- */
/* --- one-col: form first, order summary beneath it, one measure throughout.
     Undoes the desktop grid AND the sticky sidebar.
     (.ck-osum-bar needs no rule: the base only shows the collapse bar inside
     `max-width:899px`, so above this breakpoint it is already display:none.) --- */
@media (min-width:900px){
  .pv-checkout-one-col .ck-form{display:flex;flex-direction:column;gap:0}
  .pv-checkout-one-col .ck-form > #customer_details.ck-customer{grid-column:auto;grid-row:auto;order:1}
  .pv-checkout-one-col .ck-form > .ck-summary{
    display:block;grid-column:auto;grid-row:auto;position:static;order:2;margin-top:8px;
  }
  .pv-checkout-one-col .ck-page{max-width:860px;margin-inline:auto}
}

/* --- stepped: the numbered pill each .fsec already carries is promoted from a
     small grey chip on the trailing edge into a real step marker on the leading
     edge, so the cards read as a numbered sequence.
     No connector line between the markers, deliberately: the cards are separate
     elements with a 20px margin between them and no shared parent to hang a
     continuous rule on (.fsec-address lives inside .woocommerce-billing-fields,
     the others are direct children of .ck-form), so any line would break at
     every gap and read as a rendering fault. The aligned circles carry the
     sequence on their own. --- */
.pv-checkout-stepped .fsec,
.pv-checkout-stepped .ck-page .woocommerce-additional-fields{
  position:relative;overflow:visible;
  padding-inline-start:clamp(26px,3vw,42px);
}
/* Centred on the 38px .fsec-ico rather than flush with the padding edge — the
   marker and the section's own icon should sit on one line. */
.pv-checkout-stepped .fsec-head::after,
.pv-checkout-stepped .ck-page .woocommerce-additional-fields > h3::after{
  position:absolute;inset-inline-start:0;
  top:calc(clamp(20px,2.6vw,28px) + 6px);
  margin:0;padding:0;min-width:0;
  width:27px;height:27px;display:grid;place-items:center;
  border-radius:50%;background:var(--accent);color:#fff;
  font-size:12px;font-weight:800;
}
/* the marker is positioned against the card, so the head must not create its
   own containing block */
.pv-checkout-stepped .fsec-head,
.pv-checkout-stepped .ck-page .woocommerce-additional-fields > h3{position:static}

/* ---------------------------------------------------------------------------
 * account_nav
 *
 * The base rules carry two classes (`.acc-nav.woocommerce-MyAccount-navigation`)
 * to beat woocommerce.css, so these repeat both — otherwise a one-class
 * selector loses on specificity no matter what order the sheets load in.
 *
 * Both variants start at 981px, not the 769px used elsewhere: account.css turns
 * the sidebar into a horizontal pill scroller at `max-width:980px`, complete
 * with negative inline margins and `overflow-x:auto` on the <ul>. 981px is the
 * only width above which a vertical sidebar actually exists to replace — below
 * it the base is already the strip that `tabs` wants, and `tiles` would inherit
 * that overflow and bleed out of the gutter.
 * ------------------------------------------------------------------------- */
/* --- tabs: a horizontal strip above the content, full width --- */
@media (min-width:981px){
  .pv-accnav-tabs .acc-shell{grid-template-columns:1fr}
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation{
    position:static;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
    border-bottom:1px solid var(--line);
  }
  .pv-accnav-tabs .acc-user{
    padding:0 0 14px;margin-bottom:0;border-bottom:0;
  }
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation ul{
    display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  }
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation li{flex:0 0 auto}
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation li a{
    white-space:nowrap;border-radius:10px 10px 0 0;padding:12px 16px;
    border-bottom:2px solid transparent;
  }
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation li.is-active a{
    background:none;color:var(--accent-deep);border-bottom-color:var(--accent);
  }
  .pv-accnav-tabs .acc-nav.woocommerce-MyAccount-navigation li.is-active a .acc-nav-badge{
    background:var(--line-soft);color:var(--ink);
  }
}

/* --- tiles: big icon cards. --- */
@media (min-width:981px){
  .pv-accnav-tiles .acc-shell{grid-template-columns:1fr}
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation{
    position:static;padding:0;border:0;background:none;box-shadow:none;
  }
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation ul{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;
  }
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation li a{
    flex-direction:column;align-items:flex-start;gap:12px;
    padding:20px 18px;min-height:112px;
    border:1px solid var(--line);border-radius:16px;background:var(--paper);
    transition:border-color .25s ease,transform .25s ease;
  }
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation li a:hover{
    border-color:var(--accent);transform:translateY(-2px);background:var(--paper);
  }
  .pv-accnav-tiles .acc-nav .acc-nav-ic{width:26px;height:26px}
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation li.is-active a{
    background:var(--paper);color:var(--accent-deep);border-color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation li.is-active a .acc-nav-ic{color:var(--accent-deep)}
  .pv-accnav-tiles .acc-nav.woocommerce-MyAccount-navigation li.is-active a .acc-nav-badge{
    background:var(--accent);color:#fff;
  }
  .pv-accnav-tiles .acc-content{margin-top:clamp(20px,3vw,34px)}
}

/* ---------------------------------------------------------------------------
 * breadcrumb
 * ------------------------------------------------------------------------- */
/* --- chips: each hop becomes a small pill, the slashes go --- */
.pv-crumb-chips .pershume-crumb{border-bottom:0;background:none}
.pv-crumb-chips .pershume-crumb .wrap{gap:6px;min-height:0;padding-block:16px 4px}
.pv-crumb-chips .pershume-crumb .sep{display:none}
.pv-crumb-chips .pershume-crumb a,
.pv-crumb-chips .pershume-crumb .woocommerce-breadcrumb > *{
  padding:5px 12px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;
}
.pv-crumb-chips .pershume-crumb a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* --- hidden: gone, wrapper and all. `display:none` on the <nav> itself, so no
     border, no min-height, no gap is left behind. --- */
.pv-crumb-hidden .pershume-crumb{display:none}


/* ============================================================================
 * THE SECTION CARDS — every band on the page, the header strips and the footer
 *
 * Everything above this line was chosen from the «چیدمان» and «فروشگاه» tabs.
 * These are the twenty-one selects on the «بخش‌ها» tab, one per section card,
 * so an admin who turns a section ON can also decide what it looks like without
 * touching a stylesheet. Same contract as the rest of the file: the shipped
 * default gets no rules, so an untouched site is byte-identical.
 *
 * Two of these override CSS that lives INLINE in PHP rather than in style.css:
 *   - `.phs-*` (slider) is printed in a <style id="phs-css"> block by
 *     inc/hero-slider.php;
 *   - `.pwa-*` (whatsapp) in inc/whatsapp-bulk.php, `.pershume-wallet-balance`
 *     via a style="" attribute in inc/wallet-system.php.
 * A body-class selector is (0,2,0) and beats a bare class (0,1,0) whatever the
 * source order, which is why the slider and whatsapp rules need no !important —
 * but the wallet's style="" attribute is (1,0,0,0) and DOES.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * slider  (.phs — inc/hero-slider.php)
 * ------------------------------------------------------------------------- */

/* --- dark: kill the per-slide gradient and drop the whole stage into ink, so
     the bottle is the only lit thing on the page. The orbs stay but go to a
     dim rim-light instead of a colour wash. --- */
.pv-slider-dark .phs-bg{background:linear-gradient(160deg,#131019 0%,#1d1828 55%,#0e0c14 100%)!important}
.pv-slider-dark .phs-orb{opacity:.22;filter:blur(74px)}
.pv-slider-dark .phs-scrim{background:radial-gradient(85% 70% at 22% 50%,transparent,rgba(0,0,0,.55) 78%)}
.pv-slider-dark .phs-word{color:rgba(255,255,255,.035)}
.pv-slider-dark .phs-grain{opacity:.22}
.pv-slider-dark .phs-eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.pv-slider-dark .phs-sub{color:rgba(255,255,255,.72)}
.pv-slider-dark .phs-spot::before{opacity:.9}

/* --- simple: no atmosphere at all. The orbs, the giant ghost word and the
     film grain go; what is left is a flat brand panel with type on it. For a
     shop whose catalogue photography should carry the page. --- */
.pv-slider-simple .phs-orb,
.pv-slider-simple .phs-grain,
.pv-slider-simple .phs-word{display:none}
.pv-slider-simple .phs-scrim{background:linear-gradient(90deg,transparent,rgba(0,0,0,.28))}
.pv-slider-simple .phs-bottle{animation:none;-webkit-box-reflect:none;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
.pv-slider-simple .phs-spot::before{display:none}
.pv-slider-simple .phs-title{text-shadow:none}
.pv-slider-simple .phs{height:clamp(340px,46vh,460px)}


/* ---------------------------------------------------------------------------
 * marquee  (.marquee — front-page.php)
 * ------------------------------------------------------------------------- */

/* --- chips: the continuous ribbon of names becomes discrete bordered pills.
     The hairline separators go with it (they read as debris between pills). --- */
.pv-marquee-chips .marquee{background:var(--paper-2)}
.pv-marquee-chips .marquee-track{padding:14px 0;gap:10px}
.pv-marquee-chips .marquee-cell{
  padding:8px 20px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);letter-spacing:.14em;
}
.pv-marquee-chips .marquee-cell::before{display:none}

/* --- hidden: the strip and both its hairlines, so no 1px seam is left. --- */
.pv-marquee-hidden .marquee{display:none}


/* ---------------------------------------------------------------------------
 * flash  (.flash — front-page.php)
 * ------------------------------------------------------------------------- */

/* --- grid: the deals stop scrolling sideways on mobile and become a real
     grid at every width; on desktop the three columns get more air. --- */
.pv-flash-grid .flash-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;overflow:visible}
@media (min-width:769px){
  .pv-flash-grid .flash-row{grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,32px)}
}
.pv-flash-grid .flash-row .pcard{width:100%;flex:initial}

/* --- band: the section stops being «plain page between hairlines» and becomes
     a dark full-bleed band. The countdown reads as urgency instead of trim. --- */
.pv-flash-band .flash{
  background:linear-gradient(165deg,var(--brand-shade) 0%,var(--brand-night) 100%);
  border-block-color:transparent;color:#fff;
}
.pv-flash-band .flash-title h2,
.pv-flash-band .flash-head .label{color:#fff}
.pv-flash-band .flash-title h2 .bolt{color:var(--gold-soft)}
.pv-flash-band .flash-sep{background:linear-gradient(rgba(255,255,255,.1),var(--gold-soft),rgba(255,255,255,.1))}
.pv-flash-band .flash-countdown .cd-lbl{color:rgba(255,255,255,.72)}
.pv-flash-band .flash-clock b{background:rgba(255,255,255,.12);color:#fff}
.pv-flash-band .flash-clock i{color:var(--gold-soft)}
.pv-flash-band .flash-all{color:var(--gold-soft)}


/* ---------------------------------------------------------------------------
 * finder  (.scent-sec — the عطریاب band and the category tiles beside it)
 * ------------------------------------------------------------------------- */

/* --- banner: the promo card stops being a column and spans the full width as
     a wide banner, with the tiles in a row underneath. On a catalogue-heavy
     shop this puts the tiles first-class instead of squeezing them to half. --- */
@media (min-width:901px){
  .pv-finder-banner .scent-grid{grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px)}
  .pv-finder-banner .scent-promo{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:clamp(18px,2.4vw,34px);padding:clamp(22px,2.2vw,32px) clamp(26px,3vw,44px);
  }
  .pv-finder-banner .scent-promo .sp-sub,
  .pv-finder-banner .scent-promo .sp-hints{display:none}
  .pv-finder-banner .scent-promo .sp-cta{margin-top:0;white-space:nowrap}
  .pv-finder-banner .scent-promo .sp-badge{grid-column:2;justify-self:start}
  .pv-finder-banner .scent-promo .sp-title{grid-column:2;grid-row:1;align-self:end}
  .pv-finder-banner .scent-cats{grid-template-columns:repeat(4,1fr)}
}

/* --- quiet: drop the loud gradient card entirely and let the band be nothing
     but the category tiles. The عطریاب is still reachable from the header and
     the FAB, so nothing is lost — this is for a shop that does not want a
     purple billboard on its homepage. --- */
.pv-finder-quiet .scent-sec{background:var(--paper);border-block-color:var(--line-soft)}
.pv-finder-quiet .scent-promo{display:none}
.pv-finder-quiet .scent-grid{grid-template-columns:1fr}
@media (min-width:901px){
  .pv-finder-quiet .scent-cats{grid-template-columns:repeat(4,1fr)}
}


/* ---------------------------------------------------------------------------
 * packs  (.pk-grid — inc/packs.php)
 * ------------------------------------------------------------------------- */

/* --- cards: one pack per row, the collage on one side and the copy on the
     other. Fewer, larger, more deliberate. --- */
@media (min-width:861px){
  .pv-packs-cards .pk-grid{grid-template-columns:1fr;gap:18px}
  .pv-packs-cards .pk-card{
    display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
    gap:clamp(20px,3vw,44px);padding:clamp(20px,2vw,28px);
  }
  .pv-packs-cards .pk-head{grid-column:1;grid-row:1}
  .pv-packs-cards .pk-foot{grid-column:1;grid-row:2;margin-top:14px}
  .pv-packs-cards .pk-collage{grid-column:2;grid-row:1 / span 2;margin:0}
}

/* --- rail: a horizontal scroller, same idiom as «بازدیدهای اخیر». Right for a
     shop with eight packs, where a 3-up grid becomes three ragged rows. --- */
.pv-packs-rail .pk-grid{
  display:flex;gap:clamp(14px,1.6vw,20px);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:3px 0 4px;scroll-snap-type:x mandatory;
}
.pv-packs-rail .pk-grid::-webkit-scrollbar{display:none}
.pv-packs-rail .pk-card{flex:0 0 clamp(280px,30vw,340px);scroll-snap-align:start}


/* ---------------------------------------------------------------------------
 * collection  (.prod-tabs — the پرفروش/جدید/تخفیف switcher)
 * ------------------------------------------------------------------------- */

/* --- bar: the centred pill capsule becomes a full-width underlined row, the
     way an editorial site indexes its categories. --- */
.pv-collection-bar .prod-tabs{
  width:100%;max-width:none;margin-inline:0;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:0;gap:0;justify-content:flex-start;
}
.pv-collection-bar .prod-tab{
  border-radius:0;padding:14px 22px;font-size:14.5px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.pv-collection-bar .prod-tab.is-active{
  background:transparent;color:var(--accent-deep);box-shadow:none;
  border-bottom-color:var(--accent);
}
.pv-collection-bar .prod-tab.is-active .pt-n{background:rgba(107,107,179,.12);color:var(--accent-deep)}

/* --- min: no capsule, no chip, no count. Just three words. --- */
.pv-collection-min .prod-tabs{
  background:transparent;border:0;border-radius:0;padding:0;
  gap:clamp(18px,2.4vw,34px);margin-bottom:26px;
}
.pv-collection-min .prod-tab{
  padding:4px 0;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.pv-collection-min .prod-tab.is-active{
  background:transparent;color:var(--ink);box-shadow:none;
  text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;
}
.pv-collection-min .prod-tab .pt-n{display:none}


/* ---------------------------------------------------------------------------
 * recent  (.recent-row)
 * ------------------------------------------------------------------------- */

/* --- grid: stop the sideways scroll; show four at once and no more. --- */
.pv-recent-grid .recent-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;overflow:visible}
@media (min-width:769px){
  .pv-recent-grid .recent-row{grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,22px)}
}
.pv-recent-grid .recent-row .pcard{flex:initial;width:100%}

/* --- wide: still a rail, but each card is wide enough to read as a feature
     rather than a thumbnail, and it snaps. --- */
.pv-recent-wide .recent-row{scroll-snap-type:x mandatory;gap:clamp(16px,2vw,24px)}
.pv-recent-wide .recent-row .pcard{flex:0 0 clamp(300px,34vw,400px);scroll-snap-align:start}


/* ---------------------------------------------------------------------------
 * story  (.story — «دربارهٔ ما»)
 * ------------------------------------------------------------------------- */

/* --- stack: photo on top, centred text under it. Reads as a statement page
     rather than an about-us column. --- */
.pv-story-stack .story-in{
  grid-template-columns:1fr;gap:clamp(26px,4vw,44px);
  max-width:820px;margin-inline:auto;text-align:center;
}
.pv-story-stack .story-media{order:-1;max-width:340px}
.pv-story-stack .story-body .label{margin-inline:auto}
.pv-story-stack .story-cta{margin-inline:auto}

/* --- min: no image at all, just the words, tight and centred. Matches the
     .story--nomedia state the template already produces when there is no
     photo, so both routes to «no image» look the same. --- */
.pv-story-min .story-media{display:none}
.pv-story-min .story-in{
  grid-template-columns:1fr;max-width:720px;margin-inline:auto;text-align:center;
  padding-block:clamp(46px,7vh,84px);
}
.pv-story-min .story-body .label{margin-inline:auto}
.pv-story-min .story-body p.lead{margin-inline:auto}
.pv-story-min .story-cta{margin-inline:auto}


/* ---------------------------------------------------------------------------
 * magazine  (.mag-grid)
 * ------------------------------------------------------------------------- */

/* --- list: one post per row, cover left, text right. Right for long titles
     and a blog with few posts. --- */
.pv-magazine-list .mag-grid{grid-template-columns:1fr}
.pv-magazine-list .mag-grid .mcard{border-inline-start:0}
@media (min-width:721px){
  .pv-magazine-list .mcard{flex-direction:row;align-items:stretch}
  .pv-magazine-list .mcard-cover{flex:0 0 34%;aspect-ratio:auto;border-bottom:0;border-inline-end:1px solid var(--line-soft)}
  .pv-magazine-list .mcard-body{flex:1;justify-content:center}
  .pv-magazine-list .mcard--noimg::before{
    height:auto;width:5px;position:absolute;inset-block:0;inset-inline-start:0;
  }
}
.pv-magazine-list .mcard:hover{transform:none;box-shadow:0 14px 30px rgba(74,74,178,.08)}

/* --- showcase: the newest post takes the full width as a feature; the rest
     stay a smaller grid beneath it. --- */
@media (min-width:861px){
  .pv-magazine-showcase .mag-grid{grid-template-columns:repeat(3,1fr)}
  .pv-magazine-showcase .mag-grid .mcard:first-child{
    grid-column:1 / -1;flex-direction:row;align-items:stretch;border-inline-start:0;
  }
  .pv-magazine-showcase .mag-grid .mcard:first-child .mcard-cover{
    flex:0 0 46%;aspect-ratio:auto;border-bottom:0;border-inline-end:1px solid var(--line-soft);
  }
  .pv-magazine-showcase .mag-grid .mcard:first-child .mcard-body{
    flex:1;justify-content:center;padding:clamp(30px,3.4vw,52px);
  }
  .pv-magazine-showcase .mag-grid .mcard:first-child .mtitle{font-size:clamp(24px,2.6vw,34px)}
  /* the first card ate a slot, so the 3n+1 border reset shifts by one */
  .pv-magazine-showcase .mag-grid .mcard:nth-child(3n+1){border-inline-start:1px solid var(--line)}
  .pv-magazine-showcase .mag-grid .mcard:nth-child(3n+2){border-inline-start:0}
}


/* ---------------------------------------------------------------------------
 * wallet  (.pershume-wallet-balance — inc/wallet-system.php)
 *
 * The base look is a purple gradient written as a style="" attribute, which is
 * specificity (1,0,0,0). Nothing in a stylesheet outranks that, so every
 * property these variants replace carries !important — the one place in this
 * file where it is not a stylistic choice.
 * ------------------------------------------------------------------------- */

/* --- plain: a white card with a hairline, so the wallet stops being the
     loudest thing in an account page built from quiet tables. --- */
.pv-wallet-plain .pershume-wallet-balance{
  background:var(--paper)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-14)!important;
  box-shadow:0 1px 2px rgba(20,18,40,.04)!important;
}
.pv-wallet-plain .pershume-wallet-balance .button{
  background:var(--accent)!important;color:#fff!important;
}

/* --- strip: not a card at all — a single accent-ruled line above the
     transaction table, balance right, label left. --- */
.pv-wallet-strip .pershume-wallet-balance{
  background:transparent!important;color:var(--ink)!important;
  border:0!important;border-bottom:2px solid var(--accent)!important;
  border-radius:0!important;padding:0 0 14px!important;margin-bottom:22px!important;
  display:flex!important;align-items:baseline!important;justify-content:space-between!important;
  gap:16px;flex-wrap:wrap;
}
.pv-wallet-strip .pershume-wallet-balance h3{font-size:12px!important;letter-spacing:.14em;color:var(--ink-soft)}
.pv-wallet-strip .pershume-wallet-balance p{color:var(--accent-deep)}
.pv-wallet-strip .pershume-wallet-balance .button{
  background:transparent!important;color:var(--accent-deep)!important;
  border:1px solid var(--line)!important;padding:7px 15px!important;
}


/* ---------------------------------------------------------------------------
 * chat  (.fab — footer.php)
 * ------------------------------------------------------------------------- */

/* --- pill: a labelled lozenge instead of a bare circle. Wider target, and it
     says what it is. The label comes from the button's own `title`, which is
     already translated and already the accessible name — hardcoding a Persian
     string here would ship untranslatable copy inside a stylesheet. --- */
.pv-chat-pill .fab{
  width:auto;height:52px;border-radius:var(--r-pill);
  padding:0 20px 0 16px;gap:9px;
}
.pv-chat-pill .fab::after{
  content:attr(title);font-family:inherit;font-size:13.5px;font-weight:700;
  white-space:nowrap;
}
@media (max-width:560px){
  /* on a phone the label would fight the whatsapp FAB for the same corner */
  .pv-chat-pill .fab{width:50px;padding:0;justify-content:center}
  .pv-chat-pill .fab::after{display:none}
}

/* --- hidden: gone. Kept as a variant as well as a toggle because a shop may
     want the chat feature live (its scripts, its inbox) with no floating
     button on the front end. --- */
.pv-chat-hidden .fab{display:none}


/* ---------------------------------------------------------------------------
 * whatsapp_bulk  (.pwa-fab — inline CSS in inc/whatsapp-bulk.php)
 * ------------------------------------------------------------------------- */

/* --- pill: the default is already a labelled lozenge on desktop and a circle
     on mobile. This variant keeps the label at every width and anchors it to
     the bottom edge, next to the chat FAB rather than above it. --- */
.pv-pwa-pill .pwa-fab{bottom:26px;inset-inline-end:22px}
@media (max-width:560px){
  .pv-pwa-pill .pwa-fab{
    padding:0 18px;height:48px;width:auto;border-radius:var(--r-pill);justify-content:flex-start;
  }
  .pv-pwa-pill .pwa-fab-label{display:inline}
  .pv-pwa-pill .pwa-fab-ic{width:26px;height:26px}
  .pv-pwa-pill .pwa-fab-ic svg{width:24px;height:24px}
}

/* --- none: the modal still exists and still opens from any other trigger, but
     the floating button and its pulse ring are gone. --- */
.pv-pwa-none .pwa-fab{display:none}


/* ---------------------------------------------------------------------------
 * promo_bar  (.promo — header.php)
 * ------------------------------------------------------------------------- */

/* --- ghost: a hairline-bounded neutral strip instead of a solid accent slab.
     For a shop whose brand colour is loud enough already. --- */
.pv-promo-ghost .promo{
  background:var(--paper-2);color:var(--ink-soft);
  border-bottom:1px solid var(--line);font-weight:500;
}
.pv-promo-ghost .promo b{color:var(--accent-deep)}

/* --- marquee: the announcement scrolls. Animating `text-indent` rather than
     transforming the bar itself, because `.promo` holds a bare text node with
     no inner element to move — and a transformed element is NOT clipped by its
     own overflow:hidden, so translating it would push the text across the
     viewport instead of through the strip. Text overflow *is* clipped, so this
     scrolls inside the bar exactly as it should. --- */
.pv-promo-marquee .promo{overflow:hidden;white-space:nowrap;text-align:start}
@media (prefers-reduced-motion:no-preference){
  .pv-promo-marquee .promo{animation:pvPromoSlide 22s linear infinite}
  .pv-promo-marquee .promo:hover{animation-play-state:paused}
  @keyframes pvPromoSlide{
    from{text-indent:100%}
    to{text-indent:-100%}
  }
}


/* ---------------------------------------------------------------------------
 * header_util  (.utilbar — header.php)
 * ------------------------------------------------------------------------- */

/* --- bold: the strip takes the brand colour and the shipping line reads as a
     claim rather than fine print. --- */
.pv-hutil-bold .utilbar{
  background:var(--brand-deep);border-bottom-color:transparent;color:#fff;
  font-size:12.5px;
}
.pv-hutil-bold .utilbar .wrap{height:44px}
.pv-hutil-bold .utilbar a{color:rgba(255,255,255,.82)}
.pv-hutil-bold .utilbar a:hover{color:#fff}
.pv-hutil-bold .utilbar .u-left b{color:var(--gold-soft)}
.pv-hutil-bold .utilbar .u-sep{color:rgba(255,255,255,.28)}

/* --- hidden: the whole strip, its border included. --- */
.pv-hutil-hidden .utilbar{display:none}


/* ---------------------------------------------------------------------------
 * header_search  (.hdr-search / .search-toggle — header.php)
 * ------------------------------------------------------------------------- */

/* --- box: a rounded filled field instead of an underline. --- */
.pv-hsearch-box .hdr-search{
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface-5);padding:8px 16px;
}
.pv-hsearch-box .hdr-search:focus-within{
  border:1px solid var(--accent);background:var(--paper);
  box-shadow:0 0 0 3px rgba(107,107,179,.1);
}

/* --- icon: the field collapses behind the magnifier at EVERY width, not just
     on phones. The header keeps the mobile behaviour it already has (theme.js
     toggles `header.search-open`), so this needs no new JS — it just stops the
     desktop breakpoint from forcing the bar back open. --- */
@media (min-width:481px){
  .pv-hsearch-icon .search-toggle{display:grid}
  .pv-hsearch-icon .hdr-search{
    position:absolute;top:100%;inset-inline:0;margin:0;min-width:0;
    background:var(--paper);border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r-14) var(--r-14);padding:12px 16px;
    box-shadow:0 18px 30px rgba(30,24,60,.12);display:none;
  }
  .pv-hsearch-icon header.search-open .hdr-search{display:flex}
  /* the dropdown positions against .hdr-search, which is now absolute itself */
  .pv-hsearch-icon .hdr-search{position:absolute}
}


/* ---------------------------------------------------------------------------
 * footer_about  (.f-about — footer.php, first column of .f-grid)
 * ------------------------------------------------------------------------- */

/* --- card: the paragraph sits in a tinted panel so the first column reads as
     a brand statement rather than stray body text. --- */
.pv-fabout-card .f-about{
  background:var(--surface-5);border:1px solid var(--line-soft);
  border-radius:var(--r-14);padding:18px 20px;max-width:none;
  font-size:12.5px;line-height:1.95;
}

/* --- hidden: the paragraph only. The logo above it stays, so the column keeps
     its purpose and the four-column grid keeps its shape. --- */
.pv-fabout-hidden .f-about{display:none}


/* ---------------------------------------------------------------------------
 * footer_seals  (.seals — footer.php trust row)
 * ------------------------------------------------------------------------- */

/* --- inline: strip the frames. The three official badges sit directly on the
     page, smaller, the way most Iranian shops show them. --- */
.pv-fseals-inline .seals{gap:18px;align-items:center}
.pv-fseals-inline .seals .seal-real{
  background:transparent;border:0;padding:0;min-height:0;min-width:0;
}
.pv-fseals-inline .seals .seal-real img{max-height:74px}
.pv-fseals-inline .seal-enamad{width:auto}

/* --- hidden: the seals go and the trust row collapses to whatever else is in
     it. `.f-trust-in` is `auto 1fr`, so with the first child gone the payment
     block would sit in a phantom second column — reset it to one. --- */
.pv-fseals-hidden .seals{display:none}
.pv-fseals-hidden .f-trust-in{grid-template-columns:1fr}
.pv-fseals-hidden .pay-block{justify-self:start}


/* ---------------------------------------------------------------------------
 * footer_pay  (.pay-block — footer.php trust row)
 * ------------------------------------------------------------------------- */

/* --- strip: the chips grow, the heading sits above them in full weight, and
     the block spans instead of hugging the end of the row. --- */
.pv-fpay-strip .pay-block{justify-self:stretch;gap:14px}
.pv-fpay-strip .pay-block .pb-h{
  font-size:13px;letter-spacing:.04em;text-transform:none;
  color:var(--ink);font-weight:700;
}
.pv-fpay-strip .pay-chips{gap:12px}
.pv-fpay-strip .pchip{
  padding:11px 20px;font-size:13.5px;border-radius:var(--r-14);
  background:var(--surface-5);
}

/* --- hidden: same collapse rule as the seals, mirrored. --- */
.pv-fpay-hidden .pay-block{display:none}
.pv-fpay-hidden .f-trust-in{grid-template-columns:1fr}


/* ---------------------------------------------------------------------------
 * footer_contact  (.f-col.f-contact — footer.php)
 * ------------------------------------------------------------------------- */

/* --- stack: the contact column becomes a bordered card, so the details read
     as one unit instead of four loose lines beside two link columns. --- */
.pv-fcontact-stack .f-contact{
  background:var(--surface-5);border:1px solid var(--line-soft);
  border-radius:var(--r-16);padding:22px 22px 18px;align-self:start;
}
.pv-fcontact-stack .f-contact h5{margin-bottom:14px}
.pv-fcontact-stack .f-contact p{margin-bottom:9px}
.pv-fcontact-stack .f-contact .socials{margin-top:16px!important}

/* --- hidden: the column goes, and the four-column footer becomes three so no
     empty track is left at the end of the row. --- */
.pv-fcontact-hidden .f-contact{display:none}
@media (min-width:861px){
  .pv-fcontact-hidden .f-grid{grid-template-columns:1.8fr 1fr 1fr}
}


/* ---------------------------------------------------------------------------
 * footer_bottom  (.f-bottom — the copyright line)
 * ------------------------------------------------------------------------- */

/* --- center: copyright and the «made with» label stack, centred. --- */
.pv-fbottom-center .f-bottom{
  flex-direction:column;justify-content:center;text-align:center;gap:10px;
}

/* --- hidden: the line and its top border, so the footer ends on the link
     grid with no stray rule beneath it. --- */
.pv-fbottom-hidden .f-bottom{display:none}


/* ---------------------------------------------------------------------------
 * shop_head  (.shop-head — the archive masthead band)
 *
 * Markup (archive-product.php):
 *   .shop-head > .wrap.shop-head-row > .sh-main( .sh-eyebrow, h1, .sh-sub|.sh-desc )
 *                                    + .sh-count( .shc-n, .shc-lb )
 *
 * Every rule is scoped with :not(.brand-head). Brand archives print their own
 * header into $GLOBALS['pershume_brand_header'] and reuse the .shop-head box
 * with a LIGHT hero — restyling the band there would fight shop.css's own
 * .brand-head overrides and leave dark-on-dark text.
 *
 * Specificity note: the base rules live in shop.css as .shop-head / .sh-count
 * (0,1,0) — including the ones inside `@media (min-width:600px)`. Every
 * selector below carries the body class as well, so it wins on specificity
 * regardless of source order and no !important is needed.
 * ------------------------------------------------------------------------- */

/* --- center: one centred column. The count stops being a side figure and
     becomes a footnote under the title, so the eyebrow's brass marker and the
     count's inline start border both have to be re-hung. --- */
.pv-shophead-center .shop-head:not(.brand-head) .shop-head-row{
  flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.pv-shophead-center .shop-head:not(.brand-head) .sh-eyebrow{justify-content:center}
.pv-shophead-center .shop-head:not(.brand-head) .sh-sub,
.pv-shophead-center .shop-head:not(.brand-head) .sh-desc{
  margin-inline:auto;
}
.pv-shophead-center .shop-head:not(.brand-head) .sh-count{
  align-self:center;align-items:center;
  padding-inline-start:0;border-inline-start:0;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.28);
}

/* --- minimal: no band at all — the title sits on the page background and the
     count goes. Text colours have to come back from white, and the brass rule
     under the band goes with it, otherwise a hairline floats with nothing
     above it. --- */
.pv-shophead-minimal .shop-head:not(.brand-head){
  background:none;border-bottom:1px solid var(--line);
  padding-block:clamp(26px,4vw,40px) clamp(18px,3vw,26px);
}
.pv-shophead-minimal .shop-head:not(.brand-head)::after{display:none}
.pv-shophead-minimal .shop-head:not(.brand-head) h1{color:var(--ink);font-weight:700}
.pv-shophead-minimal .shop-head:not(.brand-head) .sh-sub,
.pv-shophead-minimal .shop-head:not(.brand-head) .sh-desc{color:var(--ink-soft)}
.pv-shophead-minimal .shop-head:not(.brand-head) .sh-count{display:none}

/* --- banner: a taller stage, and the figure becomes a framed plate instead of
     a ruled column — the border-inline-start would read as a stray line once
     it is boxed. --- */
.pv-shophead-banner .shop-head:not(.brand-head){
  padding-block:clamp(56px,11vw,96px) clamp(40px,7vw,64px);
}
.pv-shophead-banner .shop-head:not(.brand-head) h1{
  font-size:clamp(36px,9vw,60px);
}
.pv-shophead-banner .shop-head:not(.brand-head) .sh-count{
  padding:18px 26px;border-inline-start:0;
  border:1px solid rgba(255,255,255,.3);border-radius:14px;
  background:rgba(255,255,255,.07);
  align-items:center;text-align:center;
}

/* --- compact: a thin title strip. Eyebrow and subtitle are the two things a
     strip has no room for; the count stays but shrinks to the title's line so
     the row keeps its balance. --- */
.pv-shophead-compact .shop-head:not(.brand-head){
  padding-block:clamp(16px,2.6vw,24px);
}
.pv-shophead-compact .shop-head:not(.brand-head) .shop-head-row{
  flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
}
.pv-shophead-compact .shop-head:not(.brand-head) .sh-eyebrow,
.pv-shophead-compact .shop-head:not(.brand-head) .sh-sub,
.pv-shophead-compact .shop-head:not(.brand-head) .sh-desc{display:none}
.pv-shophead-compact .shop-head:not(.brand-head) h1{
  font-size:clamp(20px,4.4vw,28px);font-weight:700;
}
.pv-shophead-compact .shop-head:not(.brand-head) .sh-count{
  flex-direction:row;align-items:baseline;gap:7px;
  align-self:center;padding-inline-start:16px;
}
.pv-shophead-compact .shop-head:not(.brand-head) .shc-n{font-size:20px}