:root {
  --white: #fff;
  --cream: var(--paper-50);
  --cream-deep: var(--paper-100);
  --ink: var(--fg);
  --ink-soft: var(--fg-muted);
  --plum: var(--bg-dark);
  --plum-deep: var(--bg-darker);
  --pomegranate: var(--accent);
  --pomegranate-deep: var(--accent-hover);
  --pomegranate-text: var(--accent-text);
  --mango: var(--saffron-400);
  --saffron: var(--saffron-500);
  --lime: var(--pistachio-400);
  --lime-deep: var(--pistachio-700);
  --line: var(--border);
  --line-light: var(--border-on-dark);
  --ease: var(--ease-out);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg-darker); }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); }
html[lang="fa"] body,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] .display,
html[lang="fa"] .btn,
html[lang="fa"] .price { font-family: var(--font-fa); letter-spacing: 0; }
html[lang="fa"] h1,
html[lang="fa"] h2 { line-height: 1.22; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { color: var(--paper-50); background: var(--pomegranate-600); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: var(--radius-sm); }

.skip { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 300; translate: 0 -80px; padding: 10px 15px; border-radius: var(--radius-full); background: var(--saffron-400); color: var(--ink); font-weight: 800; }
.skip:focus { translate: 0; }
.container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.display { font-family: var(--font-display); }
.h-xl { font-size: var(--text-4xl); }
.h-lg { font-size: var(--text-3xl); }
.h-md { font-size: var(--text-2xl); }
.lead { max-width: 55ch; color: var(--ink-soft); font-size: var(--text-lg); }
.section { position: relative; padding-block: var(--section-y); scroll-margin-top: var(--header-h); }
.section-head { display: grid; gap: 22px; margin-bottom: clamp(36px, 6vw, 72px); }
.section-head .lead { margin-top: 14px; }
@media (min-width: 760px) { .section-head { grid-template-columns: 1fr auto; align-items: end; } }

.bg-white { background: var(--paper-50); }
.bg-cream { background: var(--paper-100); }
.bg-espresso { color: var(--fg-on-dark); background: var(--espresso-950); }
.bg-espresso .lead { color: var(--fg-on-dark-muted); }
.bg-pomegranate { color: var(--fg-on-dark); background: var(--pomegranate-600); }
.bg-pomegranate .lead { color: rgba(255,250,240,.76); }
.bg-lime { background: var(--pistachio-400); }
.lattice { isolation: isolate; overflow: hidden; }
.lattice::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.25) 23px 24px), repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.18) 23px 24px); background-size: 46px 46px; }

/* Buttons and text links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 800; letter-spacing: .01em; white-space: nowrap; transition: translate var(--dur) var(--ease), background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur); }
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-saffron { background: var(--pomegranate); color: var(--white); box-shadow: 0 14px 30px -18px rgba(231,47,69,.9); }
.btn-saffron:hover { background: var(--pomegranate-deep); }
.btn-espresso { background: var(--espresso-950); color: var(--paper-50); }
.btn-espresso:hover { background: var(--espresso-800); }
.btn-outline { border-color: currentColor; background: transparent; }
.btn-outline:hover { background: rgba(32,19,16,.07); }
.bg-espresso .btn-outline:hover, .bg-pomegranate .btn-outline:hover { background: rgba(255,250,240,.1); }
.btn-cream { background: var(--paper-50); color: var(--pomegranate-600); }
.btn-cream:hover { background: var(--saffron-400); color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--pomegranate-text); font-size: var(--text-sm); font-weight: 800; }
.link svg { width: 18px; height: 18px; transition: translate var(--dur) var(--ease); }
.link:hover svg { translate: 4px 0; }
html[dir="rtl"] .link svg { scale: -1 1; }
html[dir="rtl"] .link:hover svg { translate: -4px 0; }

/* Header */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: var(--paper-50); transition: background var(--dur), color var(--dur), box-shadow var(--dur), backdrop-filter var(--dur); }
.header.is-solid, .header.is-light-page { color: var(--ink); background: rgba(255,250,240,.91); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; }
.brand img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,250,240,.2); }
.brand-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.brand-name small { display: block; margin-top: 5px; font-family: var(--font-sans); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.nav { display: none; align-items: center; gap: clamp(18px, 2.3vw, 34px); font-size: var(--text-sm); font-weight: 700; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang { display: flex; padding: 3px; border: 1px solid currentColor; border-radius: var(--radius-full); color: inherit; }
.lang button { min-width: 44px; min-height: 44px; padding-inline: 9px; border-radius: var(--radius-full); font-size: .72rem; font-weight: 800; opacity: .62; }
.lang button[aria-pressed="true"] { color: var(--paper-50); background: var(--espresso-950); opacity: 1; }
.header:not(.is-solid):not(.is-light-page) .lang button[aria-pressed="true"] { color: var(--espresso-950); background: var(--paper-50); }
.burger { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.burger span, .burger span::before, .burger span::after { display: block; width: 19px; height: 1.5px; border-radius: 2px; background: currentColor; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.header .btn-order { display: none; min-height: 44px; padding: 9px 18px; }
.mobile-nav { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; gap: 3px; padding: calc(var(--header-h) + 24px) var(--gutter) 42px; color: var(--paper-50); background: var(--espresso-950); opacity: 0; visibility: hidden; translate: 0 -10px; transition: opacity var(--dur), visibility var(--dur), translate var(--dur) var(--ease); }
.mobile-nav::after { content: ""; position: absolute; right: -15vw; bottom: -15vw; width: 70vw; aspect-ratio: 1; border: 1px solid rgba(246,174,45,.3); border-radius: 50%; box-shadow: 0 0 0 10vw rgba(246,174,45,.04), 0 0 0 20vw rgba(246,174,45,.035); }
.mobile-nav.is-open { opacity: 1; visibility: visible; translate: 0; }
.mobile-nav a { position: relative; z-index: 1; padding-block: 8px; border-bottom: 1px solid var(--line-light); font-family: var(--font-display); font-size: clamp(2rem, 11vw, 4rem); font-weight: 600; line-height: 1.12; }
.mobile-nav .btn { align-self: flex-start; margin-top: 22px; padding-inline: 24px; border: 0; color: var(--espresso-950); background: var(--saffron-400); font-family: var(--font-sans); font-size: var(--text-sm); }
.mobile-nav .mobile-meta { position: relative; z-index: 1; margin-top: auto; font-size: var(--text-sm); opacity: .7; }
body.nav-open { overflow: hidden; }
body.nav-open .header { color: var(--paper-50); background: transparent; box-shadow: none; backdrop-filter: none; }
body.nav-open .header .lang button[aria-pressed="true"] { color: var(--espresso-950); background: var(--paper-50); }
@media (max-width: 560px) { .brand-name { display: none; } .lang button { min-width: 40px; padding-inline: 6px; } }
@media (min-width: 1020px) { .nav { display: flex; } .burger { display: none; } .header .btn-order { display: inline-flex; } }

/* Hero — dark, layered, editorial */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--header-h) + 46px) 0 86px; color: var(--fg-on-dark); background: var(--espresso-950); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .75; background: radial-gradient(circle at 76% 36%, rgba(231,47,69,.23), transparent 28%), radial-gradient(circle at 17% 90%, rgba(246,174,45,.13), transparent 32%); }
.hero::after { content: "VITAMIN BAR · MONTRÉAL ·"; position: absolute; left: 4vw; bottom: 2.5vw; color: rgba(255,250,240,.09); font-family: var(--font-sans); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: .32em; white-space: nowrap; }
.hero .container { position: relative; z-index: 1; display: grid; gap: clamp(40px, 7vw, 100px); align-items: center; }
.hero-copy { position: relative; z-index: 3; animation: rise .9s var(--ease) both; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--saffron-400); font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.hero h1 { max-width: 8.5ch; color: var(--paper-50); }
.hero h1 span { display: block; }
.hero h1 .w2 { padding-inline-start: clamp(18px, 4vw, 70px); color: var(--saffron-400); }
.hero h1 .w3 { color: var(--pistachio-400); }
.hero .lead { margin-top: 27px; color: var(--fg-on-dark-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .btn-outline { color: var(--paper-50); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 11px 24px; margin-top: 28px; color: rgba(255,250,240,.62); font-size: var(--text-sm); font-weight: 700; }
.rating { display: inline-flex; align-items: center; gap: 7px; color: var(--paper-50); }
.rating .star { display: inline-flex; color: var(--saffron-400); }
.rating .star svg { width: 15px; height: 15px; }
.hero-photo { position: relative; min-height: clamp(380px, 58vw, 680px); isolation: isolate; }
.hero-photo::before { content: ""; position: absolute; inset: 5% 4% 7% 9%; z-index: -1; border: 1px solid rgba(246,174,45,.4); border-radius: 50% 50% 3% 3%; transform: rotate(4deg); }
.hero-photo > img:first-child { position: absolute; inset: 2% 3% 8% 8%; width: 82%; height: 86%; object-fit: cover; border-radius: 50% 50% 4% 4%; box-shadow: var(--shadow-lg); animation: settle 1.1s var(--ease) both; }
.hero-orbit { position: absolute; z-index: 3; object-fit: cover; border: 7px solid var(--espresso-950); box-shadow: var(--shadow-md); }
.hero-orbit.is-one { right: -1%; bottom: 2%; width: 39%; aspect-ratio: 1; border-radius: 50%; }
.hero-orbit.is-two { left: -2%; top: 3%; width: 25%; aspect-ratio: 4/5; border-radius: 90px 90px 14px 14px; }
.hero-seal { position: absolute; right: 0; top: 4%; z-index: 4; width: 116px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--espresso-950); background: var(--saffron-400); font-family: var(--font-sans); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-align: center; text-transform: uppercase; transform: rotate(9deg); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.04) rotate(1deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (min-width: 920px) { .hero .container { grid-template-columns: 1.03fr .97fr; } .hero-copy { padding-top: 24px; } }

/* Action rail */
.quick { position: relative; z-index: 4; color: var(--paper-50); background: var(--pomegranate-600); }
.quick ul { display: grid; grid-template-columns: repeat(2, 1fr); }
.quick li { min-width: 0; }
.quick a { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 12px 18px; border-inline-end: 1px solid rgba(255,250,240,.18); font-size: var(--text-sm); font-weight: 800; transition: background var(--dur); }
.quick a:hover { background: rgba(255,250,240,.1); }
.quick a svg { width: 20px; height: 20px; flex: none; color: var(--saffron-400); }
.quick a.is-primary { color: var(--espresso-950); background: var(--saffron-400); }
.quick a.is-primary svg { color: var(--espresso-950); }
@media (min-width: 760px) { .quick ul { grid-template-columns: repeat(5, 1fr); } }

/* Category ledger */
#categories { padding-block: clamp(30px, 5vw, 58px) !important; color: var(--paper-50); background: var(--espresso-900); }
.cats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-light); border-inline-start: 1px solid var(--line-light); }
.cats a { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 94px; padding: 18px; border-inline-end: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; transition: color var(--dur), background var(--dur); }
.cats a svg { width: 19px; height: 19px; flex: none; color: var(--saffron-400); }
.cats a:hover { color: var(--espresso-950); background: var(--saffron-400); }
.cats a:hover svg { color: inherit; }
@media (min-width: 760px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .cats { grid-template-columns: repeat(6, 1fr); } }

/* Favourites — varied editorial grid */
#favourites { overflow: hidden; padding-top: clamp(72px, 10vw, 140px) !important; }
#favourites::before { content: "FRESH / FRAIS / تازه"; position: absolute; top: 27px; right: -8px; color: rgba(32,19,16,.055); font-family: var(--font-display); font-size: clamp(4rem, 13vw, 12rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.fav-grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.fav-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(32,19,16,.1); border-radius: var(--radius-lg); background: var(--paper-50); box-shadow: 0 0 0 rgba(22,13,11,0); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.fav-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fav-card .media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--paper-200); }
.fav-card .media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.fav-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.fav-card:hover .media img { transform: scale(1.035); }
.fav-card .body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.5vw, 30px); }
.fav-card h3 { font-size: var(--text-xl); }
.fav-card .desc { color: var(--ink-soft); font-size: var(--text-sm); }
.fav-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price.is-tbc { color: var(--ink-soft); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; white-space: normal; }
.tag { position: absolute; inset-block-start: 15px; inset-inline-start: 15px; z-index: 3; padding: 7px 11px; border: 1px solid rgba(32,19,16,.08); border-radius: var(--radius-full); color: var(--pomegranate-600); background: rgba(255,250,240,.93); box-shadow: var(--shadow-sm); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tag.is-signature { color: var(--ink); background: var(--saffron-400); }
.tag.is-promo { color: var(--ink); background: var(--pistachio-400); }
.fav-card.is-text { min-height: 310px; }
.fav-card.is-text .tag { position: static; align-self: flex-start; margin-bottom: 20px; box-shadow: none; }
.fav-card.is-text .body { justify-content: flex-end; padding: 32px; }
.fav-card.t-juices { background: var(--tint-juice); }
.fav-card.t-vitamins { background: var(--tint-vitamin); }
.fav-card.t-waffles { background: var(--tint-waffle); }
.fav-card.t-corn, .fav-card.t-smoothies { background: var(--tint-corn); }
.fav-card.t-persian { background: var(--tint-persian); }
@media (min-width: 700px) { .fav-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) {
  .fav-grid { grid-template-columns: repeat(12, minmax(0,1fr)); align-items: stretch; }
  .fav-card { grid-column: span 4; }
  .fav-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
  .fav-card:nth-child(1) .media { flex: 1; min-height: 570px; }
  .fav-card:nth-child(2) { grid-column: span 5; }
  .fav-card:nth-child(3) { grid-column: span 5; }
  .fav-card:nth-child(4), .fav-card:nth-child(5) { grid-column: span 6; }
  .fav-card:nth-child(6), .fav-card:nth-child(7), .fav-card:nth-child(8) { grid-column: span 4; }
}

/* Persian feature */
.persian { background: #801529; }
.persian .container { display: grid; gap: clamp(42px, 7vw, 100px); align-items: center; }
.persian-photo { position: relative; padding: 12px; border: 1px solid rgba(246,174,45,.6); border-radius: 52% 52% 18px 18px; }
.persian-photo::after { content: "تهران ← مونترال"; position: absolute; right: -20px; bottom: 38px; padding: 9px 14px; color: var(--espresso-950); background: var(--saffron-400); font-family: var(--font-fa); font-size: var(--text-sm); font-weight: 800; transform: rotate(-7deg); }
.persian-photo img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 50% 50% 10px 10px; }
.persian h2 { max-width: 8ch; }
.persian-list { margin-top: 32px; border-top: 1px solid rgba(255,250,240,.28); }
.persian-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,250,240,.28); }
.persian-list .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.persian-list .price { color: var(--saffron-400); }
.persian-note { margin-top: 24px; color: rgba(255,250,240,.8); font-size: var(--text-lg); }
.persian .btn { margin-top: 28px; }
@media (min-width: 900px) { .persian .container { grid-template-columns: .88fr 1.12fr; } }

/* Story */
.story { background: var(--paper-50); }
.story .container { display: grid; gap: 44px; align-items: center; }
.story h2 { max-width: 9ch; }
.story .line { margin-top: 24px !important; color: var(--pomegranate-600); font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; font-weight: 600; }
.story .body { max-width: 59ch; margin-top: 22px !important; color: var(--ink-soft); font-size: var(--text-lg); }
.story-visual { position: relative; min-height: 520px; }
.story-visual img { position: absolute; width: 62%; height: 76%; object-fit: cover; border-radius: 50% 50% 14px 14px; box-shadow: var(--shadow-md); }
.story-visual img:first-child { left: 0; bottom: 0; }
.story-visual img:nth-child(2) { right: 0; top: 0; border: 10px solid var(--paper-50); }
html[dir="rtl"] .story-visual img:first-child { left: auto; right: 0; }
html[dir="rtl"] .story-visual img:nth-child(2) { right: auto; left: 0; }
@media (min-width: 900px) { .story .container { grid-template-columns: 1.05fr .95fr; gap: clamp(54px, 8vw, 120px); } }

/* Reviews */
#reviews { overflow: hidden; background: var(--pistachio-400); }
#reviews::after { content: "4.6"; position: absolute; right: -2vw; bottom: -5vw; color: rgba(32,19,16,.08); font-family: var(--font-display); font-size: clamp(10rem, 28vw, 28rem); font-weight: 800; line-height: .72; }
.reviews-summary { display: flex; align-items: center; gap: 16px; }
.reviews-summary .big { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: .8; }
.reviews-grid { position: relative; z-index: 1; display: grid; gap: 16px; }
.review { min-height: 250px; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(32,19,16,.15); border-radius: var(--radius-lg); background: rgba(255,250,240,.82); backdrop-filter: blur(8px); }
.review .stars { color: var(--pomegranate-600); letter-spacing: .13em; }
.review blockquote { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.28; }
.review .from { margin-top: auto; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 700; }
@media (min-width: 800px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* Gallery */
#gallery { color: var(--paper-50); background: var(--espresso-950); }
#gallery .lead { color: var(--fg-on-dark-muted); }
#gallery .btn { color: var(--espresso-950); background: var(--paper-50); }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; gap: 12px; }
.mosaic a { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--espresso-800); }
.mosaic a:nth-child(1), .mosaic a:nth-child(6) { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), filter var(--dur); }
.mosaic a:hover img { transform: scale(1.045); filter: saturate(1.08); }
@media (min-width: 760px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } .mosaic a:nth-child(3) { grid-column: span 2; } }

/* Visit */
.visit { background: var(--paper-100); color: var(--ink); }
.visit::before { content: "5320"; position: absolute; top: 3vw; left: -1vw; color: rgba(32,19,16,.04); font-family: var(--font-display); font-size: clamp(8rem, 25vw, 25rem); line-height: 1; }
.visit .container { position: relative; display: grid; gap: 52px; }
.visit address { margin-top: 24px !important; font-style: normal; font-size: var(--text-lg); line-height: 1.75; }
.visit .actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.map { overflow: hidden; margin-top: 32px; border-radius: var(--radius-lg); background: var(--paper-200); box-shadow: var(--shadow-sm); }
.map iframe { display: block; width: 100%; height: 300px; border: 0; filter: grayscale(1) sepia(.15); }
.hours { border-top: 1px solid var(--line); }
.hours li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.hours li.is-today { color: var(--pomegranate-600); font-weight: 800; }
.status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; font-weight: 800; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pistachio-700); }
.status.is-closed::before { background: var(--pomegranate-600); }
@media (min-width: 900px) { .visit .container { grid-template-columns: 1.15fr .85fr; gap: clamp(56px, 8vw, 120px); } }

/* Closing order band */
.order-band { background: var(--pomegranate-600); }
.order-band .container { display: grid; gap: 25px; align-items: center; }
.order-band .btns { display: flex; flex-wrap: wrap; gap: 11px; }
.order-band .fallback { color: rgba(255,250,240,.75); font-size: var(--text-sm); }
@media (min-width: 900px) { .order-band .container { grid-template-columns: 1fr auto; } }

/* Footer */
.footer { padding: 70px 0 calc(30px + var(--sticky-h)); color: var(--paper-50); background: var(--bg-darker); }
.footer .grid { display: grid; gap: 38px; }
.footer .brand img { width: 64px; height: 64px; }
.footer .tagline { max-width: 31ch; margin-top: 18px; color: var(--fg-on-dark-muted); }
.footer .foot-h { margin-bottom: 15px; color: var(--saffron-400); font-family: var(--font-sans); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.footer li { padding-block: 4px; }
.footer li a:hover { color: var(--saffron-400); }
.footer .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line-light); color: var(--fg-on-dark-muted); font-size: var(--text-sm); }
.footer .lang { color: var(--paper-50); }
.footer .lang button[aria-pressed="true"] { color: var(--espresso-950); background: var(--paper-50); }
@media (min-width: 760px) { .footer .grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
@media (min-width: 960px) { .footer { padding-bottom: 30px; } }

/* Mobile action bar */
.sticky { position: fixed; inset: auto 0 0; z-index: 90; min-height: var(--sticky-h); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); color: var(--paper-50); background: rgba(22,13,11,.94); border-top: 1px solid var(--line-light); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sticky a { min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .68rem; font-weight: 800; }
.sticky a svg { width: 21px; height: 21px; }
.sticky a.is-primary { color: var(--saffron-400); }
@media (min-width: 960px) { .sticky { display: none; } }

/* Menu hero */
.menu-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 60px) 0 68px; color: var(--paper-50); background: var(--espresso-950); }
.menu-hero::before { content: "MENU"; position: absolute; right: -2vw; bottom: -3vw; color: rgba(255,250,240,.055); font-family: var(--font-display); font-size: clamp(9rem, 28vw, 28rem); font-weight: 800; line-height: .75; }
.menu-hero .container { position: relative; display: grid; gap: 34px; align-items: center; }
.menu-hero .lead { margin-top: 18px !important; color: var(--fg-on-dark-muted); }
.menu-hero-photo { position: relative; justify-self: end; width: min(100%, 560px); padding: 10px; border: 1px solid rgba(246,174,45,.45); border-radius: 50% 50% 18px 18px; }
.menu-hero-photo img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 50% 50% 10px 10px; }
@media (min-width: 900px) { .menu-hero .container { grid-template-columns: 1.12fr .88fr; } }

/* Menu tools */
.menu-tools { position: sticky; top: var(--header-h); z-index: 50; padding: 16px 0; background: rgba(255,250,240,.94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.menu-tools label { font-family: var(--font-sans) !important; font-size: .72rem !important; font-weight: 900 !important; letter-spacing: .12em; text-transform: uppercase; }
.search { position: relative; }
.search input { width: 100%; min-height: 54px; padding: 12px 52px; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink); background: var(--white); }
.search input:focus { outline: 0; border-color: var(--pomegranate-600); box-shadow: 0 0 0 4px rgba(231,47,69,.13); }
.search svg { position: absolute; inset-inline-start: 19px; top: 50%; width: 19px; height: 19px; color: var(--ink-soft); pointer-events: none; transform: translateY(-50%); }
.search .clear { position: absolute; inset-inline-end: 8px; top: 50%; display: none; align-items: center; justify-content: center; min-width: 42px; min-height: 40px; border-radius: var(--radius-full); color: var(--ink-soft); font-size: var(--text-sm); font-weight: 800; transform: translateY(-50%); }
.search.has-value .clear { display: inline-flex; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 11px; padding-bottom: 3px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-full); background: transparent; font-size: var(--text-sm); font-weight: 800; transition: color var(--dur), background var(--dur), border-color var(--dur); }
.chip:hover { border-color: var(--pomegranate-600); }
.chip[aria-pressed="true"] { color: var(--paper-50); border-color: var(--espresso-950); background: var(--espresso-950); }

/* Menu list */
.menu-body { padding: 38px 0 110px; background: var(--paper-50); }
.menu-section { padding: 30px 0 24px; scroll-margin-top: calc(var(--header-h) + 166px); }
.menu-section h2 { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; margin-bottom: 24px; font-size: var(--text-2xl); }
.menu-section h2::after { content: ""; height: 1px; background: var(--line); }
.menu-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.item { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 18px; padding: 20px; border: 1px solid rgba(32,19,16,.11); border-radius: var(--radius-md); background: rgba(255,255,255,.58); transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.item:hover { border-color: rgba(32,19,16,.28); background: var(--white); transform: translateY(-2px); }
.item h3 { font-size: var(--text-lg); font-weight: 800; letter-spacing: -.025em; }
.item .alt { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 700; }
.item .desc { grid-column: 1/-1; color: var(--ink-soft); font-size: var(--text-sm); }
.item .price { align-self: start; color: var(--pomegranate-600); }
.item .size { display: block; color: var(--ink-soft); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; text-align: end; }
.item.is-modifier { border-style: dashed; background: transparent; }
.item.has-image { grid-template-columns: 96px minmax(0,1fr) auto; }
.item.has-image .thumb { grid-row: span 2; width: 96px; height: 96px; overflow: hidden; border-radius: 50% 50% 10px 10px; background: var(--paper-200); }
.item.has-image .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item.has-image .desc { grid-column: 2/-1; }
.item.is-featured { color: var(--paper-50); border-color: var(--espresso-950); background: var(--espresso-950); }
.item.is-featured .desc, .item.is-featured .alt, .item.is-featured .size { color: var(--fg-on-dark-muted); }
.item.is-featured .price { color: var(--saffron-400); }
.item .tag { position: static; display: inline-block; margin-bottom: 7px; box-shadow: none; }
.empty { padding: 60px 20px; color: var(--ink-soft); text-align: center; }
.tax-note { margin-top: 34px; color: var(--ink-soft); font-size: var(--text-sm); }
@media (min-width: 900px) { .menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Compact mobile refinements */
@media (max-width: 699px) {
  :root { --header-h: 74px; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 36px); }
  .hero h1 { font-size: clamp(3.25rem, 17vw, 5.2rem); }
  .hero-photo { min-height: 430px; }
  .hero-photo > img:first-child { inset-inline: 6% 8%; width: 84%; }
  .hero-orbit.is-two { left: 0; }
  .hero-seal { right: 1%; width: 94px; font-size: .58rem; }
  .quick a { min-height: 64px; padding-inline: 13px; }
  .fav-card .media { aspect-ratio: 5/4; }
  .story-visual { min-height: 410px; }
  .mosaic { grid-auto-rows: 165px; }
  .item.has-image { grid-template-columns: 74px minmax(0,1fr) auto; }
  .item.has-image .thumb { width: 74px; height: 82px; }
  .item { padding: 16px; }
}

/* v5 experience polish: energy comes from layout and motion, not a new typeface */
.header.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header.is-solid .container { min-height: 62px; padding: 7px 9px 7px 16px; border: 1px solid rgba(32,19,16,.1); border-radius: var(--radius-full); background: rgba(255,250,240,.92); box-shadow: 0 14px 42px rgba(22,13,11,.11); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hero-copy::after { content: ""; display: block; width: clamp(80px, 11vw, 150px); height: 5px; margin-top: 34px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--pomegranate-500) 0 38%, var(--saffron-400) 38% 70%, var(--pistachio-400) 70%); }
.hero-photo::after { content: ""; position: absolute; right: 0; bottom: 12%; z-index: -2; width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--pomegranate-500); filter: blur(55px); opacity: .22; }
.hero-orbit.is-one { animation: floatOne 7s ease-in-out infinite; }
.hero-orbit.is-two { animation: floatTwo 8.5s ease-in-out infinite; }
.hero-seal { overflow: hidden; }
.hero-seal::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(22,13,11,.28); border-radius: 50%; }
.hero-seal:hover { transform: rotate(0) scale(1.04); }
@keyframes floatOne { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: 2deg; } }
@keyframes floatTwo { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 8px 10px; rotate: -2deg; } }

.quick a span { overflow: hidden; text-overflow: ellipsis; }
.quick a svg { transition: transform var(--dur) var(--ease); }
.quick a:hover svg { transform: rotate(-7deg) scale(1.08); }
.cats a span { transition: transform var(--dur) var(--ease); }
.cats a:hover span { transform: translateX(4px); }
html[dir="rtl"] .cats a:hover span { transform: translateX(-4px); }

.fav-card:nth-child(3n+1) .media { border-radius: 0 0 28% 0; }
.fav-card:nth-child(3n+2) .media { border-radius: 0 0 0 28%; }
.fav-card:nth-child(3n) .media { clip-path: polygon(0 0,100% 0,100% 92%,72% 100%,0 95%); }
.fav-card .foot .link { position: relative; }
.fav-card .foot .link::after { content: ""; position: absolute; inset-inline: 0; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.fav-card:hover .foot .link::after { transform: scaleX(1); }
.persian-photo { transform: rotate(-1.5deg); transition: transform var(--dur-slow) var(--ease); }
.persian-photo:hover { transform: rotate(0) translateY(-5px); }
html[dir="rtl"] .persian-photo { transform: rotate(1.5deg); }
.story-visual img { transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow); }
.story-visual:hover img:first-child { transform: translate(-6px, 7px) rotate(-1deg); }
.story-visual:hover img:nth-child(2) { transform: translate(6px, -7px) rotate(1deg); }
.review:nth-child(2) { transform: translateY(18px); }
.review { transition: transform var(--dur) var(--ease), background var(--dur), box-shadow var(--dur); }
.review:hover { transform: translateY(-4px); background: var(--paper-50); box-shadow: var(--shadow-md); }
.review:nth-child(2):hover { transform: translateY(14px); }
.mosaic a::after { content: "↗"; position: absolute; right: 13px; bottom: 13px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--espresso-950); background: rgba(255,250,240,.92); font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur) var(--ease); }
.mosaic a:hover::after { opacity: 1; transform: none; }

.menu-section { counter-reset: menuItem; }
.item { position: relative; overflow: hidden; }
.item::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--pomegranate-500),var(--saffron-400),var(--pistachio-400)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.item:hover::after, .item:focus-within::after { transform: scaleX(1); }
.item .thumb img { transition: transform var(--dur-slow) var(--ease); }
.item:hover .thumb img { transform: scale(1.08) rotate(1deg); }
.chips { mask-image: linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%); padding-inline: 18px; margin-inline: -18px; }
@media (min-width: 1020px) {
  .menu-tools { padding-block: 12px; }
  .menu-tools .container { display: grid; grid-template-columns: auto minmax(280px, .72fr) minmax(0, 1.35fr); align-items: center; gap: 16px; }
  .menu-tools label { margin: 0 !important; white-space: nowrap; }
  .chips { margin: 0; padding-block: 2px; }
}
@media (max-width: 759px) {
  .header.is-solid .container { width: calc(100% - 20px); }
  .review:nth-child(2) { transform: none; }
  .review:nth-child(2):hover { transform: translateY(-4px); }
  .hero-copy::after { margin-top: 26px; }
}

/* ============================================================
   3D STAGE — model-viewer scenes (hero pomegranate, story vitamin cup)
   and floating cutouts. Generated with Higgsfield (image → image-to-3D).
   ============================================================ */
.hero-stage { position: relative; min-height: clamp(420px, 60vw, 700px); isolation: isolate; }
.stage-model { width: 100%; height: 100%; min-height: inherit; --poster-color: transparent; background: transparent; outline: none; cursor: grab; touch-action: pan-y; }
.stage-model:active { cursor: grabbing; }
.stage-model::part(default-progress-bar) { display: none; }
.stage-model::part(default-progress-mask) { display: none; }
.hero-stage .stage-model { position: absolute; inset: 0; z-index: 2; }
.stage-glow { position: absolute; z-index: 0; left: 50%; top: 52%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(231,47,69,.55), rgba(231,47,69,.18) 42%, transparent 68%); filter: blur(18px); pointer-events: none; }
.stage-glow.is-green { background: radial-gradient(circle, rgba(168,198,108,.55), rgba(168,198,108,.16) 42%, transparent 68%); }
.stage-glow.is-gold { background: radial-gradient(circle, rgba(246,174,45,.6), rgba(246,174,45,.2) 42%, transparent 68%); width: 90%; }
.stage-ring { position: absolute; z-index: 1; left: 50%; top: 54%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(72deg); border-radius: 50%; border: 1px solid rgba(246,174,45,.45); box-shadow: 0 0 0 28px rgba(246,174,45,.06); pointer-events: none; animation: ringSpin 22s linear infinite; }
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); } }
.stage-float { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); will-change: transform; }
.stage-float.is-tea { left: -4%; top: 4%; width: 26%; animation: floatTwo 8.5s ease-in-out infinite; }
.stage-float.is-cup { right: -3%; bottom: 0; width: 22%; animation: floatOne 7s ease-in-out infinite; }
.hero-stage .hero-seal { z-index: 4; }
.stage-hint { position: absolute; left: 50%; bottom: -6px; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-full); color: rgba(255,250,240,.7); background: rgba(255,250,240,.07); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.stage-hint::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-inline-color: transparent; animation: ringSpin 3s linear infinite; }
.stage-hint.is-dark { color: var(--ink-700); background: rgba(32,19,16,.06); }
.stage-hint.is-hidden { opacity: 0; transition: opacity var(--dur-slow); }

.story-3d { min-height: 560px; display: grid; }
.story-3d .stage-model { position: relative; z-index: 2; min-height: 520px; }
.story-3d .stage-glow { top: 58%; width: 70%; }

.persian-3d { display: grid; place-items: center; padding: 24px 12px 0; border: 0; border-radius: 0; }
.persian-3d .tea-float { width: min(78%, 420px); height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: floatTwo 9s ease-in-out infinite; position: relative; z-index: 2; }
.persian-3d .stage-glow { z-index: 0; top: 56%; }
.persian-3d::after { z-index: 3; }
.steam { position: absolute; z-index: 3; left: 50%; top: 6%; width: 3px; height: 26%; transform: translateX(-30%); pointer-events: none; background: linear-gradient(to top, rgba(255,250,240,.0), rgba(255,250,240,.55), transparent); filter: blur(6px); border-radius: 50%; animation: steamRise 3.6s ease-in-out infinite; }
@keyframes steamRise { 0% { opacity: 0; transform: translate(-30%, 12px) scaleX(1); } 40% { opacity: .9; } 100% { opacity: 0; transform: translate(-10%, -60px) scaleX(2.4); } }

@media (max-width: 919px) {
  .hero-stage { min-height: 460px; margin-top: 8px; }
  .stage-float.is-tea { left: -2%; top: 2%; width: 28%; }
  .stage-float.is-cup { right: -2%; width: 24%; }
  .story-3d { min-height: 440px; } .story-3d .stage-model { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-ring, .stage-float, .tea-float, .steam, .stage-hint::before { animation: none; }
}
/* Mobile: 3D stage leads, copy follows */
@media (max-width: 919px) {
  .hero { padding-top: calc(var(--header-h) + 8px); }
  .hero .container { gap: 12px; }
  .hero-stage { order: -1; min-height: 400px; margin: 0 -4vw; }
  .hero-stage .hero-seal { top: 0; }
  .stage-hint { bottom: 6px; }
}