/* High Class storefront: "the velvet showcase". The plan and the reasons are in docs/design-system.md. */
:root {
  --tissue: #f8f2e9;        /* page */
  --linen: #f0e6d8;         /* panels behind photos */
  --linen-2: #ebdfcd;
  --velvet: #3f0f1b;        /* the three dark areas */
  --velvet-2: #5a1626;
  --garnet: #6b1d2f;        /* links, badge, order button */
  --garnet-2: #82263b;
  --gold: #b08d4f;          /* hairlines, the one gold button */
  --gold-pale: #e3cc97;
  --ink: #2b1a1d;
  --ink-2: #5a4347;
  --muted: #735f58;         /* 5.4:1 on tissue, 4.9:1 on linen */
  --gold-text: #7f6229;     /* gold for small text: the bright gold is only 2.8:1, fine for lines, not for words */
  --line: #e2d4c0;
  --danger: #a3402f;
  --ok: #2f6b4f;
  --display: "Markazi Text", "Amiri", serif;
  --ui: "Alexandria", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gold-grad: linear-gradient(135deg, #ecd8a4 0%, #c9a45c 50%, #a8843f 100%);
  /* velvet: a soft sheen + a faint fabric grain (SVG noise), drawn by the browser, no image file */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tissue); color: var(--ink); font: 300 1rem/1.75 var(--ui); font-size-adjust: from-font; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.2; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.center { text-align: center; }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--garnet); color: #fff; }
.skip:focus { top: 10px; }
.velvet { position: relative; isolation: isolate; color: #f3e6d6;
  background: var(--grain), radial-gradient(120% 90% at 75% 15%, var(--velvet-2) 0%, var(--velvet) 55%, #2c0912 100%); }

/* ---------- header ---------- */
.topbar { background: var(--velvet); color: var(--gold-pale); text-align: center; font-size: 0.75rem; padding: 6px 16px; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(248, 242, 233, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 132px; }
.header-start, .header-end { display: flex; align-items: center; gap: 6px; }
.header-end { justify-content: flex-end; }
.brand { display: block; line-height: 0; }
.brand-logo { height: 120px; width: auto; }
.search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 4px 2px; }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.4; flex: none; }
.search input { width: 13rem; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--ink); outline: none; }
.search:focus-within { border-color: var(--gold); }
.icon-link, .menu-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.icon-link svg, .menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.icon-link:hover { color: var(--garnet); }
.badge { position: absolute; top: 4px; left: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--garnet); color: #fff; font-size: 0.6875rem; line-height: 18px; text-align: center; }
.menu-btn { display: none; }
.main-nav { display: flex; justify-content: center; gap: 34px; padding: 0 0 12px; font-size: 0.875rem; font-weight: 400; }
.main-nav a { position: relative; padding: 4px 0; color: var(--ink-2); transition: color .2s; }
.main-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold); scale: 0 1; transition: scale .3s var(--ease); }
.main-nav a:hover { color: var(--garnet); }
.main-nav a:hover::after { scale: 1 1; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 28px; border-radius: 999px;
  font: 400 0.9375rem var(--ui); border: 1px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.btn-dark { background: var(--garnet); color: #fff; }
.btn-dark:hover { background: var(--garnet-2); }
.btn-gold { background: var(--gold-grad); color: var(--velvet); font-weight: 500; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-outline { background: transparent; border-color: var(--garnet); color: var(--garnet); }
.btn-outline:hover { background: var(--garnet); color: #fff; }
.btn.block { width: 100%; }
.grow { flex: 1; }
.link-light { color: var(--gold-pale); border-bottom: 1px solid rgba(227, 204, 151, .4); padding-bottom: 2px; font-size: 0.9375rem; }
.link-light:hover { border-color: var(--gold-pale); }
.linkish { background: none; border: 0; color: var(--danger); cursor: pointer; font: inherit; font-size: 0.8125rem; text-decoration: underline; }

/* ---------- hero: the one bold moment ---------- */
.hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(0, 32rem); align-items: center; gap: 56px; min-height: min(78svh, 720px); padding-block: 56px 64px; }
.hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem); font-weight: 400; line-height: 1.05; color: #fbf3e6; }
.hero h1 span { display: block; }
.hero p { color: #dcc4b2; max-width: 30rem; font-size: 1.0625rem; margin: 22px 0 34px; }
.hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-window { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; overflow: hidden;
  border: 1px solid rgba(227, 204, 151, .35); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); background: var(--velvet-2); }
.hero-window picture { display: contents; }
.hero-window img { width: 100%; height: 100%; object-fit: cover; }
.hero-window::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; border: 1px solid rgba(227, 204, 151, .3); pointer-events: none; }
.hero-window-logo { display: grid; place-items: center; padding: 18%; }
.hero-window-logo img { object-fit: contain; }
.hero-caption { position: absolute; inset: auto 22px 22px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 16px; border-radius: 6px; background: rgba(44, 9, 18, .72); backdrop-filter: blur(6px); color: #f3e6d6; font-size: 0.8125rem; }
.hero-caption b { color: var(--gold-pale); font-weight: 400; white-space: nowrap; }
/* several pieces in the window: stacked, the shown one fades in */
.hero-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.on { opacity: 1; }
.hero-dots { position: absolute; inset: auto 0 80px; z-index: 1; display: flex; justify-content: center; gap: 4px; }
.hero-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 230, 214, .55); transition: background .3s, scale .3s; }
.hero-dots button[aria-pressed="true"]::before { background: var(--gold-pale); scale: 1.35; }
.hero-dots button:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: -2px; border-radius: 50%; }

/* ---------- promises (under the hero) ---------- */
.promises { list-style: none; margin: 0 auto; padding: 26px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.promises li { display: grid; padding-inline: 24px; text-align: center; }
.promises li + li { border-inline-start: 1px solid var(--line); }
.promises b { font-family: var(--display); font-size: 1.25rem; font-weight: 500; color: var(--garnet); }
.promises span { font-size: 0.8125rem; color: var(--muted); }

/* ---------- sections ---------- */
.section { margin-top: 88px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem); font-weight: 400; }
.section-head a { flex: none; white-space: nowrap; color: var(--garnet); font-size: 0.875rem; border-bottom: 1px solid var(--gold-pale); }
.page-head { padding: 34px 0 6px; }
.page-head h1 { font-size: clamp(2.125rem, 1.6rem + 1.8vw, 3rem); font-weight: 400; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; color: var(--muted); }
.crumbs a:hover { color: var(--garnet); }
.crumbs > span:last-child { color: var(--ink-2); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.wrap.crumbs { padding-top: 22px; }
.empty { padding: 56px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; }
.empty a { color: var(--garnet); }
.suggest-head { margin-top: 48px; }

/* ---------- shop by piece: windows onto velvet ---------- */
.windows { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: 16px; width: min(1240px, 100% - 32px); margin-inline: auto; }
.window { position: relative; display: block; aspect-ratio: 4 / 5.4; border-radius: 999px 999px 4px 4px; overflow: hidden; background: var(--velvet); }
.window picture { display: contents; }
.window img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.window:hover img { scale: 1.05; }
.window-label { position: absolute; inset: auto 0 0; display: grid; justify-items: center; padding: 48px 12px 18px; text-align: center;
  background: linear-gradient(transparent, rgba(44, 9, 18, .88)); color: #fbf3e6; }
.window-label b { font-family: var(--display); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.625rem); font-weight: 400; line-height: 1.15; white-space: nowrap; }
.window-label small { color: var(--gold-pale); font-size: 0.75rem; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; }
.grid + .grid, .spotlight + .grid { margin-top: 40px; }
.card { position: relative; }
.card-link { display: block; }
.card-media { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, var(--linen) 0%, var(--tissue) 100%); }
/* <picture> wrappers shouldn't change layout: the <img> inside acts as the direct child */
.card-media picture, .gallery-main picture, .thumb picture, .line-img picture { display: contents; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, scale 1.2s var(--ease); }
.card-media img.alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card-media img:not(.alt) { scale: 1.04; }
  .card:hover .card-media img.alt { opacity: 1; }
}
.card-body { padding: 14px 2px 0; display: grid; gap: 2px; }
.note { font-size: 0.75rem; color: var(--garnet); }
.note-new { color: var(--gold-text); }
.card h3 { font-size: 1.1875rem; font-weight: 400; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s; }
.card:hover h3 { color: var(--garnet); }
.price { display: flex; align-items: baseline; gap: 10px; font-size: 0.875rem; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.price s { color: var(--muted); font-size: 0.8125rem; }
.quick-add { position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; }
.quick-add button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(248, 242, 233, .9); border: 1px solid var(--line); color: var(--garnet); transition: background .25s, color .25s, opacity .3s; }
.quick-add button:hover, .quick-add button:focus-visible { background: var(--garnet); color: #fff; }
.quick-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .quick-add button { opacity: 0; }
  .card:hover .quick-add button, .quick-add button:focus-visible { opacity: 1; }
}

/* editorial break inside the home grid */
.spotlight { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; margin-top: 56px; padding-block: 8px; }
.spotlight-media { display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--linen); }
.spotlight-media picture { display: contents; }
.spotlight-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
.spotlight:hover .spotlight-media img { scale: 1.03; }
.spotlight-copy { display: grid; justify-items: start; gap: 12px; max-width: 28rem; }
.spotlight-copy b { font-family: var(--display); font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 400; line-height: 1.15; }
.spotlight-copy > span:not(.btn) { color: var(--ink-2); }
.spotlight-copy em { font-style: normal; color: var(--garnet); }

/* ---------- gifts by budget (the dark band) ---------- */
.gifts { margin-top: 96px; padding: 72px 0; text-align: center; }
.gifts h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 400; color: #fbf3e6; }
.gift-bands { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px auto 0; max-width: 56rem; }
.gift-band { display: grid; justify-items: center; padding: 18px 12px 22px; color: #dcc4b2; transition: color .3s; }
.gift-band + .gift-band { border-inline-start: 1px solid rgba(227, 204, 151, .25); }
.gift-band b { font-family: var(--display); font-weight: 400; font-size: clamp(3.5rem, 2.4rem + 4vw, 5.5rem); line-height: 1; color: var(--gold-pale); font-variant-numeric: lining-nums; }
.gift-band span { font-size: 0.875rem; }
.gift-band small { margin-top: 10px; font-size: 0.75rem; color: #b99c8c; }
.gift-band:hover b { color: #fff3d6; }
.gift-note { margin: 28px auto 0; max-width: 36rem; color: #c9ad9b; font-size: 0.875rem; }

.closing { text-align: center; max-width: 34rem; display: grid; justify-items: center; gap: 10px; }
.closing h2 { font-size: 1.875rem; font-weight: 400; }
.closing p { color: var(--muted); margin: 0 0 8px; }

/* ---------- catalog toolbar ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 20px 0 30px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px; font-size: 0.875rem; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: var(--garnet); }
.chip.on { background: var(--garnet); color: #fff; border-color: var(--garnet); }
.filters { display: flex; gap: 10px; align-items: end; }
.filters label { display: grid; gap: 2px; font-size: 0.75rem; color: var(--muted); }
.filters select, .sort select { font: inherit; font-size: 0.875rem; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--tissue); min-width: 8.5em; }
.filters select:focus { outline: none; border-color: var(--gold); }
.filters-go { min-height: 40px; padding: 0 18px; }
.filters-go[hidden] { display: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 26px; }
.active-filters a { font-size: 0.8125rem; padding: 4px 12px; border-radius: 999px; background: var(--linen); color: var(--garnet); }
.active-filters a span { margin-inline-start: 4px; }
.active-filters .clear { background: none; color: var(--muted); text-decoration: underline; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.pager a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 0.875rem; }
.pager a.on { background: var(--garnet); color: #fff; border-color: var(--garnet); }

/* ---------- product page ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; padding-top: 22px; }
.gallery { min-width: 0; }
.gallery-main { position: relative; display: flex; aspect-ratio: 1; border-radius: 4px; background: var(--linen);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-main::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.gallery-main.zooming img { transform: scale(1.9); }
@media (hover: hover) and (pointer: fine) { .gallery-main { cursor: zoom-in; } }
.dots { display: none; justify-content: center; gap: 6px; margin-top: 12px; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s, background .3s; }
.dots span.on { width: 18px; background: var(--gold); }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--linen); opacity: .65; transition: opacity .25s, border-color .25s; }
.thumb.on, .thumb:hover { opacity: 1; border-color: var(--gold); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.details { position: sticky; top: 196px; align-self: start; }
.details > .card-cat { font-size: 0.8125rem; color: var(--gold-text); }
.details h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 400; margin: 4px 0 10px; }
.price.big { font-size: 1.25rem; color: var(--garnet); flex-wrap: wrap; }
.price.big s { font-size: 0.9375rem; }
.save { font-size: 0.8125rem; color: var(--ok); }
.lead { color: var(--ink-2); font-size: 1.0625rem; margin: 16px 0; max-width: 34rem; }
.low { color: var(--danger); font-size: 0.875rem; margin: 0 0 8px; }
.buy { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 14px; }
.buy .btn-dark { flex-basis: 100%; order: -1; min-height: 54px; font-size: 1rem; }
.qty { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 44px; border: 0; background: none; font-size: 1.125rem; cursor: pointer; color: var(--ink); }
.qty input { width: 40px; border: 0; background: none; text-align: center; font: inherit; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.soldout { padding: 14px; background: var(--linen); border-radius: 6px; text-align: center; margin: 20px 0; }
.promise { list-style: none; padding: 0; margin: 6px 0 20px; display: grid; gap: 10px; font-size: 0.875rem; color: var(--ink-2); }
.promise li { display: flex; gap: 10px; align-items: flex-start; }
.promise svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--garnet); stroke-width: 1.3; margin-top: 2px; }
.promise b { color: var(--ink); }
.share-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 0.875rem; }
.wa-line { color: var(--ok); border-bottom: 1px solid currentColor; }
.share { display: inline-flex; align-items: center; gap: 6px; color: var(--garnet); }
.share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.info { margin-top: 26px; border-top: 1px solid var(--line); }
.info details { border-bottom: 1px solid var(--line); }
.info summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px;
  font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.info summary::-webkit-details-marker { display: none; }
.info summary::after { content: "+"; color: var(--gold); font-family: var(--ui); font-size: 1.25rem; font-weight: 300; line-height: 1; transition: rotate .3s var(--ease); }
.info details[open] summary::after { rotate: 45deg; }
.info details > :not(summary) { margin: 0 0 18px; color: var(--ink-2); font-size: 0.9375rem; }
.desc { white-space: pre-line; }
.info a { color: var(--garnet); }

/* ---------- cart & checkout ---------- */
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 16px; }
.line { display: grid; grid-template-columns: 88px 1fr 70px 110px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line-img { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--linen); }
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-info { display: flex; flex-direction: column; }
.line-info b { font-family: var(--display); font-size: 1.125rem; font-weight: 400; }
.line-qty { width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: center; background: var(--tissue); }
.line-total { text-align: left; font-weight: 400; }
.summary { background: var(--linen); border-radius: 6px; padding: 26px; position: sticky; top: 196px; }
.summary.narrow { max-width: 460px; margin: 26px auto; position: static; text-align: right; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.summary .row.mini { font-size: 0.875rem; color: var(--ink-2); }
.summary .row.total { border-top: 1px solid var(--line-2, #d9c8b0); margin: 8px 0 18px; padding-top: 14px; font-size: 1.125rem; }
.summary .row.discount { color: var(--ok); }
.coupon { display: flex; gap: 8px; align-items: center; margin: 16px 0; padding-top: 16px; border-top: 1px dashed #d9c8b0; }
.coupon input { flex: 1; min-width: 0; font: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; text-transform: uppercase; background: var(--tissue); }
.coupon .btn { min-height: 40px; padding: 0 18px; }
.checkout-form { display: grid; gap: 16px; }
.checkout-form label { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 400; }
.checkout-form input, .checkout-form select, .checkout-form textarea { width: 100%; font: inherit; font-weight: 300; border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 14px; background: #fffaf3; color: var(--ink); min-height: 48px; }
.checkout-form :is(input, select, textarea):focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 79, .18); }
.checkout-form [aria-invalid="true"] { border-color: var(--danger); background: #fff6f3; }
.checkout-form .optin { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; color: var(--ink-2); cursor: pointer; }
.checkout-form .optin input { width: 20px; min-height: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--garnet); }
.err { color: var(--danger); font-weight: 400; }
.form-errors { background: #f8e9e5; border-inline-start: 3px solid var(--danger); color: var(--danger); border-radius: 6px; padding: 14px 16px; outline: none; }
.form-errors ul { margin: 6px 0 0; padding-inline-start: 18px; }
.form-errors a { color: inherit; text-decoration: underline; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.done { text-align: center; padding: 70px 0 30px; }
.done h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 400; margin-bottom: 8px; }
.done-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--velvet); color: var(--gold-pale); font-size: 1.75rem; }
.done .btn { margin: 6px; }
.save-account { max-width: 460px; margin: 10px auto 26px; padding: 22px; border: 1px solid var(--gold-pale); border-radius: 6px; display: grid; justify-items: center; gap: 6px; }
.save-account b { font-family: var(--display); font-size: 1.375rem; font-weight: 500; }
.save-account p { margin: 0 0 8px; color: var(--ink-2); font-size: 0.9375rem; }
.prose { max-width: 44rem; }
.prose h3 { margin-top: 28px; font-size: 1.5rem; font-weight: 500; }
.prose a { color: var(--garnet); }

/* ---------- accounts ---------- */
.auth { display: grid; place-items: center; padding: 48px 0 20px; }
.auth-card { width: min(100%, 27rem); }
.auth-card h1 { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 400; }
.auth-card > .muted { margin: 6px 0 24px; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.auth-switch a { color: var(--garnet); border-bottom: 1px solid var(--gold-pale); }
.account-head { display: flex; justify-content: space-between; align-items: baseline; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 18px; }
.block-title { font-size: 1.75rem; font-weight: 400; margin-bottom: 14px; }
.order-card { border-top: 1px solid var(--line); padding: 16px 0; }
.order-card header, .order-card footer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.order-card header a { color: var(--garnet); font-weight: 400; }
.order-card ul { margin: 8px 0; padding-inline-start: 18px; color: var(--ink-2); font-size: 0.9375rem; }
.order-card footer { font-size: 0.875rem; }
.status { font-size: 0.8125rem; padding: 2px 12px; border-radius: 999px; background: var(--linen); }
.s-delivered { background: #e3efe7; color: var(--ok); }
.s-cancelled, .s-returned { background: #f5e3df; color: var(--danger); }
.account-box { background: var(--linen); border-radius: 6px; padding: 4px 18px; margin-bottom: 14px; }
.account-box summary { cursor: pointer; padding: 12px 0; font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.account-box form { padding-bottom: 18px; }

.flashes { margin-top: 16px; }
.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 8px; font-size: 0.875rem; }
.flash-ok { background: #e6efe8; color: var(--ok); }
.flash-error { background: #f8e9e5; color: var(--danger); }

/* ---------- footer ---------- */
.site-footer { margin-top: 110px; padding-top: 64px; color: #e2cfbe; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { color: var(--gold-pale); font-size: 1.25rem; font-weight: 500; margin-bottom: 10px; }
.footer-grid a { display: block; padding: 3px 0; font-size: 0.875rem; color: #d3bba9; }
.footer-grid a:hover { color: #fff; }
.footer-logo { width: 130px; height: auto; margin-bottom: 14px; }
.muted-light { color: #c9ad9b; font-size: 0.875rem; max-width: 20rem; }
.footer-badges { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.footer-badges li { font-size: 0.75rem; color: var(--gold-pale); border: 1px solid rgba(227, 204, 151, .3); border-radius: 999px; padding: 2px 10px; }
.copyright { border-top: 1px solid rgba(227, 204, 151, .18); margin-top: 48px; padding: 18px 0; font-size: 0.75rem; color: #b39484; }
.wa-float { position: fixed; bottom: 22px; left: 22px; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 30; }

/* ---------- responsive ---------- */
@media (max-width: 68.75em) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-nav { gap: 22px; }
  .search input { width: 9rem; }
}
@media (max-width: 51.25em) {
  /* header: menu | logo | bag */
  .topbar { font-size: 0.6875rem; }
  .menu-btn { display: grid; margin-inline-start: -10px; }
  .header-row { height: 88px; }
  .brand-logo { height: 76px; }
  .main-nav, .search { display: none; }
  .header-end .icon-link:first-child { display: none; }  /* account lives in the drawer on phones */

  /* hero: the window first, then the words */
  .hero-grid { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding-block: 26px 44px; }
  .hero-window { order: -1; width: min(86%, 22rem); margin-inline: auto; }
  .hero-copy { text-align: center; }
  .hero h1 { font-size: clamp(2.625rem, 1.6rem + 6vw, 3.5rem); }
  .hero p { margin: 14px auto 26px; font-size: 1rem; }
  .hero-cta { justify-content: center; gap: 18px; }
  .hero-caption { inset: auto 14px 14px; font-size: 0.75rem; padding: 8px 12px; }
  .hero-dots { bottom: 58px; }

  .promises { grid-template-columns: 1fr; padding: 8px 0; }
  .promises li { padding: 14px 0; }
  .promises li + li { border-inline-start: 0; border-top: 1px solid var(--line); }

  .section { margin-top: 64px; }
  .section-head { margin-bottom: 20px; }
  .section-head h2 { font-size: 1.875rem; }
  .page-head { padding-top: 22px; }
  nav.wrap.crumbs { padding-top: 14px; }
  .crumbs > span:last-child { max-width: 22ch; }

  /* windows swipe sideways; start-aligned + scroll-padding so the first one isn't cut or glued to the edge */
  .windows { grid-auto-columns: 62%; width: 100%; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; scrollbar-width: none; gap: 12px; }
  .windows::-webkit-scrollbar { display: none; }
  .window { scroll-snap-align: start; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .card h3 { font-size: 1.0625rem; }
  .spotlight { grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
  .spotlight-media { margin-inline: -16px; border-radius: 0; }

  .gifts { margin-top: 72px; padding: 52px 0; }
  .gift-bands { grid-template-columns: 1fr; margin-top: 22px; }
  .gift-band { grid-template-columns: auto auto auto 1fr; align-items: baseline; justify-items: start; gap: 10px; padding: 16px 4px; text-align: start; }
  .gift-band + .gift-band { border-inline-start: 0; border-top: 1px solid rgba(227, 204, 151, .25); }
  .gift-band b { font-size: 3rem; }
  .gift-band small { margin: 0; justify-self: end; }

  /* catalog: chips scroll sideways, three native pickers in a row */
  .toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px;
    scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; padding: 8px 16px; }
  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .filters select { min-width: 0; width: 100%; min-height: 44px; }
  .filters-go { grid-column: 1 / -1; }
  .active-filters { margin-top: -8px; }

  /* product, cart, checkout, account */
  .product, .cart-grid, .account-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 12px; }
  .details, .summary { position: static; }
  .thumbs { display: none; }
  .dots { display: flex; }
  .gallery-main { margin-inline: -16px; border-radius: 0; }
  .line { grid-template-columns: 70px minmax(0, 1fr) 64px; gap: 12px; }
  .line-info { min-width: 0; overflow-wrap: anywhere; }
  .line-total { grid-column: 2 / -1; text-align: right; }
  .form-pair { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .copyright { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; width: 50px; height: 50px; }
}

/* ---------- product page: bottom order bar (phones only) ---------- */
.buy-bar { display: none; }
@media (max-width: 51.25em) {
  .buy-bar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 25; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(248, 242, 233, .96);
    backdrop-filter: blur(10px); border-top: 1px solid var(--line); translate: 0 110%; transition: translate .45s var(--ease); }
  .show-buybar .buy-bar { translate: 0 0; }
  .buy-bar-price { display: grid; line-height: 1.3; }
  .buy-bar-price b { font-size: 1.0625rem; color: var(--garnet); font-weight: 400; }
  .buy-bar-price small { font-size: 0.75rem; color: var(--muted); }
  .buy-bar .btn { flex: 1; }
  .show-buybar .wa-float { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body:has(.buy-bar) .site-footer { padding-bottom: 76px; }
}

/* ---------- mobile navigation drawer ---------- */
.drawer {
  --drawer-width: min(20em, 82dvw);
  --drawer-backdrop: 0;
  width: auto; height: auto; max-width: none; max-height: none; inset: 0; margin: 0; padding: 0;
  background: transparent; border: 0; overflow: visible;
}
.drawer::backdrop { background: #1d070c; opacity: calc(var(--drawer-backdrop) * .55); }
.drawer-scroller {
  position: relative; display: grid; grid-template-columns: var(--drawer-width) 100%;
  height: 100%; overflow-x: scroll; overscroll-behavior: none; scrollbar-width: none; scroll-snap-type: x mandatory;
}
.drawer-scroller::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .drawer-scroller { scroll-behavior: smooth; } }
.drawer-scroller::after { content: ""; scroll-snap-align: end; scroll-initial-target: nearest; }
.drawer-sheet {
  display: flex; flex-direction: column; gap: 18px; height: 100svh; overflow-y: auto; scroll-snap-align: start;
  scrollbar-width: none; outline: none; color: #f3e6d6;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  background: var(--grain), linear-gradient(180deg, var(--velvet-2) 0%, var(--velvet) 100%);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head img { width: 64px; height: auto; }
.drawer-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(227, 204, 151, .3); color: var(--gold-pale); }
.drawer-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.drawer-search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1px solid rgba(227, 204, 151, .3);
  background: rgba(255, 255, 255, .06); color: #fff; padding: 0 18px; font: inherit; }
.drawer-search input::placeholder { color: #c9ad9b; }
.drawer-search input:focus { outline: none; border-color: var(--gold-pale); }
.drawer-links { list-style: none; margin: 0; padding: 0; }
.drawer-links a { display: flex; align-items: center; min-height: 52px; font-family: var(--display); font-size: 1.375rem;
  border-bottom: 1px solid rgba(227, 204, 151, .14); }
.drawer-links a:active { color: var(--gold-pale); }
.drawer-wa { margin-top: auto; text-align: center; padding: 14px; border-radius: 999px; border: 1px solid var(--gold-pale); color: var(--gold-pale); }
@supports (animation-timeline: scroll()) {
  .drawer { timeline-scope: --drawer-fade; animation: drawer-backdrop linear both; animation-timeline: --drawer-fade; }
  .drawer-scroller { scroll-timeline: --drawer-fade x; }
  @property --drawer-backdrop { syntax: '<number>'; inherits: true; initial-value: 0; }
  @keyframes drawer-backdrop { 0% { --drawer-backdrop: 1; } 100% { --drawer-backdrop: 0; } }
}

/* ================= motion =================
   One orchestrated moment (intro -> the hero window opens), plus motion that answers what the visitor does.
   All of it switches off with reduced motion. */

/* intro: the logo, a pass of gold light, the curtain lifts (home, once per visit) */
.intro { display: none; }
.has-intro .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer;
  background: var(--grain), radial-gradient(90% 80% at 50% 45%, var(--velvet-2) 0%, var(--velvet) 70%);
  animation: intro-out .8s var(--ease) 2s forwards; }
.intro-logo { position: relative; width: min(280px, 60vw); animation: intro-in 1.2s var(--ease) both; }
.intro-logo img { width: 100%; display: block; }
.intro-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 214, .95) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; animation: shine 1.2s ease-in-out .6s both;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
@keyframes intro-in { from { opacity: 0; scale: .9; filter: blur(8px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* the hero window opens from the bottom like a box lid, then the piece settles slowly */
.hero-window { --start: .2s; animation: window-open 1.4s var(--ease) var(--start) both; }
.hero-window img { animation: settle 9s var(--ease) var(--start) both; }
.has-intro .hero-window { --start: 2.2s; }
/* in the turning window each piece settles as it comes in (shop.js drops the start delay after the first) */
.hero-rotator .hero-slide img { animation: none; }
.hero-rotator .hero-slide.on img { animation: settle 7s var(--ease) var(--start) both; }
@keyframes window-open { from { clip-path: inset(100% 0 0 0 round 999px 999px 6px 6px); } to { clip-path: inset(0 0 0 0 round 999px 999px 6px 6px); } }
@keyframes settle { from { scale: 1.12; } to { scale: 1; } }
.rise { display: inline-block; --start: .5s; animation: rise 1s var(--ease) calc(var(--d, 0) * .12s + var(--start)) both; }
.has-intro .rise { --start: 2.5s; }
.hero h1 .rise { display: block; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* header once it's stuck to the top: a shadow line (native scroll-state query, .scrolled is the JS fallback) */
.site-header { container: site-header / scroll-state; }
.header-shadow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; box-shadow: 0 10px 30px rgba(63, 15, 27, .08); }
.brand { transition: scale .45s var(--ease); transform-origin: center; }
@container site-header scroll-state(stuck: top) { .header-shadow { opacity: 1; } .brand { scale: .72; } }
.site-header.scrolled .header-shadow { opacity: 1; }
.site-header.scrolled .brand { scale: .72; }

/* page to page: soft cross-fade, and a product photo travels from its card into its page */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .3s ease both; }
  ::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
  ::view-transition-group(product-hero) { animation-duration: .6s; animation-timing-function: var(--ease); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .hero-window, .hero-window img, .rise, .hero-rotator .hero-slide.on img { animation: none; }
  .card-media img, .window img, .spotlight-media img, .gallery-main img { transition: none; }
}

/* ---------- wishlist heart ---------- */
.card .fav-form { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
.fav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--garnet); font: inherit; }
.card .fav-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(248, 242, 233, .9); border: 1px solid var(--line); transition: background .25s, opacity .3s; }
.fav-btn svg { width: 18px; height: 18px; fill: transparent; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill .25s, scale .3s var(--ease); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn:active svg { scale: .8; }
.card .fav-btn:hover, .card .fav-btn:focus-visible { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .card .fav-btn[aria-pressed="false"] { opacity: 0; }
  .card:hover .fav-btn, .card .fav-btn:focus-visible { opacity: 1; }
}
.share-row .fav-form { margin: 0; }
.share-row .fav-btn { background: none; border: 0; padding: 0; font-size: 0.875rem; }
.share-row .fav-btn[aria-pressed="true"] span::after { content: " ✔"; }
.fav-share { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 30px; }

/* ---------- cart: how far from free shipping ---------- */
.ship-goal { background: var(--linen); border-radius: 6px; padding: 14px 18px 16px; margin-bottom: 22px; }
.ship-goal p { margin: 0 0 10px; font-size: 0.9375rem; }
.ship-goal b { color: var(--garnet); font-weight: 500; }
.ship-goal.done b { color: var(--ok); }
.ship-goal progress {
  appearance: none; border: 0 solid; overflow: clip; display: block; width: 100%; height: 6px;
  --progress-bar-radius: 1e5px; border-radius: var(--progress-bar-radius); background: var(--tissue);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .08);
}
.ship-goal progress::-webkit-progress-bar { background: transparent; }
.ship-goal progress::-webkit-progress-value { background: var(--gold); border-radius: var(--progress-bar-radius); transition: inline-size .4s; }
.ship-goal progress::-moz-progress-bar { background: var(--gold); border-radius: var(--progress-bar-radius); }
.ship-goal.done progress::-webkit-progress-value { background: var(--ok); }
.ship-goal.done progress::-moz-progress-bar { background: var(--ok); }

/* ---------- sold out: tell me when it's back ---------- */
.restock { margin: -8px 0 22px; display: grid; gap: 10px; }
.restock label { font-size: 0.9375rem; color: var(--ink-2); }
.restock-row { display: flex; flex-wrap: wrap; gap: 8px; }
.restock-row input { flex: 1 1 140px; min-width: 0; font: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; background: var(--tissue); }
.restock-row .btn { flex: 1 1 100%; }
.restock-done { margin: -8px 0 22px; color: var(--ok); font-size: 0.9375rem; }

/* ---------- size guide ---------- */
.size-link { margin: -10px 0 16px; font-size: 0.875rem; }
.size-link a { color: var(--garnet); border-bottom: 1px solid var(--gold-pale); }
.size-part { margin-bottom: 14px; }
.size-part ul { margin: 6px 0; padding-inline-start: 20px; }
.table-scroll { overflow-x: auto; margin: 10px 0; }
.size-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; text-align: center; }
.size-table th, .size-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.size-table th { font-weight: 500; color: var(--ink); background: var(--linen); }

/* ---------- icon set (app/services/icons.py, inline SVG): defaults at zero specificity so each place keeps its own size ---------- */
:root { --icon-accent: var(--gold); }
:where(svg.ic) { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; overflow: visible; }
svg.ic { stroke-linecap: round; stroke-linejoin: round; }

/* animated icons (motion adapted from itshover.com, Apache-2.0): the parts move once when their link or button is
   hovered or focused, or when shop.js adds .play (heart saved, piece added to the bag). Each part turns around its own middle. */
.ic * { transform-box: fill-box; transform-origin: center; }
.ic-menu .ip-line { transform-origin: left center; }
.ic-bell .ip-bell { transform-origin: 50% 10%; }
.ic-bell .ip-clap { transform-origin: 50% 0; }
.ic-home .ip-door { transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .ic-user .ip-user, .ic-close path, .ic-grid rect, .ic-expand path, .ic-cash path, .ic-exchange .ip-turn {
    translate: 0 0; rotate: 0deg; scale: 1;
    transition: translate .3s var(--ease), scale .3s var(--ease), rotate .4s var(--ease);
  }
  :is(a, button, summary, label, .promises li, .size-link):is(:hover, :focus-visible) .ic, .search:focus-within .ic, .ic.play {
    &.ic-menu .ip-line { animation: ic-draw .25s ease-out both; }
    &.ic-menu .ip-l2 { animation-delay: .1s; }
    &.ic-menu .ip-l3 { animation-delay: .2s; }
    &.ic-menu .ip-dots { animation: ic-pop .4s ease-in-out; }
    &.ic-search .ip-mag { animation: ic-peer 1s ease-in-out; }
    &.ic-user .ip-user { scale: 1.05; translate: 0 -1px; }
    &.ic-heart .ip-heart { animation: ic-beat .6s ease-out; }
    &:is(.ic-bag, .ic-bag-plus) .ip-cart { animation: ic-roll .35s ease-in-out; }
    &:is(.ic-bag, .ic-bag-plus) .ip-wheel { animation: ic-spin .35s ease-in-out; }
    &.ic-home .ip-roof { animation: ic-drop .4s ease-out; }
    &.ic-home .ip-house { animation: ic-settle .3s ease-out; }
    &.ic-home .ip-door { animation: ic-door .3s ease-out .3s both; }
    &.ic-grid .ip-r1 { translate: 10px 0; }
    &.ic-grid .ip-r2 { translate: -1px 12px; }
    &.ic-grid .ip-r3 { translate: -10px 0; }
    &.ic-grid .ip-r4 { translate: 1px -12px; }
    &.ic-expand .ip-tr { translate: 2px -2px; }
    &.ic-expand .ip-tl { translate: -2px -2px; }
    &.ic-expand .ip-br { translate: 2px 2px; }
    &.ic-expand .ip-bl { translate: -2px 2px; }
    &.ic-expand .ip-corner { scale: 1.08; }
    &.ic-chevron .ip-chev { animation: ic-nudge .8s ease-in-out; }
    &.ic-close .ip-x1 { rotate: 15deg; scale: 1.1; }
    &.ic-close .ip-x2 { rotate: -15deg; scale: 1.1; }
    &.ic-truck .ip-truck { animation: ic-drive 1.1s; }
    &.ic-cash .ip-body { scale: 1.05; }
    &.ic-cash .ip-flap { translate: 2px 0; }
    &.ic-exchange .ip-turn { rotate: 180deg; }
    &.ic-share .ip-send { animation: ic-fly .55s; }
    &.ic-ruler .ip-ticks { animation: ic-nudge .6s ease-in-out; }
    &.ic-bell .ip-bell { animation: ic-ring .6s ease-in-out; }
    &.ic-bell .ip-clap { animation: ic-clap .6s ease-in-out .05s; }
    &.ic-star .ip-star { animation: ic-twinkle .5s ease-in-out; }
    &.ic-spark .ip-sp-main { animation: ic-sparkle .6s ease-in-out; }
    &.ic-spark .ip-sp { animation: ic-pop .5s ease-in-out .05s; }
  }
}
@keyframes ic-draw { from { scale: 0 1; } }
@keyframes ic-pop { 50% { scale: 1.3; } }
@keyframes ic-peer { 25% { translate: 1px -1px; rotate: -5deg; } 50% { translate: 0 -2px; rotate: 5deg; } 75% { translate: -1px -1px; rotate: -5deg; } }
@keyframes ic-beat { 25% { scale: 1.15; } 50% { scale: 1; } 75% { scale: 1.25; } }
@keyframes ic-roll { 50% { translate: 6px 0; } }
@keyframes ic-spin { to { rotate: 360deg; } }
@keyframes ic-drop { from { translate: 0 -2px; opacity: .6; } }
@keyframes ic-settle { from { scale: .95; } }
@keyframes ic-door { from { scale: 1 0; } }
@keyframes ic-nudge { 50% { translate: 4px 0; } }
@keyframes ic-drive { 0% { animation-timing-function: ease-in; } 45% { translate: 30px 0; opacity: 0; }
  45.1%, 55% { translate: -30px 0; opacity: 0; animation-timing-function: ease-out; } }
@keyframes ic-fly { 0% { animation-timing-function: ease-in; } 45% { translate: 24px -24px; opacity: 0; }
  45.1%, 55% { translate: -24px 24px; opacity: 0; animation-timing-function: ease-out; } }
@keyframes ic-ring { 17% { rotate: -8deg; } 33% { rotate: 6deg; } 50% { rotate: -4deg; } 67% { rotate: 2deg; } }
@keyframes ic-clap { 17% { rotate: 20deg; } 33% { rotate: -18deg; } 50% { rotate: 12deg; } 67% { rotate: -6deg; } }
@keyframes ic-twinkle { 33% { scale: 1.1; rotate: -5deg; } 66% { rotate: 5deg; } }
@keyframes ic-sparkle { 50% { scale: 1.2; } to { rotate: 180deg; } }
.icon-link .ic, .menu-btn .ic { transition: translate .3s var(--ease); }
.icon-link:hover .ic, .menu-btn:hover .ic { translate: 0 -1px; }
.quick-add svg { width: 18px; height: 18px; stroke-width: 1.4; }
.quick-add button:hover, .quick-add button:focus-visible { --icon-accent: #fff; }
.card .fav-btn svg { width: 19px; height: 19px; }
.share svg { width: 18px; height: 18px; }
.promises li { justify-items: center; gap: 2px; }
.promises .ic { width: 32px; height: 32px; color: var(--garnet); stroke-width: 1.2; margin-bottom: 8px; }
.size-link { display: flex; align-items: center; gap: 8px; }
.size-link .ic { width: 20px; height: 20px; color: var(--garnet); }
.restock .btn .ic { width: 18px; height: 18px; --icon-accent: var(--gold-pale); }

/* ---------- top bar notices (panel: التنويهات) ---------- */
.topbar .notice { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; line-height: 1.5; }
.topbar .notice[hidden] { display: none; }
.topbar .notice .ic { width: 14px; height: 14px; }
.topbar .notice a { color: inherit; border-bottom: 1px solid rgba(227, 204, 151, .5); }
.topbar .notice a:hover { color: #fff; }
.notice-offer { color: #f1dfb2; }
.notice-alert { color: #fff4ec; --icon-accent: #f1c27d; }
.notice-until { color: rgba(241, 223, 178, .75); }
.notice-until::before { content: "·"; margin-inline-end: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .topbar[data-rotate] .notice.on { animation: notice-in .6s var(--ease); }
}
@keyframes notice-in { from { opacity: 0; translate: 0 6px; } }

/* ---------- helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- "فين طلبي؟" + order status ---------- */
.track-form { max-width: 460px; display: grid; gap: 16px; }
.track-form label { display: grid; gap: 6px; font-size: 0.9375rem; }
.track-form input { font: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; background: var(--tissue); }
.order-steps { list-style: none; padding: 0; margin: 26px auto 18px; max-width: 560px; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.order-steps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 0.8125rem; color: var(--muted); text-align: center; }
.order-steps li::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--tissue); color: var(--muted); font-size: 0.8125rem; position: relative; z-index: 1; }
.order-steps li + li::after { content: ""; position: absolute; top: 15px; inset-inline-end: 50%; width: 100%; height: 1px; background: var(--line); }
.order-steps li.done::before { content: "✓"; background: var(--gold); border-color: var(--gold); color: #fff; }
.order-steps li.done + li::after, .order-steps li.now::after { background: var(--gold); }
.order-steps li.now::before { background: var(--garnet); border-color: var(--garnet); color: #fff; }
.order-steps li.done, .order-steps li.now { color: var(--ink); }
.order-state-note { margin: 20px auto; padding: 14px; background: var(--linen); border-radius: 6px; max-width: 460px; }

/* ---------- reviews ---------- */
.stars { display: inline-flex; gap: 1px; vertical-align: -3px; }
.stars .ic { width: 16px; height: 16px; fill: var(--line); stroke: none; }
.stars .ic.on { fill: var(--gold); }
.stars-line { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); margin-bottom: 10px; }
a.stars-line:hover span { color: var(--garnet); }
.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.review-card { background: var(--linen); border-radius: 6px; overflow: hidden; display: grid; align-content: start; }
.review-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.review-body { padding: 16px 18px 18px; display: grid; gap: 8px; }
.review-body p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.review-cta { color: var(--garnet); border-bottom: 1px solid var(--gold-pale); }
.review-form { max-width: 640px; display: grid; gap: 20px; }
.review-item { border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; margin: 0; display: grid; gap: 14px; }
.review-head { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 1.125rem; }
.review-img { width: 72px; height: 72px; border-radius: 4px; overflow: hidden; flex: none; background: var(--linen); }
.review-img picture { display: contents; }
.review-img img { width: 100%; height: 100%; object-fit: cover; }
.review-field { display: grid; gap: 6px; font-size: 0.9375rem; }
.review-field textarea, .review-field input:not([type=file]) { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; background: var(--tissue); }
.review-done { margin: 0; color: var(--ok); }
/* star picker: radios 1..5 in reading order; the chosen one and the ones before it turn gold */
.rate { display: flex; gap: 4px; }
.rate label { cursor: pointer; padding: 2px; color: var(--line); transition: color .2s, scale .2s; }
.rate label .ic { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.rate:has(:checked) label { color: var(--gold); }
.rate input:checked ~ input + label { color: var(--line); }
.rate label:hover { scale: 1.12; }
.rate input:focus-visible + label { outline: 2px solid var(--garnet); outline-offset: 2px; border-radius: 6px; }

/* ---------- side cart (a modal <dialog> sliding in from the bag's side) ---------- */
.cart-drawer { margin: 0; margin-inline-end: auto; inset-block: 0; height: 100dvh; max-height: none; width: min(420px, 92vw); max-width: none;
  padding: 0; border: 0; background: var(--tissue); color: var(--ink); box-shadow: 0 0 60px rgba(0, 0, 0, .25);
  inset-inline-start: auto; inset-inline-end: 0; translate: -100% 0; opacity: 1;
  transition: translate .45s var(--ease), display .45s, overlay .45s; transition-behavior: allow-discrete; }
.cart-drawer[open] { translate: 0 0; display: flex; flex-direction: column; }
@starting-style { .cart-drawer[open] { translate: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cart-drawer { translate: 0 0; opacity: 0; transition: opacity .15s, display .15s, overlay .15s; transition-behavior: allow-discrete; }
  .cart-drawer[open] { opacity: 1; }
  @starting-style { .cart-drawer[open] { translate: 0 0; opacity: 0; } }
}
.cart-drawer::backdrop { background: rgba(28, 6, 12, 0); transition: background .45s, display .45s, overlay .45s; transition-behavior: allow-discrete; }
.cart-drawer[open]::backdrop { background: rgba(28, 6, 12, .45); }
@starting-style { .cart-drawer[open]::backdrop { background: rgba(28, 6, 12, 0); } }
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { overflow: hidden; overscroll-behavior: contain; }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.cart-drawer-head h2 { font-size: 1.75rem; }
.cart-drawer-head form { margin: 0; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.mini-added { margin: 0; color: var(--ok); font-size: 0.9375rem; }
.mini-error { color: var(--danger); }
.cart-drawer .ship-goal { margin: 0; }
.mini-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mini-lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mini-lines li.just-added .mini-img { outline: 2px solid var(--gold); outline-offset: 2px; }
.mini-lines li div { display: grid; line-height: 1.4; }
.mini-lines li div a { font-family: var(--display); font-size: 1.0625rem; }
.mini-lines b { font-weight: 400; font-size: 0.9375rem; white-space: nowrap; }
.mini-img { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: var(--linen); }
.mini-img picture { display: contents; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-foot { margin-top: auto; display: grid; gap: 10px; }
.mini-foot .row { display: flex; justify-content: space-between; font-size: 0.9375rem; }
.mini-foot .btn.block { width: 100%; }
.mini-empty { margin: auto; text-align: center; display: grid; justify-items: center; gap: 6px; color: var(--muted); }
.mini-empty .ic { width: 48px; height: 48px; color: var(--garnet); stroke-width: 1; }

/* ---------- phones: bottom bar ---------- */
.tabbar { display: none; }
@media (max-width: 51.25em) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 24;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(248, 242, 233, .97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); transition: translate .35s var(--ease); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 4px 0; font-size: 0.6875rem; color: var(--ink-2); }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--garnet); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; width: 22px; height: 2px; border-radius: 2px; background: var(--gold); }
  .tabbar .badge { top: 0; left: calc(50% - 22px); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(78px + env(safe-area-inset-bottom)); }
  /* product page: the order bar takes the bottom once the buttons scroll away */
  .show-buybar .tabbar { translate: 0 110%; }
  body:has(.buy-bar) .site-footer { padding-bottom: 0; }
}

/* ---------- product photos full screen ---------- */
.gallery { position: relative; }
.zoom-btn { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(248, 242, 233, .9); border: 1px solid var(--line); color: var(--garnet); cursor: pointer; }
.zoom-btn .ic { width: 18px; height: 18px; }
.gallery-main img { cursor: zoom-in; }
.lightbox { margin: 0; padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #120307; color: #f3e6d6;
  opacity: 0; transition: opacity .3s, display .3s, overlay .3s; transition-behavior: allow-discrete; }
.lightbox[open] { opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: #120307; }
.lb-strip { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.lb-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-slide.zoomed { display: block; overflow: auto; cursor: zoom-out; touch-action: pan-x pan-y pinch-zoom; direction: ltr; } /* RTL would cut off the photo's overflow on one side */
.lb-slide.zoomed img { max-width: none; max-height: none; width: 250%; height: auto; margin: 0; place-self: start; }
.lb-count { position: absolute; top: 18px; inset-inline-start: 20px; margin: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.lb-hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline: 0; margin: 0; text-align: center; font-size: 0.75rem; color: rgba(243, 230, 214, .6); pointer-events: none; }
.lightbox form { margin: 0; }
.lb-close, .lb-nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(227, 204, 151, .3); color: #f3e6d6; }
.lb-close { top: 12px; inset-inline-end: 14px; }
.lb-nav { top: calc(50% - 23px); }
.lb-prev { inset-inline-start: 14px; }
.lb-next { inset-inline-end: 14px; }
/* the chevron points right: "previous" in RTL as drawn, flipped for "next" */
.lb-prev .ic { scale: 1 1; }
.lb-next .ic { scale: -1 1; }
@media (hover: none) { .lb-nav { display: none; } }

/* ---------- a kind's page: its velvet backdrop as the header ---------- */
.kind-banner { padding: 46px 0 40px; margin-bottom: 26px; background-image: linear-gradient(90deg, rgba(44, 9, 18, .2) 0%, rgba(44, 9, 18, .85) 70%), var(--banner, none), var(--grain), radial-gradient(120% 90% at 75% 15%, var(--velvet-2) 0%, var(--velvet) 55%, #2c0912 100%);
  background-size: cover; background-position: center; }
.kind-banner .crumbs, .kind-banner .crumbs a { color: rgba(243, 230, 214, .75); }
.kind-banner h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); color: #fbf3e6; margin: 8px 0 6px; }
.kind-banner p { margin: 0 0 14px; max-width: 34rem; color: #e6d3c0; }
.kind-banner-count { display: inline-block; font-size: 0.8125rem; color: var(--gold-pale); border: 1px solid rgba(227, 204, 151, .35); border-radius: 999px; padding: 2px 12px; }

/* ---------- "ستايلها إزاي" ---------- */
.looks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.look { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--linen); }
.look picture { display: contents; }
.look img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.look:hover img { scale: 1.04; }
.look-tag { position: absolute; inset: auto 12px 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: rgba(248, 242, 233, .93); color: var(--ink); font-size: 0.8125rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.look-tag span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-tag b { color: var(--garnet); font-weight: 500; white-space: nowrap; }
.look-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 4px rgba(176, 141, 79, .25); }
@media (prefers-reduced-motion: no-preference) { .look-dot { animation: look-pulse 2.4s ease-in-out infinite; } }
@keyframes look-pulse { 50% { box-shadow: 0 0 0 8px rgba(176, 141, 79, 0); } }

/* ---------- "من عند عملائنا" ---------- */
.ugc-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ugc { margin: 0; display: grid; gap: 8px; }
.ugc a { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--linen); }
.ugc picture { display: contents; }
.ugc img { width: 100%; height: 100%; object-fit: cover; }
.ugc figcaption { display: grid; gap: 2px; font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 51.25em) {
  .looks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .look-tag { inset: auto 8px 8px; padding: 6px 10px; font-size: 0.75rem; }
  .look-tag b { display: none; }
  .ugc-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind-banner { padding: 30px 0 26px; }
}

/* ---------- occasion looks (panel: التنويهات → لمسة المناسبة), while the notice is live ---------- */
:root[data-theme="valentine"] { --velvet: #4a0716; --velvet-2: #7a0f2a; --garnet: #9b1535; --garnet-2: #b51c40; --icon-accent: #e26a86;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='%23f07a95'%3E%3Cpath opacity='.5' d='M24 34s-9-5.4-9-12.2A5.2 5.2 0 0 1 24 18.6a5.2 5.2 0 0 1 9 3.2C33 28.6 24 34 24 34z'/%3E%3Cpath opacity='.3' d='M88 96s-6-3.6-6-8.1A3.5 3.5 0 0 1 88 85.8a3.5 3.5 0 0 1 6 2.1C94 92.4 88 96 88 96z'/%3E%3Cpath opacity='.22' d='M96 30s-4-2.4-4-5.4A2.3 2.3 0 0 1 96 23.2a2.3 2.3 0 0 1 4 1.4C100 27.6 96 30 96 30z'/%3E%3C/svg%3E"); }
:root[data-theme="mother"] { --velvet: #4a1a2b; --velvet-2: #7d3550; --garnet: #93385a; --garnet-2: #a8466b; --icon-accent: #e7a1b8;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' fill='%23f2b8c9'%3E%3Cg opacity='.45' transform='translate(28 30)'%3E%3Ccircle r='3.2' fill='%23e3cc97'/%3E%3Cellipse cy='-7' rx='3.6' ry='5'/%3E%3Cellipse cy='7' rx='3.6' ry='5'/%3E%3Cellipse cx='-7' rx='5' ry='3.6'/%3E%3Cellipse cx='7' rx='5' ry='3.6'/%3E%3C/g%3E%3Cg opacity='.25' transform='translate(96 92) scale(.7)'%3E%3Ccircle r='3.2' fill='%23e3cc97'/%3E%3Cellipse cy='-7' rx='3.6' ry='5'/%3E%3Cellipse cy='7' rx='3.6' ry='5'/%3E%3Cellipse cx='-7' rx='5' ry='3.6'/%3E%3Cellipse cx='7' rx='5' ry='3.6'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="ramadan"] { --velvet: #141a33; --velvet-2: #26305a; --garnet: #6b1d2f; --icon-accent: #e8c56f;
  --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='%23e8c56f'%3E%3Cpath opacity='.55' d='M38 18a14 14 0 1 0 12 22 11 11 0 1 1-12-22z'/%3E%3Cpath opacity='.45' d='M100 40l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z'/%3E%3Cpath opacity='.3' d='M70 100l1.1 3 3 1.1-3 1.1-1.1 3-1.1-3-3-1.1 3-1.1z'/%3E%3Ccircle opacity='.35' cx='118' cy='112' r='1.4'/%3E%3Ccircle opacity='.35' cx='20' cy='92' r='1.2'/%3E%3C/svg%3E"); }
/* the decoration: a sprinkle over the dark areas (hero, kind banners, footer) and the top bar */
:root[data-theme] .velvet::after, :root[data-theme] .topbar { background-image: var(--deco); background-repeat: repeat; }
:root[data-theme] .velvet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
:root[data-theme] .topbar { background-color: var(--velvet-2); background-size: 90px; }
:root[data-theme="ramadan"] .velvet { background: var(--grain), radial-gradient(120% 90% at 75% 15%, var(--velvet-2) 0%, var(--velvet) 55%, #0b0f22 100%); }
.kind-banner .crumbs span:last-child { color: #f3e6d6; }

/* ---------- motion pass (ideas from prompt-motion.com): things change shape instead of fading ----------
   lines rise out of a mask line, counters pop on a spring, bars draw across, the hero's next piece opens as a circle,
   order steps light up one after the other. All of it sits behind no-preference, so reduced motion keeps the static page. */
:root {
  /* a spring with one soft overshoot (CSS linear() easing) */
  --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163,
    1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
}
/* the line comes up from below its own baseline, and nothing shows under that line on the way (the clip moves with it) */
@keyframes mask-rise { from { translate: 0 105%; clip-path: inset(-.4em -1em 105% -1em); } to { translate: 0 0; clip-path: inset(-.4em -1em -.5em -1em); } }
@keyframes spring-pop { from { scale: 0; } }
@keyframes bar-draw { from { clip-path: inset(0 0 0 100%); } } /* RTL: draws from the right, where the bar starts */
@keyframes line-draw { from { scale: 0 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero lines, page titles and kind banners on load */
  .rise { animation-name: mask-rise; animation-duration: 1.1s; animation-fill-mode: backwards; }
  .page-head h1, .kind-banner h1 { animation: mask-rise .9s var(--ease) .1s backwards; }
  .kind-banner p, .kind-banner-count { animation: mask-rise .9s var(--ease) .25s backwards; }

  /* section titles rise as they scroll into view (decorative, so no fallback where scroll timelines are missing) */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .section-head, .gifts, .closing { view-timeline: --head; }
    .section-head h2, .gifts h2, .closing h2 {
      animation: mask-rise linear backwards;
      animation-timeline: --head;
      animation-range: entry 10% entry 100%;
    }
  }

  /* hero: the next piece opens as a circle over the last one (which stays put underneath until it's covered) */
  .hero-rotator::after { z-index: 2; }
  .hero-rotator .hero-dots { z-index: 3; }
  .hero-rotator .hero-slide { opacity: 1; visibility: hidden; clip-path: circle(0% at 50% 58%);
    transition: clip-path 0s 1.3s, visibility 0s 1.3s; }
  .hero-rotator .hero-slide.on { z-index: 1; visibility: visible; clip-path: circle(120% at 50% 58%); transition: clip-path 1.3s var(--ease); }
  .hero-rotator .hero-slide.on .hero-caption { animation: mask-rise .8s var(--ease) calc(var(--start) + .6s) backwards; }

  /* top bar notices take turns by rising out of the bar */
  .topbar[data-rotate] .notice.on { animation: mask-rise .6s var(--ease) backwards; }

  /* counters: the number pops on a spring when it changes (shop.js adds .pop) */
  .badge { scale: 1; }
  .badge.pop { animation: spring-pop .7s var(--spring); }

  /* free shipping bar draws across; side cart lines come up one after the other */
  .ship-goal progress { animation: bar-draw .9s var(--ease) .15s backwards; }
  .mini-added { animation: spring-pop .6s var(--spring) backwards; transform-origin: right center; }
  .mini-lines li { animation: mask-rise .6s var(--ease) .15s backwards; }
  .mini-lines li:nth-child(2) { animation-delay: .22s; }
  .mini-lines li:nth-child(3) { animation-delay: .29s; }
  .mini-lines li:nth-child(4) { animation-delay: .36s; }
  .mini-lines li:nth-child(n + 5) { animation-delay: .43s; }
  .mini-foot { animation: mask-rise .6s var(--ease) .3s backwards; }

  /* order steps: each circle pops in turn and the line to it draws from the step before (on the right, RTL) */
  .order-steps li::before { animation: spring-pop .7s var(--spring) var(--step-at, 0s) backwards; }
  .order-steps li + li::after { transform-origin: right center; animation: line-draw .35s var(--ease) calc(var(--step-at) - .3s) backwards; }
  .order-steps li:nth-child(2) { --step-at: .35s; }
  .order-steps li:nth-child(3) { --step-at: .7s; }
  .order-steps li:nth-child(4) { --step-at: 1.05s; }
}