/* ============================================================
   WMD — CURVED COLLECTIONS SLIDER   (namespace: wmdcs-)
   Shared by the standalone demo (/product-demo/collections-slider.html)
   and the home-page preview (mu-plugin wmd-collections-slider.php).

   Everything is scoped to .wmdcs — no global reset, because on the live
   home this markup lands INSIDE Elementor/Porto's cascade. The few
   !important guards below are the rules that theme CSS would otherwise
   win (notably `.elementor img{height:auto;max-width:100%}`, which is
   0-1-1 and beat the accordion's image sizing once already).

   Sizing comes from custom properties written by slider.js, so no
   layout value is set as an inline style that theme CSS could fight.
   ============================================================ */

.wmdcs{
  --wmdcs-ink:#141c27;
  --wmdcs-muted:#7a8595;
  --wmdcs-line:#d9dee5;
  --wmdcs-radius:0px;
  --wmdcs-glass-blur:16px;
  --wmdcs-glass-tint:.16;

  /* written by slider.js */
  --wmdcs-cw:320px;      /* card width  */
  --wmdcs-ch:340px;      /* card height */
  --wmdcs-sh:380px;      /* stage height */
  --wmdcs-persp:1400px;

  position:relative;
  padding:64px 0 56px;
  background:#fff;
  overflow:hidden;                /* the outer cards bleed past the viewport */
  font-family:'Poppins','Montserrat',system-ui,sans-serif;
}
.wmdcs *{box-sizing:border-box}

/* ---------- optional section header (demo page only) ---------- */
.wmdcs-head{max-width:820px;margin:0 auto 40px;padding:0 24px;text-align:center}
.wmdcs-eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--wmdcs-muted);margin:0 0 12px;
}
.wmdcs-title{
  font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:.02em;
  color:var(--wmdcs-ink);line-height:1.25;margin:0;
}
.wmdcs-sub{margin:12px 0 0;font-size:14px;font-weight:300;line-height:1.7;color:var(--wmdcs-muted)}

/* ============================================================
   STAGE + 3D TRACK
   ============================================================ */
.wmdcs .wmdcs-stage{
  position:relative;
  width:100%;
  height:var(--wmdcs-sh);
  margin:0 auto;
  padding:0;
  overflow:hidden;                /* clips the far cards at the edges */
  touch-action:pan-y;             /* vertical page scroll stays native */
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.wmdcs .wmdcs-stage.is-dragging{cursor:grabbing}

.wmdcs .wmdcs-track{
  position:absolute;
  inset:0;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  transform-style:preserve-3d;
  perspective:var(--wmdcs-persp);
}
.wmdcs .wmdcs-item{
  position:absolute;
  top:50%;left:50%;
  width:var(--wmdcs-cw)!important;
  height:var(--wmdcs-ch)!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.wmdcs .wmdcs-item::before,
.wmdcs .wmdcs-item::marker{content:none}

/* ---------- the card ---------- */
.wmdcs .wmdcs-card{
  position:relative;
  display:block;
  width:100%;height:100%;
  overflow:hidden;                /* also flattens the card, so the caption
                                     renders in plain 2D inside the 3D scene */
  border-radius:var(--wmdcs-radius);
  text-decoration:none!important;
  border:0;
  background:#101822;
  -webkit-tap-highlight-color:transparent;
}
.wmdcs .wmdcs-card img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover;
  margin:0;padding:0;
  border-radius:0;
  transform:scale(1.02);          /* hides sub-pixel edges when rotated */
  transition:transform .8s cubic-bezier(.22,.75,.25,1);
}
.wmdcs .wmdcs-item.is-active .wmdcs-card:hover img{transform:scale(1.06)}

.wmdcs .wmdcs-card:focus-visible{
  outline:2px solid #fff;outline-offset:-6px;
  box-shadow:0 0 0 3px rgba(20,28,39,.65);
}

/* ---------- glass caption ---------- */
.wmdcs .wmdcs-glass{
  position:absolute;
  left:0;right:0;bottom:0;
  display:block;
  padding:18px 18px 20px;
  text-align:center;
  color:#fff;
  background:rgba(255,255,255,var(--wmdcs-glass-tint));
  -webkit-backdrop-filter:blur(var(--wmdcs-glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--wmdcs-glass-blur)) saturate(150%);
  border-top:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -18px 30px -24px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.22,.75,.25,1),transform .5s cubic-bezier(.22,.75,.25,1);
}
/* no backdrop-filter (old Firefox / some Android): fall back to a scrim */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wmdcs .wmdcs-glass{background:linear-gradient(to top,rgba(10,15,22,.82),rgba(10,15,22,.45))}
}
.wmdcs .wmdcs-cap{
  display:block;
  margin:0;
  font-size:clamp(14px,1.15vw,20px);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.35;
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
  text-transform:none;
}
.wmdcs .wmdcs-sub-cap{
  display:block;
  margin:4px 0 0;
  font-size:clamp(10px,.72vw,12px);
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:.85;
}

/* ============================================================
   ARROWS + DOTS
   ============================================================ */
.wmdcs .wmdcs-nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:28px 0 0;padding:0;
}
.wmdcs .wmdcs-arrow{
  width:52px;height:52px;flex:0 0 52px;
  display:grid;place-items:center;
  margin:0;padding:0;
  border:1.5px solid var(--wmdcs-ink);
  border-radius:50%;
  background:transparent;color:var(--wmdcs-ink);
  cursor:pointer;
  box-shadow:none;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.wmdcs .wmdcs-arrow:hover{background:var(--wmdcs-ink);color:#fff}
.wmdcs .wmdcs-arrow:active{transform:scale(.94)}
.wmdcs .wmdcs-arrow:focus-visible{outline:2px solid var(--wmdcs-ink);outline-offset:3px}
.wmdcs .wmdcs-arrow svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.wmdcs .wmdcs-dots{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:22px 0 0;padding:0;
}
.wmdcs .wmdcs-dot{
  width:8px;height:8px;padding:0;margin:0;border:0;border-radius:99px;
  background:var(--wmdcs-line);cursor:pointer;box-shadow:none;
  transition:width .35s cubic-bezier(.22,.75,.25,1),background .35s ease;
}
.wmdcs .wmdcs-dot[aria-current="true"]{width:26px;background:var(--wmdcs-ink)}
.wmdcs .wmdcs-dot:focus-visible{outline:2px solid var(--wmdcs-ink);outline-offset:3px}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:768px){
  .wmdcs{padding:44px 0 40px}
  .wmdcs-head{margin-bottom:28px}
  .wmdcs .wmdcs-glass{padding:13px 12px 14px}
  .wmdcs .wmdcs-nav{gap:14px;margin-top:20px}
  .wmdcs .wmdcs-arrow{width:46px;height:46px;flex:0 0 46px}
  .wmdcs .wmdcs-cap{font-size:15px}
  .wmdcs .wmdcs-sub-cap{font-size:10px}
}

/* ============================================================
   REDUCED MOTION — no autoplay, no easing, still fully usable
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .wmdcs .wmdcs-glass,.wmdcs .wmdcs-card img{transition:none}
}

/* ============================================================
   HEADING FOR THE MOVED BRAND CAROUSEL  (?wmd_slider=1 only)

   Deliberately NOT scoped under .wmdcs: this heading belongs to the
   Elementor carousel that the preview moves down into the old banner
   slot, not to the slider. Values are copied from the page's own
   section headings (ICONIC TIMEPIECES / MOST POPULAR ROLEX) so it
   matches them exactly — they are Montserrat, not the Poppins the
   slider captions use.

   Preview-only: when the move is made for real in Elementor, this
   becomes a normal Heading widget and these rules can go.
   ============================================================ */
.wmdcs-modhead{
  padding:40px 20px 0;
  text-align:center;
}
.wmdcs-modtitle{
  margin:0 0 59px;
  font-family:'Montserrat',sans-serif;
  font-size:30px;
  line-height:30px;
  font-weight:500;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:#0c2328;
}
@media (max-width:768px){
  .wmdcs-modhead{padding-top:24px}
  .wmdcs-modtitle{margin-bottom:36px}
}

/* Before slider.js runs, show only the first card so a JS failure
   degrades to a single static, clickable collection image. */
.wmdcs:not(.is-ready) .wmdcs-item{opacity:0;pointer-events:none}
.wmdcs:not(.is-ready) .wmdcs-item:first-child{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%);
}
.wmdcs:not(.is-ready) .wmdcs-item:first-child .wmdcs-glass{opacity:1;transform:none}