/* Fonts (Cormorant Garamond, Manrope, Cairo) are loaded via in
index.html's — not @import here, which is both invalid mid-file
and slower (it blocks on the CSS being parsed before the font request
even starts). */
:root {
--bg: #f7f5f0; --panel: #fbfaf7; --ink: #171714;
--stone: #6d6a63; --stone-light: #aaa69d; --line: #d7d3ca;
--accent: #5f6250; --accent-dark: #3f4234; --accent-soft: #e8e7df;
--danger: #8b2f27;
}
html, body { margin: 0; padding: 0; background: var(--bg); scroll-behavior: smooth; }
.alfera-root { font-family: 'Manrope', system-ui, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
.alfera-root * { box-sizing: border-box; }
::selection { color: var(--bg); background: var(--ink); }
.f-display { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; }
.f-body { font-family: 'Manrope', system-ui, sans-serif; }
.tracked { letter-spacing: .16em; }
.label { display: block; margin-bottom: 8px; color: var(--stone); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.seam { width: 100%; height: 1px; background: var(--line); }
.stitch-btn { position: relative; }
.stitch-btn::after { display: none; }
.btn { border: 1px solid transparent; border-radius: 0; padding: 14px 24px; font: 500 12px/1.2 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:active { opacity: .78; }
.btn-primary { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { color: var(--ink); background: transparent; }
.btn-primary:disabled { color: var(--panel); background: var(--stone-light); border-color: var(--stone-light); cursor: not-allowed; }
.btn-outline { color: var(--ink); background: transparent; border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost { color: var(--stone); background: transparent; border: 0; }
.btn-ghost:hover { color: var(--ink); }
.btn-accent { color: white; background: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); }
.chip { color: var(--stone); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 10px 16px; cursor: pointer; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: all .16s ease; }
.chip.active { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.chip:hover:not(.active) { color: var(--ink); border-color: var(--ink); }
.input { width: 100%; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; font: 16px 'Manrope', sans-serif; }
.input:focus { outline: 1px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.alfera-root > header { position: sticky !important; top: 0; z-index: 40; background: rgba(247,245,240,.94) !important; border-bottom: 1px solid var(--line) !important; backdrop-filter: blur(12px); }
.alfera-root > header > div:first-child { color: var(--bg) !important; background: var(--ink) !important; padding-block: 7px !important; font-size: 11px !important; letter-spacing: .1em !important; }
.alfera-root > header > div:nth-child(2) { max-width: 1480px !important; padding: 24px 30px !important; }
.alfera-root > header nav { gap: 34px !important; }
.alfera-root > header nav button { color: var(--stone) !important; padding: 0 0 4px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase; }
.alfera-root > header nav button:hover { color: var(--ink) !important; }
.alfera-root header + section { max-width: 1480px !important; padding: 32px 30px 90px !important; }
.alfera-root header + section > div { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; gap: 20px !important; }
.alfera-root header + section > div > div:first-child { order: 2 !important; min-height: 680px; padding: 50px !important; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; background: var(--panel); }
.alfera-root header + section > div > div:last-child { order: 1 !important; }
.alfera-root header + section > div > div:last-child > div { aspect-ratio: 3/4 !important; min-height: 680px; }
.alfera-root header + section h1 { max-width: 9ch; margin: 18px auto 26px !important; text-align: center; font-size: clamp(54px,6.3vw,98px) !important; font-weight: 400 !important; line-height: .9 !important; letter-spacing: -.045em !important; text-wrap: balance; }
.alfera-root header + section .label { color: var(--stone) !important; text-align: center; }
.alfera-root header + section p { max-width: 42ch !important; margin: 0 auto 34px !important; text-align: center; color: var(--stone) !important; }
.alfera-root header + section button { align-self: center; }
.alfera-root header + section img { filter: saturate(.7) contrast(1.01); transition: transform .8s ease, filter .8s ease; }
.alfera-root header + section:hover img { filter: saturate(.85); transform: scale(1.012); }
.alfera-root header + section + section:not(.ds-lookbook) { max-width: 1480px !important; padding: 0 30px 90px !important; }
.alfera-root header + section + section:not(.ds-lookbook) > * { border: 1px solid var(--line); }
.alfera-root header + section + section:not(.ds-lookbook) img { filter: saturate(.65); }
#alfera-grid > section { max-width: 1480px !important; padding: 0 30px 120px !important; }
#alfera-grid .seam { margin-bottom: 42px !important; }
#alfera-grid h2 { font-size: clamp(42px,5vw,72px) !important; font-weight: 400 !important; }
#alfera-grid h2 + p { letter-spacing: .14em; text-transform: uppercase; }
#alfera-grid .grid { gap: 64px 18px !important; }
.card-product { cursor: pointer; }
.card-product .img-wrap { position: relative; overflow: hidden; background: #e9e6de; aspect-ratio: 3/4; }
.card-product img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.67); transition: transform .7s ease, filter .45s ease; }
.card-product:hover img { transform: scale(1.025); filter: saturate(.9); }
.heart-btn { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink); background: rgba(247,245,240,.9); border: 1px solid rgba(23,23,20,.25); border-radius: 0; cursor: pointer; }
.card-product > div:nth-child(2) { padding-top: 14px !important; }
.card-product > div:nth-child(2) p { font-size: 14px !important; font-weight: 600 !important; letter-spacing: .02em; text-transform: none; }
.card-product > div:nth-child(2) p + p { margin-top: 5px !important; color: var(--stone) !important; font-size: 12px !important; }
/* The brand/About band (was written as "the section after the grid"; the bundle sits there now) */
.alfera-root .ds-about { max-width: none !important; padding: 110px max(30px,calc((100vw - 1420px)/2)) !important; background: #e7e3db; }
.alfera-root .ds-about .seam { background: rgba(23,23,20,.25); }
.alfera-root .ds-about h2 { font-size: clamp(46px,5vw,78px) !important; font-weight: 400 !important; line-height: .96; }
.alfera-root .ds-about p { color: var(--stone) !important; font-size: 14px !important; }
.social-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--stone); border: 1px solid rgba(23,23,20,.25); border-radius: 0; transition: all .15s ease; }
.social-btn:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
footer { color: #d7d3ca; background: var(--ink) !important; border: 0 !important; }
footer > div { max-width: 1480px !important; padding: 58px 30px !important; }
footer .label, footer p, footer span, footer a { color: #8d8980 !important; }
.slide-in { background: var(--panel) !important; border-left: 1px solid var(--line); box-shadow: -30px 0 70px rgba(23,23,20,.1); animation: alferaSlide .35s cubic-bezier(.2,.8,.2,1); }
.slide-in .img-wrap, .slide-in img { filter: saturate(.7); }
.lightbox-img { cursor: zoom-in; transition: transform .25s ease; transform-origin: center; }
.lightbox-img.zoomed { cursor: zoom-out; transform: scale(2.1); }
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 200; transform: translateX(-50%); max-width: 90vw; padding: 13px 22px; color: var(--bg); background: var(--ink); border-radius: 0; box-shadow: 0 12px 35px rgba(0,0,0,.16); text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.toast.error { background: var(--danger); }
/* The deploy-update bar. Deliberately quiet: it only ever appears for someone
we decided not to interrupt, so it sits low, states the fact and offers the
refresh. Bottom-left keeps it clear of the toast (centred) and the Style
Board launcher (bottom-right), and it mirrors for Arabic. */
.app-update-bar{position:fixed;z-index:190;bottom:20px;left:20px;display:flex;align-items:center;gap:16px;max-width:min(420px,calc(100vw - 40px));padding:13px 14px 13px 18px;color:var(--bg);background:var(--ink);box-shadow:0 12px 35px rgba(0,0,0,.18);animation:updateBarIn .22s cubic-bezier(.2,.85,.25,1)}
.app-update-bar p{margin:0;font:500 12px/1.45 Manrope,sans-serif;letter-spacing:.02em}
.app-update-bar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.app-update-refresh{padding:8px 13px;color:var(--ink);background:var(--bg);border:1px solid var(--bg);font:600 10px/1.2 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.app-update-refresh:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.app-update-dismiss{display:grid;width:30px;height:30px;padding:0;place-items:center;color:var(--bg);background:transparent;border:0;font-size:20px;line-height:1;cursor:pointer;opacity:.72}
.app-update-dismiss:hover{opacity:1}
.app-update-refresh:focus-visible,.app-update-dismiss:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
[dir=rtl] .app-update-bar{right:20px;left:auto;padding:13px 18px 13px 14px}
[dir=rtl] .app-update-bar-actions{margin-right:auto;margin-left:0}
@media(max-width:640px){.app-update-bar{right:12px;left:12px;max-width:none;bottom:14px;gap:10px;padding:12px 12px 12px 15px}[dir=rtl] .app-update-bar{right:12px;left:12px}}
@keyframes updateBarIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.app-update-bar{animation:none}}
.fade-in { animation: alferaFade .45s ease both; }
@keyframes alferaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes alferaSlide { from { transform: translateX(100%); } to { transform: none; } }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
@media (max-width: 640px) {
.hide-mobile { display: none !important; }
.alfera-root > header > div:nth-child(2) { padding: 18px 16px !important; }
.alfera-root header + section { padding: 16px 16px 66px !important; }
.alfera-root header + section > div { display: flex !important; flex-direction: column; gap: 0 !important; }
.alfera-root header + section > div > div:first-child { order: 2 !important; min-height: 390px; padding: 44px 22px !important; border-top: 0; }
.alfera-root header + section > div > div:last-child { order: 1 !important; }
.alfera-root header + section > div > div:last-child > div { min-height: 0; aspect-ratio: 4/5 !important; }
.alfera-root header + section h1 { font-size: clamp(46px,15vw,66px) !important; }
.alfera-root header + section + section:not(.ds-lookbook) { padding: 0 16px 66px !important; }
#alfera-grid > section { padding: 0 16px 80px !important; }
#alfera-grid .grid { gap: 38px 10px !important; }
.card-product > div:nth-child(2) { display: block !important; }
.card-product > div:nth-child(2) > p { margin-top: 8px; }
.alfera-root .ds-about { padding: 74px 20px !important; }
footer > div { padding: 44px 20px !important; }
.slide-in { border-left: 0; }
}
@media (min-width: 641px) { .hide-desktop { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============================================================
QUIET GALLERY V3 — approved structural redesign
============================================================ */
.alfera-root > header > div:first-child { display: none; }
.alfera-root > header > div:nth-child(2) {
position: relative; min-height: 76px; justify-content: center !important;
max-width: none !important; padding: 20px 38px !important;
}
.qg-wordmark {
font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px;
font-weight: 500; letter-spacing: .26em; line-height: 1;
}
.alfera-root > header nav.hide-mobile { position: absolute; left: 38px; top: 50%; transform: translateY(-50%); }
.alfera-root > header > div:nth-child(2) > div:last-child { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); }
.alfera-root > header nav button { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alfera-root .qg-hero {
max-width: none !important; padding: 18px 28px 0 !important; background: var(--bg);
}
.alfera-root .qg-hero > .qg-hero-layout {
display: grid !important; grid-template-columns: minmax(250px,.82fr) minmax(480px,1.35fr) minmax(250px,.82fr) !important;
gap: 18px !important; min-height: calc(100vh - 132px);
}
.alfera-root .qg-hero > .qg-hero-layout > div,
.alfera-root .qg-hero > .qg-hero-layout > figure { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; order: initial !important; }
.qg-hero-photo { position: relative; margin: 0; overflow: hidden; background: #e6e2d9 !important; }
.qg-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(.96); }
.qg-hero-photo-main img { object-position: 52% center; }
.qg-hero-photo-coast img { object-position: center; }
.qg-hero-photo figcaption {
position: absolute; left: 14px; bottom: 14px; padding: 7px 9px;
color: var(--ink); background: rgba(247,245,240,.9);
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.qg-hero-center { display: grid !important; grid-template-rows: minmax(260px,.82fr) minmax(310px,1.18fr); gap: 18px; }
.qg-hero-copy {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 36px !important; border: 1px solid var(--line) !important; background: var(--panel) !important;
}
.qg-eyebrow { margin: 0 0 18px !important; color: var(--stone); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.alfera-root .qg-hero-copy h1 {
max-width: none; margin: 0 !important; text-align: center;
font-size: clamp(54px,5.8vw,94px) !important; font-weight: 400 !important;
line-height: .84 !important; letter-spacing: -.04em !important;
}
.qg-intro { max-width: 52ch !important; margin: 22px auto 24px !important; font-size: 15px !important; line-height: 1.65 !important; }
.qg-text-link {
display: inline-flex; align-items: center; gap: 18px; padding: 10px 0;
color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink);
font: 500 9px/1 'Manrope', sans-serif; letter-spacing: .18em; cursor: pointer;
}
.qg-product-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 0; }
.qg-product-tile {
min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer;
}
.qg-image-frame { display: block; height: calc(100% - 50px); min-height: 270px; overflow: hidden; background: #e7e3dc; }
.qg-image-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5); transition: transform .7s ease, filter .4s ease; }
.qg-product-tile:hover img { transform: scale(1.025); filter: saturate(.8); }
.qg-product-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.qg-service-ticker {
display: flex; justify-content: space-around; gap: 20px; margin: 18px -28px 0; padding: 12px 30px;
color: #d8d4ca; background: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.qg-hero + section { display: none; }
#alfera-grid > .qg-catalog {
max-width: none !important; padding: 120px 32px 140px !important;
}
.qg-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 32px; }
.qg-catalog-heading h2 { margin: 0; font-size: clamp(52px,6vw,92px) !important; font-weight: 400 !important; line-height: .85; }
.qg-piece-count { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--stone); }
.qg-catalog-rule {
display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 14px 0; margin-bottom: 24px;
border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
color: var(--stone); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.qg-catalog-rule span:nth-child(2) { text-align: center; }
.qg-catalog-rule span:last-child { text-align: right; }
.qg-catalog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 62px 16px; }
.qg-catalog-item { position: relative; min-width: 0; }
.qg-item-index {
position: absolute; z-index: 4; left: 10px; top: 10px; padding: 6px 7px;
color: var(--bg); background: var(--ink); font-size: 11px; letter-spacing: .06em;
}
.qg-catalog-item .card-product .img-wrap { aspect-ratio: 4/5; }
.qg-catalog-item:nth-child(4n+2) .card-product .img-wrap,
.qg-catalog-item:nth-child(4n+3) .card-product .img-wrap { aspect-ratio: 3/4; }
.qg-catalog-item .heart-btn { top: 10px; right: 10px; }
.qg-empty { padding: 80px 0; color: var(--stone); }
@media (max-width: 980px) {
.alfera-root > header nav.hide-mobile { display: none !important; }
.alfera-root .qg-hero > .qg-hero-layout { grid-template-columns: 1fr 1.2fr !important; min-height: auto; }
.qg-hero-photo-main { min-height: 720px !important; }
.qg-hero-center { min-height: 720px !important; }
.qg-hero-photo-coast { display: none; }
.qg-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
.alfera-root > header > div:nth-child(2) { min-height: 64px; padding: 16px !important; }
.qg-wordmark { font-size: 25px; }
.alfera-root > header > div:nth-child(2) > div:last-child { right: 12px; }
.alfera-root .qg-hero { padding: 10px 12px 0 !important; }
.alfera-root .qg-hero > .qg-hero-layout { display: flex !important; flex-direction: column; gap: 10px !important; }
.qg-hero-photo-main { min-height: 72vh !important; }
.qg-hero-center { display: flex !important; min-height: 0 !important; flex-direction: column; gap: 10px; }
.qg-hero-copy { min-height: 390px !important; padding: 44px 20px !important; }
.alfera-root .qg-hero-copy h1 { font-size: clamp(50px,16vw,72px) !important; }
.qg-intro { font-size: 14px !important; }
.qg-product-pair { gap: 10px; }
.qg-image-frame { min-height: 230px; }
.qg-product-meta { display: block; line-height: 1.5; }
.qg-product-meta span:last-child { display: block; color: var(--stone); }
.qg-service-ticker { margin: 10px -12px 0; justify-content: flex-start; overflow: hidden; white-space: nowrap; }
.qg-service-ticker span:not(:first-child) { display: none; }
#alfera-grid > .qg-catalog { padding: 78px 12px 90px !important; }
.qg-catalog-heading { align-items: flex-start; }
.qg-catalog-heading h2 { font-size: 52px !important; }
.qg-catalog-rule { grid-template-columns: 1fr auto; }
.qg-catalog-rule span:nth-child(2) { display: none; }
.qg-catalog-grid { gap: 38px 9px; }
}
/* ============================================================
QUIET GALLERY V4 — product page, catalog controls, checkout,
account. Extends V3 above; same tokens, same qg- prefix.
============================================================ */
/* ---- product detail page (full overlay, replaces old slide-in drawer) ---- */
.qg-pdp-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(23,23,20,.5); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; }
.qg-pdp { width: min(1160px, 100%); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(23,23,20,.22); }
.qg-pdp-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.qg-breadcrumb { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.qg-breadcrumb b { color: var(--ink); font-weight: 500; }
.qg-pdp-body { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 1px; background: var(--line); }
.qg-pdp-body > * { background: var(--panel); }
.qg-pdp-gallery-main { position: relative; cursor: zoom-in; aspect-ratio: 3/4; overflow: hidden; background: #e9e6de; }
.qg-pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.qg-pdp-gallery-side { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.qg-pdp-gallery-side > div { flex: 1; overflow: hidden; background: #e9e6de; min-height: 180px; }
.qg-pdp-gallery-side img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.qg-pdp-info { padding: 32px; display: flex; flex-direction: column; }
.qg-pdp-info h1 { font-size: 26px; font-weight: 400; font-family: 'Cormorant Garamond', Georgia, serif; margin: 10px 0 6px; }
.qg-pdp-price { font-size: 15px; margin-bottom: 20px; }
.qg-pdp-desc { font-size: 12px; color: var(--stone); line-height: 1.7; margin-bottom: 22px; }
.qg-swatch-row { display: flex; gap: 8px; margin-bottom: 20px; }
.qg-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.qg-swatch.active { outline: 2px solid var(--ink); outline-offset: 2px; }
.qg-size-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.qg-size-guide-link { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: none; cursor: pointer; padding: 0; }
.qg-accordion { border-top: 1px solid var(--line); margin-top: 24px; }
.qg-accordion-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; background: none; border: none; cursor: pointer; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.qg-accordion-body { padding: 0 0 16px; font-size: 12px; color: var(--stone); line-height: 1.7; white-space: pre-line; }
.qg-size-guide-backdrop { position: fixed; inset: 0; z-index: 220; background: rgba(23,23,20,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.qg-size-guide-card { width: min(420px,100%); background: var(--panel); border: 1px solid var(--line); padding: 28px; }
.qg-size-guide-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.qg-size-guide-table th, .qg-size-guide-table td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
.qg-pdp-overlay { padding: 0; }
.qg-pdp { border: 0; }
.qg-pdp-body { grid-template-columns: 1fr; }
.qg-pdp-gallery-side { flex-direction: row; }
}
/* ---- catalog controls: filter + sort ---- */
.qg-catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.qg-cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.qg-toolbar { display: flex; gap: 10px; align-items: center; position: relative; }
.qg-toolbar-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); padding: 9px 14px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.qg-toolbar-btn:hover { border-color: var(--ink); }
.qg-toolbar-panel { position: absolute; top: calc(100% + 6px); right: 0; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(23,23,20,.14); padding: 14px; z-index: 20; min-width: 200px; }
.qg-toolbar-panel label { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; cursor: pointer; }
.qg-sort-option { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 0; font-size: 12px; color: var(--ink); cursor: pointer; }
.qg-sort-option.active { font-weight: 600; }
/* ---- checkout additions ---- */
.qg-checkout-section-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.qg-checkout-section-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.qg-radio-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); font-size: 13px; }
.qg-radio-row input { accent-color: var(--ink); }
/* ---- account additions ---- */
.qg-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; flex-shrink: 0; }
.qg-order-thumbs { display: flex; gap: 8px; margin: 10px 0; }
.qg-order-thumbs img { width: 44px; height: 56px; object-fit: cover; background: #eee; }
.qg-address-card { border: 1px solid var(--line); padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* ============================================================
ARABIC / RTL SUPPORT
============================================================ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .f-body, [dir="rtl"] .qg-wordmark { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; }
[dir="rtl"] .f-display { font-family: 'Cairo', 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; }
/* Keep utility flex directions intact; RTL changes reading direction, not rows/columns. */
[dir="rtl"] .qg-hero-layout { direction: rtl; }
[dir="rtl"] .qg-product-meta { direction: rtl; }
[dir="rtl"] .qg-breadcrumb { direction: rtl; }
[dir="rtl"] .qg-pdp-body { direction: rtl; }
[dir="rtl"] .slide-in { right: auto !important; left: 0 !important; border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .qg-toolbar-panel { right: auto; left: 0; }
[dir="rtl"] .heart-btn { right: auto; left: 10px; }
[dir="rtl"] .qg-item-index { right: 0; left: auto; }
[dir="rtl"] input, [dir="rtl"] textarea { text-align: right; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="email"] { text-align: right; direction: ltr; }
/* Header language toggle should sit naturally regardless of direction */
.qg-wordmark { direction: ltr; unicode-bidi: isolate; }
/* DESIGN SYNTHESIS — Autumn 2026 supplied storefront */
.alfera-root > .ds-site-header{position:sticky!important;top:0;z-index:60;background:var(--bg)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:none}
.alfera-root>.ds-site-header>.ds-ticker{display:flex!important;height:34px;padding:0!important;min-height:0!important;max-width:none!important;overflow:hidden;align-items:center;background:var(--ink)!important;color:var(--bg)}
.ds-ticker-track{display:flex;width:max-content;animation:dsTicker 38s linear infinite;will-change:transform}.ds-ticker-group{display:flex;flex-shrink:0;gap:64px;min-width:100vw;padding:0 40px;white-space:nowrap;font-size:10px;letter-spacing:.16em;text-transform:uppercase}@keyframes dsTicker{to{transform:translateX(-50%)}}
.alfera-root>.ds-site-header>.ds-nav{position:relative;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:0;max-width:none!important;padding:16px 40px!important}.ds-nav-left,.ds-nav-right{display:flex;align-items:center;gap:22px}.ds-nav-right{justify-content:flex-end}
.ds-text-button,.ds-nav .btn-ghost{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0!important;color:var(--ink)!important;background:none;border:0;font:500 10px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.ds-wordmark{padding:0 0 0 .38em;color:var(--ink);background:none;border:0;font:500 22px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.38em;cursor:pointer}.ds-bag-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 9px;color:var(--accent-dark);background:transparent;border:1px solid var(--ink);font:600 10px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ds-menu-panel{position:absolute;top:100%;left:20px;z-index:80;width:min(360px,calc(100vw - 40px));padding:20px 24px 24px;background:var(--panel);border:1px solid var(--ink);box-shadow:0 24px 60px rgba(23,23,20,.16)}.ds-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.ds-menu-panel>button{display:block;width:100%;padding:13px 0;color:var(--stone);background:none;border:0;border-bottom:1px solid var(--line);text-align:left;font:500 13px/1.2 Manrope,sans-serif;cursor:pointer}.ds-menu-panel>button.active,.ds-menu-panel>button:hover{color:var(--ink)}.ds-menu-mobile-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.alfera-root .ds-hero{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;height:660px;max-width:none!important;padding:0!important;border-bottom:1px solid var(--line)}.ds-hero-copy{display:flex!important;flex-direction:column;justify-content:flex-end;order:0!important;min-height:0!important;padding:56px 44px!important;color:#f3f2f2;background:var(--ink)!important;border:0!important}.ds-kicker{margin:0 0 20px!important;color:#b3b8a2!important;text-align:left!important;font-size:10px!important;letter-spacing:.2em;text-transform:uppercase}.alfera-root .ds-hero-copy h1{max-width:11ch;margin:0 0 22px!important;color:#f3f2f2;text-align:left;font-size:clamp(58px,6vw,82px)!important;font-weight:500!important;line-height:.92!important;letter-spacing:-.03em!important}.alfera-root .ds-hero-copy>p:not(.ds-kicker){max-width:40ch!important;margin:0 0 30px!important;color:#c7c3c1!important;text-align:left!important;font-size:15px!important;line-height:1.6}.ds-hero-actions{display:flex;gap:12px}.ds-primary,.ds-secondary{padding:16px 28px;border-radius:0;font:500 12px/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:.12em;text-align:left;text-transform:uppercase;cursor:pointer}.ds-primary{color:#fff;background:var(--accent);border:1px solid var(--accent)}.ds-secondary{color:inherit;background:transparent;border:1px solid currentColor}.ds-hero-image{order:1!important;min-height:0!important;overflow:hidden;background:#efece5}.ds-hero-image img{width:100%;height:100%;object-fit:contain;filter:none!important;transform:none!important}
.ds-lookbook{max-width:none!important;padding:76px 40px 48px!important;background:var(--bg)}.ds-lookbook-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}.ds-lookbook-heading h2{max-width:17ch;margin:0;font-size:clamp(44px,5vw,64px);font-weight:500;line-height:.98;letter-spacing:-.03em}.ds-lookbook-heading p{max-width:34ch;margin:0;color:var(--stone);font-size:14px;line-height:1.5}.ds-looks{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}.ds-look{display:flex;min-width:0;padding:0;flex-direction:column;gap:14px;color:var(--ink);background:transparent;border:0;text-align:left;cursor:pointer}.ds-look-image{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:#efece5;border:1px solid var(--line);transition:border-color .35s ease,box-shadow .35s ease}.ds-look:hover .ds-look-image{border-color:var(--stone-light);box-shadow:0 18px 40px -24px rgba(23,23,20,.35)}.ds-look:focus-visible .ds-look-image{outline:2px solid var(--accent-dark);outline-offset:3px}.ds-look-1 .ds-look-image{aspect-ratio:1/1}.ds-look-image img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transition:transform .7s cubic-bezier(.16,1,.3,1)}.ds-look:hover .ds-look-image img{transform:scale(1.045)}.ds-look-meta{display:flex;justify-content:space-between;gap:12px;padding-top:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}.ds-look-meta span:last-child{color:var(--accent-dark)}.ds-look strong{font-size:21px;font-weight:500}.ds-bundle{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:end;padding:56px 40px;color:#fff;background:var(--accent);border-top:1px solid var(--ink)}.ds-bundle h2{max-width:16ch;margin:0;font-size:clamp(48px,5vw,68px);font-weight:500;line-height:.96;letter-spacing:-.03em}.ds-bundle-copy p{font-size:14px;letter-spacing:.06em}
#alfera-grid>.ds-catalog{max-width:none!important;padding:0 0 72px!important}.ds-catalog-title{padding:52px 40px 26px;text-align:center;border-bottom:1px solid var(--line)}.ds-catalog-title p{margin:0 0 14px;color:var(--stone);font-size:10px;letter-spacing:.2em;text-transform:uppercase}.ds-catalog-title h2{margin:0;font-size:clamp(48px,5vw,64px);font-weight:500;letter-spacing:-.03em}.ds-catalog-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px;border-bottom:1px solid var(--line)}.ds-category-tabs{display:flex;overflow-x:auto}.ds-category-tabs button,.ds-sort-wrap>button{min-height:52px;padding:0 17px;color:var(--stone);background:transparent;border:0;border-bottom:2px solid transparent;white-space:nowrap;font:500 10px/1 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}.ds-category-tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}.ds-sort-wrap{display:flex;align-items:center;gap:5px;color:var(--stone);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.ds-control-popover{position:absolute;top:calc(100% + 1px);right:40px;z-index:12;padding:15px 18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 16px 38px rgba(23,23,20,.12)}.ds-sort-popover{display:flex;width:220px;flex-direction:column}.ds-sort-popover button{padding:9px 0;color:var(--stone);background:none;border:0;text-align:left;cursor:pointer}.ds-sort-popover button.active{color:var(--ink)}
.ds-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:54px 18px;padding:32px 40px 0}.ds-product-card{position:relative;min-width:0}.ds-product-image{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--panel)}.ds-product-image img{width:100%;height:100%;object-fit:cover;filter:none!important;transition:transform .45s ease}.ds-product-card:hover .ds-product-image img{transform:scale(1.015)}.ds-quick-view{position:absolute;right:0;bottom:0;left:0;padding:11px;color:var(--bg);background:var(--ink);text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transform:translateY(100%);transition:transform .18s ease}.ds-product-card:hover .ds-quick-view{transform:none}.ds-heart{position:absolute;top:12px;right:12px;z-index:3;display:flex;width:34px;height:34px;align-items:center;justify-content:center;color:var(--ink);background:rgba(247,245,240,.92);border:1px solid rgba(23,23,20,.25);font-size:16px;cursor:pointer}.ds-heart.active{color:var(--accent-dark)}.ds-sold-out,.ds-low-stock{position:absolute;top:12px;left:12px;padding:6px 10px;color:var(--bg);background:var(--ink);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.ds-low-stock{background:var(--accent)}.ds-piece-badge{position:absolute;top:12px;left:12px;z-index:3;padding:5px 10px;color:#fff;background:rgba(0,0,0,.75);border-radius:20px;font:600 11px/1.3 Manrope,sans-serif;letter-spacing:.02em;white-space:nowrap}.ds-product-meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px;color:var(--ink);font-size:13px}.ds-product-meta span:last-child{flex-shrink:0;color:var(--stone)}.ds-product-bottom{display:flex;justify-content:space-between;align-items:center;min-height:22px;padding-top:7px;color:var(--stone);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.ds-card-swatches{display:flex;gap:5px}.ds-card-swatches i{display:block;width:11px;height:11px;border:1px solid var(--stone-light)}.ds-empty{padding:80px 40px;color:var(--stone)}
.ds-product-meta .ds-price-discounted,.ds-price-discounted{display:inline-flex;align-items:baseline;gap:7px;color:var(--danger)}.ds-price-was{color:var(--stone);font-weight:400;text-decoration:line-through}.ds-price-off{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--danger);padding:2px 6px;border-radius:3px}
.qg-pdp-price .ds-price-was{margin-right:8px}.qg-pdp-price .ds-price-off{margin-left:8px;vertical-align:middle}
.qg-pdp-overlay{padding:0!important;background:var(--bg)!important}.qg-pdp{width:100%!important;min-height:100vh;border:0!important;box-shadow:none!important}.qg-pdp-top{padding:14px 40px!important}.qg-pdp-body{grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(360px,.78fr)!important;gap:10px!important;padding:10px;background:#efece5!important}.qg-pdp-info{padding:44px 40px 72px!important;background:var(--bg)!important}.qg-pdp-info h1{font-size:40px!important;font-weight:500!important;letter-spacing:-.03em}.qg-pdp-price{font-size:18px!important}.qg-pdp-desc{font-size:14px!important}.qg-pdp-gallery-main img,.qg-pdp-gallery-side img{filter:none!important}.qg-pdp-info .btn-primary{padding:20px 24px;text-align:left}.slide-in{max-width:430px!important;border-left:1px solid var(--ink)!important;box-shadow:none!important}.cart-product-link{width:74px;height:96px;padding:0;flex-shrink:0;overflow:hidden;background:var(--panel);border:0;cursor:pointer}.cart-product-name{padding:0;color:var(--ink);background:transparent;border:0;font:500 12px/1.3 Manrope,sans-serif;letter-spacing:.06em;text-align:left;text-transform:uppercase;cursor:pointer}
@media(max-width:980px){.ds-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.qg-pdp-body{grid-template-columns:1fr 1fr!important}.qg-pdp-info{grid-column:1/-1}}
@media(max-width:640px){.ds-ticker-group{min-width:max-content;gap:48px;padding:0 24px}.alfera-root>.ds-site-header>.ds-nav{padding:13px 16px!important}.ds-nav-left,.ds-nav-right{flex:1}.ds-nav-right{justify-content:flex-end}.ds-menu-trigger span{display:none}.ds-wordmark{font-size:16px;letter-spacing:.32em}.ds-bag-button{border:0;padding:0}.ds-bag-button svg{width:22px;height:22px}.ds-bag-button span{font-size:9px}.alfera-root .ds-hero{display:block!important;position:relative;height:72vh;min-height:520px}.ds-hero-image{position:absolute;inset:0}.ds-hero-image img{object-fit:cover}.ds-hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(23,23,20,.55) 60%,rgba(23,23,20,.96))}.ds-hero-copy{position:absolute;inset:auto 0 0;z-index:2;padding:28px 16px!important;background:transparent!important}.alfera-root .ds-hero-copy h1{max-width:8ch;font-size:48px!important}.alfera-root .ds-hero-copy>p:not(.ds-kicker){display:none}.ds-hero-actions .ds-secondary{display:none}.ds-lookbook{padding:38px 16px 36px!important}.ds-lookbook-heading{display:block}.ds-lookbook-heading h2{font-size:44px}.ds-lookbook-heading p{margin-top:18px}.ds-looks{grid-template-columns:1.2fr .8fr;gap:12px}.ds-look-3{display:none}.ds-look strong{font-size:16px}.ds-bundle{display:block;padding:46px 20px}.ds-bundle h2{font-size:46px}.ds-bundle-copy{margin-top:28px}.ds-catalog-title{padding:44px 16px 22px}.ds-catalog-bar{display:block;padding:0 12px}.ds-sort-wrap{justify-content:flex-end;border-top:1px solid var(--line)}.ds-sort-wrap>span{margin-right:auto}.ds-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 10px;padding:14px 12px 0}.ds-product-meta{display:block;font-size:11px;line-height:1.5}.ds-product-meta span{display:block}.ds-product-bottom>span,.ds-quick-view{display:none}.qg-pdp-body{grid-template-columns:1fr!important;padding:0}.qg-pdp-info{grid-column:auto;padding:30px 20px 60px!important}}
@media(prefers-reduced-motion:reduce){.ds-ticker-track{animation:none}}[dir=rtl] .ds-kicker,[dir=rtl] .ds-hero-copy h1,[dir=rtl] .ds-hero-copy>p,[dir=rtl] .ds-look,[dir=rtl] .cart-product-name{text-align:right!important}[dir=rtl] .ds-menu-panel{right:20px;left:auto}
.alfera-root>.ds-site-header .ds-menu-panel>button{max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;padding:13px 0!important}
/* Navigation drawer, RTL header, search, policy and mobile checkout fixes */
.ds-site-header,.ds-site-header *{box-sizing:border-box}.ds-ticker{direction:ltr}.ds-nav{direction:ltr}.ds-nav-left,.ds-nav-right{direction:ltr;min-width:0}.ds-nav-left button,.ds-nav-right button{white-space:nowrap}.ds-wordmark{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.ds-menu-backdrop{position:fixed;inset:0;z-index:79;padding:0;background:rgba(20,18,17,.38);border:0;cursor:pointer}.ds-side-drawer{position:fixed!important;top:0!important;bottom:0;left:0!important;z-index:90!important;width:min(430px,92vw)!important;padding:28px 34px!important;display:flex;flex-direction:column;background:var(--bg)!important;border:0!important;border-right:1px solid var(--ink)!important;box-shadow:18px 0 60px rgba(23,23,20,.16)!important;animation:dsDrawerIn .28s cubic-bezier(.2,.8,.2,1)}@keyframes dsDrawerIn{from{transform:translateX(-100%)}to{transform:none}}
.ds-menu-head{flex-shrink:0;padding-bottom:20px!important}.ds-menu-links{display:flex;flex:1;flex-direction:column;padding:20px 0}.ds-menu-links>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 0;color:var(--stone);background:none;border:0;border-bottom:1px solid var(--line);font:500 25px/1.1 'Cormorant Garamond',Georgia,serif;text-align:left;cursor:pointer}.ds-menu-links>button:after{content:'↗';font:400 14px/1 Manrope,sans-serif;opacity:.45}.ds-menu-links>button.active,.ds-menu-links>button:hover{color:var(--ink)}.ds-menu-footer{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--ink)}.ds-menu-footer>p{grid-column:1/-1;margin:5px 0 0;color:var(--stone);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
[dir=rtl] .ds-side-drawer{right:0!important;left:auto!important;border-right:0!important;border-left:1px solid var(--ink)!important;animation-name:dsDrawerInR}[dir=rtl] .ds-side-drawer,[dir=rtl] .ds-side-drawer button,[dir=rtl] .ds-side-drawer p{direction:rtl;text-align:right}@keyframes dsDrawerInR{from{transform:translateX(100%)}to{transform:none}}[dir=rtl] .ds-menu-links>button:after{content:'↖'}
.ds-search-box{display:flex;align-items:center;gap:7px;height:36px;min-width:190px;padding:0 10px;border-bottom:1px solid var(--ink);color:var(--ink)}.ds-search-box>span{font-size:20px;line-height:1}.ds-search-box input{width:150px;min-width:0;padding:0;color:var(--ink);background:transparent;border:0;outline:0;font:500 11px/1 Manrope,sans-serif;letter-spacing:.04em}.ds-search-box input::placeholder{color:var(--stone)}[dir=rtl] .ds-search-box{direction:rtl}
.ds-footer-link{min-height:36px;padding:0;color:var(--stone);background:none;border:0;border-bottom:1px solid currentColor;font:500 12px/1.2 Manrope,sans-serif;cursor:pointer}.ds-policy-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,18,17,.66)}.ds-policy-page{width:min(720px,100%);max-height:88vh;overflow:auto;padding:46px 48px 54px;color:var(--ink);background:var(--bg);border:1px solid var(--ink)}.ds-policy-head{display:flex;align-items:center;justify-content:space-between}.ds-policy-page h2{margin:20px 0 28px;font-size:58px;font-weight:500}.ds-policy-page>p{color:var(--stone);font-size:14px;line-height:1.8}
.qg-checkout-page,.qg-checkout-grid,.qg-checkout-grid>*{min-width:0}.qg-checkout-summary{position:sticky;top:118px;align-self:start}.qg-checkout-summary .p-4{overflow-wrap:anywhere}.qg-checkout-page input,.qg-checkout-page select,.qg-checkout-page textarea{min-width:0;max-width:100%}[dir=rtl] .qg-checkout-page{direction:rtl}[dir=rtl] .qg-checkout-page .flex{direction:row}[dir=rtl] .qg-checkout-page .qg-radio-row{direction:rtl;text-align:right}
.cart-drawer-layer{z-index:200!important}
.ds-menu-links>button:after{display:none!important;content:none!important}.ds-footer-logo{direction:ltr;text-align:left;unicode-bidi:isolate}.ds-return-form{display:flex;flex-direction:column;gap:18px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}.ds-return-form label{display:flex;flex-direction:column;gap:7px}.ds-return-form .input{width:100%}.ds-return-form .btn{align-self:flex-start;min-height:46px}.ds-return-message{margin:0!important;color:var(--accent-dark)!important}.ds-return-message.error{color:var(--danger)!important}[dir=rtl] .ds-return-form{direction:rtl;text-align:right}[dir=rtl] .ds-return-form input{direction:ltr;text-align:left}[dir=rtl] .qg-checkout-page .flex-col{flex-direction:column}[dir=rtl] .qg-checkout-page input[type=tel],[dir=rtl] .qg-checkout-page input[type=email]{direction:ltr;text-align:left}
@media(max-width:900px){.admin-promo-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:820px){.ds-nav-left>.hide-mobile,.ds-nav-right>.hide-mobile{display:none!important}.ds-nav{grid-template-columns:1fr auto 1fr!important;padding:13px 16px!important}.ds-nav-left{justify-content:flex-start}.ds-nav-right{justify-content:flex-end}.ds-bag-button span{font-size:9px}.ds-search-box{min-width:150px}.ds-search-box input{width:110px}.ds-catalog-bar{display:block!important}.ds-sort-wrap{justify-content:flex-start;flex-wrap:wrap;padding:9px 0}.ds-sort-wrap>span{margin-left:auto}.ds-control-popover{right:12px}.qg-checkout-summary{position:static}}
@media(max-width:640px){.ds-ticker{height:30px!important}.ds-ticker-group{font-size:9px}.ds-wordmark{font-size:15px!important;letter-spacing:.28em!important;padding-left:.28em}.ds-menu-trigger{width:38px;justify-content:center}.ds-bag-button{max-width:94px;overflow:visible!important}.ds-bag-button span{display:inline!important}.ds-side-drawer{width:min(360px,94vw)!important;padding:24px 22px!important}.ds-menu-links>button{font-size:23px}.ds-menu-footer{grid-template-columns:1fr}.ds-menu-footer>p{grid-column:auto}.ds-search-box{order:-1;width:100%;min-width:100%;margin-bottom:4px}.ds-search-box input{width:100%}.ds-sort-wrap>span{margin-left:0;margin-right:auto}.qg-checkout-page{padding:24px 14px 60px!important}.qg-checkout-page>button{margin-bottom:22px!important}.qg-checkout-page h2{font-size:34px!important;margin-bottom:26px!important}.qg-checkout-grid{display:block!important}.qg-checkout-grid>div+div{margin-top:38px}.qg-address-mini-grid{grid-template-columns:1fr!important}.qg-address-mini-grid>div{min-width:0}.qg-checkout-page .qg-radio-row{align-items:flex-start;padding:12px}.qg-checkout-page .flex.gap-2{min-width:0}.qg-checkout-page .flex.gap-2>.input{min-width:0}.qg-checkout-summary .p-4{padding:14px!important}.qg-checkout-summary .flex.justify-between{gap:16px}.qg-checkout-summary .flex.justify-between>span:first-child{min-width:0;overflow-wrap:anywhere}.qg-checkout-summary .flex.justify-between>span:last-child{flex-shrink:0}.ds-policy-page{padding:30px 24px 40px}.ds-policy-page h2{font-size:44px}.ds-return-form .btn{align-self:stretch}.admin-promo-grid{grid-template-columns:1fr!important}}
/* Product-only admin controls: local image upload and per-product size chart */
.admin-image-drop{margin-top:10px;padding:20px;text-align:center;background:var(--panel);border:1px dashed var(--stone-light);transition:border-color .15s,background .15s}.admin-image-drop.dragging{background:var(--accent-soft);border-color:var(--accent)}.admin-image-preview{width:84px;height:104px;margin-top:10px;overflow:hidden;background:#efede6;border:1px solid var(--line)}.admin-image-preview img{width:100%;height:100%;object-fit:cover}.admin-product-size-chart{padding:18px;background:var(--panel);border:1px solid var(--line)}.admin-size-chart-row{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:center}@media(max-width:640px){.admin-size-chart-row{grid-template-columns:1fr 1fr}.admin-size-chart-row .btn-ghost{justify-self:start}}
/* Product gallery adapts to the photos that actually exist. */
.qg-pdp-gallery-side.single>div{flex:1}.qg-pdp-body.qg-pdp-no-side{grid-template-columns:minmax(0,1.72fr) minmax(360px,.78fr)!important}@media(max-width:980px){.qg-pdp-body.qg-pdp-no-side{grid-template-columns:1fr!important}.qg-pdp-body.qg-pdp-no-side .qg-pdp-info{grid-column:auto}}
/* Responsive images (see Img in 01-foundation.js).
"display: contents" makes the wrapper vanish from layout, so the
![]()
inside is positioned and sized by its real parent exactly as it was
before the wrapper existed — rules like ".ds-hero-image img { height:100% }"
keep working untouched. */
picture { display: contents; }
/* Style Board — newly-picked garment layers fade + scale into place on the
mannequin instead of just popping in. Only plays on first mount of a
layer's ![]()
(a fresh DOM node for a newly-picked product), not on
every re-render, since the animation only fires once per element insertion. */
/* Garment layers fade in and DO NOT animate transform. Each layer carries its
own alignment transform inline, and a CSS animation on `transform` beats an
inline style for as long as it applies — animating it here would override
every product's alignment, and with fill-mode would pin it there for good. */
@keyframes sbLayerIn{from{opacity:0}to{opacity:1}}
/* No fill-mode on any of these. With `both`, an animation that never advances
(a backgrounded tab throttles them to a standstill) leaves the element
pinned on its FROM frame — which for the sheet is a full viewport below the
fold, i.e. an invisible, unusable drawer. Without fill-mode the element's own
style is the resting state, so a throttled or skipped animation just means no
animation, never a broken layout. */
/* The Style Board preview stage.
There is exactly one image in here: the finished outfit the server composed
from the shopper's product ids. The browser never receives a mannequin, a
garment layer or a cutout, so there is nothing to stack and no z-index to
manage — the old .sb-base-model / .sb-garment-layer / .sb-authored-look rules
are gone along with the client-side compositing they existed for. */
.sb-preview-stage {
isolation: isolate;
background: #efece5;
}
.sb-rendered-outfit {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
animation: sbLayerIn .22s ease;
}
/* While a new outfit is being composed the previous one stays put and simply
dims, so the stage never flashes empty between selections. */
.sb-preview-stage.is-loading .sb-rendered-outfit {
opacity: .55;
transition: opacity .15s ease;
}
/* Rear view is deliberately a two-position turn, not a fake continuous 3D
model. These controls are mounted only when the server confirms that this
exact outfit has an Admin-enabled, authored rear render. */
.sb-view-controls {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 5;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
padding: 3px;
background: rgba(247,245,240,.92);
border: 1px solid rgba(23,23,20,.28);
box-shadow: 0 8px 24px rgba(23,20,17,.12);
backdrop-filter: blur(7px);
}
.sb-view-controls button {
min-height: 38px;
padding: 8px 12px;
color: var(--stone);
background: transparent;
border: 0;
font: 650 10px/1 Manrope,sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.sb-view-controls button.active { color: var(--bg); background: var(--ink); }
.sb-view-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-preview-stage.is-turning .sb-rendered-outfit { transform: scale(.985); }
.sb-rendered-outfit { transition: opacity .15s ease, transform .18s ease; }
.sb-preview-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border: 2px solid rgba(23, 23, 20, .18);
border-top-color: var(--ink);
border-radius: 50%;
animation: sbSpin .7s linear infinite;
}
@keyframes sbSpin { to { transform: rotate(360deg); } }
.sb-preview-message {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
color: var(--stone);
text-align: center;
font: 500 12px/1.5 Manrope, sans-serif;
}
.sb-layer-error {
position: absolute;
right: 10px;
bottom: 10px;
left: 10px;
z-index: 100;
margin: 0;
padding: 7px 9px;
color: var(--danger);
background: rgba(247,245,240,.94);
font: 600 10px/1.4 Manrope, sans-serif;
}
/* Drawer entrances: the mobile sheet rises, the desktop rail slides in. Both
animate transform/opacity only, so nothing around them reflows. */
@keyframes sbSheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sbSlideIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes sbFadeIn{from{opacity:0}to{opacity:1}}
.sb-sheet{animation:sbSheetUp .3s cubic-bezier(.2,.85,.25,1)}
.sb-side{animation:sbSlideIn .26s cubic-bezier(.2,.85,.25,1)}
.sb-backdrop{animation:sbFadeIn .22s ease}
@media (prefers-reduced-motion: reduce){.sb-rendered-outfit,.sb-preview-spinner,.sb-sheet,.sb-side,.sb-backdrop{animation:none;transition:none}}
/* Admin: Style Board garment cutout + alignment preview.
.admin-cutout-stage deliberately mirrors .sb-preview-stage — same 2/3 box,
same object-fit:contain, same transform formula — so an alignment dialled in
here is the alignment the storefront shows. Keep the two in step. */
.admin-cutout-section { padding: 16px; background: var(--panel); border: 1px solid var(--line); }
.admin-cutout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; }
@media (max-width: 860px) { .admin-cutout-grid { grid-template-columns: minmax(0, 1fr); } }
/* Winter Collection voting — replaces the passive three-look strip. */
.wv-section{padding:52px 40px 34px!important;background:var(--bg)}
.wv-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:end;gap:44px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.wv-heading .ds-kicker{margin-bottom:15px!important;color:var(--accent-dark)!important}
.wv-heading h2{max-width:13ch;margin:0;font-size:clamp(42px,4.8vw,62px);font-weight:500;line-height:.94;letter-spacing:-.035em}
.wv-heading>p{max-width:48ch;margin:0;color:var(--stone);font-size:14px;line-height:1.75}
.wv-carousel-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;color:var(--stone);font:600 10px/1.2 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.wv-carousel-heading p{margin:0}
.wv-carousel-actions{display:flex;gap:8px}
.wv-carousel-actions button{display:grid;width:42px;height:42px;padding:0;place-items:center;color:var(--ink);background:transparent;border:1px solid var(--line);font-size:18px;cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease}
.wv-carousel-actions button:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.wv-carousel-actions button:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.wv-carousel{display:flex;gap:14px;margin:0 -40px;padding:0 40px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:40px;scrollbar-width:none;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none}
.wv-carousel::-webkit-scrollbar{display:none}
.wv-carousel.dragging{cursor:grabbing;scroll-snap-type:none}
.wv-card{flex:0 0 clamp(220px,22vw,268px);min-width:0;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease}
.wv-card:hover{border-color:var(--stone-light);transform:translateY(-2px)}
.wv-card.voted{border-color:var(--accent)}
.wv-image{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:#fff}
.wv-image img{display:block;width:100%;height:100%;object-fit:cover;filter:none!important;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.wv-card:hover .wv-image img{transform:scale(1.02)}
.wv-selected-mark{position:absolute;top:14px;right:14px;padding:7px 10px;color:#fff;background:var(--accent);font:600 9px/1 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.wv-card-copy{display:flex;min-height:118px;padding:13px;flex-direction:column}
.wv-number{color:var(--stone);font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.wv-card h3{margin:5px 0 11px;font-size:19px;font-weight:500;line-height:1.05}
.wv-vote-button{width:100%;min-height:42px;margin-top:auto;padding:10px 12px;color:var(--bg);background:var(--ink);border:1px solid var(--ink);font:600 10px/1.2 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .15s ease,background .15s ease}
.wv-vote-button:hover:not(:disabled),.wv-vote-button.selected{color:#fff;background:var(--accent);border-color:var(--accent)}
.wv-vote-button:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
.wv-vote-button:disabled{cursor:wait;opacity:.58}
.wv-modal-backdrop{position:fixed;z-index:1200;inset:0;display:grid;padding:24px;place-items:center;background:rgba(20,18,15,.66);backdrop-filter:blur(3px);animation:wvFadeIn .18s ease}
.wv-vote-dialog{position:relative;display:grid;width:min(820px,100%);max-height:min(720px,calc(100vh - 48px));grid-template-columns:minmax(240px,.78fr) minmax(330px,1.22fr);overflow:auto;background:var(--bg);border:1px solid rgba(255,255,255,.32);box-shadow:0 26px 80px rgba(0,0,0,.28);animation:wvDialogIn .22s cubic-bezier(.2,.85,.25,1)}
.wv-dialog-close{position:absolute;z-index:2;top:12px;right:12px;display:grid;width:42px;height:42px;padding:0;place-items:center;color:var(--ink);background:rgba(247,245,240,.92);border:1px solid var(--line);font-size:25px;line-height:1;cursor:pointer}
.wv-dialog-close:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.wv-dialog-design{display:flex;min-height:100%;padding:22px;flex-direction:column;justify-content:flex-end;background:#fff}
.wv-dialog-design img{display:block;width:100%;min-height:0;object-fit:contain;pointer-events:none}
.wv-dialog-design>div{padding:16px 2px 4px;border-top:1px solid var(--line)}
.wv-dialog-design h3{margin:6px 0 0;font-size:27px;font-weight:500;line-height:1}
.wv-email-panel{display:flex;min-width:0;padding:72px 42px 38px;flex-direction:column;justify-content:center;gap:20px;background:var(--panel)}
.wv-email-panel>div:first-child p{margin:5px 0 0;color:var(--stone);font-size:12px;line-height:1.6}
.wv-email-title{margin:0!important;color:var(--ink)!important;font:500 25px/1.1 'Cormorant Garamond',Georgia,serif!important}
.wv-email-panel label{display:flex;flex-direction:column;gap:7px}
.wv-consent{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;color:var(--stone);font-size:12px;line-height:1.45}
.wv-consent input{flex:0 0 auto;margin-top:2px}
.wv-email-actions{display:flex;align-items:center;gap:12px}
.wv-email-actions .wv-vote-button{width:auto;min-width:190px;margin:0}
.wv-status{margin:18px 0 0;padding:13px 15px;color:var(--accent-dark);background:var(--accent-soft);border-left:3px solid var(--accent);font-size:13px}
.wv-status.error{color:var(--danger);background:#f8ece9;border-left-color:var(--danger)}
.wv-dialog-error{margin:0;padding:11px 12px;color:var(--danger);background:#f8ece9;border-left:3px solid var(--danger);font-size:12px;line-height:1.4}
@keyframes wvFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wvDialogIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
[dir=rtl] .wv-heading,[dir=rtl] .wv-card-copy,[dir=rtl] .wv-email-panel{text-align:right}
[dir=rtl] .wv-selected-mark{right:auto;left:14px}
[dir=rtl] .wv-dialog-close{right:auto;left:12px}
[dir=rtl] .wv-status{border-right:3px solid var(--accent);border-left:0}
@media(max-width:820px){.wv-heading{display:block}.wv-heading>p{margin-top:18px}.wv-card h3{font-size:20px}.wv-vote-dialog{width:min(560px,100%);grid-template-columns:1fr}.wv-dialog-design{display:grid;min-height:0;grid-template-columns:110px 1fr;align-items:end;gap:18px;padding:18px 64px 18px 18px}.wv-dialog-design img{height:132px}.wv-dialog-design>div{padding:0;border:0}.wv-email-panel{padding:28px}}
@media(max-width:640px){.wv-section{padding:34px 16px 26px!important}.wv-heading{margin-bottom:18px;padding-bottom:17px}.wv-heading h2{font-size:38px}.wv-heading>p{font-size:13px}.wv-carousel{gap:10px;margin:0 -16px;padding:0 16px 8px;scroll-padding-inline:16px}.wv-card{flex-basis:68vw;max-width:250px}.wv-carousel-actions button{width:38px;height:38px}.wv-modal-backdrop{padding:0;place-items:end center}.wv-vote-dialog{width:100%;max-height:92vh;border:0;border-radius:16px 16px 0 0;animation:wvSheetIn .25s cubic-bezier(.2,.85,.25,1)}.wv-dialog-design{grid-template-columns:88px 1fr;padding:16px 60px 14px 16px}.wv-dialog-design img{height:104px}.wv-dialog-design h3{font-size:22px}.wv-email-panel{padding:24px 20px 26px;gap:17px}.wv-email-actions{align-items:stretch;flex-direction:column}.wv-email-actions .wv-vote-button{width:100%}}
@keyframes wvSheetIn{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.wv-card,.wv-image img,.wv-modal-backdrop,.wv-vote-dialog{animation:none!important;transition:none!important}}
.admin-cutout-stage {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--line);
background: #EFEDE6 repeating-conic-gradient(rgba(0,0,0,.05) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
}
.admin-cutout-base,
.admin-cutout-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
}
.admin-cutout-base { z-index: 0; }
.admin-cutout-layer { z-index: 1; transform-origin: 50% 50%; }
.admin-cutout-empty {
position: absolute; inset: 0; display: grid; place-items: center;
margin: 0; padding: 20px; text-align: center; font-size: 11px; color: var(--stone);
}
.admin-cutout-control {
display: grid; grid-template-columns: 68px minmax(0, 1fr) 74px; gap: 8px;
align-items: center; margin-top: 10px; font-size: 11px;
}
.admin-cutout-control input[type="range"] { width: 100%; }
.admin-cutout-control .input { padding: 5px 7px; font-size: 11px; }
/* Live-region text for the outfit announcements: reachable by screen readers,
never painted, and never affecting layout. */
.sb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- Spin the wheel (homepage) ---- */
.ds-wheel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 64px 40px; border-bottom: 1px solid var(--line); background: var(--bg); }
.ds-wheel-copy h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 500; margin: 0 0 14px; text-wrap: balance; }
.ds-wheel-note { font-size: 13px; color: var(--stone); margin: 0 0 22px; max-width: 42ch; }
.ds-wheel-result { font-size: 16px; margin: 0 0 8px; }
.ds-wheel-lost { font-size: 15px; line-height: 1.5; max-width: 40ch; margin-bottom: 14px; }
.ds-wheel-hint { font-size: 13px; color: var(--stone); margin: 0 0 12px; }
.ds-wheel-row { display: flex; gap: 8px; max-width: 440px; }
.ds-wheel-row .input { flex: 1; min-width: 0; }
.ds-wheel-row .btn { white-space: nowrap; }
.ds-wheel-stage { position: relative; width: min(100%, 360px); justify-self: center; }
.ds-wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--ink); z-index: 2; }
.ds-wheel-disc { width: 100%; height: auto; display: block; border-radius: 50%; box-shadow: 0 0 0 6px var(--panel), 0 0 0 7px var(--line); transition: transform 5.2s cubic-bezier(.12, .72, .08, 1); }
.ds-wheel-wedge path { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.ds-wheel-wedge.odd path { fill: var(--accent); }
.ds-wheel-wedge.miss path { fill: var(--stone); }
.ds-wheel-wedge text { fill: var(--bg); font: 500 11px/1 'Manrope', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ds-wheel-hub { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .ds-wheel-disc { transition: none; } }
@media (max-width: 720px) {
.ds-wheel { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
.ds-wheel-stage { order: -1; }
.ds-wheel-row { flex-direction: column; }
}
/* ---- The wheel: revealed code, hero badge, modal ---- */
.ds-wheel-code .ds-wheel-chip { font-size: 15px; letter-spacing: .12em; padding: 12px 18px; margin: 4px 0 10px; }
.ds-wheel-code .btn-outline { margin-top: 12px; }
.ds-wheel.in-modal { padding: 28px 28px 28px; border-bottom: none; background: var(--bg); gap: 28px; }
@media (max-width: 640px) { .ds-wheel.in-modal { padding-top: 56px; } .ds-wheel-modal { max-height: 94vh; max-height: 94dvh; } }
.ds-wheel.in-modal .ds-wheel-stage { width: min(100%, 300px); }
/* centred with inset+margin, not a transform: .fade-in animates transform and would override it */
.ds-wheel-modal { position: fixed; z-index: 80; inset: 0; margin: auto; width: min(92vw, 860px); height: fit-content; max-height: 92vh; overflow: auto; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.ds-wheel-close { position: absolute; top: 10px; right: 10px; z-index: 2; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
[dir=rtl] .ds-wheel-close { right: auto; left: 10px; }
.ds-wheel-modal:focus { outline: none; }
.ds-wheel button:focus-visible, .ds-wheel .input:focus-visible, .ds-wheel-close:focus-visible, .ds-hero-wheel:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ds-wheel-error { margin: 12px 0 0; padding: 10px 12px; font-size: 13px; color: var(--danger, #9b3b3b); border: 1px solid currentColor; background: rgba(155,59,59,.06); }
.ds-wheel-wedge.long text { font-size: 9.5px; letter-spacing: .06em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* the photo's own box: on desktop it shrinks to the letter-boxed picture (so the
wheel badge sits inside the picture's edges); on phones it fills the hero */
/* (a legacy rule, `header + section > div > div:first-child`, would give this
box the old hero's frame, padding and order -- undone here, at every size) */
.alfera-root .ds-hero-image > .ds-hero-photo { display: block; order: 0 !important; min-height: 0; padding: 0 !important; border: 0; background: transparent; }
@media (min-width: 641px) {
.alfera-root .ds-hero-image:has(> .ds-hero-photo) { display: flex; justify-content: center; }
.alfera-root .ds-hero-image > .ds-hero-photo { position: relative; height: 100%; max-width: 100%; }
.alfera-root .ds-hero-photo img { width: auto; max-width: 100%; height: 100%; }
}
@media (max-width: 640px) {
.alfera-root .ds-hero-image > .ds-hero-photo { position: absolute; inset: 0; }
.alfera-root .ds-hero-photo img { width: 100%; height: 100%; }
}
/* desktop only: on phones .ds-hero-image is already position:absolute (the
image is the hero's background) and forcing relative there pushed it out of
the hero as a block above the copy */
@media (min-width: 641px) { .ds-hero-image:has(> .ds-hero-photo) { position: relative; } }
.ds-hero-wheel { position: absolute; right: 24px; top: 24px; z-index: 2; display: block; padding: 0; background: transparent; border: 0; cursor: pointer; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); transition: transform .25s ease; }
.ds-hero-wheel:hover { transform: translateY(-2px) scale(1.03); }
[dir=rtl] .ds-hero-wheel { right: auto; left: 24px; }
.ds-hero-wheel-face { position: relative; display: block; width: 112px; height: 112px; }
.ds-hero-wheel-face svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ds-hero-wheel-disc { animation: ds-wheel-turn 14s linear infinite; transform-origin: 50% 50%; }
.ds-hero-wheel-disc path { fill: var(--ink); }
.ds-hero-wheel-disc path.odd { fill: var(--accent); }
.ds-hero-wheel-disc circle { fill: var(--bg); }
.ds-hero-wheel-ring circle { fill: none; stroke: var(--ink); }
.ds-hero-wheel-ring circle.edge { stroke: rgba(247,245,240,.55); }
.ds-hero-wheel-ring text { font: 500 8.4px 'Manrope', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; fill: var(--bg); }
[dir=rtl] .ds-hero-wheel-ring text { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; font-size: 9.5px; letter-spacing: .04em; }
@keyframes ds-wheel-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-hero-wheel-disc { animation: none; } }
@media (max-width: 720px) {
/* on a phone the hero copy sits over the bottom of the image, so the badge goes to the top */
.ds-hero-wheel { right: 12px; top: 12px; }
[dir=rtl] .ds-hero-wheel { left: 12px; right: auto; }
.ds-hero-wheel-face { width: 88px; height: 88px; }
.ds-wheel.in-modal { padding: 20px; }
}
/* ---- The fitting room in the hero: a defined tile for the mannequin ----
The private render is 768×1152 (2:3). The tile's media box is drawn at
exactly that ratio, so the whole figure — cap to shoes — always fits it with
nothing cropped and nothing stretched; the caption sits below the figure,
never over it. Desktop: copy | tile | photo. Tablet: copy | tile, photo
beneath. Phone: photo (copy over it), then the tile as a strip. The hero
without the tile (switch off in Admin) is the two-column original. */
.alfera-root .ds-hero.ds-hero--figure { --hero-h: 660px; --fig-pad: 26px; --fig-cap: 92px; height: var(--hero-h); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
.ds-hero-figure { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; width: calc((var(--hero-h) - var(--fig-pad) - var(--fig-cap)) * 2 / 3 + 2 * var(--fig-pad)); padding: var(--fig-pad) var(--fig-pad) 0; margin: 0; color: #f3f2f2; text-align: start; cursor: pointer; border: 0; border-inline: 1px solid rgba(243,239,230,.14);
background: radial-gradient(70% 55% at 50% 40%, rgba(179,184,162,.38), rgba(122,131,104,.16) 50%, rgba(23,23,20,0) 74%), #202019; }
.ds-hero-figure:focus-visible { outline: 2px solid #f3f2f2; outline-offset: -4px; }
.ds-hero-figure-media { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; }
.ds-hero-figure-media:before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 9%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.ds-hero-figure-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: none !important; transform: none !important; transition: none !important; }
.ds-hero-figure-media.is-empty { background: rgba(243,239,230,.04); }
.ds-hero-figure-caption { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: var(--fig-cap); padding: 8px 0 12px; border-top: 1px solid rgba(243,239,230,.14); }
.ds-hero-figure-caption strong { display: flex; align-items: center; gap: 7px; font: 500 10px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #b3b8a2; }
.ds-hero-figure-mark { display: inline-flex; color: #b3b8a2; }
.ds-hero-figure-caption small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 14px/1.25 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; }
.ds-hero-figure-caption em { font: 500 10px/1.2 'Manrope', system-ui, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #f3f2f2; text-decoration: underline; text-underline-offset: 3px; }
.ds-hero-figure:hover .ds-hero-figure-caption em { color: #b3b8a2; }
[dir=rtl] .ds-hero-figure-caption small { font-family: 'Cairo', 'Cormorant Garamond', Georgia, serif; font-size: 13px; }
[dir=rtl] .ds-hero-figure-caption strong, [dir=rtl] .ds-hero-figure-caption em { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; letter-spacing: .04em; }
/* the copy beside the tile gets less room than before: the headline scales with the window and the buttons may wrap */
.alfera-root .ds-hero--figure .ds-hero-copy { padding: 44px 40px !important; }
.alfera-root .ds-hero--figure .ds-kicker { text-align: start !important; margin-inline: 0 !important; }
.alfera-root .ds-hero--figure .ds-hero-copy h1 { font-size: clamp(42px, 4.6vw, 76px) !important; max-width: 12ch; }
.alfera-root .ds-hero--figure .ds-hero-copy > p:not(.ds-kicker) { font-size: 14px !important; margin-bottom: 24px !important; }
.alfera-root .ds-hero--figure .ds-hero-actions { flex-wrap: wrap; gap: 10px; }
/* the photo fills its column edge to edge (the old letter-box left bare panel on both sides) */
.alfera-root .ds-hero--figure .ds-hero-image img { object-fit: cover; object-position: 50% 30%; }
.alfera-root .ds-hero--figure .ds-hero-image > .ds-hero-photo { width: 100%; }
.alfera-root .ds-hero--figure .ds-hero-photo img { width: 100%; }
@media (max-width: 1279px) { .alfera-root .ds-hero.ds-hero--figure { --hero-h: 600px; } }
@media (max-width: 1099px) { .alfera-root .ds-hero.ds-hero--figure { --hero-h: 560px; --fig-pad: 22px; } .alfera-root .ds-hero--figure .ds-hero-copy { padding: 36px 30px !important; } }
/* tablet: the copy across the top, then the tile and the photo side by side at one height */
@media (min-width: 641px) and (max-width: 1023px) {
.alfera-root .ds-hero.ds-hero--figure { --hero-h: 500px; --fig-pad: 22px; height: auto; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto var(--hero-h); }
.alfera-root .ds-hero--figure .ds-hero-copy { grid-row: 1; grid-column: 1 / -1; justify-content: flex-start; padding: 34px 30px 30px !important; border-bottom: 1px solid rgba(243,239,230,.14) !important; }
.alfera-root .ds-hero--figure .ds-hero-copy h1 { font-size: clamp(40px, 6vw, 60px) !important; margin-bottom: 14px !important; }
.alfera-root .ds-hero--figure .ds-hero-copy > p:not(.ds-kicker) { margin-bottom: 18px !important; }
.alfera-root .ds-hero--figure .ds-hero-figure { grid-row: 2; grid-column: 1; border-inline-start: 0; }
.alfera-root .ds-hero--figure .ds-hero-image { grid-row: 2; grid-column: 2; position: relative; height: var(--hero-h); }
.alfera-root .ds-hero--figure .ds-hero-image img { object-position: 50% 30%; }
}
/* phone: the photo with the copy over it (as before, a little shorter), then the tile as a strip */
@media (max-width: 640px) {
.alfera-root .ds-hero.ds-hero--figure { --fig-pad: 12px; --fig-cap: 0px; display: flex !important; flex-direction: column; height: auto; min-height: 0; }
.alfera-root .ds-hero--figure .ds-hero-image { position: relative; inset: auto; height: min(64vh, 560px); min-height: 420px; }
.alfera-root .ds-hero--figure .ds-hero-copy { position: absolute; inset: auto 0 0; }
.alfera-root .ds-hero--figure .ds-hero-photo-wrap { position: relative; }
.alfera-root .ds-hero.ds-hero--figure > .ds-hero-image { order: 0; }
.alfera-root .ds-hero.ds-hero--figure > .ds-hero-copy { order: 0; position: absolute; }
.alfera-root .ds-hero.ds-hero--figure > .ds-hero-figure { order: 2; position: relative; flex-direction: row; align-items: center; gap: 14px; width: 100%; height: 148px; padding: var(--fig-pad) 16px; border-inline: 0; border-top: 1px solid rgba(243,239,230,.14); }
.ds-hero-figure-media { flex: none; width: 82px; height: 124px; }
.ds-hero-figure-media:before { height: 8%; }
.ds-hero-figure-caption { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; gap: 5px; }
.ds-hero-figure-caption small { font-size: 15px; }
}
/* the phone hero is position:relative now that the strip follows it: the copy overlay needs a positioned photo */
@media (max-width: 640px) { .alfera-root .ds-hero.ds-hero--figure { position: relative; } .alfera-root .ds-hero--figure .ds-hero-copy { bottom: 148px; } }
@keyframes ds-fitting-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,242,242,.5); border-color: rgba(243,242,242,.55); } 55% { box-shadow: 0 0 0 10px rgba(243,242,242,0); border-color: rgba(243,242,242,.95); } }
/* the pop-up nudge on phones: slides up a moment after the page opens, once per visit */
.ds-fitting-nudge { position: fixed; left: 16px; right: 16px; bottom: 78px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; color: #f3f2f2; background: rgba(23,23,20,.96); border: 1px solid rgba(243,242,242,.2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); animation: ds-nudge-in .45s cubic-bezier(.2,.8,.2,1) both; }
.ds-fitting-nudge-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(243,242,242,.1); animation: ds-fitting-pulse 2.4s ease-in-out infinite; }
.ds-fitting-nudge-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-fitting-nudge-text strong { font: 500 10px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #b3b8a2; }
.ds-fitting-nudge-text span { font: 500 13px/1.3 'Manrope', system-ui, sans-serif; }
.ds-fitting-nudge-go { flex: none; padding: 10px 14px; font: 500 11px/1.2 'Cormorant Garamond', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; cursor: pointer; }
.ds-fitting-nudge-close { flex: none; width: 32px; height: 32px; padding: 0; color: #f3f2f2; background: transparent; border: 0; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
[dir=rtl] .ds-fitting-nudge-text strong { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; letter-spacing: 0; }
[dir=rtl] .ds-fitting-nudge-text span, [dir=rtl] .ds-fitting-nudge-go { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; letter-spacing: .02em; }
@keyframes ds-nudge-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 641px) { .ds-fitting-nudge { display: none; } }
@media (prefers-reduced-motion: reduce) { .ds-fitting-nudge, .ds-fitting-nudge-icon { animation: none; } }
/* ---- The Alfeyra Race: a full-screen first-visit entrance over the loaded storefront ----
Stage art is the owner's studio-track render; the cars are the owner's renders,
scaled along the lanes toward the viewer. Ivory, charcoal, black, restrained red. */
/* Showroom edition: contained invitation, consistent cars, restrained motion. */
.ds-race-showroom .ds-race-frame { width: min(100%, 1080px); color: #f3efe6; }
.ds-race-showroom .ds-race-top { padding-bottom: 16px; border-bottom: 1px solid #f3efe633; }
.ds-race-showroom .ds-race-close { min-height: 44px; font-size: 12px; letter-spacing: .08em; }
.ds-race.ds-race-showroom .ds-kicker { color: #c6b594 !important; font-size: 12px; }
.ds-race-showroom .ds-race-note { color: #d9d4c8; font-size: 16px; margin-bottom: 12px; }
.ds-race-showroom .ds-race-stage { flex-shrink: 0; min-height: min-content; }
.ds-race-showroom .ds-race-entrance { padding-block: 28px; }
.ds-race-duo { display: flex; justify-content: center; align-items: end; gap: 5%; width: min(100%, 620px); padding: 26px 28px 20px; margin-bottom: 24px; border-bottom: 1px solid #b6a78c66; background: radial-gradient(ellipse at 50% 100%, #b6a78c20, transparent 68%); }
.ds-race-duo img { width: 43%; max-height: 170px; object-fit: contain; filter: drop-shadow(0 14px 9px #332b252b); }
.ds-race-terms { max-width: 54ch; font: 400 13px/1.6 'Manrope', system-ui, sans-serif; color: #d9d4c8; margin: 12px auto 16px; text-align: center; }
.ds-race-showroom .ds-race-btn { min-height: 48px; font-size: 13px; }
.ds-race-showroom button:disabled { opacity: .45; cursor: not-allowed; }
.ds-race.ds-race-showroom button:focus-visible, .ds-race.ds-race-showroom .input:focus-visible { outline: 2px solid #e0bd83; outline-offset: 4px; }
.ds-race-showroom .ds-race-cars { width: min(100%, 680px); gap: 20px; margin-bottom: 20px; }
.ds-race-showroom .ds-race-pick { color: #f3efe6; background: #ffffff0d; border: 1px solid #b7afa177; box-shadow: none; padding: 24px 20px; }
.ds-race-showroom .ds-race-pick:before { display: none; }
.ds-race-showroom .ds-race-pick[aria-pressed="true"] { border: 2px solid #d5b783; padding: 23px 19px; background: #d5b7831a; box-shadow: 0 8px 28px #00000033; }
.ds-race-showroom .ds-race-pick-stage img { filter: drop-shadow(0 12px 7px #332b2535); }
.ds-race-showroom .ds-race-pick-label { font-size: 13px; }
.ds-race-showroom .ds-race-hud { color: #d9d4c8; width: min(100%, 900px); font-size: 14px; }
.ds-race-showroom .ds-race-hud strong { color: #f3efe6; }
.ds-race-showroom .ds-race-track { max-width: 900px; margin-inline: auto; box-shadow: 0 12px 35px #3c332c30; border: 1px solid #ad9b80; }
.ds-race-lane-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ds-race-showroom .ds-race-track.is-launch, .ds-race-showroom .ds-race-track.is-finish, .ds-race-showroom .ds-race-track.is-live .ds-race-plate { animation: none; }
.ds-race-showroom .ds-race-streaks { opacity: .28; }
.ds-race-showroom .ds-race-progress { width: min(100%, 900px); margin-inline: auto; background: #c9c1b3; flex-shrink: 0; }
.ds-race-showroom .ds-race-run.is-over .ds-race-track { width: min(280px, 60%, calc(21dvh * 16 / 9)); margin-bottom: 20px; }
.ds-race-showroom .ds-race-result .ds-race-h { font-size: clamp(28px, 3vw, 38px); }
.ds-race-showroom .ds-race-row .input { border: 1px solid #aaa08f; background: #fffdf7; min-height: 48px; }
.ds-race-showroom .ds-race-error { color: #8e231d; background: #fff5f1; }
.ds-race-shop-link { margin: 18px auto 0; padding: 10px 16px; min-height: 44px; color: #d9d4c8; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 14px; }
@media (max-width: 640px) {
.ds-race-showroom .ds-race-frame { padding: 14px 18px 22px; }
.ds-race-showroom .ds-race-cars { gap: 12px; }
.ds-race-showroom .ds-race-pick { padding: 18px 10px; }
.ds-race-showroom .ds-race-pick[aria-pressed="true"] { padding: 17px 9px; }
.ds-race-showroom .ds-race-actions { width: 100%; max-width: 440px; margin-inline: auto; }
.ds-race-showroom .ds-race-duo { padding: 20px 6px; margin-bottom: 20px; }
.ds-race-showroom .ds-race-pick-stage { aspect-ratio: 4 / 3; }
.ds-race-showroom .ds-race-hud { font-size: 13px; }
}
.ds-race { position: fixed; inset: 0; z-index: 90; display: flex; align-items: stretch; justify-content: center; color: #f3efe6; outline: none; }
.ds-race-backdrop { position: absolute; inset: 0; background: #0b0b0a center / cover no-repeat; filter: saturate(.85); }
.ds-race-backdrop:after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 10%, rgba(23,23,20,.35) 0%, rgba(11,11,10,.82) 60%, rgba(11,11,10,.95) 100%); }
.ds-race-frame { position: relative; width: min(100%, 1120px); display: flex; flex-direction: column; padding: 20px 24px 28px; overflow-y: auto; overflow-x: hidden; }
.ds-race-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ds-race-wordmark { font: 500 15px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .38em; color: #f3efe6; }
.ds-race-close { padding: 10px 14px; font: 500 10px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f3efe6; background: rgba(11,11,10,.35); border: 1px solid rgba(243,239,230,.45); cursor: pointer; backdrop-filter: blur(4px); }
.ds-race-close:hover { border-color: #f3efe6; }
.ds-race button:focus-visible, .ds-race .input:focus-visible { outline: 2px solid #f3efe6; outline-offset: 3px; }
.ds-race-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 18px 0 8px; }
.ds-race-center { align-items: center; text-align: center; }
.ds-race .ds-kicker { color: #b3b8a2 !important; text-align: center !important; margin: 0 0 12px !important; }
.ds-race-h { margin: 0 0 14px; font-size: clamp(30px, 4.6vw, 54px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #f3efe6; text-wrap: balance; }
.ds-race-note { max-width: 46ch; margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #d9d4c8; }
.ds-race-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.ds-race-btn { min-width: 200px; justify-content: center; }
.ds-race .btn-primary { color: #171714; background: #f3efe6; border-color: #f3efe6; }
.ds-race .btn-primary:hover { background: #ffffff; }
.ds-race .btn-outline { color: #f3efe6; border-color: rgba(243,239,230,.55); }
.ds-race .btn-outline:hover { border-color: #f3efe6; }
.ds-race-hero-car { width: min(60vw, 520px); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); animation: ds-race-float 6s ease-in-out infinite; }
@keyframes ds-race-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ds-race-cars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 820px); margin: 8px 0 12px; }
.ds-race-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px 18px; color: #f3efe6; background: linear-gradient(180deg, rgba(243,239,230,.06), rgba(243,239,230,.02)); border: 1px solid rgba(243,239,230,.22); cursor: pointer; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ds-race-pick:before { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: radial-gradient(60% 70% at 50% 100%, rgba(243,239,230,.16), transparent 70%); pointer-events: none; }
.ds-race-pick-red:before { background: radial-gradient(60% 70% at 50% 100%, rgba(179,38,30,.35), transparent 70%); }
.ds-race-pick:hover { border-color: #f3efe6; transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.ds-race-pick-stage { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; }
.ds-race-pick-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 24px rgba(0,0,0,.6)); transition: transform .35s ease; }
.ds-race-pick:hover .ds-race-pick-stage img { transform: scale(1.04); }
.ds-race-pick-label { position: relative; font: 500 11px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.ds-race-run { align-items: stretch; }
.ds-race-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 760px); margin: 4px auto 8px; font: 500 11px/1.5 'Manrope', system-ui, sans-serif; color: #d9d4c8; }
.ds-race-hud strong { font-size: 18px; font-variant-numeric: tabular-nums; color: #fff; }
.ds-race-run.is-over { justify-content: center; }
.ds-race-run.is-over .ds-race-track { width: min(100%, 560px, calc(30dvh * 16 / 9)); margin: 4px auto 20px; flex-shrink: 0; }
.ds-race-result .ds-race-h { max-width: 24ch; margin: 0 auto 18px; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; }
.ds-race-track { position: relative; direction: ltr; width: 100%; aspect-ratio: 16 / 9; margin: 8px 0 14px; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(243,239,230,.12); background: #111; }
.ds-race-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-race-gantry { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); }
.ds-race-lights { display: flex; gap: 6px; padding: 5px 7px; background: rgba(11,11,10,.7); border: 1px solid rgba(243,239,230,.25); border-radius: 2px; }
.ds-race-light { width: 10px; height: 10px; border-radius: 50%; background: #3a3936; box-shadow: inset 0 0 0 1px rgba(243,239,230,.2); transition: background .15s ease, box-shadow .15s ease; }
.ds-race-light.is-red { background: #b3261e; box-shadow: 0 0 10px rgba(179,38,30,.9); }
.ds-race-light.is-green { background: #6f9a52; box-shadow: 0 0 10px rgba(111,154,82,.9); }
.ds-race-runner { position: absolute; width: 31%; transform: translate(calc(-50% + var(--jx, 0px)), calc(-96% + var(--jy, 0px))) rotate(var(--lean, 0deg)) scale(var(--scale, 1)); transform-origin: 50% 96%; will-change: transform, left, top; pointer-events: none; transition: left .05s linear, top .05s linear; }
.ds-race-runner img { width: 100%; height: auto; display: block; }
.ds-race-runner .ds-race-body { position: relative; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.ds-race-runner .ds-race-ghost { position: absolute; inset: 0; pointer-events: none; filter: blur(1.5px) saturate(.8); }
.ds-race-runner .ds-race-ghost-2 { filter: blur(3px) saturate(.6); }
.ds-race-shadow { position: absolute; left: 6%; right: 6%; bottom: -2%; height: 16%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,0) 70%); transform: scaleX(calc(1 + var(--speed, 0) * .25)); }
.ds-race-runner.is-winner .ds-race-body { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(243,239,230,.35)); }
.ds-race-track.is-launch { animation: ds-race-nudge .5s ease-out; }
.ds-race-track.is-finish { animation: ds-race-nudge .6s ease-out; }
@keyframes ds-race-nudge { 0% { transform: translate3d(0,0,0); } 20% { transform: translate3d(0, 3px, 0) scale(1.012); } 45% { transform: translate3d(-2px, -2px, 0) scale(1.012); } 70% { transform: translate3d(1px, 1px, 0); } 100% { transform: none; } }
.ds-race-streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ds-race-streak { position: absolute; top: 34%; width: 2px; height: 22%; background: linear-gradient(180deg, rgba(243,239,230,0), rgba(243,239,230,.55) 60%, rgba(243,239,230,0)); transform-origin: 50% 0; animation: ds-race-streak 1.1s linear infinite; opacity: .8; }
.ds-race-streak-0 { left: 39%; transform: rotate(18deg); animation-delay: 0s; }
.ds-race-streak-1 { left: 61%; transform: rotate(-18deg); animation-delay: -.55s; }
.ds-race-streak-2 { left: 30%; transform: rotate(26deg); animation-delay: -.3s; }
.ds-race-streak-3 { left: 70%; transform: rotate(-26deg); animation-delay: -.85s; }
@keyframes ds-race-streak { 0% { top: 32%; height: 6%; opacity: 0; } 15% { opacity: .9; } 100% { top: 100%; height: 36%; opacity: 0; } }
.ds-race-track.is-live .ds-race-plate { animation: ds-race-plate-throb 1.6s ease-in-out infinite; }
@keyframes ds-race-plate-throb { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.06); } }
.ds-race-you { position: absolute; left: 50%; top: -6%; transform: translateX(-50%); padding: 3px 7px; font: 600 9px/1 'Manrope', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f3efe6; background: #b3261e; border-radius: 2px; }
.ds-race-finish { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-conic-gradient(#f3efe6 0 25%, #171714 0 50%) 0 0 / 14px 14px; opacity: .85; box-shadow: 0 -8px 20px rgba(0,0,0,.4); }
.ds-race-finish.is-crossed { opacity: 1; }
.ds-race-flash { position: absolute; inset: 0; background: #f3efe6; animation: ds-race-flash .7s ease-out forwards; pointer-events: none; }
@keyframes ds-race-flash { from { opacity: .16; } to { opacity: 0; } }
.ds-race-progress { height: 3px; background: rgba(243,239,230,.18); overflow: hidden; margin: 0 0 16px; }
.ds-race-progress span { display: block; height: 100%; background: #b3261e; transition: width .1s linear; }
.ds-race-result { text-align: center; padding-top: 6px; }
.ds-race-result .ds-race-note { margin-left: auto; margin-right: auto; }
.ds-race-claim { max-width: 560px; margin: 0 auto; }
.ds-race-row { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.ds-race-row .input { flex: 1; min-width: 0; background: #f3efe6; color: #171714; }
.ds-race-code .ds-race-chip { font-size: 15px; letter-spacing: .12em; padding: 12px 18px; margin: 4px 0 10px; }
.ds-race-error { margin: 12px auto 0; max-width: 460px; padding: 10px 12px; font-size: 13px; color: #f3efe6; border: 1px solid #b3261e; background: rgba(179,38,30,.15); }
.ds-race.no-motion .ds-race-runner, .ds-race.no-motion .ds-race-pick, .ds-race.no-motion .ds-race-progress span, .ds-race.no-motion .ds-race-hero-car, .ds-race.no-motion .ds-race-pick-stage img { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .ds-race-runner, .ds-race-pick, .ds-race-progress span, .ds-race-light, .ds-race-pick-stage img { transition: none; } .ds-race-hero-car, .ds-race-flash, .ds-race-track.is-launch, .ds-race-track.is-finish, .ds-race-streak, .ds-race-track.is-live .ds-race-plate { animation: none; } .ds-race-pick:hover { transform: none; } }
/* short viewports: size the stage from the height (never width:auto — with only
absolutely-positioned children that collapses the track to nothing) */
@media (max-height: 760px) { .ds-race-run .ds-race-track { width: min(100%, calc(54vh * 16 / 9)); margin-left: auto; margin-right: auto; } .ds-race-hero-car { width: min(50vw, 380px); } }
@media (max-height: 560px) { .ds-race-run .ds-race-track { width: min(100%, calc(44vh * 16 / 9)); } .ds-race-hero-car { width: min(40vw, 300px); } .ds-race-stage { padding-top: 8px; } }
@media (max-width: 640px) {
.ds-race-frame { padding: 14px 16px 24px; }
.ds-race-cars { gap: 10px; }
.ds-race-pick { padding: 12px 8px 12px; }
.ds-race-hero-car { width: min(78vw, 360px); }
.ds-race-runner { width: 37%; }
.ds-race-gantry { top: 20%; }
.ds-race-lights { gap: 4px; padding: 4px 5px; }
.ds-race-light { width: 8px; height: 8px; }
.ds-race-row { flex-direction: column; }
.ds-race-btn { min-width: 0; width: 100%; }
}
/* the WhatsApp reply line is plain body copy in the site language now */
.wa-ask-reply { font-family: 'Manrope', system-ui, sans-serif; }
[dir=rtl] .wa-ask-reply, [dir=rtl] .wa-ask-prompt, [dir=rtl] .wa-ask-hours { text-align: right; font-family: 'Cairo', 'Manrope', system-ui, sans-serif; }
/* ---- WhatsApp purchase assistance (07-whatsapp.js) ----
Secondary everywhere: outlined under "Add to bag", text-weight in the bag,
a small pill on phones. The store's own type, tokens and spacing. */
.wa-ask { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wa-ask-prompt { margin: 0 0 2px; font: 500 13px/1.4 'Manrope', system-ui, sans-serif; color: var(--ink); }
.wa-ask-reply { margin: 0 0 10px; font: 400 12px/1.5 'Cairo', 'Manrope', system-ui, sans-serif; color: var(--stone); }
[dir=ltr] .wa-ask-reply { text-align: left; }
.wa-ask-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; color: var(--ink); border-color: var(--ink); text-decoration: none; }
.wa-ask-btn:hover { background: var(--ink); color: var(--bg); }
.wa-ask-btn:focus-visible, .wa-cart-link:focus-visible, .wa-float:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wa-ask-hours { margin: 8px 0 0; font: 400 11px/1.5 'Manrope', system-ui, sans-serif; color: var(--stone); }
.wa-cart { margin: 12px 0 0; text-align: center; font: 400 12px/1.5 'Manrope', system-ui, sans-serif; color: var(--stone); }
.wa-cart-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wa-cart-link:hover { color: var(--accent-dark); }
.wa-cart-hours { display: block; font-size: 11px; }
.wa-float { display: none; }
@media (max-width: 640px) {
/* sits above the Style Board tab (bottom centre) and the toast (bottom 24px); steps aside while the fitting-room nudge is up */
.wa-float { position: fixed; right: 16px; bottom: 72px; z-index: 58; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--panel); color: var(--ink); font: 500 12px/1 'Manrope', system-ui, sans-serif; letter-spacing: .04em; text-decoration: none; box-shadow: 0 10px 24px rgba(23,23,20,.18); }
[dir=rtl] .wa-float { right: auto; left: 16px; padding: 0 12px 0 14px; }
[dir=rtl] .wa-ask-btn, [dir=rtl] .wa-cart-link, [dir=rtl] .wa-float { flex-direction: row-reverse; }
.wa-float:active { opacity: .78; }
.wa-float { animation: wa-fade .18s ease-out; }
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }
body:has(.ds-fitting-nudge) .wa-float { display: none; }
}
/* ---- Phones: purchasing first (product page) ----
The long description folds into a collapsed "Product details" row under
the purchase controls; two lines of it stay up top. Desktop is untouched. */
.qg-pdp-details { display: none; }
@media (max-width: 640px) {
.qg-pdp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.qg-pdp-details { display: block; }
.qg-pdp-info { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* room for the purchase bar: it never covers the last rows */
}
/* the phone purchase bar (07-whatsapp.js MobilePurchaseBar): only while Add to bag is off-screen */
.wa-sticky { display: none; }
@media (max-width: 640px) {
.wa-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(23,23,20,.10); }
.wa-sticky-main { flex: 1; min-height: 48px; padding: 12px 16px; }
.wa-sticky-wa { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--ink); border: 1px solid var(--ink); background: transparent; text-decoration: none; }
.wa-sticky-wa:focus-visible, .wa-sticky-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wa-sticky { animation: wa-fade .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-sticky { animation: none; } }
/* ---- Race a friend: the header control and the challenge stages ----
Everything below is scoped to .ds-race-button / .ds-race; the header
change is the one control beside the bag. */
.alfera-root .ds-race-button { flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 4px 6px; }
.alfera-root .ds-race-button span { font-size: 8px; letter-spacing: .1em; white-space: nowrap; line-height: 1; }
.alfera-root .ds-race-button svg { width: 22px; height: 22px; }
.ds-race-top-actions { display: flex; gap: 8px; }
.ds-race-back { border-color: rgba(243,239,230,.25); }
.ds-race-join { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 460px); margin: 18px auto 0; }
.ds-race-join-label { font: 500 11px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c6b594; }
.ds-race-join .input { text-transform: uppercase; letter-spacing: .18em; text-align: center; }
.ds-race-share { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 6px 0 14px; }
.ds-race-mine { width: min(100%, 560px); margin: 26px auto 0; text-align: start; }
.ds-race-mine .ds-kicker { text-align: start !important; margin-bottom: 8px !important; }
.ds-race-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-race-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(243,239,230,.18); background: rgba(255,255,255,.04); }
.ds-race-item-car { flex: none; width: 56px; } .ds-race-item-car img { width: 100%; height: auto; display: block; }
.ds-race-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 400 12px/1.4 'Manrope', system-ui, sans-serif; color: #d9d4c8; }
.ds-race-item-text strong { color: #f3efe6; font-weight: 600; }
.ds-race-item-btn { min-width: 0; padding: 10px 14px; font-size: 10px; }
[dir=rtl] .ds-race-item-text { text-align: right; }
@media (max-width: 640px) { .ds-race-item { flex-wrap: wrap; } .ds-race-item-btn { width: 100%; } }
/* ---- Header on phones and small tablets: four things, no overlap ----
The side columns used to be 1fr each with nowrap contents, so on a phone
the Race + Bag pair overflowed its track and sat under the wordmark
(Arabic first, where the label is longer). The columns are now sized by
their contents and the wordmark takes what is left, shrinking rather than
colliding; Race is icon-only there with its name kept for assistive tech. */
@media (max-width: 820px) {
.alfera-root > .ds-site-header > .ds-nav { grid-template-columns: 1fr auto 1fr !important; gap: 10px; }
/* min-width:0 (set further up for the desktop nav) let a 1fr column shrink under its buttons; here each side column is at least its contents */
.ds-nav-left, .ds-nav-right { flex: none; gap: 8px; min-width: max-content; }
/* a legacy rule for an older header (header > div:nth-child(2) > div:last-child) still floats this column absolutely; back into the grid */
.alfera-root > .ds-site-header > .ds-nav > .ds-nav-right { position: static; top: auto; right: auto; transform: none; justify-content: flex-end; }
.ds-wordmark { justify-self: center; }
.alfera-root .ds-race-button span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.alfera-root .ds-race-button { min-width: 44px; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--ink); }
.alfera-root .ds-race-button svg { width: 24px; height: 24px; }
.ds-bag-button { max-width: none; min-height: 44px; padding: 0 8px; border: 1px solid var(--ink); }
}
@media (max-width: 640px) {
.ds-wordmark { font-size: clamp(12px, 4vw, 15px) !important; letter-spacing: .22em !important; padding-left: .22em; }
.ds-bag-button { padding: 0 6px; }
.ds-bag-button span { display: inline !important; font-size: 9px; }
}
@media (max-width: 359px) {
.ds-wordmark { letter-spacing: .14em !important; padding-left: .14em; }
.ds-nav-left, .ds-nav-right { gap: 6px; }
.alfera-root > .ds-site-header > .ds-nav { gap: 6px; padding: 12px 12px !important; }
}
/* ---- Race a friend: the explanation — reward, four steps, chance line, then the full rules folded ---- */
.ds-race-reward { max-width: 46ch; margin: 0 auto 14px; font: 600 15px/1.5 'Manrope', system-ui, sans-serif; color: #f3efe6; }
.ds-race-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 auto 12px; padding: 0; list-style: none; max-width: 640px; }
.ds-race-steps li { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 'Manrope', system-ui, sans-serif; letter-spacing: .04em; color: #e6e1d6; }
.ds-race-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid rgba(243,239,230,.45); border-radius: 50%; font-size: 11px; color: #c6b594; }
.ds-race-chance { max-width: 46ch; margin: 0 auto 14px; font: 400 13px/1.5 'Manrope', system-ui, sans-serif; color: #c6b594; }
.ds-race-rules { max-width: 56ch; margin: 6px auto 16px; text-align: start; font: 400 13px/1.6 'Manrope', system-ui, sans-serif; color: #d9d4c8; }
.ds-race-rules summary { cursor: pointer; text-align: center; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: #f3efe6; padding: 6px; }
.ds-race-rules summary:focus-visible { outline: 2px solid #f3efe6; outline-offset: 2px; }
.ds-race-rules ul { margin: 10px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
[dir=rtl] .ds-race-steps li, [dir=rtl] .ds-race-rules { font-family: 'Cairo', 'Manrope', system-ui, sans-serif; letter-spacing: 0; }
/* ---- Homepage rhythm: tighter between sections, the same breathing room inside them ---- */
.alfera-root .ds-catalog { padding-bottom: 48px !important; }
.alfera-root .ds-catalog-title { padding-top: 40px; }
@media (max-width: 640px) {
.alfera-root .ds-catalog { padding-bottom: 36px !important; }
.alfera-root .ds-catalog-title { padding-top: 32px; }
}