/* ==========================================================================
   WMD Hero Accordion — replaces the home hero video.
   All classes namespaced wmdacc- so nothing here can collide with Porto,
   Elementor or WooCommerce styles.
   ========================================================================== */

.wmdacc{
  --wmdacc-gap:6px;
  --wmdacc-ease:cubic-bezier(.25,.75,.25,1);
  --wmdacc-dur:.65s;
  /* The WMD header is a TRANSPARENT overlay: the hero slides full-bleed
     underneath it, so the header steals no height and this stays 0. */
  --wmdacc-offset:0px;

  position:relative;
  width:100%;
  /* --wmdacc-pull is set by hero.js to compensate the negative margin the
     theme applies to the hero (it sits partly above the viewport top), so the
     panel always ends exactly at the bottom of the screen. */
  height:calc(100vh + var(--wmdacc-pull, 0px));   /* fallback */
  height:calc(100svh + var(--wmdacc-pull, 0px));  /* modern: ignores mobile URL bar */
  min-height:420px;                            /* floor for very short viewports */
  overflow:hidden;
  display:flex;
  flex-direction:row;
  gap:var(--wmdacc-gap);
  background:#0d0d0f;
  font-family:'Poppins',sans-serif;            /* already loaded site-wide */
}

/* ---- panels ---- */
.wmdacc-panel{
  position:relative;
  display:block;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  transition:flex var(--wmdacc-dur) var(--wmdacc-ease);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.wmdacc-panel.is-open{flex:3.2 1 0}
.wmdacc-panel:focus-visible{flex:3.2 1 0;outline:2px solid #fff;outline-offset:-4px}
/* hover model, hover-capable devices only: hovering the group drops the
   default-open panel, the hovered one wins */
@media (hover:hover){
  .wmdacc:hover .wmdacc-panel.is-open{flex:1 1 0}
  .wmdacc:hover .wmdacc-panel:hover{flex:3.2 1 0}
}

/* ---- background art ---- */
.wmdacc-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;          /* beat theme img{max-width:100%} */
  object-fit:cover;
  /* closed: crop toward the left edge so the coloured paper curl stays visible */
  object-position:12% 50%;
  transition:transform var(--wmdacc-dur) var(--wmdacc-ease),
             filter var(--wmdacc-dur) var(--wmdacc-ease),
             object-position var(--wmdacc-dur) var(--wmdacc-ease);
  transform:scale(1.06);
  filter:saturate(.82) brightness(.9);
}
.wmdacc-panel.is-open .wmdacc-img,
.wmdacc-panel:focus-visible .wmdacc-img{
  transform:scale(1);filter:saturate(1) brightness(1);object-position:50% 50%;
}
@media (hover:hover){
  .wmdacc:hover .wmdacc-panel.is-open:not(:hover) .wmdacc-img{
    transform:scale(1.06);filter:saturate(.82) brightness(.9);object-position:12% 50%;
  }
  .wmdacc:hover .wmdacc-panel:hover .wmdacc-img{
    transform:scale(1);filter:saturate(1) brightness(1);object-position:50% 50%;
  }
}

/* ---- watch (transparent cutout, kept 1:1 with the bg so the pair reads as
        the original composite; only visible while the panel is open) ---- */
.wmdacc-watch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:12% 50%;
  transition:transform var(--wmdacc-dur) var(--wmdacc-ease),
             opacity var(--wmdacc-dur) var(--wmdacc-ease),
             object-position var(--wmdacc-dur) var(--wmdacc-ease);
  transform:scale(1.06);
  opacity:0;
  z-index:1;
  pointer-events:none;
}
.wmdacc-panel.is-open .wmdacc-watch,
.wmdacc-panel:focus-visible .wmdacc-watch{transform:scale(1);object-position:50% 50%;opacity:1}
@media (hover:hover){
  .wmdacc:hover .wmdacc-panel.is-open:not(:hover) .wmdacc-watch{
    transform:scale(1.06);object-position:12% 50%;opacity:0;
  }
  .wmdacc:hover .wmdacc-panel:hover .wmdacc-watch{
    transform:scale(1);object-position:50% 50%;opacity:1;
  }
}

/* legibility scrim (bottom copy) + top scrim (site header sits up there) */
.wmdacc-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to top,rgba(10,10,12,.62) 0%,rgba(10,10,12,.18) 34%,rgba(10,10,12,0) 55%);
  pointer-events:none;
}
.wmdacc::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:190px;
  z-index:4;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0));
  pointer-events:none;
}

/* ---- closed label (vertical) ---- */
.wmdacc-closed{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  opacity:1;
  transition:opacity .35s ease;
}
.wmdacc-closed span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;
  font-size:clamp(15px,1.35vw,21px);
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

/* ---- open content ---- */
.wmdacc-open{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  padding:clamp(22px,3vw,44px);
  color:#fff;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s ease .12s,transform .4s ease .12s;
  pointer-events:none;
}
.wmdacc-open .wmdacc-kicker{
  display:block;
  font-size:clamp(10px,.85vw,12px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin:0 0 8px;
}
.wmdacc-open .wmdacc-title{
  font-size:clamp(26px,3vw,46px);
  font-weight:300;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.12;
  color:#fff;
  white-space:nowrap;
  margin:0;
}
.wmdacc-open p:not(.wmdacc-title){
  font-size:clamp(13px,1.05vw,16px);
  font-weight:300;
  color:rgba(255,255,255,.88);
  margin:10px 0 18px;
  max-width:46ch;
}
.wmdacc-btn{
  display:inline-block;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:700;
  line-height:1;
  padding:13px 22px;
  border-radius:4px;
  transition:background .25s ease;
}
.wmdacc-panel:hover .wmdacc-btn{background:#f2f2f2}

/* show/hide the two label states */
.wmdacc-panel.is-open .wmdacc-closed,
.wmdacc-panel:focus-visible .wmdacc-closed{opacity:0}
.wmdacc-panel.is-open .wmdacc-open,
.wmdacc-panel:focus-visible .wmdacc-open{opacity:1;transform:translateY(0);pointer-events:auto}
@media (hover:hover){
  .wmdacc:hover .wmdacc-panel.is-open:not(:hover) .wmdacc-closed{opacity:1}
  .wmdacc:hover .wmdacc-panel.is-open:not(:hover) .wmdacc-open{
    opacity:0;transform:translateY(14px);pointer-events:none;
  }
  .wmdacc:hover .wmdacc-panel:hover .wmdacc-closed{opacity:0}
  .wmdacc:hover .wmdacc-panel:hover .wmdacc-open{opacity:1;transform:translateY(0);pointer-events:auto}
}

/* ---- mobile: stack; hero.js turns hover into tap-to-open ---- */
@media (max-width:768px){
  .wmdacc{flex-direction:column}
  .wmdacc-closed span{
    writing-mode:horizontal-tb;
    transform:none;
    letter-spacing:.32em;
    font-size:16px;
  }
  .wmdacc-open{padding:22px}
  .wmdacc-open .wmdacc-title{font-size:30px}
  .wmdacc-open p:not(.wmdacc-title){font-size:13px;margin:8px 0 14px}
  .wmdacc::before{height:150px}

  /* The site header is a transparent overlay covering the top of the hero, and
     it swallows taps. Stacked, the first panel's closed strip (160px, starting
     32px above the fold) landed almost entirely under it -- 4px showing, label
     hidden -- so opening Patek or AP left the Rolex card impossible to see or
     reopen. Give that panel the header's reach as extra height and push its
     label below it; the art still bleeds full-bleed behind the header and the
     open state is untouched. --wmdacc-head is measured by hero.js. */
  .wmdacc-panel:first-child:not(.is-open){
    flex:0 1 calc(var(--wmdacc-head,150px) + 96px);
  }
  .wmdacc-panel:first-child .wmdacc-closed{
    padding-top:var(--wmdacc-head,150px);
  }
}

@media (prefers-reduced-motion:reduce){
  .wmdacc-panel,.wmdacc-img,.wmdacc-watch,.wmdacc-closed,.wmdacc-open{transition-duration:.01ms}
}

/* ==========================================================================
   SITE HEADER over the accordion.
   The header is transparent and its logo + menu are near-black (rgb(12,35,40)),
   built for the old light hero — they'd vanish on this dark art. Lighten just
   the top-level bits while the accordion is on. The MaxMegaMenu DROPDOWN panels
   (.mega-sub-menu) are deliberately untouched: they're dark text on white.
   ========================================================================== */
body.wmd-hero-acc-on .header-wrapper{position:relative;z-index:200}

/* Logo. The mu-plugin swaps in the real white asset (WMD-White-1.svg), so no
   filter is wanted on it. The filter rule stays scoped to the BLACK file as a
   safety net: if that swap ever stops matching, the black logo still gets
   whitened instead of disappearing into the dark art. */
body.wmd-hero-acc-on .header-wrapper .logo img,
body.wmd-hero-acc-on .header-wrapper img[src$="/WMD.svg"]{
  filter:brightness(0) invert(1);
}
body.wmd-hero-acc-on .header-wrapper img[src$="/WMD-White-1.svg"]{
  filter:none;
}

/* The menu bar is a translucent-white strip and each top-level item has a SOLID
   white background (built for the light hero). Clear that chrome so the nav
   floats directly on the art; the dropdown panels below keep their own. */
body.wmd-hero-acc-on .header-wrapper .mega-menu-wrap,
body.wmd-hero-acc-on .header-wrapper ul.mega-menu,
body.wmd-hero-acc-on .header-wrapper .mega-menu > li.mega-menu-item{
  background:transparent !important;
}
/* top-level menu items only */
body.wmd-hero-acc-on .header-wrapper .mega-menu > li.mega-menu-item > a.mega-menu-link{
  color:#fff !important;
  background:transparent !important;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
/* keep the open/hovered top-level item readable (theme may paint it white) */
body.wmd-hero-acc-on .header-wrapper .mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
body.wmd-hero-acc-on .header-wrapper .mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
/* dropdown panels: hands off — they are dark text on white */
body.wmd-hero-acc-on .header-wrapper .mega-sub-menu{background:#fff !important}
body.wmd-hero-acc-on .header-wrapper .mega-sub-menu a.mega-menu-link{
  color:#333 !important;text-shadow:none !important;
}
/* search + cart + mobile toggle icons and their labels */
body.wmd-hero-acc-on .header-wrapper .searchform-popup > a.search-toggle,
body.wmd-hero-acc-on .header-wrapper .search-toggle .search-text,
body.wmd-hero-acc-on .header-wrapper .searchwp-modal-form-trigger-el,
body.wmd-hero-acc-on .header-wrapper .mini-cart .cart-head,
body.wmd-hero-acc-on .header-wrapper .mini-cart .cart-icon,
body.wmd-hero-acc-on .header-wrapper .cart-items-text,
body.wmd-hero-acc-on .header-wrapper a.mobile-toggle{
  color:#fff !important;
}
body.wmd-hero-acc-on .header-wrapper .searchform input[type="text"]{
  color:#fff !important;
}
body.wmd-hero-acc-on .header-wrapper .searchform input[type="text"]::placeholder{
  color:rgba(255,255,255,.7) !important;
}
/* the cart bubble keeps its own contrast */
body.wmd-hero-acc-on .header-wrapper .mini-cart .cart-items{
  background:#fff !important;color:#000 !important;
}
/* Anything that opens ON TOP of the page (dropdowns, cart popup, search popup)
   keeps the theme's own dark-on-light styling. */
body.wmd-hero-acc-on .header-wrapper .mega-sub-menu,
body.wmd-hero-acc-on .header-wrapper .mega-sub-menu *,
body.wmd-hero-acc-on .header-wrapper .cart-popup,
body.wmd-hero-acc-on .header-wrapper .cart-popup *,
body.wmd-hero-acc-on .header-wrapper .search-lists,
body.wmd-hero-acc-on .header-wrapper .search-lists *{
  filter:none;
}

/* --- search pill: light-grey box built for the light hero -> translucent --- */
body.wmd-hero-acc-on .header-wrapper .searchform{
  background:rgba(255,255,255,.12) !important;
  /* inset shadow, NOT a border: a real border would add 2px to the field and
     shift the whole header row by 1px. This keeps the geometry byte-identical. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
body.wmd-hero-acc-on .header-wrapper .searchform .btn,
body.wmd-hero-acc-on .header-wrapper .searchform button{
  background:transparent !important;color:#fff !important;
}
body.wmd-hero-acc-on .header-wrapper .searchform input[type="text"]{
  color:#fff !important;background:transparent !important;
}

/* --------------------------------------------------------------------------
   Elementor ships a reset — .elementor img{height:auto;max-width:100%} — whose
   specificity (0-1-1) beats a single class (0-1-0). It forced the art back to
   its intrinsic 1200x1000 ratio, so in the NARROW closed panels the image only
   covered a band at the top and the rest went black. Win it back.
   -------------------------------------------------------------------------- */
.wmdacc .wmdacc-img,
.wmdacc .wmdacc-watch{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
}