/* ============================================================
   MINIMAN — Shop "Orbit Fan" (shop.html)
   Cards sit on the top arc of a big hidden circle; shop-fan.js
   rotates the wheel. Page scrolls normally (footer below).
   ============================================================ */

.fan {
  --gutter: clamp(16px, 3.4vw, 48px);
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 460px;
  max-height: 960px;
  overflow: hidden;
  overflow: clip;              /* clip (not hidden): rotated hidden cards must never make the stage scrollable */
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}
.fan::before {                 /* dot grid, same family as .page-hero */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(75% 85% at 40% 40%, #000, transparent 80%);
  mask-image: radial-gradient(75% 85% at 40% 40%, #000, transparent 80%);
  pointer-events: none;
}
.fan::after {                  /* Fading Border (static): stage melts into the footer colour */
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 90px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}

/* colour glow that follows the active product's accent */
.fan__glow {
  position: absolute; z-index: 0;
  width: min(900px, 90vw); aspect-ratio: 1;
  left: 40%; top: 36%;
  translate: -50% -50%;
  border-radius: 50%;
  background-color: rgba(231,205,132,0.3);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
  transition: background-color 0.7s var(--ease);
  pointer-events: none;
}

/* ---------- toolbar ---------- */
.fan__toolbar {
  position: absolute; z-index: 5;
  inset-inline: var(--gutter);
  top: calc(var(--nav-h) + 12px);
  display: flex; align-items: center; gap: 0.7rem;
}
.fan__search {
  position: relative; flex: 0 0 auto; width: clamp(150px, 16vw, 230px);
}
.fan__search svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; opacity: 0.6; pointer-events: none; }
.fan__search input,
.fan__sort select {
  width: 100%; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: rgba(255,255,255,0.06); color: var(--white);
  font: inherit; font-size: 0.9rem;
  padding: 0 14px;
}
.fan__search input { padding-inline-start: 36px; }
.fan__search input::placeholder { color: rgba(255,255,255,0.4); }
.fan__sort { flex: 0 0 auto; }
.fan__sort select { width: auto; padding-inline-end: 8px; cursor: pointer; }
.fan__sort select option { background: var(--ink-2); color: var(--white); }
.fan__search input:focus, .fan__sort select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231,205,132,0.22); }

.fan__chips {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 0.45rem;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 26px 2px 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
}
.fan__chips::-webkit-scrollbar { display: none; }
.fan__chip {
  flex: 0 0 auto; height: 38px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: transparent; color: rgba(255,255,255,0.78);
  font: inherit; font-size: 0.86rem; cursor: pointer; white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.fan__chip:hover { border-color: var(--accent); color: var(--white); }
.fan__chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fan__chip:focus-visible, .fan__arrow:focus-visible, .fan__size:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fan__sep { flex: 0 0 1px; height: 20px; background: var(--line); margin-inline: 0.2rem; }

/* ---------- headline (above the cards, like the original) ---------- */
.fan__title {
  position: absolute; z-index: 4;
  inset-inline-start: var(--gutter);
  top: calc(var(--nav-h) + 72px);
  margin: 0; text-align: start;
  font-size: clamp(3.4rem, 10vw, 9rem);
  line-height: 0.85; letter-spacing: -0.04em; font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(231,205,132,0.55);
  pointer-events: none;
}

/* ---------- wheel + cards ---------- */
.fan__wheel {
  position: absolute; inset: 0; z-index: 2;
  direction: ltr;              /* geometry is absolute; text inside cards re-inherits below */
  cursor: grab;
  touch-action: pan-y;         /* horizontal drag rotates, vertical swipe still scrolls the page */
  user-select: none; -webkit-user-select: none;
}
.fan__wheel.is-drag { cursor: grabbing; }
.fcard {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--tint, rgba(231,205,132,0.25)), var(--ink-2) 62%);
  box-shadow: 0 22px 34px -22px rgba(0,0,0,0.7);   /* light shadow: perf */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: border-color 0.3s var(--ease);
  direction: inherit;
}
html[dir="rtl"] .fcard { direction: rtl; }
.fcard.is-active { border-color: var(--accent); }
.fcard__art { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 10% 7% 2%; }
.fcard__art img {
  width: 100%; height: 100%; object-fit: contain;
  rotate: -9deg; scale: 0.94;
  -webkit-user-drag: none; pointer-events: none;
}
.fcard__art::after {             /* cheap ground shadow (no filter/blur: perf) */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 6%; height: 12%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}
.fcard__art img { position: relative; z-index: 1; }
.fcard__tag {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.fcard__label { padding: 10px 14px 13px; display: flex; flex-direction: column; gap: 1px; }
.fcard__brand { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.fcard__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard__price { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* ---------- info + buy panel ---------- */
.fan__panel {
  position: absolute; z-index: 3;
  inset-inline-start: var(--gutter);
  bottom: 44px;
  width: min(420px, 34vw);
}
.fan__panel::before {            /* scrim: neighbour cards slide *behind* the panel instead of vanishing */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -70px -90px -36px calc(var(--gutter) * -1 - 10px);
  background: linear-gradient(to right, rgba(11,12,16,0.98) 0%, rgba(11,12,16,0.96) 66%, rgba(11,12,16,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px);   /* feather the top edge so it never cuts a card */
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
}
html[dir="rtl"] .fan__panel::before {
  inset: -70px calc(var(--gutter) * -1 - 10px) -36px -90px;
  background: linear-gradient(to left, rgba(11,12,16,0.98) 0%, rgba(11,12,16,0.96) 66%, rgba(11,12,16,0) 100%);
}
.fpanel { transition: opacity 0.28s var(--ease), translate 0.28s var(--ease); }
.fpanel.is-out { opacity: 0; translate: 0 8px; }
.fpanel__eyebrow { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.fpanel__name { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.02; }
.fpanel__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 14px; }
.fpanel__price { font-size: 1.35rem; font-weight: 600; }
.fpanel__price s { font-size: 0.95rem; font-weight: 400; color: rgba(255,255,255,0.45); margin-inline-start: 0.5rem; }
.fpanel__off { padding: 2px 8px; border-radius: var(--r-full); background: rgba(231,205,132,0.16); color: var(--accent); font-size: 0.78rem; font-weight: 600; }
.fpanel__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.fpanel__rating svg { width: 14px; height: 14px; color: var(--accent); }
.fpanel__sizes-label { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.fpanel__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fan__size {
  min-width: 44px; height: 40px; padding: 0 10px;          /* >= 40px hit area */
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.05); color: var(--white);
  font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fan__size:hover:not(:disabled) { border-color: var(--accent); }
.fan__size[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); font-weight: 600; }
.fan__size:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.fpanel__sizes.is-nudge { animation: fan-nudge 0.4s var(--ease); }
@keyframes fan-nudge { 25% { translate: -6px 0; } 60% { translate: 6px 0; } }
.fpanel__hint { margin: -6px 0 8px; font-size: 0.82rem; color: #ff8a80; }
.fpanel__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fpanel__actions .btn { min-height: 46px; }
.fpanel__wish {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--white); cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.fpanel__wish svg { width: 20px; height: 20px; }
.fpanel__wish:hover, .fpanel__wish.is-wished { border-color: var(--accent); color: var(--accent); }
.fpanel__link { color: rgba(255,255,255,0.8); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; }
.fpanel__link:hover { color: var(--accent); }

/* ---------- counter + arrows + hint ---------- */
.fan__ctl {
  position: absolute; z-index: 3;
  inset-inline-end: var(--gutter); bottom: 96px;      /* clear of the site's floating WhatsApp button */
  display: flex; align-items: center; gap: 0.7rem;
  direction: ltr;
}
.fan__count { display: inline-flex; align-items: baseline; gap: 4px; margin-inline-end: 0.6rem; font-family: var(--font-display); font-style: italic; color: rgba(255,255,255,0.5); }
.fan__count b { font-size: 2.4rem; font-weight: 600; color: var(--white); min-width: 2ch; text-align: end; }
.fan__count i { font-style: normal; opacity: 0.5; }
.fan__arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,0.06); color: var(--white);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.fan__arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fan__hint {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 14px; margin: 0;
  text-align: center; font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.4);
  pointer-events: none;
}
.fan__empty {
  position: absolute; z-index: 3; inset: 0; margin: 0;
  display: grid; place-items: center; text-align: center; padding: 0 var(--gutter);
  color: rgba(255,255,255,0.65); font-size: 1.1rem; pointer-events: none;
}
.fan__empty[hidden] { display: none; }
.fan.is-empty .fan__panel, .fan.is-empty .fan__ctl, .fan.is-empty .fan__hint, .fan.is-empty .fan__wheel { visibility: hidden; }

/* ---------- short desktop viewports (e.g. 140% zoom): keep the whole buy panel on screen ---------- */
@media (min-width: 761px) and (max-height: 720px) {
  .fan__panel { bottom: 28px; }
  .fpanel__eyebrow { margin-bottom: 3px; }
  .fpanel__name { font-size: 1.7rem; margin-bottom: 4px; }
  .fpanel__meta { margin-bottom: 8px; }
  .fpanel__sizes-label { margin-bottom: 4px; }
  .fpanel__sizes { gap: 5px; margin-bottom: 10px; }
  .fan__size { height: 36px; min-width: 42px; }
  .fpanel__actions .btn { min-height: 42px; }
  .fpanel__wish { width: 42px; height: 42px; }
  .fan__ctl { bottom: 90px; }
  .fan__title { font-size: clamp(3rem, 8vw, 6rem); }
}

@media (min-width: 761px) and (max-height: 600px) {   /* very short windows, e.g. 140% zoom on a laptop */
  .fpanel__sizes-label, .fan__hint { display: none; }
  .fpanel__name { font-size: 1.5rem; }
  .fan__size { height: 32px; min-width: 38px; font-size: 0.82rem; }
  .fpanel__actions .btn, .fpanel__wish { min-height: 38px; height: 38px; }
  .fpanel__wish { width: 38px; }
  .fan__panel { bottom: 18px; }
  .fan__ctl { bottom: 70px; }
}

/* the controls are direction:ltr, which flips how logical "end" resolves, so pin them explicitly in RTL */
html[dir="rtl"] .fan__ctl { inset-inline: auto; left: var(--gutter); right: auto; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1000px) {
  .fan__panel { width: min(360px, 44vw); }
}
@media (max-width: 760px) {
  .fan { min-height: 820px; }
  .fan__toolbar { flex-wrap: wrap; row-gap: 0.5rem; top: calc(var(--nav-h) + 6px); }
  .fan__search { flex: 1 1 0; width: auto; }
  .fan__chips { order: 3; flex: 0 0 100%; }
  .fan__title { top: calc(var(--nav-h) + 108px); font-size: 3rem; }
  .fan__panel { inset-inline: var(--gutter); width: auto; bottom: 56px; }
  .fpanel__sizes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .fpanel__sizes::-webkit-scrollbar { display: none; }
  .fan__size { flex: 0 0 auto; }
  .fpanel__name { font-size: 1.6rem; margin-bottom: 4px; }
  .fpanel__meta { margin-bottom: 8px; }
  .fpanel__link { display: none; }
  .fan__ctl { inset-inline-end: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 108px); }
  .fan__count { display: none; }
  .fan__arrow { width: 44px; height: 44px; }
  .fan__hint { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .fpanel, .fan__glow, .fcard { transition: none; }
  .fpanel__sizes.is-nudge { animation: none; }
}