/* ===================================================================
   GOLVARY - split Homme | Femme hero  ([golvary_hero])
   Uses the shared charte tokens from golvary.css (--gv-*).
   =================================================================== */

.gv-hero{
  --gv-char:#131313; --gv-char-900:#0b0b0b;
  display:flex;position:relative;
  min-height:clamp(520px,82vh,860px);
  overflow:hidden;
  border-bottom:1px solid rgba(244,239,227,.14);
  font-family:var(--gv-sans);
  color:var(--gv-cream);
}
.gv-hero *{box-sizing:border-box}

.gv-panel{
  flex:1 1 0;position:relative;overflow:hidden;min-width:0;
  display:flex;align-items:center;
  transition:flex-grow .8s cubic-bezier(.22,.61,.36,1);
}
.gv-panel__bg{position:absolute;inset:0;z-index:0;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.gv-panel__bg::after{content:"";position:absolute;inset:0}
.gv-panel--homme .gv-panel__bg{background:radial-gradient(85% 88% at 82% 62%,#303230 0%,#171918 38%,var(--gv-char-900) 100%)}
.gv-panel--homme .gv-panel__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.33) 52%,transparent 78%),linear-gradient(to top,rgba(0,0,0,.52),transparent 62%)}
.gv-panel--femme .gv-panel__bg{background:radial-gradient(88% 90% at 18% 60%,#08705a 0%,#04513f 38%,#022b23 100%)}
.gv-panel--femme .gv-panel__bg::after{background:linear-gradient(270deg,rgba(2,42,34,.76) 0%,rgba(2,42,34,.32) 52%,transparent 78%),linear-gradient(to top,rgba(2,32,26,.5),transparent 62%)}
.gv-panel__grain{position:absolute;inset:0;z-index:2;pointer-events:none}
.gv-panel--homme .gv-panel__grain{background:linear-gradient(90deg,rgba(6,7,7,.72) 0%,rgba(6,7,7,.38) 48%,transparent 78%),radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.34) 100%)}
.gv-panel--femme .gv-panel__grain{background:linear-gradient(270deg,rgba(2,38,31,.7) 0%,rgba(2,38,31,.36) 48%,transparent 78%),radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.3) 100%)}

/* Per-world watch slider: a slot holds the background-removed cutouts, one shown
   at a time (crossfade). In "deux" both worlds flank the seam; a focused single
   world centers its slot in the expanded panel and cycles through its watches. */
.gv-product-slot{
  position:absolute;bottom:2%;z-index:1;pointer-events:none;
  width:clamp(230px,25vw,340px);height:clamp(360px,36vw,500px);
  transition:left .8s cubic-bezier(.22,.61,.36,1),right .8s cubic-bezier(.22,.61,.36,1),
             margin .8s cubic-bezier(.22,.61,.36,1),opacity .6s ease;
}
.gv-product-slot--homme{right:2%;left:auto}
.gv-product-slot--femme{left:2%;right:auto}
.gv-product-slot .gv-product{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.5));
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform 1s cubic-bezier(.22,.61,.36,1);
}
.gv-product-slot .gv-product.is-active{opacity:.95;transform:translateY(0)}
.gv-hero[data-world="deux"] .gv-product-slot .gv-product.is-active{opacity:.8}
/* single-world focus: sit the active watch just off-centre toward the seam so it
   clears the outer-anchored text column (Homme text left, Femme text right); hide
   the other world's slot. */
.gv-hero[data-world="homme"] .gv-product-slot--homme{
  left:60%;right:auto;margin-left:calc(clamp(230px,25vw,340px) * -0.5);
}
.gv-hero[data-world="femme"] .gv-product-slot--femme{
  left:34%;right:auto;margin-left:calc(clamp(230px,25vw,340px) * -0.5);
}
.gv-hero[data-world="homme"] .gv-product-slot--femme,
.gv-hero[data-world="femme"] .gv-product-slot--homme{opacity:0}

.gv-panel__inner{
  position:relative;z-index:3;width:min(78%,560px);
  padding:clamp(34px,5vw,72px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px);
}
.gv-panel--femme{justify-content:flex-end}
.gv-panel--femme .gv-panel__inner{align-items:flex-end;text-align:right}

.gv-eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gv-gold);font-weight:600}
.gv-hero h2{
  font-family:var(--gv-display);font-weight:400;margin:0;
  font-size:clamp(2.5rem,5.1vw,4.55rem);line-height:1;letter-spacing:.01em;color:var(--gv-cream);
  text-shadow:0 2px 22px rgba(0,0,0,.22);
}
.gv-hero h2 .gv-accent{
  display:block;background:var(--gv-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gv-lede{margin:0;max-width:42ch;font-size:clamp(.92rem,1.2vw,1.02rem);line-height:1.6;color:#cfc7b4}
.gv-panel--femme .gv-lede{margin-left:auto}

.gv-cta{
  display:inline-flex;align-items:center;gap:.8em;margin-top:6px;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  padding:15px 26px;text-decoration:none;transition:transform .35s cubic-bezier(.22,.61,.36,1),background .35s ease,border-color .35s ease,box-shadow .35s ease,filter .35s ease;
}
.gv-cta .gv-arw{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.gv-cta:hover .gv-arw{transform:translateX(5px)}
.gv-cta--outline{color:var(--gv-gold-light);border:1px solid var(--gv-gold);background:transparent}
.gv-cta--outline:hover{border-color:var(--gv-gold-light);background:rgba(201,162,74,.12);transform:translateY(-2px)}
.gv-cta--solid{color:#022a22;background:var(--gv-gold-grad);border:1px solid transparent}
.gv-cta--solid:hover{filter:brightness(1.06);box-shadow:0 14px 30px -12px rgba(216,182,88,.6);transform:translateY(-2px)}

/* Featured "Coup de cœur" watch per world - a compact, shoppable chip */
.gv-hero__feature{display:inline-flex;align-items:center;gap:11px;margin-top:4px;max-width:min(360px,100%);
  padding:7px 15px 7px 7px;border:1px solid rgba(244,239,227,.18);border-radius:100px;
  background:rgba(2,20,16,.42);backdrop-filter:blur(6px);text-decoration:none;color:var(--gv-cream);
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.gv-hero__feature:hover{border-color:var(--gv-gold);background:rgba(2,20,16,.62);transform:translateY(-2px)}
.gv-hero__feature-thumb{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#fff;display:grid;place-items:center}
.gv-hero__feature-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.gv-hero__feature-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25;text-align:left}
.gv-hero__feature-label{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gv-gold);font-weight:700}
.gv-hero__feature-name{font-size:.78rem;color:var(--gv-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-hero__feature-price{flex:0 0 auto;font-size:.82rem;font-weight:600;color:var(--gv-gold-light);white-space:nowrap;padding-left:4px}

/* Prev / next pager. The chip is first so it stays anchored to the panel's outer
   edge (aligned with the CTA on desktop); the arrow group grows inward toward the
   seam. It is deliberately kept IN FLOW (width/margin reveal) rather than absolute
   so the chip can shrink to make room on narrow mobile instead of the arrows being
   clipped off-panel - see the layout-transition note. Order flips for Femme. */
.gv-hero__pager{display:flex;align-items:center;margin-top:4px;max-width:100%}
.gv-hero__pager .gv-hero__feature{margin-top:0;min-width:0}
.gv-hero__nav-group{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;overflow:hidden;
  width:0;margin-inline:0;opacity:0;visibility:hidden;
  transition:width .45s cubic-bezier(.22,.61,.36,1),margin .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility 0s .45s}
.gv-panel--femme .gv-hero__nav-group{order:-1}
/* Femme is right-aligned: pack the pager to the END so the chip's right edge lands
   at the column edge (aligned with its CTA), mirroring Homme. Without this the chip
   packs to the start and sits ~56px inboard when the arrows are collapsed. */
.gv-panel--femme .gv-hero__pager{justify-content:flex-end}
.gv-hero[data-world="homme"] .gv-panel--homme .gv-hero__nav-group{
  width:84px;margin-inline-start:10px;opacity:1;visibility:visible;
  transition:width .45s cubic-bezier(.22,.61,.36,1),margin .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease,visibility 0s 0s}
.gv-hero[data-world="femme"] .gv-panel--femme .gv-hero__nav-group{
  width:84px;margin-inline-end:10px;opacity:1;visibility:visible;
  transition:width .45s cubic-bezier(.22,.61,.36,1),margin .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease,visibility 0s 0s}
.gv-hero__nav{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid rgba(244,239,227,.18);
  background:rgba(2,20,16,.42);backdrop-filter:blur(6px);color:var(--gv-gold-light);
  font-size:1.35rem;line-height:1;
  transition:background .25s ease,color .25s ease,transform .25s ease,border-color .25s ease}
.gv-hero__nav span{display:block;transform:translateY(-1px)}
.gv-hero__nav:hover{background:var(--gv-gold);color:#0b0b0b;border-color:var(--gv-gold);transform:scale(1.07)}
.gv-hero__nav:active{transform:scale(.96)}
.gv-hero__nav:focus-visible{outline:2px solid var(--gv-gold-light);outline-offset:2px}
.gv-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.gv-hero__nav-group{transition:none!important}}

/* Desktop: make the inner a full-height column, keep the text at its natural top
   position, and pin the "Coup de cœur" pager to the bottom - just ABOVE the centred
   world-switcher. Both worlds then ground the chip at the exact same height (fixes
   the Femme chip floating higher than Homme when its shorter text left it mid-panel).
   The centred watch fills the space between the CTA and the chip; the chip's outer
   edge still aligns with the CTA via the existing pager rules. */
@media (min-width:861px){
  .gv-panel__inner{align-self:stretch;padding-bottom:clamp(90px,12vh,104px)}
  .gv-hero__pager{margin-top:auto}
  /* Lock both titles to their 3 explicit lines: the lead line ("La précision,")
     would otherwise wrap at the large desktop size, making Homme 4 lines vs Femme 3.
     nowrap keeps it on one line (it fits within the column box, using the padding). */
  .gv-hero h2{white-space:nowrap}
}
@media (max-width:860px){
  .gv-hero__nav{width:44px;height:44px}
  /* both worlds are live sliders on mobile - reveal the arrows for both, after the chip */
  .gv-panel--femme .gv-hero__nav-group{order:0}
  .gv-hero .gv-panel--homme .gv-hero__nav-group,
  .gv-hero .gv-panel--femme .gv-hero__nav-group{
    width:96px;margin:0 0 0 10px;opacity:1;visibility:visible;transition:none}
}

.gv-seam{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:1px;
  background:linear-gradient(to bottom,transparent,var(--gv-gold) 18%,var(--gv-gold) 82%,transparent);
  z-index:3;opacity:.55;transition:left .8s cubic-bezier(.22,.61,.36,1)}
.gv-monogram{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(2,42,34,.72);backdrop-filter:blur(4px);border:1px solid var(--gv-gold);
  transition:left .8s cubic-bezier(.22,.61,.36,1)}
.gv-monogram span{font-family:var(--gv-display);font-size:1.7rem;line-height:1;padding-top:2px;
  background:var(--gv-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (hover:hover) and (min-width:861px){
  .gv-hero[data-world="deux"] .gv-panel:hover{flex-grow:1.32}
  .gv-panel:hover .gv-panel__bg{transform:scale(1.05)}
}
.gv-hero[data-world="homme"] .gv-panel--homme{flex-grow:1.6}
.gv-hero[data-world="homme"] .gv-panel--femme{flex-grow:.98}
.gv-hero[data-world="femme"] .gv-panel--femme{flex-grow:1.6}
.gv-hero[data-world="femme"] .gv-panel--homme{flex-grow:.98}
.gv-hero[data-world="homme"] .gv-seam,.gv-hero[data-world="homme"] .gv-monogram{left:65%}
.gv-hero[data-world="femme"] .gv-seam,.gv-hero[data-world="femme"] .gv-monogram{left:35%}
.gv-hero[data-world="homme"] .gv-panel--femme .gv-panel__inner,
.gv-hero[data-world="femme"] .gv-panel--homme .gv-panel__inner{opacity:.62;transition:opacity .6s ease}

.gv-worldbar{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:4px;padding:5px;
  background:rgba(2,42,34,.66);backdrop-filter:blur(10px);
  border:1px solid rgba(244,239,227,.28);border-radius:100px}
.gv-worldbar button{border:0;background:none;color:#cfc7b4;font-family:inherit;cursor:pointer;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:9px 18px;border-radius:100px;transition:all .35s ease;white-space:nowrap}
.gv-worldbar button[aria-pressed="true"]{background:var(--gv-gold-grad);color:#022a22}
.gv-worldbar button:not([aria-pressed="true"]):hover{color:var(--gv-gold-light)}

/* Brand "G" symbol (Giovanna display glyph) replaces the "Les deux" label:
   gold-foil when a single world is selected, dark "stamped" on the active gold pill. */
.gv-worldbar__brand{padding-left:16px!important;padding-right:16px!important}
.gv-worldbar__g{font-family:var(--gv-display);font-weight:400;font-size:1.42rem;line-height:1;display:inline-block;transform:translateY(1px)}
.gv-worldbar button:not([aria-pressed="true"]) .gv-worldbar__g{
  background:var(--gv-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-worldbar button[aria-pressed="true"] .gv-worldbar__g{color:#022a22}

/* Auto-rotate progress bar (JS animates gvHeroProgress over the interval).
   Hidden on mobile (no auto-rotate there) and under reduced-motion. */
.gv-hero__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:6;
  transform:scaleX(0);transform-origin:left;background:var(--gv-gold-grad);opacity:.85;pointer-events:none}
@keyframes gvHeroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:860px){.gv-hero__progress{display:none}}
@media (prefers-reduced-motion:reduce){.gv-hero__progress{display:none}}

/* slim trust strip under the hero */
.gv-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px);
  padding:20px clamp(18px,4vw,56px);background:#022a22;border-bottom:1px solid rgba(244,239,227,.12)}
.gv-trust span{display:inline-flex;align-items:center;gap:.6em;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#cfc7b4}
.gv-trust .gv-dot{width:4px;height:4px;border-radius:50%;background:var(--gv-gold)}

@media (max-width:860px){
  .gv-hero{flex-direction:column;min-height:auto}
  /* content-sized panels (base is flex:1 1 0 -> basis 0 -> collapses to 0 in a
     column with no fixed height); align-items:stretch so the inner fills width. */
  .gv-panel{flex:0 0 auto;align-items:stretch;min-height:auto;transition:none;overflow:hidden}
  .gv-panel--femme .gv-panel__inner{align-items:flex-start;text-align:left}
  .gv-panel--femme .gv-lede{margin-left:0}
  .gv-seam,.gv-monogram{display:none}
  .gv-hero[data-world="homme"] .gv-panel--femme .gv-panel__inner,
  .gv-hero[data-world="femme"] .gv-panel--homme .gv-panel__inner{opacity:1}
  .gv-worldbar{display:none}

  /* Each stacked world is a real slider: the watch is a clean FOREGROUND slide on
     top, then eyebrow / heading / lede / chip+arrows / CTA below it - the watch no
     longer overlaps the CTA or the chip. */
  .gv-panel__inner{position:relative;z-index:3;width:100%;max-width:100%;
    display:flex;flex-direction:column;gap:clamp(11px,1.8vh,17px);
    padding-top:clamp(290px,45vh,384px);padding-bottom:clamp(30px,5vh,44px)}
  .gv-product-slot{position:absolute;left:50%!important;right:auto!important;
    top:clamp(14px,3vh,32px);bottom:auto;z-index:2;
    width:clamp(230px,66vw,330px);height:clamp(230px,40vh,330px);
    margin:0 0 0 calc(clamp(230px,66vw,330px) * -0.5)!important}
  .gv-hero[data-world] .gv-product-slot{opacity:1!important}
  .gv-product-slot .gv-product{filter:drop-shadow(0 26px 32px rgba(0,0,0,.52));object-position:center center}
  .gv-product-slot .gv-product.is-active{opacity:.97}
  .gv-hero__pager{order:8}
  .gv-cta{order:9;margin-top:4px}

  /* soft vignette so the centred watch reads cleanly over the panel */
  .gv-panel--homme .gv-panel__grain{background:radial-gradient(118% 46% at 50% 22%,transparent 46%,rgba(0,0,0,.42) 100%),linear-gradient(to top,rgba(6,7,7,.5),transparent 52%)}
  .gv-panel--femme .gv-panel__grain{background:radial-gradient(118% 46% at 50% 22%,transparent 46%,rgba(0,0,0,.36) 100%),linear-gradient(to top,rgba(2,32,26,.5),transparent 52%)}
}
@media (max-width:480px){
  .gv-panel__inner{padding-inline:34px}
  .gv-hero h2{font-size:clamp(2.45rem,12vw,3.15rem)}
  .gv-lede{max-width:34ch}
  .gv-cta{padding:14px 20px;letter-spacing:.19em}
}
@media (prefers-reduced-motion:reduce){
  .gv-hero *{transition:none!important;animation:none!important;opacity:1!important;transform:none!important}
  .gv-product-slot .gv-product{opacity:0!important}          /* don't stack all cutouts */
  .gv-product-slot .gv-product.is-active{opacity:.85!important}
}