/* Hanaa Cakes: page layouts. The design system (fields, chips, sample cards, buttons, type) lives in css/tokens.css. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--pearl); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html:lang(ar) body { font-size: 18px; line-height: 1.75; }
html:lang(ar) * { letter-spacing: 0 !important; }
img { display: block; max-width: 100%; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font-family: inherit; }
svg { flex: none; }
main { display: block; outline: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section.field { padding-block: clamp(80px, 10vw, 150px); }
main > section:first-child { padding-top: clamp(128px, 13vw, 180px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 4vw, 52px); }
.lede { color: var(--deep); margin: 0; }
.sw-pearl .lede { color: var(--ink-2); }
.hint { color: var(--ink-2); font-size: 14px; margin: 0; }
.crumbs { font: 500 13px/1.4 var(--f-body); color: var(--deep); margin: 0 0 20px; }
.crumbs a { color: inherit; text-underline-offset: 4px; }
.skip { position: fixed; z-index: var(--z-cursor); inset-inline-start: 12px; top: -80px; background: var(--ink); color: var(--pearl); padding: 12px 18px; border-radius: 12px; }
.skip:focus { top: 16px; }

/* rolling digits */
.roll { display: inline-flex; direction: ltr; height: 1em; line-height: 1; overflow: hidden; font-variant-numeric: tabular-nums; vertical-align: -.1em; }
.roll-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); transition: transform 1.1s var(--ease); }
.roll-col span { display: block; height: 1em; }

/* ---------- chrome ---------- */
.spine { position: fixed; z-index: calc(var(--z-nav) + 1); top: 0; inset-inline: 0; height: 5px; display: flex; pointer-events: none; }
.spine i { flex: 1; background: var(--c); transition: flex 1s var(--ease); }
.spine i.on { flex: 5; }
.nav { position: fixed; z-index: var(--z-nav); top: 5px; inset-inline: 0; color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
body.top-dark:not(.scrolled) .nav { color: var(--pearl); }
body.scrolled .nav { background: rgba(242, 240, 241, .97); box-shadow: 0 1px 0 var(--line); }
.nav-in { max-width: var(--maxw); margin: auto; padding: 16px var(--gut) 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.brand { display: grid; text-decoration: none; line-height: 1; }
.brand-script { font: 400 34px/1 var(--f-script); white-space: nowrap; }
.brand-ar { font: 400 12px/1.6 var(--f-body); opacity: .75; }
.nav-links { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font: 500 15px/1 var(--f-body); text-decoration: none; white-space: nowrap; }
.nav-links a svg { width: 16px; height: 16px; }
.nav-links a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: var(--origin, left); transition: transform .5s var(--ease); }
[dir=rtl] .nav-links a::after { --origin: right; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-end { display: flex; align-items: center; gap: 8px; }
.nav-lang { min-height: 42px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font: 600 14px/1 var(--f-body); cursor: pointer; }
.nav-lang:lang(ar) { font-family: 'Markazi Text', serif; }
.nav-lang:lang(en) { font-family: 'Lora', serif; }
.nav-lang:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.nav-icon { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: transform .45s var(--spring), background-color .3s; }
.nav-icon:hover { transform: scale(1.08); background: rgba(37, 22, 27, .06); }
.nav-count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--pearl); font-size: 11px; line-height: 18px; text-align: center; }
.nav-count:empty { display: none; }
body.top-dark:not(.scrolled) .nav-count { background: var(--pearl); color: var(--ink); }
body.top-dark:not(.scrolled) .nav .btn { background: var(--pearl); color: var(--ink); }
.nav-menu { display: none; }

.sheet { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 18px var(--gut) 32px; overflow-y: auto; }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .8s var(--ease) both; }
.sheet::backdrop { background: rgba(37, 22, 27, .35); }
@keyframes sheet-in { from { clip-path: circle(0 at var(--sx, calc(100% - 44px)) 40px); } to { clip-path: circle(150% at var(--sx, calc(100% - 44px)) 40px); } }
[dir=rtl] .sheet { --sx: 44px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; }
.sheet-links { display: grid; margin: 7vh 0 auto; }
.sheet-links a { font: 600 clamp(2.1rem, 9vw, 3.6rem)/1.15 var(--f-display); letter-spacing: -.035em; text-decoration: none; padding: 4px 0; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.foot { padding-block: clamp(80px, 9vw, 130px) 30px; }
.foot-in { max-width: var(--maxw); margin: auto; padding-inline: var(--gut); }
.foot-lead { display: grid; gap: 18px; margin-bottom: 56px; }
.foot-mark { font: 400 clamp(4.2rem, 11vw, 9rem)/.95 var(--f-script); color: var(--deep); margin: 0; }
.foot-line { max-width: 42ch; margin: 0; color: rgba(242, 240, 241, .74); }
.foot-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 44px; border-top: 1px solid rgba(242, 240, 241, .14); }
.foot-contact { display: grid; gap: 18px; align-content: start; justify-items: start; }
.foot-social { display: flex; gap: 12px; }
.foot-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 240, 241, .1); color: var(--pearl); transition: background .3s, transform .3s var(--spring); }
.foot-social a:hover { background: rgba(242, 240, 241, .2); transform: translateY(-3px); }
.foot-where { display: inline-flex; align-items: center; gap: 8px; color: rgba(242, 240, 241, .74); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-content: start; }
.foot-links a { text-decoration: none; color: rgba(242, 240, 241, .8); transition: color .3s; }
.foot-links a:hover { color: var(--pearl); text-decoration: underline; text-underline-offset: 5px; }
.foot-legal { font-size: 13px; color: rgba(242, 240, 241, .55); margin: 20px 0 0; }
.wa-float { position: fixed; z-index: var(--z-float); inset-inline-end: 20px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--pearl); box-shadow: var(--sh-lift); transition: transform .55s var(--spring), opacity .4s var(--ease); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.08) rotate(-8deg); }
body[data-page=home]:not(.scrolled) .wa-float { opacity: 0; transform: scale(.5); pointer-events: none; }
body.has-mbar .wa-float { display: none; }

/* ---------- hero: the colour card ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 26px; }
main > section.hero:first-child { padding-top: clamp(96px, 8.5vw, 124px); }
.hero.field { transition: color .6s var(--ease); }
.flood { position: absolute; inset: 0; z-index: -1; clip-path: circle(0 at var(--x) var(--y)); transition: clip-path .95s var(--ease-io); }
.flood.go { clip-path: circle(170% at var(--x) var(--y)); }
.hero-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 80px); align-items: center; width: 100%; }
.hero-title { font-size: clamp(3.2rem, 6.6vw, 5.4rem); line-height: .92; }
html:lang(ar) .hero-title { line-height: 2.1; }
.hero-copy .lede { margin: 24px 0 30px; max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.hero-cards { position: relative; height: min(62vh, 620px); min-height: 460px; }
.hero-card { position: absolute; z-index: 2; inset-inline-end: 0; top: 0; width: min(100%, 340px); display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: var(--r-card); overflow: hidden; text-decoration: none; box-shadow: var(--sh-lift); rotate: -3deg; transition: rotate .9s var(--spring), translate .9s var(--spring); }
.hero-card:hover { rotate: 0deg; translate: 0 -8px; }
.hero-card-back { z-index: 1; inset-inline-end: 44%; top: 22%; width: min(58%, 260px); rotate: 8deg; }
.hero-card-back:hover { rotate: 4deg; }
.hero-card-back2 { z-index: 0; inset-inline-end: 66%; top: 38%; width: min(44%, 200px); rotate: -11deg; }
.hero-card-back2:hover { rotate: -6deg; }
.hero-card-photo { display: block; overflow: hidden; background: #F6F3F2; }
.hero-card-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-card-back .hero-card-photo img { aspect-ratio: 3 / 4; }
.hero-card-band { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 16px; padding: 16px 20px 20px; }
.hero-card-band .code { color: var(--ink-2); }
.hero-card-name { grid-column: 1; font: 600 28px/1.1 var(--f-display); letter-spacing: -.025em; }
.hero-card-count { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 4px; font-size: 13px; color: var(--ink-2); }
.hero-card-count .roll { font: 600 34px/1 var(--f-mono); color: var(--ink); }
.hero-rail { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 30px; width: 100%; }
.swatch-rail { display: grid; grid-template-columns: repeat(8, minmax(64px, 92px)); gap: 12px; padding-top: 16px; }
.swatch-rail .chip b { font-size: 11.5px; }
.hero-clock { margin: 0; color: var(--deep); text-align: end; white-space: nowrap; font-size: 15px; font-weight: 600; }

/* ---------- home sections ---------- */
section.strip { padding-block: 18px; overflow: hidden; }
.strip-track { display: flex; width: max-content; will-change: transform; } /* moves with the reader's scroll, never on its own */
.strip-track > span { display: flex; align-items: center; gap: 24px; padding-inline-end: 24px; white-space: nowrap; }
.strip-track b { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
html:lang(ar) .strip-track b { font: 700 15px/1 var(--f-body); }
.strip-track svg { width: 14px; height: 14px; color: var(--deep); }

.piped-name { box-shadow: inset 0 -.28em 0 var(--hl, var(--field)); transition: box-shadow .8s var(--ease); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 22vw, 300px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding-block: 14px 44px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.sample { position: relative; }
.sample-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.sample-band .code { color: var(--ink-2); }
.fav { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(37, 22, 27, .45); transition: transform .45s var(--spring), color .3s; }
.fav:hover { transform: scale(1.1); }
.fav[aria-pressed="true"] { color: #BF3A47; }

.occasions { overflow: hidden; }
section.occasions { padding-bottom: 50px; }
.occ-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.occ-head .lede { max-width: 32em; }
.occ-viewport { overflow: hidden; }
.occ-track { display: flex; gap: 22px; width: max-content; padding-inline: var(--gut); will-change: transform; }
.occ-panel { position: relative; flex: none; width: min(46vw, 660px); height: min(72vh, 640px); border-radius: var(--r-card); overflow: hidden; color: #fff; text-decoration: none; }
.occ-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.occ-panel:hover img { transform: scale(1.05); }
.occ-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(37, 22, 27, .8), rgba(37, 22, 27, 0) 58%); }
.occ-label { position: absolute; z-index: 1; inset-inline: 28px; bottom: 26px; display: grid; gap: 10px; justify-items: start; }
.occ-label b { font: 600 clamp(1.9rem, 3vw, 2.9rem)/1 var(--f-display); letter-spacing: -.03em; }
.occ-label .code { color: rgba(255, 255, 255, .75); }
.occ-note { margin-top: 26px; color: rgba(242, 240, 241, .55); text-transform: none; letter-spacing: 0; font-size: 12px; }

.kids-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kids-copy .lede { margin: 22px 0 34px; }
.kids-stage { display: block; aspect-ratio: 1; padding: 7%; border-radius: 44px; background: var(--paper); box-shadow: var(--sh-lift); rotate: 2deg; transition: rotate .9s var(--spring), scale .9s var(--spring); }
.kids-stage:hover { rotate: 0deg; scale: 1.02; }
.mini-cake { width: 100%; height: 100%; }
.kids-stage > svg { width: 100%; height: 100%; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.kids-stage.is-swapping > svg { opacity: 0; transform: translateY(12px) scale(.97); }
.mini-t1 rect { fill: var(--t1, #EFB3C1); transition: fill 1.2s var(--ease); }
.mini-t2 rect { fill: var(--t2, #CDBBE7); transition: fill 1.2s var(--ease); }
.mini-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scale(.82, 1.12) rotate(4deg); } }

.idx { list-style: none; margin: 0; padding-block: 0; }
.idx li { border-top: 1px solid var(--line); }
.idx li:last-child { border-bottom: 1px solid var(--line); }
.idx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 24px; padding-block: 22px; text-decoration: none; }
.idx-name { transition: transform .7s var(--ease); }
.idx-row:hover .idx-name { transform: translateX(22px); }
[dir=rtl] .idx-row:hover .idx-name { transform: translateX(-22px); }
.idx-row > svg { width: 26px; height: 26px; transition: transform .5s var(--spring); }
.idx-row:hover > svg { transform: translateX(6px); }
[dir=rtl] .idx-row:hover > svg { transform: scaleX(-1) translateX(6px); }
.idx-thumb img { width: 60px; height: 76px; object-fit: cover; border-radius: 10px; }
.idx-name { font: 600 clamp(1.7rem, 3.6vw, 3.1rem)/1.05 var(--f-display); letter-spacing: -.03em; }
html:lang(ar) .idx-name { line-height: 1.35; }
.idx-dots { display: flex; gap: 5px; }
.idx-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(37, 22, 27, .12); }
.idx-count { font-size: 14px; color: var(--ink-2); }
.idx-float { position: fixed; z-index: var(--z-float); left: 0; top: 0; width: 230px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; pointer-events: none;
  box-shadow: var(--sh-lift); opacity: 0; scale: .7; transition: opacity .35s var(--ease), scale .6s var(--spring); }
.idx-float.on { opacity: 1; scale: 1; }
@media (pointer: fine) { .idx-thumb { display: none; } .idx-row { grid-template-columns: minmax(0, 1fr) auto auto auto; } }

.how .h2 { max-width: 16ch; }
.how-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 70px; }
.how-line { position: absolute; inset-inline: 0; top: -4px; width: 100%; height: 130px; pointer-events: none; }
[dir=rtl] .how-line { transform: scaleX(-1); }
.how-line path { fill: none; stroke: var(--deep); stroke-width: 3; stroke-linecap: round; opacity: .45; }
.how-step { position: relative; padding-top: 118px; }
.how-ico { position: absolute; top: 24px; inset-inline-start: 0; width: 74px; height: 74px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: var(--sh-card); }
.how-ico svg { width: 30px; height: 30px; }
.how-ico b { position: absolute; top: -6px; inset-inline-end: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--pearl); display: grid; place-items: center; font-size: 13px; }
.how-step h3 { font: 600 clamp(1.4rem, 2vw, 1.75rem)/1.2 var(--f-display); letter-spacing: -.02em; margin: 0 0 10px; }
.how-step p { margin: 0; color: var(--deep); max-width: 32ch; }

.urgent-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.urgent-ico { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); animation: beat 2.8s var(--ease) infinite; }
.urgent-ico svg { width: 48px; height: 48px; }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 55% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } }
.urgent .lede { margin-top: 14px; max-width: 40em; }

.masonry { columns: 4 230px; column-gap: 18px; }
.wall-tile { position: relative; display: block; width: 100%; margin: 0 0 18px; padding: 0; border: 0; break-inside: avoid; border-radius: 20px; overflow: hidden; background: var(--paper);
  cursor: zoom-in; box-shadow: var(--sh-card); transition: transform .6s var(--spring); }
.wall-tile:hover { transform: translateY(-5px); }
.wall-tile img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; object-position: 50% 40%; transition: transform 1.1s var(--ease); }
.wall-tile:hover img { transform: scale(1.04); }
.wall-cap { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 13px; text-align: start; opacity: 0; translate: 0 8px; transition: opacity .4s var(--ease), translate .5s var(--ease); }
.wall-tile:hover .wall-cap, .wall-tile:focus-visible .wall-cap { opacity: 1; translate: 0 0; }
@media (hover: none) { .wall-cap { opacity: 1; translate: 0 0; } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 920px); overflow: visible; }
.lightbox::backdrop { background: rgba(37, 22, 27, .86); }
.lightbox[open] { animation: lb-in .6s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; scale: .94; } }
.lightbox figure { margin: 0; }
.lightbox img { height: min(80vh, 1100px); width: auto; max-width: 100%; margin: auto; border-radius: 20px; object-fit: cover; object-position: 50% 40%; }
.lightbox figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; color: var(--pearl); }
.lb-close { position: absolute; top: -54px; inset-inline-end: 0; color: var(--pearl); }

.contact-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact .lede { margin-top: 18px; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 22px; background: var(--paper); color: var(--ink);
  text-decoration: none; box-shadow: var(--sh-card); transition: transform .55s var(--spring), box-shadow .45s var(--ease); }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.contact-card > svg { transition: transform .5s var(--spring); }
.contact-card:hover > svg { transform: translateX(5px); }
[dir=rtl] .contact-card:hover > svg { transform: scaleX(-1) translateX(5px); }
.contact-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--field); color: var(--deep); }
.contact-txt b { display: block; font-size: 17px; }
.contact-big { display: block; font-size: 22px; font-weight: 600; line-height: 1.35; }
[dir=rtl] .contact-big { text-align: right; }
.contact-txt small { display: block; color: var(--ink-2); font-size: 14px; }
.contact-card:first-child { background: var(--ink); color: var(--pearl); }
.contact-card:first-child .contact-ico { background: rgba(242, 240, 241, .12); color: var(--pearl); }
.contact-card:first-child small { color: rgba(242, 240, 241, .7); }

/* ---------- shop ---------- */
section.shop-head { padding-bottom: 40px; }
.shop-title { font-size: clamp(3rem, 7vw, 6rem); }
.shop-head .lede { margin-top: 18px; max-width: 34em; }
.shop-filters { display: grid; gap: 22px; margin-top: 44px; }
.swatch-rail-sm { grid-template-columns: repeat(8, minmax(60px, 96px)); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor;
  font: 500 14px/1 var(--f-body); cursor: pointer; transition: background-color .3s, color .3s, transform .4s var(--spring); }
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: scale(.96); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--pearl); box-shadow: none; }
.sw-pomegranate .pill[aria-pressed="true"] { background: var(--pearl); color: var(--ink); }
section.shop-body { padding-top: 44px; }
.shop-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; color: var(--ink-2); }
.shop-count .roll { font: 600 22px/1 var(--f-mono); color: var(--ink); }
.shop-count .link { border: 0; background: none; padding: 0; margin-inline-start: 10px; cursor: pointer; font-size: 15px; color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; padding: 60px 0; text-align: center; }
.empty p { margin: 0; max-width: 36em; }

/* ---------- product and order forms ---------- */
.product-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.product-side { position: sticky; top: 104px; display: grid; gap: 18px; }
.product-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--paper); box-shadow: var(--sh-lift); }
.product-photo img { width: 100%; aspect-ratio: 4 / 5; max-height: 62vh; object-fit: cover; }
.product-photo figcaption { position: absolute; bottom: 14px; inset-inline-start: 14px; max-width: calc(100% - 28px); padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--ink); }
.product-title { font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: 20px; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.product-price { font: 600 18px/1 var(--f-body); }
.product-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.dot-link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: rgba(37, 22, 27, .08); color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .3s; }
.dot-link:hover { background: rgba(37, 22, 27, .14); }
.sw-pomegranate .dot-link { background: rgba(255, 255, 255, .16); }
.dot-link i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(37, 22, 27, .22), 0 0 0 1.5px rgba(255, 255, 255, .6); }
.product-meta .fav { position: static; }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; line-height: 1.3; }
.facts svg { width: 17px; height: 17px; }
.product-info > .link { margin-top: 6px; }
section.more { padding-top: 90px; }
.order { display: grid; gap: 22px; margin: 30px 0 22px; padding: clamp(20px, 3vw, 34px); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--sh-card); }
.fld { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld > span, .fld > legend { font: 600 14px/1.3 var(--f-body); padding: 0; margin-bottom: 4px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #FBFAFA; color: inherit; font: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .25s, box-shadow .25s, background-color .25s; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: rgba(37, 22, 27, .35); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(37, 22, 27, .08); }
.fld input::placeholder, .fld textarea::placeholder { color: #8C7C82; }
.fld small { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; line-height: 1.25;
  transition: box-shadow .25s, background-color .25s, color .25s, transform .4s var(--spring); }
.opt:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opt input:checked + span { background: var(--ink); color: var(--pearl); box-shadow: none; }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.opt:active span { transform: scale(.96); }
.opts.even .opt { flex: 1; }
.opts.even .opt span { width: 100%; justify-content: center; }
.toggle { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #FBEFF1; cursor: pointer; transition: background-color .3s; }
.toggle:has(:checked) { background: #F8DDE2; }
.toggle:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.track { position: relative; flex: 0 0 50px; height: 30px; border-radius: var(--r-pill); background: #DCCBCF; transition: background-color .3s; }
.track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(37, 22, 27, .25); transition: transform .45s var(--spring); }
.toggle :checked + .track { background: #BF3A47; }
.toggle :checked + .track::after { transform: translateX(20px); }
[dir=rtl] .toggle :checked + .track::after { transform: translateX(-20px); }
.toggle b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.toggle b svg { width: 17px; height: 17px; color: #BF3A47; }
.toggle small { display: block; font-size: 13px; color: var(--ink-2); }
.form-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FBE4E6; color: #7E1626; font-weight: 600; font-size: 15px; }
.btn-lg { min-height: 58px; font-size: 16px; }
.note { margin: -8px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.summary { padding: 20px 22px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: var(--sh-card); }
.summary-t { font: 600 20px/1.2 var(--f-display); letter-spacing: -.02em; margin: 0 0 12px; }
.summary dl { display: grid; gap: 8px; margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: 15px; animation: rise-in .5s var(--ease); }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 600; text-align: end; }
.summary dd small { display: block; font-weight: 400; color: var(--ink-2); }
.summary .total { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.summary .total b { color: var(--ink); font-size: 20px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: #BF3A47; color: #fff; font-size: 13px; font-weight: 700; }
.tag svg { width: 14px; height: 14px; }
@keyframes rise-in { from { opacity: 0; translate: 0 6px; } }
.mbar { display: none; }

/* ---------- about, faq, form heads, saved ---------- */
section.form-head { padding-bottom: clamp(56px, 6vw, 90px); }
.form-head .display { font-size: clamp(2.8rem, 6.5vw, 5.6rem); }
.form-head .display svg { width: .8em; height: .8em; }
.form-head .lede { margin-top: 20px; max-width: 36em; }
.about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about .display { font-size: clamp(3rem, 7vw, 6rem); }
.about .lede { margin-top: 20px; }
.about .hero-actions { margin-top: 34px; }
.about-imgs { position: relative; height: clamp(420px, 48vw, 660px); }
.about-imgs img { position: absolute; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--sh-lift); }
.about-a { width: 64%; aspect-ratio: 4 / 5; inset-inline-start: 0; top: 0; rotate: -3deg; }
.about-b { width: 50%; aspect-ratio: 4 / 5; inset-inline-end: 0; bottom: 0; rotate: 4deg; border: 10px solid #fff; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.big-chip { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: var(--sh-card); transition: transform .65s var(--spring), box-shadow .5s var(--ease); }
.big-chip:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: var(--sh-lift); }
.big-chip i { background: var(--field); }
.big-chip > span { display: grid; gap: 4px; padding: 14px 16px 16px; }
.big-chip b { font: 600 22px/1.1 var(--f-display); letter-spacing: -.02em; }
.big-chip small { color: var(--ink-2); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; margin: 44px 0 0; }
.faq-list div { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-list dt { font: 600 19px/1.35 var(--f-body); margin-bottom: 8px; }
.faq-list dd { margin: 0; color: var(--ink-2); max-width: 54ch; }
.saved-h { margin: 70px 0 20px; font-size: 2rem; }
.saved-studio { margin-top: 30px; }
.nf .btn { margin-top: 34px; }

/* first visit: the colour card's stripes sweep away */
.intro { position: fixed; inset: 0; z-index: calc(var(--z-cursor) + 1); display: flex; pointer-events: none; animation: intro-safety 0s 4.5s forwards; }
@keyframes intro-safety { to { visibility: hidden; } } /* never stuck if a script fails */
.intro i { flex: 1; background: var(--c); transform-origin: top; transition: transform 1s var(--ease-io); transition-delay: calc(var(--n, 0) * 55ms + .35s); }
.intro i:nth-child(2) { --n: 1; } .intro i:nth-child(3) { --n: 2; } .intro i:nth-child(4) { --n: 3; } .intro i:nth-child(5) { --n: 4; }
.intro i:nth-child(6) { --n: 5; } .intro i:nth-child(7) { --n: 6; } .intro i:nth-child(8) { --n: 7; }
.intro-mark { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(3rem, 9vw, 7rem)/1 var(--f-script); color: var(--ink); transition: opacity .5s var(--ease), transform .9s var(--ease); }
.intro.done i { transform: scaleY(0); }
.intro.done .intro-mark { opacity: 0; transform: translateY(-20px); }
.intro.gone { display: none; }

/* view transitions between routes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-menu { display: grid; }
  .nav-in { grid-template-columns: auto 1fr; }
  .nav-end { justify-content: flex-end; }
  .hero { min-height: 0; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-cards { height: 520px; min-height: 0; margin-top: 12px; }
  .hero-card { inset-inline-end: 4%; width: min(70%, 320px); }
  .hero-card-back { inset-inline-end: 42%; top: 18%; width: min(50%, 230px); }
  .hero-card-back2 { inset-inline-end: 66%; top: 32%; width: min(36%, 160px); }
  .hero-rail { flex-direction: column; align-items: stretch; }
  .swatch-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88px; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .hero-clock { text-align: start; }
  .occ-head, .sec-head { flex-direction: column; align-items: flex-start; }
  .occ-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .occ-panel { width: 82vw; height: min(110vw, 540px); scroll-snap-align: center; }
  .kids-in, .contact-in, .about-in, .product-in { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .how-line { display: none; }
  .how-step { padding-top: 0; padding-inline-start: 96px; min-height: 80px; }
  .how-ico { top: 0; }
  .urgent-in { grid-template-columns: 1fr; }
  .grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .faq-list, .foot-cols { grid-template-columns: 1fr; }
  .product-side { position: static; }
  .product-photo img { max-height: 58vh; }
  .summary { display: none; }
  .mbar { display: block; position: fixed; z-index: var(--z-float); inset-inline: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(242, 240, 241, .97); box-shadow: 0 -10px 30px -18px rgba(37, 22, 27, .45); }
  body.has-mbar .foot { padding-bottom: 110px; }
  .idx-dots { display: none; }
  .idx-row { gap: 16px; padding-block: 16px; }
  .about-imgs { height: 440px; }
}
@media (max-width: 600px) {
  .brand-script { font-size: 28px; }
  .nav-order span { display: none; }
  .nav-order { width: 44px; padding: 0; }
  .nav-lang { padding: 0 8px; }
  .rail { grid-auto-columns: 70vw; gap: 14px; }
  .two { grid-template-columns: 1fr; }
  .sample-band { padding: 12px 12px 14px; }
  .sample-band h3 { font-size: 14px; }
  .hero-cards { height: 420px; }
  .masonry { columns: 2 150px; column-gap: 12px; }
  .wall-tile { margin-bottom: 12px; }
  .fav { width: 38px; height: 38px; top: 8px; inset-inline-end: 8px; }
  .fav svg { width: 19px; height: 19px; }
}