/* ==========================================================================
   NOOR · Showroom + Freddo Style Quiz (pages under the site-v2 shell)
   Uses the noor.css tokens: Archivo speaks, Jost reads, ink on white.
   ========================================================================== */
.fx { --fx-ink: #1A1A1A; --fx-soft: #565653; --fx-tint: #EDECE8; --fx-hair: rgba(26,26,26,.14); --fx-hair2: rgba(26,26,26,.3);
  --fx-ease: cubic-bezier(.23,1,.32,1); --fx-gut: clamp(20px, 4.4vw, 72px);
  --fx-sh1: 0 1px 2px rgba(20,18,14,.08), 0 3px 8px rgba(20,18,14,.05); --fx-sh2: 0 2px 4px rgba(20,18,14,.07), 0 14px 30px -10px rgba(20,18,14,.2);
  color: var(--fx-ink); position: relative; z-index: 1; isolation: isolate; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx [hidden] { display: none !important; }
.fx :focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 3px; border-radius: 6px; }

/* ---- page head */
.fx-head { padding: clamp(120px, 18vh, 180px) var(--fx-gut) clamp(40px, 6vh, 64px); max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.fx-kicker { margin: 0 0 14px; font: 650 .9375rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--fx-soft); }
.fx-title { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 4vw, 5.25rem)/.95 var(--sc-font-display); letter-spacing: -0.04em; text-wrap: balance; }
.fx-lede { margin: 0 0 20px; font: 400 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.5 var(--sc-font-text); color: var(--fx-soft); max-width: 36rem; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 650 1rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap; background: var(--fx-ink); color: #fff; box-shadow: var(--fx-sh1);
  transition: transform 140ms var(--fx-ease), background-color 160ms var(--fx-ease), box-shadow 160ms var(--fx-ease); }
.fx-btn--quiet { background: transparent; color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-hair2); }
@media (hover: hover) and (pointer: fine) { .fx-btn:hover { background: #333331; box-shadow: var(--fx-sh2); } .fx-btn--quiet:hover { background: var(--fx-tint); box-shadow: inset 0 0 0 1.5px var(--fx-ink); } }
.fx-btn:active { transform: scale(.97); }
.fx-link { color: inherit; font: 650 1rem/1.3 var(--sc-font-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--fx-hair2); }
.fx-link:hover { text-decoration-color: currentColor; }
.fx-visit { display: inline-flex; align-items: center; gap: 10px; color: var(--fx-ink); text-decoration: none; font: 650 1rem/1 var(--sc-font-text); min-height: 48px; }
.fx-visit b { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--fx-tint); font-size: .875rem; }
.fx-visit.has b { background: var(--fx-ink); color: #fff; }

/* ---- filters */
.fx-shop { max-width: 1400px; margin: 0 auto; padding: 0 var(--fx-gut) clamp(80px, 12vh, 140px); }
.fx-filters { display: grid; gap: 16px; padding: 24px; border-radius: 14px; background: #fff; box-shadow: var(--fx-sh1); margin-bottom: 28px; }
.fx-frow { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; align-items: start; }
.fx-frow > span { padding-top: 10px; font: 650 .9375rem/1.2 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--fx-soft); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--fx-tint); color: var(--fx-ink);
  font: 650 .9375rem/1 var(--sc-font-text); transition: background-color 160ms var(--fx-ease), color 160ms var(--fx-ease), transform 140ms var(--fx-ease); }
.fx-chip[aria-pressed="true"] { background: var(--fx-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .fx-chip:hover { box-shadow: inset 0 0 0 1.5px var(--fx-ink); } .fx-chip[aria-pressed="true"]:hover { box-shadow: none; } }
.fx-chip:active { transform: scale(.96); }
.fx-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 0 0 20px; }
.fx-bar h2 { margin: 0; font: 800 1.75rem/1 var(--sc-font-display); letter-spacing: -0.02em; }
.fx-sort { display: inline-flex; align-items: center; gap: 10px; font: 650 .9375rem var(--sc-font-text); color: var(--fx-soft); }
.fx-sort select { min-height: 44px; padding: 0 36px 0 14px; border-radius: 999px; border: 1.5px solid var(--fx-hair2); background: #fff; font: 650 .9375rem var(--sc-font-text); color: var(--fx-ink); cursor: pointer; }

/* ---- the card */
.fx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 24px; }
.fx-card { position: relative; display: flex; flex-direction: column; }
.fx-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: #fff; box-shadow: var(--fx-sh1); overflow: hidden; display: grid; place-items: center; }
.fx-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: opacity 260ms var(--fx-ease); }
.fx-card__img .fx-card__side { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .fx-card:hover .fx-card__side { opacity: 1; } .fx-card:hover .fx-card__img img:first-child { opacity: 0; } }
.fx-card__noimg { font: 650 .9375rem var(--sc-font-text); color: var(--fx-soft); }
.fx-card__tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 7px 10px; border-radius: 999px; background: var(--fx-ink); color: #fff; font: 650 .8125rem/1 var(--sc-font-text); }
.fx-card__kind { margin: 14px 0 0; font: 650 .875rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-soft); }
.fx-card__name { margin: 6px 0 0; font: 800 1.625rem/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.fx-card__colour { margin: 4px 0 0; font: 400 1rem/1.3 var(--sc-font-text); color: var(--fx-soft); }
.fx-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.fx-dot { width: 36px; height: 36px; padding: 5px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 160ms var(--fx-ease), transform 140ms var(--fx-ease); }
.fx-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.fx-dot[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--fx-ink); }
@media (hover: hover) and (pointer: fine) { .fx-dot:hover { box-shadow: inset 0 0 0 1.5px var(--fx-hair2); } .fx-dot[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--fx-ink); } }
.fx-dot:active { transform: scale(.92); }
.fx-dots__n { margin-left: 4px; font: 400 .9375rem var(--sc-font-text); color: var(--fx-soft); }
.fx-lang { display: inline-flex; align-self: flex-start; gap: 2px; margin-top: 12px; padding: 3px; border-radius: 999px; background: var(--fx-tint); }
.fx-lang button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--fx-soft); cursor: pointer; font: 650 .8125rem/1 var(--sc-font-text); }
.fx-lang button[lang="ar"] { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
.fx-lang button[aria-pressed="true"] { background: #fff; color: var(--fx-ink); box-shadow: var(--fx-sh1); }
.fx-card__desc { margin: 10px 0 0; font: 400 1rem/1.5 var(--sc-font-text); color: var(--fx-soft); }
.fx-card__desc[dir="rtl"] { text-align: right; font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.75; }
.fx-card__price { margin: 10px 0 0; font: 650 1rem/1.35 var(--sc-font-text); }
.fx-why { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-why li { padding: 7px 10px; border-radius: 999px; background: var(--fx-tint); font: 650 .8125rem/1 var(--sc-font-text); }
.fx-add { margin-top: auto; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-hair2); font: 650 .9375rem/1 var(--sc-font-text);
  transition: background-color 160ms var(--fx-ease), color 160ms var(--fx-ease), transform 140ms var(--fx-ease); }
.fx-card > .fx-add { margin-top: 16px; }
.fx-add__plus { position: relative; width: 12px; height: 12px; transition: transform 240ms var(--fx-ease); }
.fx-add__plus::before, .fx-add__plus::after { content: ""; position: absolute; left: 5px; top: 0; width: 2px; height: 12px; background: currentColor; border-radius: 1px; }
.fx-add__plus::after { transform: rotate(90deg); }
.fx-add[aria-pressed="true"] { background: var(--fx-ink); color: #fff; box-shadow: none; }
.fx-add[aria-pressed="true"] .fx-add__plus { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .fx-add:hover { box-shadow: inset 0 0 0 1.5px var(--fx-ink); } .fx-add[aria-pressed="true"]:hover { background: #333331; } }
.fx-add:active { transform: scale(.97); }
.fx-add.pop { animation: fx-pop 380ms var(--fx-ease); }
@keyframes fx-pop { 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.fx-more { display: flex; justify-content: center; margin-top: 40px; }
.fx-note { padding: 20px; border-radius: 10px; background: var(--fx-tint); font: 400 1rem/1.5 var(--sc-font-text); }

/* ---- the quiz */
.fx-quiz { max-width: 1100px; margin: 0 auto; padding: 0 var(--fx-gut) clamp(80px, 12vh, 140px); scroll-margin-top: 90px; }
.fx-steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--fx-tint); color: var(--fx-soft); font: 650 1rem/1 var(--sc-font-text); }
.fx-steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fx-ink); font-size: .875rem; }
.fx-steps li[aria-current="step"] { background: var(--fx-ink); color: #fff; }
.fx-steps li.is-done span { background: var(--fx-ink); color: #fff; }
.fx-form { background: #fff; border-radius: 16px; padding: clamp(22px, 3.4vw, 44px); box-shadow: var(--fx-sh2); }
.fx-q { margin: 0 0 22px; font: 800 clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem)/1.08 var(--sc-font-display); letter-spacing: -0.025em; }
.fx-opts { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-opts legend { width: 100%; margin-bottom: 12px; padding: 0; font: 650 .9375rem/1.3 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-soft); }
.fx-opts label { position: relative; cursor: pointer; }
.fx-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fx-opts label > span { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px; border-radius: 999px; background: #F5F5F2; box-shadow: inset 0 0 0 1.5px var(--fx-hair);
  font: 650 1.0625rem/1.1 var(--sc-font-text); transition: background-color 160ms var(--fx-ease), color 160ms var(--fx-ease), box-shadow 160ms var(--fx-ease), transform 140ms var(--fx-ease); }
.fx-opts--face label > span { flex-direction: column; justify-content: center; gap: 8px; width: 104px; min-height: 116px; padding: 12px 6px; border-radius: 16px; }
.fx-opts--face svg { width: 34px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-sw { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.fx-sw--q { background: var(--fx-tint); box-shadow: inset 0 0 0 1.5px var(--fx-hair2); }
.fx-opts input:checked + span { background: var(--fx-ink); color: #fff; box-shadow: none; }
.fx-opts input:focus-visible + span { outline: 2px solid var(--fx-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .fx-opts label:hover > span { box-shadow: inset 0 0 0 1.5px var(--fx-ink); } .fx-opts input:checked + span { box-shadow: none; } }
.fx-opts label:active > span { transform: scale(.97); }
.fx-hint { margin: -8px 0 10px; font: 400 1rem/1.5 var(--sc-font-text); color: var(--fx-soft); max-width: 44rem; }
.fx-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 22px; border-top: 1px solid var(--fx-hair); }
.fx-nav [data-q-next] { margin-left: auto; }
.fx-need { width: 100%; margin: 0; text-align: right; font: 650 1rem var(--sc-font-text); min-height: 1.2em; }
.fx-out { outline: none; scroll-margin-top: 90px; }
.fx-profile { margin: 0 0 12px; font: 650 1.125rem/1.4 var(--sc-font-text); }
.fx-advice { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.fx-advice li { position: relative; padding-left: 22px; font: 400 1.0625rem/1.5 var(--sc-font-text); color: var(--fx-soft); }
.fx-advice li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fx-ink); }
.fx-offer { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; margin: 36px 0 0; padding: 28px; border-radius: 16px; background: var(--fx-ink); color: #fff; }
.fx-offer h3 { margin: 0 0 6px; font: 800 1.75rem/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.fx-offer p { margin: 0; color: #D9D9D5; font: 400 1rem/1.5 var(--sc-font-text); }
.fx-offer .fx-btn { background: #fff; color: var(--fx-ink); }

@media (max-width: 899px) {
  .fx-head { grid-template-columns: 1fr; padding-top: 110px; }
  .fx-frow { grid-template-columns: 1fr; gap: 8px; }
  .fx-frow > span { padding-top: 0; }
  .fx-filters { padding: 18px; }
  .fx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; }
  .fx-chips::-webkit-scrollbar { display: none; }
  .fx-chip { flex: none; }
  .fx-grid { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
  .fx-card__name { font-size: 1.375rem; }
  .fx-opts--face label > span { width: 84px; min-height: 100px; }
  .fx-opts label > span { min-height: 50px; padding: 0 18px; font-size: 1rem; }
  .fx-nav [data-q-next] { flex: 1; }
  .fx-need { text-align: left; }
  .fx-offer { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .fx-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fx *, .fx *::before { transition-duration: 1ms !important; animation: none !important; } }

/* ======================================= over the background video (2026-10-20)
   The film plays behind the page. Text never sits on raw footage: the header
   is white type on a dark band, filters and frames are solid white surfaces. */
.fx-head { position: relative; max-width: none; margin: 0; padding-left: max(var(--fx-gut), calc((100vw - 1400px) / 2 + var(--fx-gut))); padding-right: max(var(--fx-gut), calc((100vw - 1400px) / 2 + var(--fx-gut)));
  color: #fff; background: linear-gradient(180deg, rgba(14,14,13,.78) 0%, rgba(14,14,13,.62) 70%, rgba(14,14,13,.34) 100%); }
.fx-head .fx-kicker { color: rgba(255,255,255,.82); }
.fx-head .fx-lede { color: rgba(255,255,255,.92); }
.fx-head .fx-link, .fx-head .fx-visit { color: #fff; }
.fx-head .fx-link { text-decoration-color: rgba(255,255,255,.55); }
.fx-head .fx-visit b { background: rgba(255,255,255,.2); color: #fff; }
.fx-head .fx-visit.has b { background: #fff; color: var(--fx-ink); }
.fx-head .fx-btn { background: #fff; color: var(--fx-ink); }
@media (hover: hover) and (pointer: fine) { .fx-head .fx-btn:hover { background: #EDEDEA; } }
.fx-btn--light { background: #fff; color: var(--fx-ink); }
@media (hover: hover) and (pointer: fine) { .fx-btn--light:hover { background: #EDEDEA; } }
.fx-reset { background: none; border: 0; padding: 0; cursor: pointer; }
.fx-shop { padding-top: 32px; }
.fx-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.fx-side { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; display: grid; gap: 20px; padding: 22px; border-radius: 16px; background: #fff; box-shadow: var(--fx-sh2); scrollbar-width: thin; }
.fx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--fx-hair); }
.fx-side__head h2 { margin: 0; font: 800 1.375rem/1 var(--sc-font-display); letter-spacing: -0.01em; }
.fx-side .fx-frow { grid-template-columns: 1fr; gap: 10px; }
.fx-side .fx-frow > span { padding-top: 0; }
.fx-side .fx-chips { gap: 6px; }
.fx-side .fx-chip { min-height: 40px; padding: 0 14px; }
.fx-side__close, .fx-side__done, .fx-filters-open { display: none; }
.fx-bar { padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: var(--fx-sh1); }
.fx-card { background: #fff; border-radius: 16px; padding: 12px 12px 16px; box-shadow: var(--fx-sh2); }
.fx-card__img { box-shadow: none; background: #fff; border-radius: 10px; }
.fx-card__kind, .fx-card__name, .fx-card__colour, .fx-dots, .fx-lang, .fx-card__desc, .fx-card__price, .fx-why { margin-left: 6px; margin-right: 6px; }
.fx-card__tag { left: 20px; top: 20px; }
.fx-more { margin-top: 32px; }
.fx-offer { box-shadow: var(--fx-sh2); }
.fx-note { background: #fff; box-shadow: var(--fx-sh1); }
.fx-out { background: #fff; border-radius: 16px; padding: clamp(22px, 3.4vw, 44px); box-shadow: var(--fx-sh2); }
.fx-out .fx-card { box-shadow: 0 0 0 1px var(--fx-hair), var(--fx-sh1); }
.fx-out .fx-more { justify-content: center; }
.fx-out .fx-btn--light { background: var(--fx-ink); color: #fff; }
.fx-after { margin-top: 24px; }
.fx-steps li { background: rgba(255,255,255,.9); color: var(--fx-ink); box-shadow: var(--fx-sh1); }
.fx-steps li[aria-current="step"] { background: var(--fx-ink); color: #fff; }
.fx-quiz { padding-top: 32px; }
html.fx-lock { overflow: hidden; }

@media (max-width: 1099px) {
  .fx-layout { grid-template-columns: 1fr; }
  .fx-filters-open { display: inline-flex; position: sticky; top: 76px; z-index: 30; margin: 0 0 16px; box-shadow: var(--fx-sh2); }
  .fx-filters-open b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--fx-ink); font-size: .8125rem; }
  .fx-side { position: fixed; z-index: 300; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translate3d(0, 104%, 0); visibility: hidden; transition: transform 380ms cubic-bezier(.32,.72,0,1), visibility 0s 380ms; box-shadow: 0 -20px 60px rgba(0,0,0,.3); }
  .fx-side.is-open { transform: none; visibility: visible; transition: transform 420ms cubic-bezier(.32,.72,0,1), visibility 0s; }
  .fx-side .fx-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .fx-side__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fx-tint); cursor: pointer; position: relative; }
  .fx-side__close span::before, .fx-side__close span::after { content: ""; position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; background: var(--fx-ink); transform: rotate(45deg); }
  .fx-side__close span::after { transform: rotate(-45deg); }
  .fx-side__done { display: flex; position: sticky; bottom: 0; }
  .fx-side__head .fx-reset { margin-left: auto; }
}
@media (max-width: 899px) {
  .fx-head { padding-top: 104px; }
  .fx-card { padding: 10px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .fx-side { transition: none !important; } }

/* the filter sheet sits above the phone action bar and the floating dock, which step aside while it is open */
@media (max-width: 1099px) { .fx-side { z-index: 1200; } html.fx-lock .actbar, html.fx-lock .dock { opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 24px, 0); transition: opacity 180ms ease, transform 220ms cubic-bezier(.23,1,.32,1), visibility 0s 220ms; } }
.fx .fx-head .fx-title, .fx .fx-head h1 { color: #fff; }
.fx .fx-offer h3, .fx .fx-offer p { color: #fff; }
.fx .fx-offer p { color: rgba(255,255,255,.86); }

/* ======================================= phones: lighter, denser (2026-10-21)
   Two compact cards per row, like a real shop shelf. The description and its
   language switch open per card with "Details" (the card then spans the row). */
.fx-details { display: none; }
@media (max-width: 599px) {
  .fx-head { padding-top: 88px; padding-bottom: 28px; gap: 14px; }
  .fx-title { font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; }
  .fx-lede { font-size: 1rem; line-height: 1.55; }
  .fx-head .fx-btn { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
  .fx-shop, .fx-quiz { padding-top: 16px; }
  .fx-filters-open { min-height: 40px; padding: 0 16px; font-size: .9375rem; top: 70px; }
  .fx-bar { padding: 10px 14px; border-radius: 12px; }
  .fx-bar h2 { font-size: 1.125rem; }
  .fx-sort { font-size: .875rem; }
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .fx-card { padding: 6px 6px 10px; border-radius: 14px; box-shadow: 0 1px 2px rgba(26,26,26,.06), 0 6px 18px -8px rgba(26,26,26,.18); }
  .fx-card__img { aspect-ratio: 1 / 1; border-radius: 10px; }
  .fx-card__img img { padding: 8px; }
  .fx-card__tag { left: 10px; top: 10px; padding: 5px 7px; font-size: .6875rem; }
  .fx-card__tag { max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-card__kind, .fx-card__name, .fx-card__colour, .fx-dots, .fx-lang, .fx-card__desc, .fx-card__price, .fx-why, .fx-details { margin-left: 4px; margin-right: 4px; }
  .fx-card__kind { margin-top: 10px; font-size: .6875rem; letter-spacing: .08em; }
  .fx-card__name { margin-top: 4px; font-size: 1.125rem; line-height: 1.15; }
  .fx-card__colour { margin-top: 2px; font-size: .875rem; }
  .fx-dots { gap: 0; margin-top: 6px; }
  .fx-dot { width: 36px; height: 36px; padding: 8px; } /* same 20px dot, a finger-sized target */
  .fx-dots__n { display: none; }
  .fx-card__price { margin-top: 6px; font-size: .875rem; line-height: 1.35; }
  .fx-why { gap: 4px; margin-top: 6px; }
  .fx-why li { padding: 5px 7px; font-size: .6875rem; }
  .fx-card .fx-lang, .fx-card .fx-card__desc { display: none; }
  .fx-details { display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; margin-top: 2px; padding: 0; border: 0; background: none;
    color: var(--fx-ink); font: 650 .8125rem/1 var(--sc-font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .fx-card > .fx-add { margin-top: 8px; min-height: 40px; padding: 0 10px; gap: 7px; font-size: .8125rem; }
  .fx-add__plus { width: 10px; height: 10px; }
  .fx-add__plus::before, .fx-add__plus::after { left: 4px; height: 10px; }
  /* "Details": the card takes the whole row and shows the description */
  .fx-card.is-open { grid-column: 1 / -1; }
  .fx-card.is-open .fx-card__img { aspect-ratio: 16 / 10; }
  .fx-card.is-open .fx-lang { display: inline-flex; }
  .fx-card.is-open .fx-card__desc { display: block; font-size: .9375rem; }
  .fx-card.is-open .fx-dots__n { display: inline; }
  .fx-out { padding: 16px 12px; border-radius: 14px; }
  .fx-offer { padding: 20px; gap: 14px; }
  .fx-offer h3 { font-size: 1.375rem; }
  .fx-steps li { font-size: .875rem; min-height: 36px; }
}
.fx-tag-s { display: none; }
@media (max-width: 599px) { .fx-tag-l { display: none; } .fx-tag-s { display: inline; } }
@media (max-width: 599px) {
  .fx-opts { gap: 8px; margin-bottom: 20px; }
  .fx-opts legend { margin-bottom: 10px; font-size: .8125rem; }
  .fx-opts label > span { min-height: 44px; padding: 0 16px; font-size: .9375rem; gap: 8px; }
  /* five face shapes in one row */
  .fx-opts--face { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .fx-opts--face legend { grid-column: 1 / -1; }
  .fx-opts--face label > span { width: auto; min-height: 76px; padding: 8px 2px; gap: 6px; border-radius: 12px; font-size: .75rem; text-align: center; line-height: 1.1; }
  .fx-opts--face svg { width: 24px; height: 30px; }
}
@media (max-width: 599px) { .fx-opts--face label { display: grid; } }

/* ======================================= Brands page (2026-10-21): the collections in the sheet */
.fx-brands { max-width: 1400px; margin: 0 auto; padding: 32px var(--fx-gut) 72px; }
.fx-brand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.fx-brand { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px 32px; align-items: center; padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--fx-sh2); }
.fx-brand__head { display: grid; gap: 8px; justify-items: start; }
.fx-brand__name { margin: 0; font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--sc-font-display); letter-spacing: -0.03em; color: var(--fx-ink); }
.fx-brand__meta { margin: 0; font: 400 1rem/1.4 var(--sc-font-text); color: var(--fx-soft); }
.fx-brand__offer { margin: 0; padding: 6px 10px; border-radius: 999px; background: var(--fx-ink); color: #fff; font: 650 .8125rem/1 var(--sc-font-text); }
.fx-brand__go { margin-top: 8px; background: var(--fx-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .fx-brand__go:hover { background: #000; } }
.fx-brand__pics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fx-brand__pics li { aspect-ratio: 1 / 1; border-radius: 10px; background: #F6F6F4; display: grid; place-items: center; overflow: hidden; }
.fx-brand__pics img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.fx-brands .fx-offer { margin-top: 32px; }
@media (max-width: 899px) {
  .fx-brand { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .fx-brand__pics { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
  .fx-brand__pics::-webkit-scrollbar { display: none; }
  .fx-brand__pics li { flex: 0 0 38%; scroll-snap-align: start; }
}
@media (max-width: 599px) {
  .fx-brands { padding: 16px var(--fx-gut) 48px; }
  .fx-brand-list { gap: 12px; }
  .fx-brand__name { font-size: 1.625rem; }
  .fx-brand__meta { font-size: .9375rem; }
  .fx-brand__go { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
}
/* phones: "Filters" sits in a full-width frosted strip, so cards slide under a bar, not under a lone button */
@media (max-width: 1099px) {
  .fx-filters-open { box-shadow: 0 0 0 100vmax rgba(247, 247, 245, .94); clip-path: inset(-10px -100vmax); }
}

/* "Email me my matches" (quiz results) */
.fx-mail { display: grid; gap: 14px; margin: 28px 0 0; padding: 22px; border-radius: 16px; background: #F6F6F4; box-shadow: inset 0 0 0 1px var(--fx-hair); }
.fx-mail__head h3 { margin: 0 0 4px; font: 800 1.375rem/1.1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--fx-ink); }
.fx-mail__head p { margin: 0; color: var(--fx-soft); font: 400 1rem/1.5 var(--sc-font-text); }
.fx-mail__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.fx-mail__f { display: grid; gap: 6px; font: 650 .9375rem/1.2 var(--sc-font-text); color: var(--fx-ink); }
.fx-mail__f input { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--fx-ink); border-radius: 12px; background: #fff; font: 400 1.0625rem var(--sc-font-text); color: var(--fx-ink); }
.fx-mail__f input:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 2px; }
.fx-mail__f input[aria-invalid="true"] { border-color: #A3261B; }
.fx-mail .fx-btn { min-height: 48px; background: var(--fx-ink); color: #fff; }
.fx-mail__c { display: flex; gap: 10px; align-items: flex-start; font: 400 .9375rem/1.5 var(--sc-font-text); color: var(--fx-soft); cursor: pointer; }
.fx-mail__c input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: #1A1A1A; }
.fx-mail__s { margin: 0; font: 650 .9375rem/1.4 var(--sc-font-text); color: var(--fx-ink); }
.fx-mail__s:empty { display: none; }
@media (max-width: 599px) { .fx-mail { padding: 18px 16px; } .fx-mail__row { grid-template-columns: 1fr; } .fx-mail .fx-btn { width: 100%; } }

/* frames worn by a model: the photo fills the card (cropped around the eyes); the frame itself shows on hover */
.fx-card__img img.is-model, .frames--freddo .frame__img img.is-model { object-fit: cover; padding: 0; }
.fx-ai-note { font-size: 13px; color: var(--fx-soft, #6b6b66); margin-top: 10px; }
.fx-head .fx-ai-note { color: rgba(255,255,255,.85); }   /* over the showroom film, like the lede */
.fx-brand__pics img.is-model { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* performance + touch (2026-10-21)
   1. While frames.json loads, the lists hold a screen of space and the empty filter
      rows hold one chip row, so the offer and the filters don't jump when the cards land. */
html:not([data-fx-ready]) [data-fx-grid]:has(> .fx-note:only-child),
html:not([data-fx-ready]) [data-fx-brand-list]:has(> .fx-note:only-child) { min-height: 100vh; }
html:not([data-fx-ready]) .fx-chips:empty { min-height: 42px; }
/* 2. Long card lists: the browser skips layout and paint for cards far off screen. */
.fx-grid > .fx-card { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.fx-brand-list > .fx-brand { content-visibility: auto; contain-intrinsic-size: auto 230px; }
@media (max-width: 599px) {
  .fx-grid > .fx-card { contain-intrinsic-size: auto 425px; }
  .fx-brand-list > .fx-brand { contain-intrinsic-size: auto 300px; }
}
/* 3. Phones: every control is at least 44px to the finger. Swatches and "Details" keep
      their look and get a taller invisible hit area. */
@media (max-width: 1099px) { .fx-side .fx-chip { min-height: 44px; } }
@media (max-width: 599px) {
  .fx-filters-open { min-height: 44px; }
  .fx-card > .fx-add { min-height: 44px; }
  .fx-dot, .fx-details { position: relative; }
  .fx-dot::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
  .fx-details::after { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; }
}