/* The "Featured products" wheel on the product page (listings/_featured-wheel,
   js/featured-wheel.js). Motion is transform/opacity only. */
.fwheel{position:relative;overflow:hidden;margin:30px 0 38px;padding:24px 26px 20px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,#fff 0,#fff 55%,var(--cream,#f5f8fc) 100%);box-shadow:0 10px 30px rgba(12,59,104,.07)}
.fwheel::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--orange),var(--amber,#f6a24a) 45%,var(--blue) 100%)}
.fwheel::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;inset-inline-end:-160px;top:-220px;
  background:radial-gradient(closest-side,rgba(238,122,43,.08),transparent);pointer-events:none}

.fwheel-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;margin-bottom:14px}
.fwheel-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--orange2);text-transform:uppercase;letter-spacing:.7px}
.fwheel-eyebrow i{display:inline-block;width:18px;height:2px;border-radius:2px;background:var(--orange)}
.fwheel-title{margin:4px 0 0;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.4px;color:var(--navy)}
.fwheel-sub{margin:4px 0 0;max-width:560px;font-size:14px;color:var(--muted)}
.fwheel-ctrl{display:flex;align-items:center;gap:12px}
.fwheel-dots{display:flex;gap:6px}
.fwheel-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .3s,width .3s}
.fwheel-dot.on{width:18px;border-radius:4px;background:var(--orange)}
.fwheel-dot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fwheel-all{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--line);border-radius:9px;background:#fff;
  font-size:13px;font-weight:700;color:var(--blue2);text-decoration:none;transition:border-color .15s,background .15s}
.fwheel-all:hover{border-color:var(--blue);background:var(--sky,#e8f2fb)}

/* ---------- the wheel ---------- */
.fwheel-wrap{position:relative}
.fwheel-stage{position:relative;overflow:hidden;min-height:420px;border-radius:12px;outline:none;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  /* Overlay colour (console setting) and the wheel's own text tokens: site colours by default… */
  --fw-overlay-rgb:12,59,104;
  --fw-orange:#df6a1c;--fw-green:#3f9d4a;--fw-deal:#ee5a2b;--fw-over:#ee7a2b;--fw-btn1:#ee7a2b;--fw-btn2:#df6a1c;
  background:radial-gradient(55% 60% at 50% 100%,rgba(232,242,251,.95) 0,rgba(232,242,251,0) 72%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* …or the same hues deep enough for 4.5:1 on small text (WCAG AA). */
.fwheel-stage.aa{--fw-orange:#b9520e;--fw-green:#2e7d38;--fw-deal:#c2440f;--fw-over:#b9520e;--fw-btn1:#bf530e;--fw-btn2:#ab4a0b}
.fwheel-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.fwheel-stage.narrow{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.fwheel-stage.dragging{cursor:grabbing}
.fwheel-floor{position:absolute;left:50%;width:62%;height:24px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(12,59,104,.16),transparent 72%)}

/* Focus effect, per card: a spotlight behind the front card, a 10% edge tint,
   and a shade over each side card running away from the front. */
.fwheel-stage.focus-on{background:radial-gradient(55% 60% at 50% 100%,rgba(232,242,251,.95) 0,rgba(232,242,251,0) 72%),
  linear-gradient(90deg,rgba(var(--fw-overlay-rgb),.10),rgba(var(--fw-overlay-rgb),0) 32%,rgba(var(--fw-overlay-rgb),0) 68%,rgba(var(--fw-overlay-rgb),.10))}
.fwheel-spot{position:absolute;left:50%;z-index:0;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,1) 0,rgba(255,255,255,.85) 45%,rgba(255,255,255,0) 100%)}
.fwheel-shade{position:absolute;inset:0;z-index:5;opacity:0;border-radius:inherit;pointer-events:none;transition:opacity .75s cubic-bezier(.45,0,.2,1)}
.fwheel-card.on-right .fwheel-shade{background:linear-gradient(90deg,rgba(var(--fw-overlay-rgb),.5) 0,rgba(var(--fw-overlay-rgb),.95) 100%),linear-gradient(180deg,rgba(var(--fw-overlay-rgb),0) 35%,rgba(var(--fw-overlay-rgb),.4) 100%)}
.fwheel-card.on-left .fwheel-shade{background:linear-gradient(270deg,rgba(var(--fw-overlay-rgb),.5) 0,rgba(var(--fw-overlay-rgb),.95) 100%),linear-gradient(180deg,rgba(var(--fw-overlay-rgb),0) 35%,rgba(var(--fw-overlay-rgb),.4) 100%)}
.fwheel-stage.focus-on .fwheel-card.is-active{border-color:#bcd6ee;box-shadow:0 22px 48px rgba(12,59,104,.24),0 0 0 1px #bcd6ee}

/* Single gradient: ONE layer over the whole wheel, above the side cards (z ≤ 90)
   and below the front card (z 100). It is the only shading: no edge masks,
   tint, spotlight or floor glow underneath. The script draws its gradient. */
.fwheel-veil{position:absolute;inset:0;z-index:95;pointer-events:none}
.fwheel-stage.veil-single,.fwheel-stage.veil-single.narrow{-webkit-mask-image:none;mask-image:none;background:none}
.fwheel-stage.veil-single .fwheel-floor{display:none}

/* Before the script lays the wheel out, the front card simply sits centred. */
.fwheel-card{position:absolute;top:14px;left:50%;width:280px;margin-left:-140px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;
  transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .75s cubic-bezier(.45,0,.2,1),filter .75s cubic-bezier(.45,0,.2,1),box-shadow .4s,border-color .4s}
.fwheel:not(.is-ready) .fwheel-card:not(.is-active){opacity:0}
.fwheel-card.is-active{border-color:#c9ddf0;box-shadow:0 16px 36px rgba(12,59,104,.18)}
.fwheel-link{display:block;color:inherit;text-decoration:none}
.fwheel-link:focus-visible,.fwheel-offer:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* Side cards: the text and badges soften (--fw-blur, set per card); the photo stays sharp. */
.fwheel-body,.fwheel-cta,.fwheel-disc,.fwheel-type,.fwheel-vr{filter:blur(var(--fw-blur,0px));transition:filter .75s cubic-bezier(.45,0,.2,1)}
.fwheel-stage.dragging .fwheel-card,.fwheel-stage.dragging .fwheel-shade,.fwheel-stage.dragging .fwheel-body,.fwheel-stage.dragging .fwheel-cta,
.fwheel-stage.dragging .fwheel-disc,.fwheel-stage.dragging .fwheel-type,.fwheel-stage.dragging .fwheel-vr{transition:none}
.fwheel-stage.reduced .fwheel-card{transition:opacity .2s linear}

.fwheel-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden;color:#e4eef7}
.fwheel-stage.narrow .fwheel-img{aspect-ratio:4/3}
.fwheel-img.has-image{background:var(--card-image-bg,#f2f4f7)}
.fwheel-img img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;pointer-events:none}
.fwheel-emoji{font-size:84px;line-height:1}
.fwheel-disc{position:absolute;top:9px;inset-inline-start:9px}
.fwheel-card .fwheel-disc.badge-deal{background:var(--fw-deal)}
.fwheel-type{position:absolute;top:9px;inset-inline-end:9px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff}
.fwheel-vr{position:absolute;bottom:9px;inset-inline-start:9px;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.94);font-size:11px;font-weight:700;color:var(--fw-green)}

.fwheel-body{padding:11px 13px 2px}
.fwheel-cat{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--fw-orange)}
.fwheel-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em;margin-top:2px;font-size:14px;font-weight:700;line-height:1.32;color:var(--navy)}
.fwheel-stock{margin:4px 0 5px;font-size:12px;font-weight:600;color:var(--fw-green)}
.fwheel-price{font-size:13px}
.fwheel-price s{color:var(--muted)}
.fwheel-price b{margin-inline-start:6px;font-size:16px;color:var(--fw-orange)}
.fwheel-unit{margin-inline-start:3px;font-size:12px;color:var(--muted)}
.fwheel-cta{padding:9px 13px 13px;transition:opacity .4s,filter .75s cubic-bezier(.45,0,.2,1)}
.fwheel-card:not(.is-active) .fwheel-cta{opacity:0;pointer-events:none}
.fwheel-offer{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:9px;
  background:linear-gradient(135deg,var(--fw-btn1),var(--fw-btn2));font-size:13px;font-weight:700;color:#fff;text-decoration:none}
.fwheel-offer:hover{filter:brightness(1.06);box-shadow:0 5px 15px rgba(238,122,43,.34)}

/* Arrows: centred on the wheel (not the card image), inset 18px, frosted so they read on light and dark. */
.fwheel-arrow{position:absolute;top:50%;z-index:300;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.75);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;
  box-shadow:0 6px 18px rgba(12,59,104,.22),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .2s,color .2s,transform .2s cubic-bezier(.45,0,.2,1),box-shadow .2s}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .fwheel-arrow{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.fwheel-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fwheel-arrow:hover{background:#fff;color:var(--orange2);transform:translateY(-50%) scale(1.06);box-shadow:0 10px 24px rgba(12,59,104,.28)}
.fwheel-arrow:active{transform:translateY(-50%) scale(.95)}
.fwheel-arrow:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue),0 6px 18px rgba(12,59,104,.22)}
.fwheel-prev{inset-inline-start:18px}
.fwheel-next{inset-inline-end:18px}
[dir=rtl] .fwheel-arrow svg{transform:scaleX(-1)}
.fwheel-wrap.narrow .fwheel-arrow{display:none}

/* Swipe hint: one frosted grey pill — a white pointing hand presses and swipes toward the next card
   (orange touch point, growing trail), twice. Touch devices only, on every visit (featured-wheel.js). */
.fwheel-hint{position:absolute;left:50%;z-index:320;pointer-events:none;opacity:0;transform:translateX(-50%) scale(.92);
  transition:opacity .35s cubic-bezier(.45,0,.2,1),transform .35s cubic-bezier(.45,0,.2,1)}
.fwheel-hint.play{opacity:1;transform:translateX(-50%) scale(1)}
.fwheel-hint-pill{display:flex;align-items:center;gap:6px;height:50px;padding:0 18px 0 6px;border-radius:999px;white-space:nowrap;
  background:rgba(80,88,100,.82);border:1px solid rgba(255,255,255,.38);box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .fwheel-hint-pill{background:linear-gradient(180deg,rgba(110,118,130,.46),rgba(70,78,90,.42));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
}
.fwheel-hint-gesture{position:relative;flex:none;width:74px;height:40px}
.fwheel-hint-track{position:absolute;left:14px;right:14px;top:9px;height:2px;border-radius:2px;background:rgba(255,255,255,.4)}
.fwheel-hint-trail{position:absolute;left:17px;top:8px;width:40px;height:4px;border-radius:4px;opacity:0;transform:scaleX(0);transform-origin:right center;
  background:linear-gradient(90deg,rgba(238,122,43,0),rgba(238,122,43,.9))}
[dir=rtl] .fwheel-hint-trail{transform-origin:left center;background:linear-gradient(270deg,rgba(238,122,43,0),rgba(238,122,43,.9))}
.fwheel-hint-mover{position:absolute;left:37px;top:10px;width:0;height:0;opacity:0}
.fwheel-hint-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#ee7a2b;
  box-shadow:0 0 0 4px rgba(238,122,43,.28),0 0 14px rgba(246,162,74,.9)}
.fwheel-hint-hand{position:absolute;left:-9.2px;top:-1.6px;width:26px;height:30px;max-width:none;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.fwheel-hint-text{font-size:13px;font-weight:700;letter-spacing:.1px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.fwheel-hint.play .fwheel-hint-mover{animation:fwheelHintMove 1.8s cubic-bezier(.45,0,.2,1) 2 both}
.fwheel-hint.play .fwheel-hint-trail{animation:fwheelHintTrail 1.8s cubic-bezier(.45,0,.2,1) 2 both}
.fwheel-hint.play .fwheel-hint-dot{animation:fwheelHintDot 1.8s ease-out 2 both}
.fwheel-hint.play .fwheel-hint-hand{animation:fwheelHintPress 1.8s ease-out 2 both}
/* --hd is the wheel's direction (1 LTR, −1 RTL): the hand swipes toward the NEXT card. */
@keyframes fwheelHintMove{
  0%{transform:translateX(calc(20px * var(--hd,1)));opacity:0}
  10%{opacity:1}
  20%{transform:translateX(calc(20px * var(--hd,1)))}
  64%{transform:translateX(calc(-20px * var(--hd,1)))}
  80%{opacity:1}
  94%,100%{transform:translateX(calc(-20px * var(--hd,1)));opacity:0}}
@keyframes fwheelHintTrail{0%,20%{transform:scaleX(0);opacity:0}24%{opacity:.95}64%{transform:scaleX(1);opacity:.95}88%,100%{transform:scaleX(1);opacity:0}}
@keyframes fwheelHintDot{0%,10%{transform:scale(.4);opacity:0}18%{transform:scale(1.15);opacity:1}24%,62%{transform:scale(1);opacity:1}72%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes fwheelHintPress{0%,12%{transform:translateY(0) scale(1)}18%,62%{transform:translateY(1.5px) scale(.96)}70%,100%{transform:translateY(0) scale(1)}}

.fwheel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Phone layout lives in responsive.css. */