/* ─── Accessibility ─── */
/* Visible focus ring for keyboard users (does NOT show on mouse click thanks to :focus-visible) */
*:focus-visible {
outline: 2px solid var(--seal, #8a1c1c);
outline-offset: 2px;
border-radius: 2px;
}
/* Skip-to-content link — visible only when focused via Tab */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 9999;
padding: 10px 16px;
background: #221408;
color: #ece0c4;
text-decoration: none;
font-family: "IM Fell DW Pica SC", serif;
font-size: 13px;
letter-spacing: .2em;
text-transform: uppercase;
}
.skip-link:focus { top: 8px; }
/* Honor reduced motion preference globally */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
:root{
/* ── Colors (existing) ── */
--paper-1: #ece0c4;
--paper-2: #e2d2ad;
--paper-3: #d2bd91;
--paper-edge: #b89e6e;
--ink: #221408;
--ink-soft:#553418;
--ink-faint:#8a6a44;
--seal: #8a1c1c;
--seal-deep:#5b1010;
--gold: #a07b2f;
--tile-blue: #1f5d6b;
--tile-blue-deep: #163d47;
--rule: rgba(70,40,15,.55);
--rule-faint: rgba(70,40,15,.25);
/* ── Spacing scale (8pt grid) ── */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
/* ── Border-radius scale (soft but never rounded — keeps letterpress feel) ── */
--r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px;
/* ── Elevation (warm-toned shadows that read on paper) ── */
--shadow-1: 0 1px 2px rgba(70,40,15,.08);
--shadow-2: 0 2px 6px rgba(70,40,15,.10), 0 1px 2px rgba(70,40,15,.06);
--shadow-3: 0 6px 16px rgba(70,40,15,.14), 0 2px 4px rgba(70,40,15,.08);
--shadow-4: 0 14px 32px rgba(70,40,15,.18), 0 4px 8px rgba(70,40,15,.10);
--shadow-card: 0 1px 0 var(--paper-3), 0 2px 8px rgba(70,40,15,.10);
--shadow-card-hover: 0 2px 0 var(--seal), 0 8px 20px rgba(70,40,15,.18);
/* ── Motion ── */
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--t-fast: 120ms;
--t-med: 240ms;
--t-slow: 420ms;
/* ── Z-index scale (avoid stacking surprises) ── */
--z-nav: 100;
--z-mobile-bar: 120;
--z-drawer: 150;
--z-modal: 200;
--z-overlay: 250;
--z-toast: 300;
}
/* Native smooth scroll, but respect motion preference */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Better text rendering + selection */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(138,28,28,.20); color: var(--ink); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background: var(--paper-1);
color: var(--ink);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 17px;
line-height: 1.45;
overflow-x: hidden;
background-image:
radial-gradient(1200px 800px at 15% 5%, rgba(255,240,210,.55), transparent 60%),
radial-gradient(900px 700px at 85% 95%, rgba(180,140,80,.18), transparent 60%),
url("data:image/svg+xml;utf8,");
background-attachment: fixed;
}
.fa{ font-family: "Vazirmatn","Gulzar", Tahoma, sans-serif; direction:rtl; }
.en{ font-family: "Cormorant Garamond","IM Fell English", serif; }
.hand{ font-family: "Caveat", cursive; }
.mono{ font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.smallcaps{ font-family: "IM Fell DW Pica SC","Cormorant Garamond", serif; letter-spacing: .12em; }
/* ========== Top nav ========== */
.nav{
position: sticky; top: 0; z-index: var(--z-nav);
background: rgba(236,224,196,.94);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border-bottom: 1px solid var(--rule-faint);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 6px rgba(70,40,15,.10);
transition: box-shadow var(--t-med) var(--ease-out);
}
/* Slightly raise the shadow once user has scrolled — visual depth cue */
.nav.is-scrolled{ box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-2); }
.nav-inner{
max-width: 1280px; margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding: 12px 28px;
}
.brand{ display:flex; align-items:center; gap: 14px; }
.brand .seal{
width: 44px; height: 44px; border-radius:50%;
border: 1.5px solid var(--seal); color: var(--seal);
display:grid; place-items:center;
font-family:"Vazirmatn",serif; font-weight: 800; font-size: 18px;
background: rgba(255,235,200,.2);
flex-shrink:0;
}
.brand-logo{
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: #000; /* matches the logo's black ring while loading */
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.brand-logo img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.brand .lockup{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand .lockup .en{
font-family:"IM Fell English", serif; font-style: italic;
font-size: 22px;
}
.brand .lockup .fa{
font-family:"Vazirmatn", serif; font-size: 16px; color: var(--ink-soft);
font-weight: 700;
}
.nav-links{ display:flex; gap: 4px; justify-content:center; }
.nav-link{
padding: 10px 14px; border-radius: var(--r-2);
font-family:"IM Fell DW Pica SC","Cormorant Garamond",serif;
font-size: 14px; letter-spacing: .15em; text-transform: uppercase;
color: var(--ink); cursor: pointer; user-select:none;
background: transparent; border:none;
text-decoration: none;
display:flex; align-items:baseline; gap: var(--s-2);
transition: background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
position: relative;
}
.nav-link .fa-mini{
font-family:"Vazirmatn",serif; font-size: 12px; color: var(--ink-soft);
text-transform: none; letter-spacing: 0;
transition: color var(--t-fast) var(--ease-out);
}
.nav-link:hover{ background: rgba(70,40,15,.08); color: var(--seal); }
.nav-link:hover .fa-mini{ color: var(--seal); }
.nav-link:focus-visible{ outline: 2px solid var(--seal); outline-offset: 2px; }
.nav-actions{ display:flex; align-items:center; gap: var(--s-4); }
.nav-phone{
font-family:"JetBrains Mono",monospace; font-size: 14px;
color: var(--ink); text-decoration:none;
border-right: 1px solid var(--rule-faint);
padding-right: var(--s-4);
transition: color var(--t-fast) var(--ease-out);
}
.nav-phone:hover{ color: var(--seal); }
.nav-phone .lbl{ font-size: 10px; color: var(--ink-faint); display:block; letter-spacing:.2em; text-transform:uppercase; }
.nav-cart{
appearance:none; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper-1);
padding: 11px 20px; cursor:pointer;
font-family:"IM Fell DW Pica SC",serif; font-size: 13px;
letter-spacing: .18em; text-transform: uppercase;
display:flex; align-items:center; gap: var(--s-3);
box-shadow: var(--shadow-1);
transition: background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.nav-cart:hover:not(:disabled){
background: var(--seal); border-color: var(--seal);
box-shadow: var(--shadow-2);
transform: translateY(-1px);
}
.nav-cart:active:not(:disabled){ transform: translateY(0); }
.nav-cart:focus-visible{ outline: 2px solid var(--seal); outline-offset: 3px; }
.nav-cart:disabled{ opacity: .55; cursor: default; }
.nav-cart .badge{
background: var(--seal); color: var(--paper-1);
font-family:"JetBrains Mono",monospace; font-size: 11px; font-weight: 600;
padding: 3px 8px; border-radius: 999px; min-width:22px;
text-align:center;
transition: transform var(--t-med) var(--ease-out);
}
/* Bump the badge when cart count changes — JS toggles this class */
.nav-cart .badge.bump{ animation: badgeBump .45s var(--ease-out); }
@keyframes badgeBump {
0% { transform: scale(1); }
35% { transform: scale(1.4); background: #f5dca0; color: var(--seal-deep); }
100% { transform: scale(1); }
}
.nav-cart:hover .badge{ background: var(--paper-1); color: var(--seal); }
.nav-cart:disabled{ opacity:.4; }
/* ========== Layout shell ========== */
.shell{ max-width: 1280px; margin: 0 auto; padding: 0 28px; }
/* ========== Hero ========== */
.hero{
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 50px;
align-items: center;
padding: 64px 0 50px;
position: relative;
}
.hero::before{
content:""; position: absolute; top: 30px; left: 0;
width: 160px; height: 1px; background: var(--rule);
}
.hero-col-l h1{
font-family:"IM Fell English", serif;
font-size: clamp(48px, 6vw, 84px);
font-style: italic; font-weight: 400;
line-height: .94;
margin: 0 0 8px;
letter-spacing: -.005em;
animation: heroIn var(--t-slow) var(--ease-out) both;
}
.hero-fa-h{
animation: heroIn var(--t-slow) var(--ease-out) 80ms both;
}
.hero-meta{
animation: heroIn var(--t-slow) var(--ease-out) 180ms both;
}
.hero-cta-row{
animation: heroIn var(--t-slow) var(--ease-out) 260ms both;
}
.sign-stage{
animation: heroIn var(--t-slow) var(--ease-out) 200ms both;
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-col-l h1,
.hero-fa-h,
.hero-meta,
.hero-cta-row,
.sign-stage { animation: none !important; }
}
.hero-col-l h1 .light{ color: var(--ink-soft); }
.hero-fa-h{
font-family:"Vazirmatn", serif; font-size: 32px; font-weight: 700;
margin: 4px 0 22px; line-height: 1.1; color: var(--ink);
}
.hero-tagline{
font-family:"IM Fell DW Pica SC","Cormorant Garamond",serif;
font-size: 14px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 10px 0;
margin: 0 0 32px;
display:flex; justify-content:space-between; gap: 14px;
}
.hero-tagline span:nth-child(2){ font-family:"Vazirmatn",serif; letter-spacing:0; text-transform: none; font-weight:600;}
.hero-meta{
display:grid; grid-template-columns: repeat(2, 1fr); gap: 0;
margin-bottom: 28px;
}
.hero-meta > div{ padding: 10px 14px; border-left: 1px solid var(--rule); }
.hero-meta > div:first-child{ padding-left: 0; border-left: 0; }
.hero-meta .lbl{
font-family:"IM Fell DW Pica SC",serif; font-size: 10px;
letter-spacing: .25em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-meta .val{
font-family:"IM Fell English",serif; font-style: italic; font-size: 22px;
margin-top: 4px;
}
.hero-meta .val .fa{ font-family:"Vazirmatn",serif; font-style: normal; font-size: 14px; color: var(--ink-soft); display:block; }
/* "Hours" cell — a hand-pressed wax seal next to quiet typography. */
.hero-meta > div.is-open{
display: flex;
align-items: center;
gap: 16px;
padding-top: 4px;
padding-bottom: 4px;
}
.hero-meta > div.is-open .hours-text{ min-width: 0; }
.hero-meta > div.is-open .val{
font-family:"IM Fell English",serif;
font-style: italic;
font-size: 24px;
line-height: 1.05;
color: var(--ink);
letter-spacing: 0;
margin-top: 2px;
}
.hero-meta > div.is-open .val .fa{
font-size: 13px;
color: var(--ink-soft);
margin-top: 3px;
}
.wax-seal{
flex: 0 0 auto;
width: 78px; height: 78px;
border-radius: 50%;
position: relative;
transform: rotate(-8deg);
background:
radial-gradient(circle at 30% 25%, rgba(241,213,155,.32), transparent 55%),
radial-gradient(circle at 70% 78%, rgba(0,0,0,.38), transparent 65%),
var(--seal-deep);
color: #f1d59b;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
line-height: 1;
box-shadow:
inset 0 0 0 2px rgba(241,213,155,.55),
inset 0 0 0 4px var(--seal),
inset 0 0 0 5px rgba(241,213,155,.18),
0 6px 10px rgba(20,8,2,.42),
0 1px 0 rgba(20,8,2,.25);
}
.wax-seal::before, .wax-seal::after{
content: "✦";
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
color: rgba(241,213,155,.7);
}
.wax-seal::before{ top: 10px; }
.wax-seal::after{ bottom: 10px; }
.wax-num{
font-family:"IM Fell English",serif;
font-style: italic;
font-size: 26px;
font-weight: 700;
letter-spacing: -.01em;
text-shadow: 0 1px 0 rgba(0,0,0,.28);
}
.wax-sub{
font-family:"IM Fell DW Pica SC",serif;
font-size: 7.5px;
letter-spacing: .32em;
text-transform: uppercase;
margin-top: 4px;
color: rgba(241,213,155,.78);
}
.hero-cta-row{ display:flex; gap: var(--s-3); align-items:center; flex-wrap: wrap; }
.btn-primary{
display:inline-flex; align-items:center; gap: var(--s-3);
padding: 18px 28px;
background: var(--ink); color: var(--paper-1);
font-family:"IM Fell DW Pica SC",serif;
font-size: 14px; letter-spacing: .25em; text-transform: uppercase;
border: 1.5px solid var(--ink); cursor:pointer;
box-shadow: 0 4px 0 -1px var(--seal-deep), var(--shadow-2);
transition: transform var(--t-fast) var(--ease-out),
background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
position: relative;
}
.btn-primary:hover{
background: var(--seal); border-color: var(--seal);
box-shadow: 0 6px 0 -1px var(--seal-deep), var(--shadow-3);
transform: translateY(-2px);
}
.btn-primary:active{
transform: translateY(2px);
box-shadow: 0 1px 0 -1px var(--seal-deep), var(--shadow-1);
}
.btn-primary:focus-visible{ outline: 2px solid var(--seal); outline-offset: 4px; }
.btn-primary .fa{ font-family:"Vazirmatn",serif; letter-spacing: 0; text-transform: none; font-weight:600; font-size:13px; }
.btn-ghost{
padding: 17px 24px;
background: transparent; color: var(--ink);
border: 1.5px solid var(--ink);
font-family:"IM Fell DW Pica SC",serif;
font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
cursor:pointer; text-decoration: none;
display:inline-flex; align-items:center; gap: var(--s-2);
transition: all var(--t-fast) var(--ease-out);
}
.btn-ghost:hover{
background: var(--ink); color: var(--paper-1);
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.btn-ghost:active{ transform: translateY(0); box-shadow: none; }
.btn-ghost:focus-visible{ outline: 2px solid var(--seal); outline-offset: 4px; }
.btn-ghost .fa{ font-family:"Vazirmatn",serif; letter-spacing: 0; text-transform: none; font-weight:600; font-size:12px; }
.hero-col-r{ position: relative; height: 360px; }
.sign-stage{ position: absolute; inset: 0; }
.sign-bracket{
position:absolute; top:8px; left:50%; transform: translateX(-50%);
width: 200px;
}
.sign-bracket .top-bar{
height: 3px; background: var(--ink); width: 100%;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
.sign-bracket .pin{
position:absolute; top: 1px; width: 10px; height:10px; border-radius:50%;
background: var(--ink);
}
.sign-bracket .pin.l{ left: 18px; } .sign-bracket .pin.r{ right: 18px; }
.sign-rope{
position:absolute; top: 14px; width: 1.5px; height: 32px;
background: var(--ink-soft);
}
.sign-rope.l{ left: calc(50% - 64px); }
.sign-rope.r{ left: calc(50% + 62px); }
.sign{
position: absolute; top: 44px; left: 50%;
width: 280px; height: 200px;
transform-origin: 50% -34px;
transform: translateX(-50%);
animation: sway 5s ease-in-out infinite;
}
@keyframes sway{
0%,100%{ transform: translateX(-50%) rotate(-1.4deg); }
50% { transform: translateX(-50%) rotate(1.4deg); }
}
.sign-board{
width:100%; height:100%; position: relative;
background:
radial-gradient(circle at 30% 25%, rgba(255,240,210,.18), transparent 60%),
linear-gradient(160deg, #2a1a0c 0%, #3a2412 50%, #1a0e07 100%);
border: 7px solid #8a6a3a;
box-shadow:
inset 0 0 22px rgba(0,0,0,.55),
inset 0 0 0 2px #5a3f1c,
0 14px 24px rgba(0,0,0,.35);
}
.sign-board::after{
content:""; position:absolute; inset:-7px; pointer-events:none;
background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.08) 4px 5px);
mix-blend-mode: multiply;
}
.sign-inner{
position:absolute; inset: 12px;
border: 1px solid rgba(220,180,110,.55);
display:flex; flex-direction:column; align-items:center; justify-content:center;
color: #f1d59b; padding: 8px;
}
.sign-inner .sn-fa{
font-family:"Gulzar","Vazirmatn",serif; font-size: 50px; line-height:1;
color:#f5dca0; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.sign-inner .sn-orn{ color:#c69a4f; font-size: 12px; letter-spacing:.4em; margin: 8px 0; }
.sign-inner .sn-en{
font-family:"IM Fell English",serif; font-style:italic; font-size: 18px; color:#e7c688;
}
/* ========== Menu board (handwritten-style rows) ========== */
.menu-board{
margin: 24px 0 50px;
padding: 4px 18px;
border: 1px solid var(--rule);
background:
linear-gradient(180deg, rgba(255,250,235,.45), rgba(255,245,220,.2)),
repeating-linear-gradient(0deg, transparent 0 32px, rgba(70,40,15,.04) 32px 32.5px);
}
.m-row{
display: grid;
grid-template-columns: 76px minmax(0, 1.5fr) minmax(40px, 1fr) auto auto auto;
align-items: center;
gap: 0 var(--s-5);
padding: var(--s-4) var(--s-3);
border-bottom: 1px solid var(--rule-faint);
transition: background var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
position: relative;
}
.m-row:hover{
background: rgba(255,245,220,.45);
transform: translateX(2px);
}
.m-row-icon{
width: 72px; height: 72px;
border: 1.5px solid var(--rule-faint);
border-radius: 50%;
background: rgba(255,250,235,.55);
display: grid; place-items: center;
color: var(--ink-soft);
flex-shrink: 0;
transition: all var(--t-med) var(--ease-out);
box-shadow: var(--shadow-1);
}
.m-row-icon svg{ width: 44px; height: 44px; display: block; }
.m-row:hover .m-row-icon{
background: rgba(255,235,195,.85);
border-color: var(--seal);
color: var(--ink);
box-shadow: var(--shadow-2);
transform: rotate(-2deg);
}
/* Photo medallion — same circular frame, real image inside */
.m-row-icon--photo{ padding: 0; overflow: hidden; }
.m-row-icon--photo img{
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
}
.m-row:hover .m-row-icon--photo img{
transform: scale(1.10);
filter: brightness(1.06) saturate(1.12);
}
.m-row--out .m-row-icon--photo img{
filter: grayscale(60%) brightness(.9);
}
/* Sold-out treatment — strikethrough names, dimmed icon, ink stamp */
.m-row--out{ opacity: .65; }
.m-row--out .m-row-en,
.m-row--out .m-row-fa{
text-decoration: line-through;
text-decoration-color: rgba(138,28,28,.55);
text-decoration-thickness: 1.5px;
}
.m-row--out .m-row-icon{
filter: grayscale(50%);
opacity: .55;
}
.m-row--out:hover .m-row-icon{
background: rgba(255,250,235,.55);
border-color: var(--rule);
color: var(--ink-soft);
}
.out-stamp{
display: inline-flex; flex-direction: column; align-items: center;
border: 1.5px solid var(--seal);
color: var(--seal);
padding: 4px 10px;
background: rgba(255,235,200,.4);
transform: rotate(-3deg);
line-height: 1.05;
}
.out-stamp .en{
font-family:"IM Fell DW Pica SC",serif;
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.out-stamp .fa{
font-family:"Vazirmatn",serif; font-weight: 700;
font-size: 12px; margin-top: 1px;
}
.out-stamp--lg{
padding: 8px 14px;
transform: rotate(-6deg);
}
.out-stamp--lg .en{ font-size: 11px; }
.out-stamp--lg .fa{ font-size: 14px; margin-top: 2px; }
/* Dine-in-only tag — shown in place of the Add control while ordering for
delivery (the item can't ride along). Quieter than the sold-out stamp:
no rotation, ink rule rather than red seal. */
.dinein-tag{
display: inline-flex; flex-direction: column; align-items: center;
border: 1px solid var(--ink-faint);
color: var(--ink-soft);
padding: 4px 10px;
background: rgba(70,40,15,.05);
line-height: 1.05;
border-radius: 2px;
}
.dinein-tag .en{
font-family:"IM Fell DW Pica SC",serif;
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
white-space: nowrap;
}
.dinein-tag .fa{
font-family:"Vazirmatn",serif; font-weight: 700;
font-size: 12px; margin-top: 1px;
}
.dinein-tag--lg{ padding: 7px 13px; }
.dinein-tag--lg .en{ font-size: 11px; }
.dinein-tag--lg .fa{ font-size: 14px; margin-top: 2px; }
.m-row--dinein{ opacity: .82; }
/* Platter sold-out + image fallback */
.platter--out{ opacity: .7; }
.platter--out .platter-info h3 .en,
.platter--out .platter-info h3 .fa{
text-decoration: line-through;
text-decoration-color: rgba(138,28,28,.55);
}
.platter-img img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.platter-icon{
width: 55%; aspect-ratio: 1;
color: var(--ink-soft); opacity: .85;
display: grid; place-items: center;
}
.platter-icon svg{ width: 100%; height: 100%; }
.m-row:last-child{ border-bottom: none; }
.m-row-en{
font-family:"IM Fell English",serif; font-style: italic;
font-size: 24px; line-height: 1.05;
color: var(--ink); min-width: 0;
}
.m-row-en .hint{
display: block; margin-top: 4px;
font-family:"Cormorant Garamond",serif; font-style: italic;
font-size: 14px; color: var(--ink-faint);
}
.m-row-leader{
align-self: center; height: 0;
border-top: 1px dotted var(--ink-faint);
opacity: .55; margin: 0 4px;
transform: translateY(4px);
}
.m-row-fa{
font-family:"Vazirmatn",serif; font-weight: 600;
font-size: 19px; color: var(--ink-soft);
text-align: right; white-space: nowrap;
}
.m-row-fa .hint{
display: block; margin-top: 4px;
font-family:"Vazirmatn",serif; font-weight: 400;
font-size: 13px; color: var(--ink-faint);
}
.m-row-price{
display: flex; align-items: baseline; gap: 4px;
min-width: 78px; justify-content: flex-end;
}
.m-row-price .num{
font-family:"IM Fell English",serif; font-style: italic;
font-size: 26px; color: var(--ink); font-weight: 500;
}
.m-row-price .cur{
font-family:"JetBrains Mono",monospace; font-size: 11px;
color: var(--ink-faint); letter-spacing: .15em;
}
.m-row-action{ width: 96px; display: flex; justify-content: flex-end; }
.m-row-action .stepper{ height: 36px; }
.m-row-action .stepper button{ width: 32px; height: 34px; font-size: 18px; }
.m-row-action .stepper .qty{ width: 28px; font-size: 13px; }
.m-row-action .add-btn{
height: 36px; padding: 0 16px;
font-size: 11px; letter-spacing: .15em;
}
/* ========== Status strip ========== */
.status{
background: var(--ink); color: var(--paper-1);
margin: 30px 0 0;
border-top: 4px solid var(--seal);
border-bottom: 4px solid var(--seal);
position: relative;
}
.status-inner{
max-width: 1280px; margin: 0 auto; padding: 18px 28px;
display: grid;
grid-template-columns: auto 1fr auto auto auto;
gap: 32px;
align-items: center;
}
.status-tag{
font-family:"IM Fell DW Pica SC",serif;
font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
color: #f5dca0;
display:flex; align-items:center; gap: 10px;
}
.status-tag::before{
content:""; width: 8px; height:8px; border-radius:50%;
background: #ff6b3d; box-shadow: 0 0 0 0 rgba(255,107,61,.7);
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,107,61,.7)} 70%{box-shadow:0 0 0 12px rgba(255,107,61,0)} 100%{box-shadow:0 0 0 0 rgba(255,107,61,0)} }
.status-msg{
font-family:"IM Fell English",serif; font-style:italic; font-size: 18px;
color: var(--paper-1);
}
.status-msg .fa{ font-family:"Vazirmatn",serif; font-style: normal; font-size: 15px; color: rgba(241,213,155,.85); display:block; margin-top:2px; }
.status-stat{
text-align:center; padding-left: 24px; border-left: 1px solid rgba(241,213,155,.25);
}
.status-stat .v{
font-family:"IM Fell English",serif; font-style:italic; font-size: 22px;
color: #f5dca0;
}
.status-stat .l{
font-family:"JetBrains Mono",monospace; font-size: 10px;
color: rgba(241,213,155,.7); letter-spacing: .2em; text-transform: uppercase;
display:block; margin-top: 2px;
}
/* ========== Order builder ========== */
.order-section{
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
margin: 60px 0 0;
align-items: start;
}
.order-main{ min-width: 0; }
/* Pin the cart below the REAL nav edge (measured into --cat-strip-top by
the app) — with a hardcoded 90px it slid under the taller wrapped nav
and ghosted through its translucent backdrop. */
.order-rail{ position: sticky; top: calc(var(--cat-strip-top, 64px) + 27px); }
.sec-head{
display:flex; align-items: baseline; gap: 22px;
border-bottom: 3px double var(--rule);
padding-bottom: 10px;
margin-bottom: 0;
}
.sec-head .num{
font-family:"IM Fell English",serif; font-style:italic;
font-size: 60px; line-height: 1; color: var(--seal);
}
.sec-head .t-en{
font-family:"IM Fell English",serif; font-style:italic;
font-size: 38px; line-height: 1; flex:1;
}
.sec-head .t-fa{
font-family:"Vazirmatn",serif; font-weight:700; font-size: 28px;
}
.sec-head .ornament{
font-size: 12px; letter-spacing: .3em; color: var(--ink-faint);
text-transform: uppercase;
}
/* ========== VAT-exclusive notice ========== */
.vat-note{
/* Demoted from a giant dashed banner to a discreet ledger footnote
so the hero category grid below it can lead the visual hierarchy. */
margin: 8px 0 0;
padding: 0;
background: transparent;
border: 0;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--ink-faint);
text-align: center;
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
opacity: .85;
}
.vat-note .fa{
font-family: "Vazirmatn", serif;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: var(--ink-faint);
direction: rtl;
}
/* ========== Search ========== */
.search-wrap{
position: relative;
margin: 24px 0 0;
border-bottom: 1px solid var(--ink-soft);
display: flex; align-items: center;
gap: 8px;
padding: 6px 0 4px;
transition: border-color .2s;
}
.search-wrap:focus-within{
border-bottom-color: var(--seal);
}
.search-icon{
font-size: 22px; color: var(--ink-faint);
line-height: 1; padding-bottom: 4px;
}
.search-wrap:focus-within .search-icon,
.search-wrap.has-value .search-icon{ color: var(--ink); }
.search-input{
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
padding: 6px 4px;
font-family:"Caveat", cursive;
font-size: 24px; line-height: 1.1;
color: var(--ink);
}
.search-input::placeholder{
color: var(--ink-faint);
font-style: italic;
}
.search-clear{
appearance: none; border: 1px solid var(--rule);
background: rgba(255,250,235,.6);
cursor: pointer;
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
color: var(--ink-soft); font-size: 13px;
flex-shrink: 0;
}
.search-clear:hover{ background: var(--ink); color: var(--paper-1); border-color: var(--ink); }
.search-meta{
margin: 18px 0 14px;
padding-bottom: 10px;
border-bottom: 1px dotted var(--rule);
display: flex; justify-content: space-between; align-items: baseline;
gap: 14px; flex-wrap: wrap;
font-family:"IM Fell DW Pica SC", serif;
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-soft);
}
.search-meta .fa{
font-family:"Vazirmatn", serif; font-size: 13px;
letter-spacing: 0; text-transform: none;
color: var(--ink-faint); font-weight: 600;
}
.search-empty{
margin: 30px 0 50px;
padding: 36px 20px; text-align: center;
border: 1px dashed var(--rule);
background: rgba(255,250,235,.4);
}
.search-empty .se-en{
font-family:"IM Fell English", serif; font-style: italic;
font-size: 22px; color: var(--ink-soft);
}
.search-empty .se-fa{
font-family:"Vazirmatn", serif; font-size: 16px;
color: var(--ink-faint); margin-top: 6px;
}
@media (max-width: 720px){
.search-wrap{ margin: 18px 0 0; }
.search-input{ font-size: 20px; }
.search-icon{ font-size: 19px; }
.search-meta{ font-size: 10px; }
}
/* ========== Category tab strip ========== */
/* --cat-strip-top is measured + set by the app (nav height varies by
breakpoint and shifts when the order-tracking bar is active). */
.cat-tabs-strip{
position: sticky; top: var(--cat-strip-top, 64px); z-index: 30;
background: var(--paper-1);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin: 24px 0 28px;
}
/* Fade gradients hint that more tabs are past the edge. Hidden until the
app marks the side as actually scrollable (.can-left / .can-right) so
the resting strip never washes out the first tab's letters. */
.cat-tabs-strip::before,
.cat-tabs-strip::after{
content: "";
position: absolute; top: 0; bottom: 0; width: 36px;
pointer-events: none; z-index: 5;
opacity: 0;
transition: opacity .15s ease-out;
}
.cat-tabs-strip.can-left::before{ opacity: 1; }
.cat-tabs-strip.can-right::after{ opacity: 1; }
.cat-tabs-strip::before{
left: 0;
background: linear-gradient(to right, var(--paper-1) 30%, transparent);
}
.cat-tabs-strip::after{
right: 0;
background: linear-gradient(to left, var(--paper-1) 30%, transparent);
}
.cat-tabs{
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
-webkit-overflow-scrolling: touch;
}
.cat-tabs::-webkit-scrollbar{ display: none; }
.cat-tab{
appearance: none; border: none; background: transparent;
padding: 14px 22px;
cursor: pointer;
display: inline-flex;
align-items: baseline;
gap: 10px;
white-space: nowrap;
scroll-snap-align: center;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
color: var(--ink-soft);
transition: color .15s, border-color .15s, background .15s;
flex-shrink: 0;
}
.cat-tab .t-en{
font-family:"IM Fell DW Pica SC",serif;
font-size: 13px; letter-spacing: .25em; text-transform: uppercase;
font-weight: 500;
}
.cat-tab .t-fa{
font-family:"Vazirmatn",serif;
font-size: 13px; font-weight: 600;
color: var(--ink-faint);
}
.cat-tab:hover:not(.active){
color: var(--ink);
background: rgba(70,40,15,.05);
}
.cat-tab:hover:not(.active) .t-fa{ color: var(--ink-soft); }
.cat-tab.active{
color: var(--ink);
border-bottom-color: var(--seal);
background: linear-gradient(to bottom, transparent 55%, rgba(138,28,28,.06));
}
.cat-tab.active .t-en{ font-weight: 700; }
.cat-tab.active .t-fa{ color: var(--ink-soft); font-weight: 700; }
/* The edge fades stay on at every width — with the EN+FA tab labels the
strip overflows even on desktop, and a hard mid-word cut without the
fade reads as a rendering glitch. */
/* ========== Continuous menu (Talabat-style) ========== */
/* Every category is on the page top-to-bottom; a thick band marks where
one chapter ends and the next begins. scroll-margin keeps hash/anchor
jumps clear of the sticky nav + tab strip. */
.menu-cat{ scroll-margin-top: calc(var(--cat-strip-top, 64px) + 76px); }
.cat-divider{
display: flex;
align-items: center;
gap: 16px;
margin: 46px 0 10px;
color: var(--seal);
}
.cat-divider::before,
.cat-divider::after{
content: "";
flex: 1;
height: 10px;
background: rgba(70,40,15,.06);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.cat-divider-orn{
font-size: 14px;
line-height: 1;
}
@media (max-width: 720px){
.cat-divider{ margin: 36px 0 6px; gap: 12px; }
}
/* ══════════════════════════════════════════════════════════════════════
V9 CategoryShelf — Spotify-style portrait swipe row
──────────────────────────────────────────────────────────────────────
Horizontal scroll-snap rail of 4:5 portrait cards. 3.5 cards visible
on desktop (4th half-peeked = unambiguous "this is a swipe row" cue),
~2.3 on mobile (active + next peek + prev sliver). Photoless cards
(drinks / breakfast / extras) get a kraft-paper media zone with a
dashed rubber-stamp circle around the existing line-art icon —
reads as intentional editorial restraint, not a missing image.
══════════════════════════════════════════════════════════════════════ */
.cshelf{
margin: 24px 0 36px;
/* break edge-to-edge on mobile so the peek really peeks */
margin-left: calc(-1 * var(--shell-pad, 16px));
margin-right: calc(-1 * var(--shell-pad, 16px));
}
.cshelf-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 0 var(--shell-pad, 16px) 14px;
}
.cshelf-head-titles{ display: flex; flex-direction: column; gap: 2px; }
.cshelf-title{
margin: 0;
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 28px;
color: var(--ink);
line-height: 1.1;
font-weight: 400;
}
.cshelf-title-fa{
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 18px;
direction: rtl;
color: var(--ink-soft);
}
.cshelf-head-meta{
display: flex;
align-items: center;
gap: 12px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
}
.cshelf-head-hint{
display: inline-flex;
align-items: center;
color: var(--seal, #8a1c1c);
animation: cshelf-hint-pulse 2.4s ease-in-out 1.6s infinite;
}
@keyframes cshelf-hint-pulse{
0%, 100% { opacity: .55; transform: translateX(0); }
50% { opacity: 1; transform: translateX(4px); }
}
/* ── Rail wrapper + chevrons ─────────────────────────────────────── */
.cshelf-rail-wrap{
position: relative;
}
.cshelf-rail{
list-style: none;
margin: 0;
padding: 4px var(--shell-pad, 16px) 22px;
display: flex;
gap: 20px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--shell-pad, 16px);
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* force LTR scroll axis even inside RTL pages */
direction: ltr;
}
.cshelf-rail::-webkit-scrollbar{ display: none; }
@supports not (scroll-snap-type: x mandatory){
.cshelf-rail{ scroll-snap-type: x proximity; }
}
.cshelf-card-wrap{
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
list-style: none;
}
/* ── The card itself — 4:5 portrait ─────────────────────────────── */
.cshelf-card{
/* Default desktop width — overridden per breakpoint */
width: 300px;
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid rgba(70,40,15,.18);
border-radius: 14px;
overflow: hidden;
background: var(--paper-1, #faf3df);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 4px 14px rgba(70,40,15,.10);
cursor: pointer;
transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms;
text-align: left;
font: inherit;
color: var(--ink);
}
.cshelf-card.is-active{
box-shadow:
0 0 0 2px var(--seal, #8a1c1c),
0 10px 24px rgba(70,40,15,.18);
}
@media (hover: hover){
.cshelf-card:hover{
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 14px 32px rgba(70,40,15,.20);
}
.cshelf-card:hover .cshelf-photo{ transform: scale(1.05); }
.cshelf-card:hover .cshelf-arrow{
background: var(--ink);
color: var(--paper-1, #faf3df);
border-color: var(--ink);
}
}
.cshelf-card:focus-visible{
outline: 2px solid var(--seal, #8a1c1c);
outline-offset: 3px;
}
.cshelf-card:active{
transform: scale(.98);
transition-duration: 120ms;
}
/* ── Media zone (top 60%) ────────────────────────────────────────── */
.cshelf-media{
position: relative;
display: block;
flex: 0 0 60%;
overflow: hidden;
background: #e9d6a8; /* kraft fallback if photo errors */
}
.cshelf-photo{
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.04) contrast(1.02) brightness(.96);
transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Warm-paper multiply tint so photos sit in the same chromatic key
as the kraft cards next to them */
.cshelf-media::after{
content: "";
position: absolute;
inset: 0;
background: #f4e7c8;
mix-blend-mode: multiply;
opacity: .10;
pointer-events: none;
}
/* Photoless variant — kraft texture + line-art glyph in a stamp ring */
.cshelf-card.no-photo .cshelf-media{
background:
radial-gradient(ellipse at 50% 35%, rgba(90,58,31,.06), transparent 60%),
repeating-linear-gradient(0deg, rgba(90,58,31,.04) 0 1px, transparent 1px 5px),
#e9d6a8;
}
.cshelf-glyph-wrap{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cshelf-glyph-ring{
position: absolute;
width: 60%;
aspect-ratio: 1;
border: 1.5px dashed rgba(90,58,31,.35);
border-radius: 50%;
/* faint rubber-stamp framing */
}
.cshelf-glyph-svg{
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40%;
height: 40%;
color: rgba(90,58,31,.65);
}
.cshelf-glyph-svg svg{ width: 100%; height: 100%; stroke-width: 1.4; }
/* ── Rotated rubber-stamp number (top-left of media) ─────────────── */
.cshelf-stamp{
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 4px 9px;
background: rgba(248,239,216,.92);
border: 1px solid rgba(164,57,42,.45);
border-radius: 4px;
transform: rotate(-6deg);
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 12px;
font-weight: 500;
color: #a4392a;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(70,40,15,.10);
}
/* ── Item-count chip (top-right of media) ────────────────────────── */
.cshelf-count{
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
padding: 4px 10px;
background: rgba(248,239,216,.92);
border: 1px solid rgba(70,40,15,.15);
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink);
}
/* ── Bottom panel (40%, cream paper) ─────────────────────────────── */
.cshelf-panel{
position: relative;
flex: 1 1 40%;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"en arrow"
"fa arrow"
"tag tag";
column-gap: 10px;
row-gap: 2px;
padding: 14px 16px 14px;
background: var(--paper-1, #faf3df);
align-content: start;
}
.cshelf-panel::before{
/* hairline divider that mimics a torn-paper seam */
content: "";
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 1px;
background: rgba(70,40,15,.16);
box-shadow: 0 1px 0 rgba(255,250,235,.7);
}
.cshelf-name-en{
grid-area: en;
font-family: "IM Fell English", serif;
font-weight: 400;
font-size: 22px;
line-height: 1.1;
color: var(--ink);
align-self: end;
}
.cshelf-name-fa{
grid-area: fa;
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 16px;
direction: rtl;
color: var(--ink-soft);
line-height: 1.25;
}
.cshelf-tag{
grid-area: tag;
margin-top: 6px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 13px;
color: var(--ink-faint);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cshelf-arrow{
grid-area: arrow;
align-self: center;
justify-self: end;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--ink-soft);
color: var(--ink);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: serif;
font-size: 15px;
line-height: 1;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
/* ── Desktop chevron buttons ─────────────────────────────────────── */
.cshelf-nav{
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(70,40,15,.20);
background: rgba(255,250,240,.95);
color: var(--ink);
font-family: serif;
font-size: 26px;
line-height: 1;
cursor: pointer;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(70,40,15,.16);
transition: opacity .2s, transform .2s, background .2s;
}
.cshelf-nav-prev{ left: 6px; }
.cshelf-nav-next{ right: 6px; }
.cshelf-nav.is-disabled,
.cshelf-nav:disabled{
opacity: 0;
pointer-events: none;
}
.cshelf-nav:hover{
background: #fff;
transform: translateY(-50%) scale(1.05);
}
@media (hover: hover) and (min-width: 1025px){
.cshelf-nav{ display: inline-flex; }
}
/* ── Mobile dots ─────────────────────────────────────────────────── */
.cshelf-dots{
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
gap: 6px;
justify-content: center;
}
.cshelf-dots li{
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(70,40,15,.22);
transition: width 220ms ease-out, background 220ms;
}
.cshelf-dots li.is-on{
width: 22px;
background: var(--seal, #8a1c1c);
}
@media (min-width: 1025px){
.cshelf-dots{ display: none; }
}
/* ── Breakpoints ─────────────────────────────────────────────────── */
/* Desktop — 300px cards forcing 3.5 visible on a ~1100px viewport,
guaranteeing the 4th card is always half-peeked at the right edge. */
@media (min-width: 1025px){
.cshelf{ margin-left: 0; margin-right: 0; }
.cshelf-rail{ padding-left: 64px; padding-right: 64px; gap: 22px; }
.cshelf-card{ width: 300px; }
}
/* Tablet — slightly narrower */
@media (min-width: 641px) and (max-width: 1024px){
.cshelf-card{ width: 280px; }
.cshelf-name-en{ font-size: 21px; }
}
/* Mobile — 62vw cards so 2.3 are visible */
@media (max-width: 640px){
.cshelf-rail{ gap: 14px; padding: 4px 16px 18px; scroll-padding-inline: 16px; }
.cshelf-card{ width: 62vw; max-width: 280px; }
.cshelf-name-en{ font-size: 20px; }
.cshelf-name-fa{ font-size: 15px; }
.cshelf-glyph-ring{ width: 56%; }
.cshelf-stamp{ font-size: 11px; padding: 3px 7px; top: 10px; left: 10px; }
.cshelf-count{ font-size: 9.5px; padding: 3px 8px; top: 10px; right: 10px; }
}
/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.cshelf-card,
.cshelf-card:hover,
.cshelf-photo,
.cshelf-arrow,
.cshelf-head-hint{
transition: none !important;
transform: none !important;
animation: none !important;
}
.cshelf-rail{ scroll-behavior: auto; }
}
/* ══════════════════════════════════════════════════════════════════════
V8 CategoryHero — "Tonight's Service" cinematic full-bleed carousel
──────────────────────────────────────────────────────────────────────
Six full-bleed hero panels — one per category. Photo panels for
categories with item photography (Singles / Platters / Sides); embossed
Roman-numeral panels for the rest (Drinks / Breakfast / Extras),
turning the asymmetric-photo constraint into a brand rhythm — the arc
of a Persian meal moving from main dishes → drinks/ritual sides.
══════════════════════════════════════════════════════════════════════ */
/* Film-grain SVG (data-URI'd, ~1KB) — overlay on every panel for unity */
:root{
--hero-grain: url("data:image/svg+xml;utf8,");
--wax-red: #8a1c1c;
--cream: var(--paper-1, #ece0c4);
--ink-deep: #2b1d10;
}
.category-hero{
position: relative;
width: 100%;
margin: 0 0 24px;
background: var(--cream);
contain: layout paint;
border-radius: 8px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 6px 18px rgba(70,40,15,.12);
/* break edge-to-edge on mobile */
margin-left: calc(-1 * var(--shell-pad, 16px));
margin-right: calc(-1 * var(--shell-pad, 16px));
}
.hero-track{
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
touch-action: pan-y pinch-zoom;
scrollbar-width: none;
/* On RTL pages we still want swipe-left to advance — force LTR on the
track itself, only the inner content honours dir. Avoids the iOS
Safari scroll-snap RTL bug. */
direction: ltr;
outline: none;
}
.hero-track::-webkit-scrollbar{ display: none; }
.hero-track:focus-visible{ box-shadow: 0 0 0 3px rgba(138,28,28,.35) inset; }
.hero-panel-slot{
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.hero-panel{
position: relative;
height: 75vh;
height: 75dvh;
min-height: 460px;
max-height: 620px;
overflow: hidden;
isolation: isolate;
background: var(--cream);
}
@media (min-width: 980px){
.category-hero{
display: grid;
grid-template-columns: 1fr 280px;
gap: 0;
margin-left: 0; margin-right: 0;
}
.hero-track{ grid-column: 1 / 2; min-width: 0; }
.hero-running-order{ display: flex; grid-column: 2 / 3; }
.hero-pagination{ display: none; }
.hero-panel{ height: 540px; max-height: 540px; min-height: 460px; }
}
@media (min-width: 1280px){
.hero-panel{ height: 580px; max-height: 580px; }
}
/* ── Photo layer ────────────────────────────────────────────────── */
.hero-panel__photo{
position: absolute;
inset: 0;
background-size: cover;
background-position: center 42%;
transform: scale(1.02) translate3d(0,0,0);
will-change: transform;
z-index: 1;
/* Slight desaturate/contrast lift — turns mid-quality item photos into
editorial. The grain layer above does the rest. */
filter: saturate(.95) contrast(1.04) brightness(.96);
}
.hero-panel.is-active.hero-panel--photo .hero-panel__photo{
animation: hero-kenburns 16s ease-out forwards;
}
@keyframes hero-kenburns{
0% { transform: scale(1.02) translate3d(0,0,0); }
100% { transform: scale(1.10) translate3d(-1.2%, -0.6%, 0); }
}
/* ── Scrim: text legibility on photo panels ─────────────────────── */
.hero-panel__scrim{
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg,
rgba(43,29,16,0.20) 0%,
rgba(43,29,16,0.10) 35%,
rgba(43,29,16,0.55) 75%,
rgba(20,10,4,0.85) 100%);
}
/* ── Grain: unifies photo + emboss panels into one material ────── */
.hero-panel__grain{
position: absolute;
inset: 0;
z-index: 3;
background-image: var(--hero-grain);
background-size: 160px 160px;
opacity: .08;
mix-blend-mode: multiply;
pointer-events: none;
}
/* ── Embossed Roman numeral (photoless panels) ──────────────────── */
.hero-panel--emboss{
background:
radial-gradient(ellipse at 30% 20%, rgba(70,40,15,.05), transparent 60%),
var(--cream);
}
.hero-panel__numeral{
position: absolute;
right: 6%;
top: 50%;
transform: translateY(-50%);
font-family: "IM Fell English", "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(180px, 30vw, 360px);
line-height: 0.82;
color: rgba(74,46,30,0.06);
text-shadow:
1px 1px 0 rgba(255,250,235,0.65),
-1px -1px 0 rgba(74,46,30,0.20),
2px 2px 6px rgba(74,46,30,0.10);
letter-spacing: -0.04em;
pointer-events: none;
z-index: 2;
will-change: transform;
}
.hero-panel--emboss.is-active .hero-panel__numeral{
animation: hero-emboss-tilt 18s ease-in-out infinite alternate;
}
@keyframes hero-emboss-tilt{
0% { transform: translateY(-50%) rotate(-1.4deg); }
100% { transform: translateY(-50%) rotate(1.4deg); }
}
/* ── Content stack ──────────────────────────────────────────────── */
.hero-panel__inner{
position: absolute;
left: clamp(20px, 5vw, 64px);
right: clamp(20px, 5vw, 64px);
bottom: clamp(64px, 9vh, 80px);
max-width: 640px;
z-index: 5;
color: #f4ead0;
}
.hero-panel--emboss .hero-panel__inner{
color: var(--ink-deep);
bottom: clamp(56px, 8vh, 72px);
}
/* When the user is FA-reading we still keep the inner block LTR so the
EN title and the FA title read top-to-bottom, EN-first. */
.hero-panel__eyebrow{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: 0.88;
margin: 0 0 clamp(16px, 2.8vh, 28px);
}
.hero-panel__eyebrow .hp-glyph{
color: var(--wax-red);
letter-spacing: -0.05em;
font-weight: 500;
}
.hero-panel--photo .hero-panel__eyebrow .hp-glyph{ color: #d7a89e; }
.hp-eyebrow-text{ letter-spacing: 0.28em; }
.hero-panel__eyebrow .hp-counter{
font-family: "JetBrains Mono", "IM Fell English", serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
}
.hero-panel__eyebrow .hp-dot{ opacity: .55; }
.hero-panel__title{
margin: 0 0 clamp(14px, 2.5vh, 22px);
display: flex;
flex-direction: column;
gap: 2px;
font-weight: 400;
}
.hp-en{
font-family: "IM Fell English", "Cormorant Garamond", serif;
font-weight: 400;
font-size: clamp(44px, 8vw, 86px);
line-height: 0.94;
letter-spacing: -0.005em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
.hero-panel--emboss .hp-en{ text-shadow: none; }
.hp-rule{
display: block;
width: 72px;
height: 1px;
background: currentColor;
opacity: 0.55;
margin: 10px 0 8px;
}
.hp-fa{
font-family: "Gulzar", "Vazirmatn", serif;
font-weight: 500;
font-size: clamp(24px, 4vw, 42px);
line-height: 1.25;
opacity: 0.96;
}
.hero-panel__blurb{
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: clamp(15px, 1.45vw, 18px);
line-height: 1.55;
margin: 0 0 clamp(20px, 3.2vh, 28px);
max-width: 48ch;
opacity: 0.92;
}
.hero-panel__blurb .hp-count{
font-family: "JetBrains Mono", "IM Fell English", serif;
font-style: normal;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
opacity: 0.85;
font-size: 13px;
text-transform: uppercase;
}
.hero-panel__cta{
display: inline-flex;
align-items: center;
gap: 14px;
background: transparent;
border: 0;
padding: 10px 0;
color: inherit;
font-family: "IM Fell DW Pica SC", serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
position: relative;
transition: opacity .2s;
}
.hero-panel__cta::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: var(--wax-red);
transition: width 280ms cubic-bezier(.2,.7,.1,1);
}
.hero-panel__cta:hover::after,
.hero-panel__cta:focus-visible::after{ width: 100%; }
.hero-panel__cta .hp-arrow{
font-family: serif;
font-size: 18px;
transform: translateY(-1px);
color: var(--wax-red);
}
.hero-panel--photo .hero-panel__cta .hp-arrow{ color: #d7a89e; }
.hero-panel__cta [lang="fa"]{
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 18px;
letter-spacing: 0;
text-transform: none;
}
/* ── Pagination (mobile / narrow desktop) ──────────────────────── */
.hero-pagination{
position: absolute;
left: clamp(20px, 5vw, 64px);
right: clamp(20px, 5vw, 64px);
bottom: 14px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 6;
color: #f4ead0;
pointer-events: none;
}
.category-hero[data-active-photo="false"] .hero-pagination{ color: var(--ink-deep); }
.hero-pagination__dots{
display: flex;
gap: 8px;
pointer-events: auto;
}
.hero-pagination__dot{
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
border: 0;
padding: 0;
cursor: pointer;
transition: opacity 220ms, transform 220ms, background 220ms;
}
.hero-pagination__dot:hover{ opacity: 0.70; }
.hero-pagination__dot.is-active{
opacity: 1;
transform: scale(1.45);
background: var(--wax-red);
}
.hero-pagination__meta{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.88;
pointer-events: none;
}
.hero-pagination__counter{
font-family: "JetBrains Mono", monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 0.1em;
font-size: 10px;
}
/* ── Desktop running-order rail ───────────────────────────────── */
.hero-running-order{
display: none;
flex-direction: column;
background: var(--cream);
padding: 32px 24px 28px;
border-left: 1px solid rgba(74,46,30,0.16);
}
.hero-running-order__eyebrow{
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(74,46,30,0.55);
margin: 0 0 22px;
}
.hero-running-order__list{ display: flex; flex-direction: column; gap: 2px; }
.hero-running-order__row{
display: grid;
grid-template-columns: 32px 1fr;
align-items: baseline;
gap: 12px;
padding: 9px 4px;
border: 0;
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
color: var(--ink-deep);
opacity: 0.32;
transition: opacity 220ms, padding-left 220ms;
font-family: inherit;
}
.hero-running-order__row:hover{ opacity: 0.62; }
.hero-running-order__row.is-active{
opacity: 1;
padding-left: 12px;
}
.hero-running-order__roman{
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 17px;
line-height: 1;
color: var(--ink-deep);
position: relative;
}
.hero-running-order__row.is-active .hero-running-order__roman::before{
content: '';
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wax-red);
}
.hero-running-order__names{
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.hero-running-order__name{
font-family: "IM Fell DW Pica SC", serif;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.2;
}
.hero-running-order__fa{
font-family: "Gulzar", "Vazirmatn", serif;
direction: rtl;
font-size: 15px;
line-height: 1.3;
opacity: 0.85;
margin-top: 1px;
}
/* ── Reduced-motion overrides ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.hero-panel__photo,
.hero-panel__numeral{
animation: none !important;
transform: translateY(-50%) !important;
}
.hero-panel--photo .hero-panel__photo{ transform: scale(1.02) !important; }
.hero-track{ scroll-behavior: auto; }
}
/* ── Small-screen typography tightening ───────────────────────── */
@media (max-width: 600px){
.hero-panel{ min-height: 540px; }
.hero-panel__inner{ bottom: 64px; }
.hero-panel__title{ margin-bottom: 14px; }
.hp-en{ font-size: clamp(38px, 11vw, 56px); }
.hp-fa{ font-size: clamp(22px, 6vw, 28px); }
.hero-panel__blurb{ font-size: 14.5px; }
.hero-panel__cta{ font-size: 12.5px; letter-spacing: 0.18em; }
}
/* ══════════════════════════════════════════════════════════════════════
(Legacy V7 editorial CSS retained below — no longer rendered.)
══════════════════════════════════════════════════════════════════════ */
.cat-edit{
--section-tint: rgba(70,40,15,.05);
--section-edge: rgba(70,40,15,.18);
--section-ink: var(--ink);
position: relative;
margin: 28px 0 44px;
padding: 30px 22px 30px;
border-radius: 14px;
background:
radial-gradient(ellipse at 30% 0%, var(--section-tint), transparent 60%),
linear-gradient(180deg, var(--section-tint), transparent 28%),
var(--paper-2, #efe5cc);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 2px 6px rgba(70,40,15,.06),
0 14px 36px rgba(70,40,15,.10);
transition: background .55s ease-out, box-shadow .55s;
isolation: isolate;
overflow: hidden;
}
/* Subtle Persian-tile-inspired geometric dotted texture, very faint */
.cat-edit::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 2px 2px, rgba(70,40,15,.08) 0.6px, transparent 0.6px) 0 0 / 14px 14px,
radial-gradient(circle at 7px 7px, rgba(70,40,15,.05) 0.5px, transparent 0.5px) 0 0 / 18px 18px;
opacity: .35;
z-index: 0;
}
/* ── Header ─────────────────────────────────────────────────────── */
.cat-edit-head{
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 26px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ceh-kicker{
display: inline-block;
padding: 3px 12px;
background: rgba(255,250,240,.85);
border: 1px solid var(--section-edge);
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
}
.ceh-title{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 4px 0 0;
font-weight: normal;
}
.ceh-en{
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 38px;
line-height: 1;
color: var(--ink);
letter-spacing: .005em;
}
.ceh-divider{
display: inline-flex;
align-items: center;
gap: 12px;
width: 160px;
color: var(--section-ink);
opacity: .6;
transition: color .55s, opacity .55s;
}
.ceh-line{ flex: 1; height: 1px; background: currentColor; }
.ceh-orn{ font-size: 14px; line-height: 1; }
.ceh-fa{
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 26px;
direction: rtl;
color: var(--section-ink);
line-height: 1.4;
transition: color .55s;
}
/* ── Layout grid: featured + rail ───────────────────────────────── */
.cat-edit-layout{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
@media (max-width: 900px){
.cat-edit-layout{
grid-template-columns: 1fr;
gap: 18px;
}
}
/* ══════════ FEATURED HERO CARD ════════════════════════════════════ */
.cat-feat{
--cat-bg: #f1d6c9;
--cat-ink: #7a1d18;
--cat-accent: #a93026;
position: relative;
display: flex;
flex-direction: column;
background: var(--paper-1, #faf3df);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 4px 12px rgba(70,40,15,.10),
0 18px 40px rgba(70,40,15,.18);
animation: cf-enter .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes cf-enter{
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hero — large photo area, ~64% of card height */
.cf-hero{
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--cat-bg);
color: var(--cat-ink);
}
.cf-hero-photo{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.cat-feat:hover .cf-hero-photo{ transform: scale(1.04); }
/* 4-up collage */
.cf-collage{
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 4px;
width: 100%; height: 100%;
}
.cf-collage-main, .cf-collage-thumb{ position: relative; overflow: hidden; }
.cf-collage-main img, .cf-collage-thumb img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.cat-feat:hover .cf-collage-main img{ transform: scale(1.05); }
.cf-collage-side{
display: grid;
grid-auto-rows: 1fr;
gap: 4px;
}
/* Icon fallback for photoless categories */
.cf-icon-big{
position: absolute;
inset: 0;
display: flex;
align-items: center; justify-content: center;
color: var(--cat-ink);
}
.cf-icon-big svg{
width: 45%;
height: 65%;
stroke-width: 1.4;
filter: drop-shadow(0 4px 0 rgba(0,0,0,.06));
animation: cf-icon-float 6s ease-in-out infinite;
}
.cf-icon-glow{
position: absolute;
width: 55%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%);
border-radius: 50%;
pointer-events: none;
animation: cf-glow-pulse 5s ease-in-out infinite;
}
@keyframes cf-icon-float{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes cf-glow-pulse{
0%, 100% { opacity: .8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.cat-feat.icon-only .cf-hero{
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px),
radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%),
var(--cat-bg);
}
.cf-shade{
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 60%, rgba(40,20,10,.18));
}
.cf-chapter{
position: absolute;
top: 16px; right: 18px;
display: inline-flex;
align-items: center; justify-content: center;
min-width: 44px;
padding: 5px 12px;
background: rgba(255,250,240,.95);
border-radius: 999px;
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 20px;
color: var(--cat-ink);
line-height: 1;
letter-spacing: .04em;
pointer-events: none;
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(70,40,15,.20);
}
/* Featured body — big bilingual title + tagline + preview + CTA */
.cf-body{
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 30px 30px;
background: var(--paper-1, #faf3df);
}
.cf-title{
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
font-weight: normal;
}
.cf-title-en{
font-family: "IM Fell English", serif;
font-size: 48px;
line-height: 1.02;
color: var(--ink);
letter-spacing: .005em;
}
.cf-title-fa{
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 32px;
direction: rtl;
color: var(--cat-ink);
line-height: 1.3;
}
.cf-tag{
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
color: var(--ink-soft);
}
.cf-tag-en{ font-size: 17px; }
.cf-tag-fa{
direction: rtl;
font-family: "Vazirmatn", sans-serif;
font-style: normal;
font-size: 13px;
color: var(--ink-faint);
}
.cf-preview{
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
font-family: "Cormorant Garamond", serif;
font-size: 15.5px;
color: var(--ink-soft);
line-height: 1.5;
padding-top: 8px;
border-top: 1px dashed var(--cat-accent);
border-color: rgba(0,0,0,.10);
}
.cf-preview-more{
display: inline-block;
padding: 1px 8px;
background: var(--cat-bg);
color: var(--cat-ink);
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
}
.cf-cta-row{
margin-top: 4px;
display: flex;
align-items: center;
gap: 12px;
}
.cf-cta{
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
background: var(--cat-ink);
color: #fff8e6;
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
box-shadow: 0 6px 18px rgba(70,40,15,.22);
}
.cf-cta-arrow{ font-family: serif; font-size: 18px; }
.cf-cta-out{ background: rgba(120,50,30,.12); color: #8a3a2a; }
/* Bottom accent bar */
.cf-accent{
display: block;
height: 6px;
background: var(--cat-accent);
opacity: 1;
}
/* ══════════ SIDE RAIL OF THUMBNAIL CARDS ═══════════════════════════ */
.cat-edit-rail{
display: flex;
flex-direction: column;
gap: 12px;
align-content: start;
}
@media (max-width: 900px){
.cat-edit-rail{
flex-direction: row;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 4px 16px;
margin: 0 -22px;
padding-left: 22px; padding-right: 22px;
}
.cat-edit-rail::-webkit-scrollbar{ display: none; }
}
.cat-thumb{
--cat-bg: #f1d6c9;
--cat-ink: #7a1d18;
--cat-accent: #a93026;
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 14px 10px 10px;
background: var(--paper-1, #faf3df);
border: 1px solid rgba(70,40,15,.08);
border-left: 4px solid var(--cat-accent);
border-radius: 10px;
cursor: pointer;
text-align: left;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(70,40,15,.06);
transition:
transform .25s cubic-bezier(.2,.7,.2,1),
box-shadow .25s,
border-left-width .25s,
background .25s;
font-family: inherit;
color: var(--ink);
}
.cat-thumb:hover{
transform: translateX(-4px);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(70,40,15,.16);
border-left-width: 6px;
background: linear-gradient(90deg, rgba(255,255,255,.5), transparent), var(--paper-1, #faf3df);
}
.cat-thumb.is-out{ opacity: .55; filter: grayscale(.5); }
@media (max-width: 900px){
.cat-thumb{
flex: 0 0 78%;
scroll-snap-align: start;
grid-template-columns: 78px 1fr;
}
.cat-thumb .ct-arrow{ display: none; }
}
.ct-art{
position: relative;
width: 88px;
height: 88px;
border-radius: 8px;
overflow: hidden;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%),
var(--cat-bg);
color: var(--cat-ink);
display: flex;
align-items: center; justify-content: center;
}
.ct-art img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s ease-out;
}
.cat-thumb:hover .ct-art img{ transform: scale(1.06); }
.ct-icon{
display: inline-flex;
align-items: center; justify-content: center;
width: 64%; height: 80%;
color: var(--cat-ink);
}
.ct-icon svg{ width: 100%; height: 100%; stroke-width: 1.4; }
@media (max-width: 900px){
.ct-art{ width: 78px; height: 78px; }
}
.ct-info{
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto auto;
gap: 2px 8px;
align-items: baseline;
min-width: 0;
}
.ct-num{
grid-row: 1; grid-column: 1;
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 14px;
color: var(--cat-ink);
line-height: 1;
}
.ct-title-en{
grid-row: 1; grid-column: 2;
font-family: "IM Fell DW Pica SC", serif;
font-size: 13.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-title-fa{
grid-row: 2; grid-column: 1 / -1;
font-family: "Gulzar", "Vazirmatn", serif;
direction: rtl;
font-size: 16px;
color: var(--cat-ink);
line-height: 1.3;
margin-top: 2px;
}
.ct-tag{
grid-row: 3; grid-column: 1 / -1;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-meta{
grid-row: 4; grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: .05em;
color: var(--ink-faint);
}
.ct-meta .dot{ color: var(--ink-faint); }
.ct-meta-out{ color: #8a3a2a; }
.ct-arrow{
font-family: serif;
font-size: 22px;
color: var(--cat-ink);
opacity: .5;
transition: transform .22s ease-out, opacity .22s;
margin-left: 4px;
line-height: 1;
}
.cat-thumb:hover .ct-arrow{ opacity: 1; transform: translateX(4px); }
/* Mobile featured tightens */
@media (max-width: 900px){
.cat-edit{ padding: 22px 16px 22px; }
.cf-body{ padding: 20px 22px 24px; gap: 10px; }
.cf-title-en{ font-size: 36px; }
.cf-title-fa{ font-size: 26px; }
.cf-tag-en{ font-size: 15px; }
.cf-preview{ font-size: 14px; }
.cf-cta{ padding: 11px 18px; font-size: 12px; letter-spacing: .12em; }
}
@media (max-width: 480px){
.cat-edit-head{ margin-bottom: 18px; }
.ceh-en{ font-size: 28px; }
.ceh-fa{ font-size: 22px; }
.ceh-divider{ width: 110px; }
.cf-title-en{ font-size: 30px; }
.cf-title-fa{ font-size: 22px; }
.cf-chapter{ top: 12px; right: 14px; font-size: 17px; min-width: 36px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce){
.cat-feat{ animation: none; }
.cf-icon-big svg, .cf-icon-glow{ animation: none; }
}
/* (Legacy carousel styles below kept for any stray reference) */
.cat-section{
--section-tint: rgba(70,40,15,.04);
--section-edge: rgba(70,40,15,.15);
--section-ink: var(--ink);
position: relative;
margin: 26px 0 42px;
padding: 28px 0 4px;
border-radius: 14px;
background:
radial-gradient(ellipse at 50% 0%, var(--section-tint), transparent 60%),
linear-gradient(180deg, var(--section-tint), transparent 35%),
transparent;
transition: background .6s ease-out;
isolation: isolate;
}
.cat-section::before{
/* faint top + bottom hairlines so the section feels framed */
content: "";
position: absolute;
inset: 0;
border-top: 1px dashed var(--section-edge);
border-bottom: 1px dashed var(--section-edge);
pointer-events: none;
opacity: .35;
transition: opacity .6s, border-color .6s;
border-radius: inherit;
}
/* ── Section header — Persian calligraphic centerpiece ────────────── */
.cat-section-head{
text-align: center;
padding: 0 16px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.csh-kicker{
display: inline-block;
padding: 3px 10px;
background: rgba(255,250,240,.7);
border: 1px solid var(--section-edge);
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.csh-title{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 4px 0 2px;
font-weight: normal;
}
.csh-en{
font-family: "IM Fell English", serif;
font-size: 34px;
font-style: italic;
color: var(--ink);
letter-spacing: .005em;
line-height: 1;
}
.csh-divider{
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--section-ink);
opacity: .55;
transition: color .6s, opacity .6s;
width: 140px;
}
.csh-line{
flex: 1;
height: 1px;
background: currentColor;
}
.csh-orn{
font-size: 14px;
line-height: 1;
}
.csh-fa{
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 24px;
direction: rtl;
color: var(--section-ink);
line-height: 1.4;
transition: color .6s;
}
.csh-hint{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 13px;
color: var(--ink-faint);
animation: csh-hint-pulse 2.4s ease-in-out 1.5s infinite;
}
.csh-hint-arrow{
display: inline-block;
font-size: 16px;
transform: translateY(-1px);
}
.csh-hint-arrow:first-child{ animation: csh-arrow-l 2.4s ease-in-out 1.5s infinite; }
.csh-hint-arrow:last-child { animation: csh-arrow-r 2.4s ease-in-out 1.5s infinite; }
@keyframes csh-hint-pulse{
0%, 100% { opacity: .5; }
50% { opacity: 1; }
}
@keyframes csh-arrow-l{
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-4px); }
}
@keyframes csh-arrow-r{
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
.cat-carousel{
position: relative;
margin: 0;
/* break out of the .order-main container's padding so the carousel
extends edge-to-edge of the viewport on mobile */
margin-left: calc(-1 * var(--shell-pad, 16px));
margin-right: calc(-1 * var(--shell-pad, 16px));
}
.cat-carousel-track{
display: flex;
gap: 22px;
padding: 18px var(--shell-pad, 16px) 28px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
perspective: 1400px;
}
.cat-carousel-track::-webkit-scrollbar{ display: none; }
.cat-grid-sentinel{ height: 1px; margin: 0; pointer-events: none; }
/* Cards in the carousel get a fixed flex basis — mobile shows ~85% of one
card with a peek of the next; tablet+ shows 2 cards; wide desktop 2.5. */
.cat-carousel .cat-card{
flex: 0 0 86%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
@media (min-width: 600px){
.cat-carousel .cat-card{ flex-basis: 60%; }
}
@media (min-width: 900px){
.cat-carousel .cat-card{ flex-basis: 46%; scroll-snap-align: start; }
}
@media (min-width: 1200px){
.cat-carousel .cat-card{ flex-basis: 38%; }
}
/* Old grid kept as a fallback if the React tree somehow renders it */
.cat-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin: 28px 0 44px;
}
.cat-card{
--cat-bg: #f1d6c9;
--cat-ink: #7a1d18;
--cat-accent: #a93026;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
padding: 0;
background: var(--paper-1, #faf3df);
border: 0;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
transform-origin: center bottom;
transition:
transform .25s cubic-bezier(.2,.7,.2,1),
box-shadow .25s ease-out;
font-family: inherit;
color: var(--ink);
box-shadow:
0 1px 2px rgba(70,40,15,.08),
0 6px 18px rgba(70,40,15,.12);
}
.cat-card:hover{
transform: translateY(-6px);
box-shadow:
0 1px 2px rgba(70,40,15,.10),
0 20px 36px rgba(70,40,15,.22);
}
.cat-card.active{
box-shadow:
0 0 0 2px var(--cat-accent),
0 16px 32px rgba(70,40,15,.20);
transform: translateY(-4px);
}
.cat-card.is-out{ filter: grayscale(.6); opacity: .55; }
/* ══════ HERO area — photo collage or icon fallback ════════════════════ */
.cat-card .cc-hero{
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
background: var(--cat-bg);
overflow: hidden;
color: var(--cat-ink);
}
/* Single hero photo (category_photo OR single item photo) */
.cat-card .cc-hero-photo{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.cat-card:hover .cc-hero-photo{ transform: scale(1.06); }
/* Photo collage — large main + 2 stacked side thumbs */
.cat-card .cc-collage{
display: grid;
grid-template-columns: 1.85fr 1fr;
gap: 4px;
width: 100%; height: 100%;
background: var(--paper-3, #f3e9ce);
}
.cat-card .cc-collage-main{
position: relative;
overflow: hidden;
}
.cat-card .cc-collage-main img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.cat-card .cc-collage-side{
display: grid;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
.cat-card .cc-collage-thumb{
position: relative;
overflow: hidden;
}
.cat-card .cc-collage-thumb img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.cat-card:hover .cc-collage-main img{ transform: scale(1.08); }
.cat-card:hover .cc-collage-thumb:nth-child(1) img{ transform: scale(1.10); }
.cat-card:hover .cc-collage-thumb:nth-child(2) img{ transform: scale(1.06); }
/* Big-icon fallback (drinks / breakfast / addons when items have no photos) */
.cat-card.icon-only .cc-hero{
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px),
radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%),
var(--cat-bg);
}
.cat-card .cc-icon-big{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--cat-ink);
transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.cat-card .cc-icon-big svg{
width: 50%;
height: 70%;
stroke-width: 1.4;
filter: drop-shadow(0 4px 0 rgba(0,0,0,.06));
animation: cc-icon-float 6s ease-in-out infinite;
}
.cat-card:hover .cc-icon-big{ transform: scale(1.06); }
.cat-card .cc-icon-glow{
position: absolute;
width: 60%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%);
border-radius: 50%;
pointer-events: none;
animation: cc-glow-pulse 5s ease-in-out infinite;
}
@keyframes cc-icon-float{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes cc-glow-pulse{
0%, 100% { opacity: .8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
/* Roman numeral as a chapter marker top-right of the hero */
.cat-card .cc-chapter{
position: absolute;
top: 14px;
right: 16px;
display: inline-flex;
align-items: center; justify-content: center;
min-width: 40px;
padding: 4px 10px;
background: rgba(255,250,240,.92);
border-radius: 999px;
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 18px;
color: var(--cat-ink);
line-height: 1;
letter-spacing: .04em;
pointer-events: none;
backdrop-filter: blur(4px);
box-shadow: 0 2px 6px rgba(70,40,15,.18);
}
/* Strong gradient overlay for legibility of overlaid title text */
.cat-card .cc-hero-shade{
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(40,20,10,.18) 0%,
transparent 24%,
transparent 42%,
rgba(40,20,10,.55) 78%,
rgba(20,10,4,.78) 100%
);
}
/* TITLE block OVERLAID on the hero — bold and high-contrast */
.cat-card .cc-hero-titles{
position: absolute;
left: 22px;
right: 22px;
bottom: 18px;
display: flex;
flex-direction: column;
gap: 2px;
color: #fff8e6;
text-align: left;
pointer-events: none;
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.cat-card .cc-title-en{
font-family: "IM Fell English", serif;
font-size: 30px;
letter-spacing: .015em;
line-height: 1.05;
color: #fff8e6;
}
.cat-card .cc-title-fa{
display: block;
font-family: "Gulzar", "Vazirmatn", serif;
font-size: 22px;
direction: rtl;
color: #fff8e6;
line-height: 1.5;
opacity: .95;
}
/* BODY below the hero — preview line + CTA pill on cream */
.cat-card .cc-body{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 22px 20px;
background: var(--paper-1, #faf3df);
}
.cat-card .cc-preview{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.45;
width: 100%;
}
.cat-card .cc-preview-text{
color: var(--ink-soft);
}
.cat-card .cc-preview-more{
display: inline-block;
padding: 1px 8px;
background: var(--cat-bg);
color: var(--cat-ink);
border-radius: 999px;
font-style: normal;
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
}
/* CTA pill — the "tap to browse" affordance with a sliding arrow */
.cat-card .cc-cta{ display: inline-flex; align-items: center; }
.cat-card .cc-cta-pill{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: var(--cat-ink);
color: #fff8e6;
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
transition: transform .22s ease-out, box-shadow .22s, background .22s;
box-shadow: 0 4px 10px rgba(70,40,15,.18);
}
.cat-card:hover .cc-cta-pill{
transform: translateX(3px);
box-shadow: 0 6px 16px rgba(70,40,15,.28);
}
.cat-card .cc-cta-arrow{
font-family: serif;
font-size: 16px;
line-height: 1;
transition: transform .22s;
}
.cat-card:hover .cc-cta-arrow{ transform: translateX(4px); }
.cat-card .cc-cta-out{
background: rgba(120,50,30,.12);
color: #8a3a2a;
cursor: not-allowed;
}
/* Bottom signature accent bar */
.cat-card .cc-accent{
display: block;
height: 4px;
background: var(--cat-accent);
opacity: .55;
transition: height .22s ease-out, opacity .22s;
}
.cat-card.soft-active .cc-accent{ height: 5px; opacity: .85; }
.cat-card:hover .cc-accent{ height: 5px; opacity: .9; }
.cat-card.active .cc-accent{ height: 7px; opacity: 1; }
/* Carousel cards: inactive scale slightly + dim, focused card lifts.
On desktop the hover state adds a small 3D tilt and a glow halo. */
.cat-carousel .cat-card{
transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, opacity .4s;
transform: scale(.94);
opacity: .82;
will-change: transform;
transform-style: preserve-3d;
}
.cat-carousel .cat-card.soft-active,
.cat-carousel .cat-card.active{
transform: scale(1);
opacity: 1;
}
/* Active card glow halo — soft radial bloom in the category colour */
.cat-carousel .cat-card.soft-active::after,
.cat-carousel .cat-card.active::after{
content: "";
position: absolute;
inset: -22px;
z-index: -1;
border-radius: 22px;
background: radial-gradient(
ellipse at 50% 60%,
var(--cat-accent) 0%,
transparent 65%
);
opacity: .18;
filter: blur(18px);
pointer-events: none;
animation: cc-halo-breath 3.4s ease-in-out infinite;
}
@keyframes cc-halo-breath{
0%, 100% { opacity: .15; transform: scale(1); }
50% { opacity: .25; transform: scale(1.03); }
}
/* Desktop hover — subtle 3D tilt */
@media (hover: hover) and (pointer: fine){
.cat-carousel .cat-card:hover{
transform: scale(1.01) translateY(-4px) rotateX(2deg);
opacity: 1;
}
.cat-carousel .cat-card.active:hover,
.cat-carousel .cat-card.soft-active:hover{
transform: scale(1.02) translateY(-6px) rotateX(2deg);
}
}
/* ── Navigation arrows ────────────────────────────────────────────── */
.cc-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(70,40,15,.20);
background: rgba(255,250,240,.95);
color: var(--ink);
font-family: serif;
font-size: 28px;
line-height: 1;
display: flex;
align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(70,40,15,.16);
transition: opacity .2s, transform .2s, background .2s;
backdrop-filter: blur(8px);
}
.cc-nav:hover{ background: #fff; transform: translateY(-50%) scale(1.06); }
.cc-nav.is-disabled{ opacity: 0; pointer-events: none; }
.cc-nav-prev{ left: 8px; }
.cc-nav-next{ right: 8px; }
/* hide on mobile — touch swipe is enough */
@media (max-width: 720px){
.cc-nav{ display: none; }
}
/* ── Pagination — Roman-numeral pills ───────────────────────────── */
.cc-dots{
display: flex;
justify-content: center;
gap: 6px;
margin: 4px 0 18px;
padding: 0 16px;
flex-wrap: wrap;
}
.cc-dot{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid rgba(70,40,15,.16);
background: rgba(255,250,240,.7);
color: var(--ink-soft);
border-radius: 999px;
cursor: pointer;
transition:
max-width .35s ease-out,
padding .25s,
background .25s,
border-color .25s,
color .25s,
transform .2s;
max-width: 44px;
overflow: hidden;
white-space: nowrap;
font-family: "IM Fell English", serif;
}
.cc-dot-num{
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 13px;
line-height: 1;
letter-spacing: .04em;
}
.cc-dot-label{
font-family: "IM Fell DW Pica SC", serif;
font-size: 10.5px;
letter-spacing: .15em;
text-transform: uppercase;
opacity: 0;
max-width: 0;
transition: opacity .25s, max-width .35s ease-out;
}
.cc-dot:hover{
color: var(--ink);
border-color: rgba(70,40,15,.30);
background: rgba(255,250,240,.95);
}
.cc-dot.active{
max-width: 200px;
padding: 6px 14px;
background: var(--section-ink, var(--ink));
border-color: var(--section-ink, var(--ink));
color: #fff8e6;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(70,40,15,.16);
}
.cc-dot.active .cc-dot-label{
opacity: 1;
max-width: 160px;
}
/* ── Responsive title sizing ─────────────────────────────────────── */
@media (max-width: 720px){
.cat-card .cc-title-en{ font-size: 24px; }
.cat-card .cc-title-fa{ font-size: 18px; }
.cat-card .cc-hero-titles{ left: 16px; right: 16px; bottom: 14px; }
.cat-card .cc-body{ padding: 12px 16px 16px; gap: 8px; }
.cat-card .cc-preview{ font-size: 13px; }
.cat-card .cc-cta-pill{ padding: 7px 13px; font-size: 11px; letter-spacing: .1em; }
.cat-card .cc-chapter{ top: 10px; right: 12px; min-width: 32px; padding: 3px 8px; font-size: 15px; }
.cat-card .cc-icon-big svg{ width: 38%; height: 60%; }
}
@media (max-width: 380px){
.cat-card .cc-title-en{ font-size: 20px; }
.cat-card .cc-title-fa{ font-size: 16px; }
}
/* Section header responsive scaling */
@media (max-width: 720px){
.cat-section{ padding: 20px 0 4px; margin: 18px 0 28px; }
.cat-section-head{ padding: 0 12px 14px; gap: 4px; }
.csh-en{ font-size: 26px; }
.csh-fa{ font-size: 20px; }
.csh-divider{ width: 100px; }
.csh-hint{ font-size: 12px; }
}
@media (max-width: 420px){
.csh-en{ font-size: 22px; }
.csh-fa{ font-size: 17px; }
}
@media (prefers-reduced-motion: reduce){
.cat-card .cc-icon-big svg,
.cat-card .cc-icon-glow,
.cat-carousel .cat-card.soft-active::after,
.cat-carousel .cat-card.active::after,
.csh-hint,
.csh-hint-arrow{ animation: none; }
.cat-carousel-track{ scroll-behavior: auto; }
.cat-section{ transition: none; }
}
/* ──────────────────────────────────────────────────────────────────────
CategoryJumpPill — sticky compact strip with Roman numerals.
Toggled by IntersectionObserver once the grid scrolls out of view.
────────────────────────────────────────────────────────────────────── */
.cat-jump-pill{
position: sticky;
top: 60px;
z-index: 30;
margin: 0 0 18px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .2s ease-out, transform .2s ease-out;
}
.cat-jump-pill.is-visible{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cat-jump-pill .cjp-inner{
display: flex;
gap: 4px;
padding: 6px 10px;
background: var(--paper-1, #ece0c4);
border: 1px solid var(--ink-faint);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(70,40,15,.10);
overflow-x: auto;
scrollbar-width: none;
}
.cat-jump-pill .cjp-inner::-webkit-scrollbar{ display: none; }
.cat-jump-pill .cjp-chip{
position: relative;
flex: 0 0 auto;
width: 36px; height: 36px;
border: 1px solid transparent;
background: transparent;
border-radius: 50%;
font-family: "IM Fell English", serif;
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, border-color .15s;
}
.cat-jump-pill .cjp-chip:hover{ background: rgba(70,40,15,.06); color: var(--ink); }
.cat-jump-pill .cjp-chip.active{
background: rgba(138,28,28,.10);
border-color: var(--seal);
color: var(--seal);
font-weight: 700;
}
.cat-jump-pill .cjp-num{ pointer-events: none; }
/* Hover tooltip with EN/FA — not shown on touch devices */
.cat-jump-pill .cjp-tip{
position: absolute;
top: 100%; left: 50%;
transform: translate(-50%, 6px);
background: var(--ink);
color: var(--paper-1, #ece0c4);
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
}
.cat-jump-pill .cjp-tip-en{ display: block; font-family: "IM Fell DW Pica SC", serif; letter-spacing: .08em; }
.cat-jump-pill .cjp-tip-fa{ display: block; font-family: "Vazirmatn", sans-serif; direction: rtl; }
@media (hover: hover){
.cat-jump-pill .cjp-chip:hover .cjp-tip{ opacity: 1; }
}
/* ──────────────────────────────────────────────────────────────────────
InlineSuggestion — slim ribbon rendered below a row that was just
added to the cart. Auto-clears after 12s via lastAddedId timer.
────────────────────────────────────────────────────────────────────── */
.row-inline-suggest{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 8px 12px;
margin: -2px 0 10px;
background: rgba(243,233,206,.55);
border-top: 2px dashed rgba(138,28,28,.25);
border-left: 3px solid var(--seal);
border-radius: 0 4px 4px 0;
font-size: 13px;
animation: ris-slide .25s ease-out;
}
@keyframes ris-slide{
from{ opacity: 0; transform: translateY(-4px); }
to{ opacity: 1; transform: translateY(0); }
}
.row-inline-suggest .ris-label{
display: flex; flex-direction: column;
line-height: 1.1;
}
.row-inline-suggest .ris-en{
font-family: "Cormorant Garamond", serif;
font-style: italic;
color: var(--ink-soft);
}
.row-inline-suggest .ris-fa{
font-family: "Vazirmatn", sans-serif;
direction: rtl;
font-size: 11px;
color: var(--ink-faint);
}
.row-inline-suggest .ris-chips{ display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.row-inline-suggest .ris-chip{
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
background: var(--paper-1, #ece0c4);
border: 1px solid var(--ink-faint);
border-radius: 999px;
font-family: "IM Fell DW Pica SC", serif;
font-size: 12px;
letter-spacing: .08em;
color: var(--ink);
cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
}
.row-inline-suggest .ris-chip:hover{
background: rgba(138,28,28,.06);
border-color: var(--seal);
transform: translateY(-1px);
}
.row-inline-suggest .ris-chip-price{
font-family: "IM Fell English", serif;
font-size: 12px;
color: var(--seal);
font-style: italic;
}
.row-inline-suggest .ris-dismiss{
background: transparent;
border: 0;
color: var(--ink-faint);
font-size: 14px;
cursor: pointer;
padding: 4px 6px;
}
.row-inline-suggest .ris-dismiss:hover{ color: var(--ink); }
/* ──────────────────────────────────────────────────────────────────────
PairingChips — persistent suggestion strip inside the OrderRail and
MobileCartSheet. Replaces the legacy single-purpose .rail-nudge.
────────────────────────────────────────────────────────────────────── */
.pairing-chips{
margin-top: 14px;
padding: 10px 8px;
background: rgba(243,233,206,.55);
border: 1px dashed var(--ink-faint);
border-radius: 6px;
}
.pairing-chips .pc-head{
display: flex; flex-direction: column;
margin-bottom: 8px;
line-height: 1.2;
}
.pairing-chips .pc-en{
font-family: "Cormorant Garamond", serif;
font-size: 13px;
font-style: italic;
color: var(--ink-soft);
}
.pairing-chips .pc-fa{
font-family: "Vazirmatn", sans-serif;
direction: rtl;
font-size: 11px;
color: var(--ink-faint);
}
.pairing-chips .pc-row{ display: flex; flex-direction: column; gap: 6px; }
.pairing-chips .pc-chip{
display: grid;
grid-template-columns: 32px 1fr auto auto;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--paper-1, #ece0c4);
border: 1px solid var(--ink-faint);
border-radius: 4px;
/* The WHOLE chip is the tap target (not just the small +price pill) — big
finger-friendly hit area on mobile. */
cursor: pointer;
text-align: start;
transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease), transform .12s var(--ease-out, ease);
-webkit-tap-highlight-color: rgba(138,28,28,.12);
}
.pairing-chips .pc-chip:hover{
background: #f6ecd2;
border-color: var(--ink);
}
.pairing-chips .pc-chip:active{ transform: scale(.99); }
.pairing-chips .pc-chip:focus-visible{
outline: 2px solid var(--seal);
outline-offset: 2px;
}
/* On hover of the whole chip, brighten the price pill so it reads as the CTA. */
.pairing-chips .pc-chip:hover .pc-add{ filter: brightness(1.08); }
.pairing-chips .pc-icon{
width: 32px; height: 32px;
display: inline-flex;
align-items: center; justify-content: center;
color: var(--ink-soft);
overflow: hidden;
border-radius: 4px;
}
.pairing-chips .pc-icon svg{ width: 24px; height: 24px; }
.pairing-chips .pc-icon--photo img{
width: 100%; height: 100%;
object-fit: cover;
filter: sepia(.1) saturate(.95);
}
.pairing-chips .pc-info{ display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pairing-chips .pc-name-en{
font-family: "IM Fell DW Pica SC", serif;
font-size: 12px;
letter-spacing: .1em;
color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pairing-chips .pc-name-fa{
font-family: "Vazirmatn", sans-serif;
direction: rtl;
font-size: 11px;
color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Visual "add" pill only — the click is handled by the whole .pc-chip.
pointer-events:none so a tap anywhere on the chip counts as one add. */
.pairing-chips .pc-add{
background: var(--seal);
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 999px;
font-family: "IM Fell English", serif;
font-size: 13px;
white-space: nowrap;
pointer-events: none;
transition: filter .15s;
}
.pairing-chips .pc-dismiss{
background: transparent;
border: 0;
color: var(--ink-faint);
font-size: 14px;
cursor: pointer;
padding: 6px 6px;
line-height: 1;
position: relative;
z-index: 1;
}
.pairing-chips .pc-dismiss:hover{ color: var(--ink); }
.price-tag{ display:flex; align-items:baseline; gap: 4px; }
.price-tag .num{
font-family:"IM Fell English",serif; font-size: 28px;
color: var(--ink); font-weight: 500;
}
.price-tag .cur{
font-family:"JetBrains Mono",monospace; font-size: 11px;
color: var(--ink-faint); letter-spacing: .15em;
}
.stepper{
display:flex; align-items:center; gap: 0;
border: 1px solid var(--ink);
height: 38px;
}
.stepper button{
appearance:none; border:none; background:transparent;
width: 36px; height: 36px;
font-family:"IM Fell English",serif; font-size: 22px;
cursor:pointer; color: var(--ink);
}
.stepper button:hover{ background: var(--ink); color: var(--paper-1); }
.stepper .qty{
width: 32px; text-align:center;
font-family:"JetBrains Mono",monospace; font-size: 14px; font-weight: 600;
}
.add-btn{
appearance:none; border: 1px solid var(--ink);
background: var(--ink); color: var(--paper-1);
height: 40px; padding: 0 20px; cursor:pointer;
font-family:"IM Fell DW Pica SC",serif; font-size: 12px;
letter-spacing: .22em; text-transform: uppercase;
box-shadow: 0 2px 0 -1px var(--seal-deep);
transition: transform .12s ease, background .15s ease, box-shadow .12s ease;
}
.add-btn:hover{
background: var(--seal); border-color: var(--seal);
box-shadow: 0 3px 0 -1px var(--ink);
transform: translateY(-1px);
}
.add-btn:active{
transform: translateY(1px);
box-shadow: 0 0 0 0 var(--seal-deep);
}
.add-btn:focus-visible{
outline: 2px solid var(--seal);
outline-offset: 3px;
}
.platters{
display:grid; grid-template-columns: 1fr;
gap: 22px; margin: 28px 0 50px;
}
.platter{
display:grid; grid-template-columns: 280px 1fr auto;
gap: var(--s-6); align-items:center;
border: 1px solid var(--rule);
background: rgba(255,245,220,.35);
padding: var(--s-5);
position: relative;
box-shadow: var(--shadow-1);
transition: box-shadow var(--t-med) var(--ease-out),
transform var(--t-med) var(--ease-out),
border-color var(--t-med) var(--ease-out);
}
.platter:hover{
box-shadow: var(--shadow-3);
transform: translateY(-2px);
border-color: var(--ink-faint);
}
.platter:hover .platter-img img{ transform: scale(1.04); }
.platter-img img{
transition: transform var(--t-slow) var(--ease-out);
}
.platter.crown::before{
content: "★ Khan's Pick · پیشنهاد ویژه";
position: absolute; top: -1px; left: 24px;
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .25em; padding: 6px 12px;
background: var(--seal); color: var(--paper-1);
}
.platter-img{
aspect-ratio: 1.1 / 1;
background:
repeating-linear-gradient(135deg, rgba(70,40,15,.05) 0 8px, transparent 8px 16px),
linear-gradient(180deg, rgba(70,40,15,.05), rgba(70,40,15,.12));
border: 1px solid var(--rule);
display:flex; align-items:center; justify-content:center;
position: relative;
}
.platter-img .ph{
font-family:"JetBrains Mono",monospace; font-size: 10px;
background: var(--paper-1); padding: 4px 10px;
color: var(--ink-faint); letter-spacing: .2em; text-transform: uppercase;
}
.platter-info h3{
margin: 0 0 4px;
display:flex; align-items:baseline; gap: 14px;
}
.platter-info h3 .en{
font-family:"IM Fell English",serif; font-style:italic; font-weight:400;
font-size: 32px;
}
.platter-info h3 .fa{
font-family:"Vazirmatn",serif; font-weight: 700; font-size: 22px;
color: var(--ink-soft);
}
.platter-info .serves{
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 12px;
}
/* "Includes" eyebrow above the component list — makes it explicit to the
customer what the platter contains. */
.platter-info .platter-includes-label{
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .22em; text-transform: uppercase;
color: var(--seal);
margin: 0 0 6px;
}
.platter-info .platter-includes-label.scr-arab{
font-family:"Vazirmatn",sans-serif; letter-spacing: 0; font-size: 12.5px;
}
.platter-info ul{
list-style: none; padding: 0; margin: 0;
display:flex; flex-wrap:wrap; gap: 4px 14px;
font-family:"Cormorant Garamond",serif; font-size: 16px;
color: var(--ink-soft);
}
.platter-info ul li{ position: relative; padding-left: 14px; }
.platter-info ul li::before{
content:"·"; position: absolute; left: 4px; top: -2px;
font-size: 22px; line-height: 1; color: var(--seal);
}
.platter-info ul li .fa{ font-family:"Vazirmatn",serif; font-size: 14px; color: var(--ink-faint); margin-right: 4px; }
/* RTL: move the component-bullet marker to the right of each item. */
[dir="rtl"] .platter-info ul li{ padding-left: 0; padding-right: 14px; }
[dir="rtl"] .platter-info ul li::before{ left: auto; right: 4px; }
.platter-action{
display:flex; flex-direction:column; align-items:flex-end; gap: 12px;
min-width: 140px;
}
.platter-action .price-tag .num{ font-size: 38px; }
/* ========== Order rail ========== */
.rail{
display: flex;
flex-direction: column;
background: rgba(255,245,220,.6);
border: 1px solid var(--rule);
box-shadow: 0 8px 22px rgba(60,30,8,.10);
overflow: hidden;
}
.rail-head, .rail-mode, .rail-totals, .rail-cta{ flex-shrink: 0; }
/* Inside the mobile bottom-sheet the rail must fill the panel so the
Checkout button stays pinned at the bottom regardless of cart length. */
.m-cart .rail{
flex: 1 1 auto;
min-height: 0;
border: none;
box-shadow: none;
background: transparent;
}
.m-cart .rail-body{
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
.rail-head{
background: var(--ink); color: var(--paper-1);
padding: 14px 18px;
display:flex; justify-content:space-between; align-items:baseline;
border-bottom: 4px solid var(--seal);
}
.rail-head .t{
font-family:"IM Fell English",serif; font-style:italic; font-size: 22px;
}
.rail-head .fa{
font-family:"Vazirmatn",serif; font-size: 15px; color: #f5dca0;
}
.rail-mode{ display:flex; gap:0; padding: 12px 14px 0; margin-bottom: 8px; }
.rail-mode-btn{
flex:1; appearance:none; border:1px solid var(--rule);
background: transparent; padding: 10px 8px;
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .15em; text-transform: uppercase;
color: var(--ink-soft); cursor:pointer;
}
.rail-mode-btn + .rail-mode-btn{ border-left: none; }
.rail-mode-btn.on{ background: var(--ink); color: var(--paper-1); border-color: var(--ink); }
.rail-body{ padding: 14px; max-height: 400px; overflow-y: auto; }
.rail-empty{ text-align:center; padding: 40px 16px; color: var(--ink-faint); }
.rail-empty .ic{
width: 60px; height:60px; border: 1px solid var(--rule);
border-radius: 50%;
margin: 0 auto 14px;
display:grid; place-items:center;
font-family:"Vazirmatn",serif; color: var(--ink-faint); font-size: 22px;
}
.rail-empty .t1{ font-family:"IM Fell English",serif; font-style:italic; font-size: 18px; color: var(--ink-soft); }
.rail-empty .t2{ font-family:"Vazirmatn",serif; font-size: 14px; margin-top: 4px; }
.rail-empty-hint{
margin: 20px auto 0;
padding: 10px 14px;
max-width: 240px;
background: rgba(255,245,220,.5);
border: 1px dashed var(--rule-faint);
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.rail-empty-hint b { color: var(--ink); font-style: normal; }
.rail-empty-hint .fa{
display: block; margin-top: 4px;
font-family: "Vazirmatn", serif;
font-style: normal; font-size: 12px;
color: var(--ink-faint);
}
.rail-empty-cta{
margin-top: 18px;
appearance: none; border: 1.5px solid var(--ink);
background: var(--ink); color: var(--paper-1);
padding: 12px 22px; cursor: pointer;
font-family: "IM Fell DW Pica SC", serif;
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
box-shadow: 0 2px 0 -1px var(--seal-deep);
transition: all .15s ease;
}
.rail-empty-cta:hover{
background: var(--seal); border-color: var(--seal);
box-shadow: 0 3px 0 -1px var(--ink);
transform: translateY(-1px);
}
/* ===== Order rail as a handwritten paper slip ===== */
.rail-body{
background:
repeating-linear-gradient(0deg, transparent 0 28px, rgba(70,40,15,.045) 28px 28.5px);
}
.rail-line{
padding: 12px 4px 10px;
border-bottom: 1px dotted var(--rule-faint);
}
.rail-line:last-child{ border-bottom: none; }
.rl-row1{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20px, 1fr) auto;
gap: 0 8px;
align-items: baseline;
}
.rl-name{
display: flex; align-items: baseline;
gap: 6px; flex-wrap: wrap;
min-width: 0;
}
.rl-qty{
font-family:"Caveat", cursive;
font-size: 22px; line-height: 1; font-weight: 600;
color: var(--seal);
}
.rl-en{
font-family:"IM Fell English", serif; font-style: italic;
font-size: 16px; line-height: 1.1;
color: var(--ink);
}
.rl-fa{
font-family:"Vazirmatn", serif; font-weight: 600;
font-size: 13px; color: var(--ink-soft);
}
.rl-leader{
border-bottom: 1px dotted var(--ink-faint);
height: 0; align-self: end;
margin-bottom: 5px; opacity: .55;
}
.rl-price{
font-family:"JetBrains Mono", monospace;
font-size: 14px; font-weight: 600;
color: var(--ink);
white-space: nowrap;
text-align: right;
}
.rl-price::after{
content: " AED";
font-size: 9px; letter-spacing: .15em;
color: var(--ink-faint);
}
.rl-row2{
display: flex; justify-content: space-between; align-items: center;
padding: 6px 0 0;
}
.stepper-mini{
display: flex; align-items: center;
border: 1px solid var(--rule);
background: rgba(255,250,235,.5);
}
.stepper-mini button{
width: 26px; height: 26px;
border: none; background: transparent; cursor: pointer;
font-family:"JetBrains Mono", monospace; font-size: 13px;
color: var(--ink);
}
.stepper-mini button:hover{ background: var(--ink); color: var(--paper-1); }
.stepper-mini .q{
width: 28px; text-align: center;
font-family:"JetBrains Mono", monospace; font-size: 12px;
font-weight: 600;
}
.rl-remove{
appearance: none; border: none; background: transparent;
cursor: pointer;
color: var(--ink-faint); font-size: 13px;
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 50%;
}
.rl-remove:hover{ color: var(--seal); background: rgba(138,28,28,.08); }
/* Smart pairing nudge — handwritten note tucked into the slip */
.rail-nudge{
display: flex; align-items: center; gap: 12px;
margin: 12px 0 6px;
padding: 12px 12px 12px 14px;
border: 1px dashed var(--rule);
background: rgba(255,245,210,.55);
position: relative;
}
.rail-nudge::before{
content: "✦";
position: absolute; top: -10px; left: 14px;
background: var(--paper-1); color: var(--seal);
padding: 0 6px; font-size: 12px;
}
.rn-icon{
width: 38px; height: 38px;
border: 1px solid var(--rule); border-radius: 50%;
background: rgba(255,250,235,.7);
display: grid; place-items: center;
color: var(--ink-soft); flex-shrink: 0;
}
.rn-icon svg{ width: 26px; height: 26px; display: block; }
.rn-icon--photo{ padding: 0; overflow: hidden; }
.rn-icon--photo img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.rn-text{ flex: 1; min-width: 0; }
.rn-title{
font-family:"IM Fell English", serif; font-style: italic;
font-size: 16px; line-height: 1.1; color: var(--ink);
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.rn-title .rn-fa{
font-family:"Vazirmatn", serif; font-weight: 600;
font-size: 13px; color: var(--ink-soft);
}
.rn-meta{
font-family:"Caveat", cursive;
font-size: 14px; color: var(--ink-faint);
margin-top: 2px;
}
.rn-add{
appearance: none; border: 1px solid var(--ink);
background: transparent; color: var(--ink);
cursor: pointer; flex-shrink: 0;
padding: 8px 12px; min-height: 36px; min-width: 52px;
font-family:"JetBrains Mono", monospace;
font-size: 13px; font-weight: 600;
}
.rn-add:hover{ background: var(--ink); color: var(--paper-1); }
/* Totals as a ledger footer with a wax stamp on the grand line */
.rail-totals{
padding: 14px 14px 12px;
border-top: 1px solid var(--rule);
background: rgba(70,40,15,.05);
position: relative;
}
.rail-totals .ln{
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0 8px;
align-items: baseline;
padding: 4px 0;
}
.rail-totals .ln .lbl{
font-family:"IM Fell DW Pica SC", serif;
font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
color: var(--ink-soft);
}
.rail-totals .ln .leader{
border-bottom: 1px dotted var(--ink-faint);
height: 0; align-self: end;
margin-bottom: 5px; opacity: .5;
}
.rail-totals .ln .amt{
font-family:"JetBrains Mono", monospace;
font-size: 13px; font-weight: 500;
color: var(--ink-soft);
white-space: nowrap;
}
.rail-totals .ln-grand{
margin-top: 10px; padding-top: 12px;
border-top: 2px solid var(--ink);
position: relative;
}
.rail-totals .ln-grand .lbl{
font-size: 12px; color: var(--ink); font-weight: 700;
}
.rail-totals .ln-grand .amt{
font-size: 18px; font-weight: 700; color: var(--ink);
}
.grand-stamp{
position: absolute; right: -6px; top: -16px;
width: 54px; height: 54px;
border: 2px solid var(--seal); border-radius: 50%;
display: grid; place-items: center;
font-family:"Vazirmatn", serif; font-weight: 800;
font-size: 14px; color: var(--seal);
background: rgba(255,235,200,.5);
transform: rotate(-12deg);
pointer-events: none;
box-shadow: 0 2px 8px rgba(138,28,28,.18);
}
.rail-cta{
display:block; width:100%; padding: 18px var(--s-5);
background: var(--seal); color: var(--paper-1);
border: 1.5px solid var(--seal); cursor:pointer;
font-family:"IM Fell DW Pica SC",serif; font-size: 15px;
letter-spacing: .28em; text-transform: uppercase;
box-shadow: 0 -1px 0 var(--seal-deep) inset, var(--shadow-2);
transition: background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
position: relative;
}
.rail-cta::after{
content: "→"; position: absolute; right: var(--s-5); top: 50%;
transform: translateY(-50%); font-style: normal; font-size: 18px;
opacity: .85; transition: transform var(--t-fast) var(--ease-out);
}
.rail-cta .fa{
font-family:"Vazirmatn",serif; letter-spacing: 0; text-transform: none;
font-weight: 600; font-size: 13px; margin-left: var(--s-2); color: rgba(241,213,155,.92);
}
.rail-cta:disabled{ opacity:.4; cursor:default; box-shadow: none; }
.rail-cta:hover:not(:disabled){
background: var(--seal-deep); border-color: var(--seal-deep);
box-shadow: 0 -1px 0 rgba(0,0,0,.35) inset, var(--shadow-3);
}
.rail-cta:hover:not(:disabled)::after{ transform: translateY(-50%) translateX(4px); }
.rail-cta:focus-visible{ outline: 2px solid var(--paper-1); outline-offset: -6px; }
/* ========== How it's made ========== */
.howmade{
margin: 80px 0 0;
padding: 50px 0;
border-top: 3px double var(--rule);
border-bottom: 3px double var(--rule);
background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(70,40,15,.04) 30px 30.5px);
}
.howmade-grid{
display:grid; grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.howmade-step{ text-align: center; padding: 0 6px; position: relative; }
.howmade-step + .howmade-step::before{
content: "→";
position:absolute; left: -22px; top: 26px;
color: var(--rule); font-size: 18px;
}
.howmade-step .nm{
font-family:"IM Fell English",serif; font-style: italic;
font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 14px;
display:flex; align-items:center; justify-content:center; gap: 8px;
}
.howmade-step .nm .num{
font-family:"JetBrains Mono",monospace; font-size: 11px;
border: 1px solid var(--rule); padding: 1px 5px;
}
.howmade-step h4{
font-family:"IM Fell English",serif; font-style: italic;
font-size: 22px; font-weight: 400; margin: 0 0 4px;
}
.howmade-step .h-fa{
font-family:"Vazirmatn",serif; font-size: 16px; font-weight: 700;
color: var(--ink-soft); margin-bottom: 8px;
}
.howmade-step p{
font-size: 14px; color: var(--ink-soft); margin: 0;
line-height: 1.5;
}
.howmade-head{ text-align:center; margin-bottom: 36px; }
.howmade-head .kicker{
font-family:"IM Fell DW Pica SC",serif; font-size: 12px; letter-spacing:.3em; color: var(--ink-faint);
}
.howmade-head h2{
font-family:"IM Fell English",serif; font-style:italic; font-weight:400; font-size: 44px;
margin: 10px 0 4px;
}
.howmade-head .h-fa{
font-family:"Vazirmatn",serif; font-weight:700; font-size: 22px; color: var(--ink-soft);
}
/* ========== Find us ========== */
.findus{
margin: 80px 0 0;
display:grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
align-items: stretch;
}
.findus-info{ padding-right: 14px; }
.findus-info h2{
font-family:"IM Fell English",serif; font-style:italic;
font-size: 52px; font-weight:400; line-height: 1;
margin: 0 0 6px;
}
.findus-info .h-fa{
font-family:"Vazirmatn",serif; font-weight: 700;
font-size: 26px; color: var(--ink-soft); margin-bottom: 24px;
}
.findus-info dl{ margin: 0; display:grid; grid-template-columns: 130px 1fr; gap: 10px 14px; }
.findus-info dt{
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-faint);
border-top: 1px solid var(--rule); padding-top: 10px;
}
.findus-info dd{
margin: 0; font-family:"Cormorant Garamond",serif; font-size: 18px;
border-top: 1px solid var(--rule); padding-top: 10px;
}
.findus-info dd .fa{ font-family:"Vazirmatn",serif; font-size: 14px; color: var(--ink-soft); display:block; margin-top:2px; }
.findus-info dd a{ color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
.findus-info .delivery-zones{
margin-top: 26px;
padding: 16px;
border: 1px solid var(--rule);
background: rgba(255,245,220,.3);
}
.findus-info .delivery-zones .lbl{
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
margin-bottom: 8px;
}
.findus-info .delivery-zones .zones{ display:flex; flex-wrap:wrap; gap: 6px; }
.findus-info .delivery-zones .chip{
font-family:"IM Fell English",serif; font-style:italic;
font-size: 14px;
border: 1px solid var(--rule); padding: 4px 10px;
color: var(--ink);
}
.findus-info .delivery-zones .chip .fa{ font-family:"Vazirmatn",serif; font-style: normal; font-size: 12px; margin-left: 6px; color: var(--ink-soft); }
.findus-map{
display: block;
border: 1px solid var(--rule);
background:
repeating-linear-gradient(0deg, transparent 0 24px, rgba(70,40,15,.05) 24px 25px),
repeating-linear-gradient(90deg, transparent 0 24px, rgba(70,40,15,.05) 24px 25px),
var(--paper-2);
position: relative;
min-height: 360px;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
overflow: hidden;
}
.findus-map:hover{
transform: translateY(-3px);
box-shadow: 0 14px 26px rgba(60,30,8,.20);
}
.map-overlay-cta{
position: absolute;
bottom: 0; left: 0; right: 0;
background: var(--ink); color: var(--paper-1);
padding: 12px 18px;
display: flex; justify-content: space-between; align-items: baseline;
gap: 14px;
font-family:"IM Fell DW Pica SC",serif;
font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
z-index: 5;
border-top: 3px solid var(--seal);
transition: background .15s;
}
.map-overlay-cta .fa{
font-family:"Vazirmatn",serif; font-weight: 600;
font-size: 12px; letter-spacing: 0; text-transform: none;
color: rgba(241,213,155,.9);
}
.findus-map:hover .map-overlay-cta{ background: var(--seal); }
.findus-map:hover .map-overlay-cta .fa{ color: rgba(255,255,255,.9); }
.map-link{
display: block;
color: inherit;
text-decoration: none;
border-bottom: none;
transition: color .15s;
}
.map-link:hover{ color: var(--seal); }
.map-link .fa{ color: var(--ink-soft); }
.map-link:hover .fa{ color: var(--seal); }
.map-link .map-cta{
display: block;
margin-top: 6px;
font-family:"IM Fell DW Pica SC",serif;
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-faint);
transition: color .15s;
}
.map-link:hover .map-cta{ color: var(--seal); }
.findus-map .compass{
position: absolute; top: 14px; right: 14px;
width: 60px; height: 60px;
border: 1px solid var(--ink); border-radius: 50%;
display:grid; place-items:center;
font-family:"IM Fell English",serif; font-size: 22px;
background: rgba(255,245,220,.8);
}
.findus-map .road-1{
position:absolute; left: 0; right: 0; top: 50%;
height: 14px; background: var(--paper-3);
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
transform: rotate(-4deg);
}
.findus-map .road-1::after{
content: "JUMEIRA STREET · خیابان جمیرا";
position:absolute; left: 50%; top: -22px; transform: translateX(-50%);
font-family:"IM Fell DW Pica SC",serif; font-size: 10px;
letter-spacing: .2em; color: var(--ink-soft); white-space: nowrap;
}
.findus-map .road-2{
position:absolute; left: 35%; top: 0; bottom:0;
width: 8px; background: var(--paper-3);
border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.findus-map .pin{
position: absolute; top: 38%; left: 36%;
transform: translate(-50%, -100%);
text-align:center;
}
.findus-map .pin .dot{
width: 18px; height: 18px; border-radius: 50%;
background: var(--seal); border: 3px solid var(--paper-1);
box-shadow: 0 4px 8px rgba(0,0,0,.3);
margin: 0 auto;
}
.findus-map .pin .lbl{
margin-top: 6px;
font-family:"Caveat",cursive; font-size: 22px;
color: var(--seal); transform: rotate(-4deg);
background: var(--paper-1); padding: 2px 8px;
border: 1px dashed var(--seal);
white-space: nowrap;
}
.findus-map .stamp{
position: absolute; bottom: 18px; left: 18px;
width: 90px; height: 90px; border-radius:50%;
border: 2px solid var(--seal); color: var(--seal);
display:flex; flex-direction:column; align-items:center; justify-content:center;
transform: rotate(-12deg); opacity: .8;
background: rgba(255,235,200,.3);
}
.findus-map .stamp .top{ font-family:"IM Fell DW Pica SC",serif; font-size: 9px; letter-spacing: .25em; }
.findus-map .stamp .mid{ font-family:"Vazirmatn",serif; font-weight: 800; font-size: 18px; margin: 4px 0; }
.findus-map .stamp .bot{ font-family:"IM Fell DW Pica SC",serif; font-size: 9px; letter-spacing: .25em; }
/* ========== Footer ========== */
.footer{
margin-top: 60px; padding: 40px 0 50px;
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px; align-items: center;
color: var(--ink-soft);
}
.footer .left{ font-family:"IM Fell DW Pica SC",serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.footer .footer-links{ margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 11px; }
.footer .footer-links a{ color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); padding-bottom: 1px; }
.footer .footer-links a:hover{ color: var(--seal); border-color: var(--seal); }
.footer .footer-links a .fa{ font-family:"Vazirmatn",serif; font-size: 10px; letter-spacing: 0; text-transform: none; margin-left: 4px; opacity: .8; }
.footer .right{ text-align: right; font-family:"Vazirmatn",serif; font-size: 14px; }
.footer .center{
width: 54px; height: 54px; border-radius: 50%;
border: 1.5px solid var(--seal);
overflow: hidden;
background: #000;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.footer .center img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* ========== Active-order banner (sticky top, every page) ========== */
/* Replaces the older floating corner pill — more visible, sits above the
sticky nav. Personalised with customer's first name when known. */
#active-order-banner[hidden] { display: none; }
#active-order-banner {
position: sticky;
top: 0;
z-index: calc(var(--z-nav) + 1);
width: 100%;
animation: aobSlideDown .35s var(--ease-out);
}
@keyframes aobSlideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* When the banner is showing, the sticky nav must drop below it. */
body.has-active-order .nav { top: 52px; }
@media (max-width: 720px) { body.has-active-order .nav { top: 60px; } }
.aob {
background: var(--ink);
border-bottom: 2px solid var(--seal);
box-shadow: var(--shadow-2);
color: var(--paper-1);
}
.aob.green { border-bottom-color: #1f9d55; }
.aob.amber { border-bottom-color: var(--seal); }
.aob.red { border-bottom-color: #b13a3a; }
.aob-inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; gap: var(--s-3);
padding: 10px var(--s-5);
}
.aob-dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
animation: aobPulse 2s ease-out infinite;
}
.aob.amber .aob-dot { background: #f5a623; --pulse-color: rgba(245,166,35,.55); }
.aob.green .aob-dot { background: #29c46d; --pulse-color: rgba(41,196,109,.55); }
.aob.red .aob-dot { background: #ff6b3d; --pulse-color: rgba(255,107,61,.55); }
@keyframes aobPulse {
0% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(245,166,35,.55)); }
70% { box-shadow: 0 0 0 10px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.aob-text {
flex: 1;
display: flex; flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.aob-headline {
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 16px;
color: var(--paper-1);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aob-eta {
font-family: "IM Fell DW Pica SC", serif;
font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
color: rgba(241,213,155,.85);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-top: 2px;
}
.aob-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: var(--seal); color: var(--paper-1);
border: 1.5px solid var(--seal);
text-decoration: none;
font-family: "IM Fell DW Pica SC", serif;
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
transition: background var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
box-shadow: var(--shadow-1);
flex-shrink: 0;
}
.aob-cta:hover { background: var(--seal-deep); border-color: var(--seal-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.aob-cta:active { transform: translateY(0); }
.aob-cta:focus-visible { outline: 2px solid #f5dca0; outline-offset: 2px; }
.aob-cta-arrow { font-style: normal; transition: transform var(--t-fast) var(--ease-out); }
.aob-cta:hover .aob-cta-arrow { transform: translateX(3px); }
.aob-x {
background: transparent; border: none;
color: rgba(241,213,155,.7); cursor: pointer;
padding: 8px 10px; font-size: 16px; line-height: 1;
transition: color var(--t-fast) var(--ease-out);
flex-shrink: 0;
}
.aob-x:hover { color: var(--paper-1); }
.aob-x:focus-visible { outline: 1px dotted var(--paper-1); outline-offset: 2px; }
/* Progress bar at the bottom edge — 0% → 100% across the order's lifecycle */
.aob-progress {
height: 3px;
background: rgba(255,255,255,.10);
overflow: hidden;
}
.aob-progress-fill {
height: 100%;
width: 0%;
background: var(--seal);
transition: width 600ms var(--ease-out), background var(--t-med) var(--ease-out);
box-shadow: 0 0 8px rgba(138,28,28,.6);
}
.aob.green .aob-progress-fill { background: #29c46d; box-shadow: 0 0 8px rgba(41,196,109,.6); }
.aob.amber .aob-progress-fill { background: #f5a623; box-shadow: 0 0 8px rgba(245,166,35,.6); }
.aob.red .aob-progress-fill { background: #ff6b3d; box-shadow: 0 0 8px rgba(255,107,61,.6); }
/* Subtle whole-banner flash when the status changes (caught between renders) */
.aob-changed {
animation: aobFlash 700ms var(--ease-out);
}
@keyframes aobFlash {
0% { background: var(--ink); }
35% { background: #2c1a0a; }
100% { background: var(--ink); }
}
/* ========== PWA install prompt ========== */
#pwa-prompt[hidden] { display: none; }
#pwa-prompt {
position: fixed;
left: var(--s-4); right: var(--s-4);
bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
z-index: var(--z-toast);
animation: pwaSlideUp .4s var(--ease-out);
}
body.has-cart #pwa-prompt { bottom: calc(82px + env(safe-area-inset-bottom)); }
@keyframes pwaSlideUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pwa-prompt-inner {
max-width: 460px; margin: 0 auto;
background: var(--ink); color: var(--paper-1);
border: 1.5px solid var(--seal);
box-shadow: var(--shadow-3);
padding: 12px 14px;
display: flex; align-items: center; gap: var(--s-3);
}
.pwa-prompt-icon {
font-size: 28px; line-height: 1; flex-shrink: 0;
}
.pwa-prompt-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pwa-prompt-text strong {
font-family: "IM Fell English", serif; font-style: italic; font-weight: 400;
font-size: 16px; color: var(--paper-1);
}
.pwa-prompt-text span {
font-family: "IM Fell DW Pica SC", serif;
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: rgba(241,213,155,.75);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwa-prompt-btn {
flex-shrink: 0;
padding: 10px 16px;
background: var(--seal); color: var(--paper-1);
border: 1.5px solid var(--seal);
font-family: "IM Fell DW Pica SC", serif;
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
cursor: pointer;
transition: all var(--t-fast) var(--ease-out);
}
.pwa-prompt-btn:hover { background: var(--seal-deep); border-color: var(--seal-deep); }
.pwa-prompt-x {
flex-shrink: 0;
background: transparent; border: none;
color: rgba(241,213,155,.7);
font-size: 16px; cursor: pointer; padding: 6px 8px;
}
.pwa-prompt-x:hover { color: var(--paper-1); }
@media (max-width: 480px) {
.pwa-prompt-text span { display: none; }
}
@media (max-width: 720px) {
.aob-inner { padding: 8px var(--s-3); gap: var(--s-2); }
.aob-headline { font-size: 14px; }
.aob-eta { font-size: 10px; }
.aob-cta { padding: 8px 12px; font-size: 11px; letter-spacing: .15em; }
.aob-cta-en { display: none; }
.aob-cta-arrow { font-size: 18px; }
}
/* ========== Payment-redirect loading overlay ========== */
/* Sits inside the checkout modal — full-cover so customer knows their click
registered and the site is actively connecting to NI's hosted page. */
.pay-overlay{
position: fixed; inset: 0; z-index: 250;
background: rgba(34,20,8,.85);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: payOverlayIn .2s ease-out;
}
@keyframes payOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.pay-overlay-card{
background: var(--paper-1);
border: 1px solid var(--paper-edge);
padding: 36px 32px;
max-width: 420px; width: 100%;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.pay-overlay-spinner{
width: 64px; height: 64px;
margin: 0 auto 20px;
border: 4px solid rgba(138,28,28,.18);
border-top-color: var(--seal);
border-radius: 50%;
animation: paySpin 1s linear infinite;
}
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-overlay-en{
font-family: "IM Fell English", serif;
font-size: 22px; color: var(--ink);
margin: 0 0 6px;
line-height: 1.3;
}
.pay-overlay-fa{
font-family: "Vazirmatn", serif;
font-size: 16px; color: var(--ink-soft);
margin: 0 0 18px;
}
.pay-overlay-sub{
font-family: "IM Fell DW Pica SC", serif;
font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) {
.pay-overlay-spinner { animation-duration: 4s; }
.pay-overlay { animation: none; }
}
/* ========== Modal & confirm ========== */
.modal-back{
position:fixed; inset:0; z-index:200;
background: rgba(34,20,8,.6);
backdrop-filter: blur(3px);
display:none; align-items:center; justify-content:center; padding: 20px;
}
.modal-back.open{ display:flex; }
.modal{
width: min(580px, 100%); max-height: 92vh; overflow:auto;
background: #f7ecd2;
border: 1px solid var(--rule);
box-shadow: var(--shadow-4);
padding: var(--s-6) var(--s-6) var(--s-5);
position: relative;
background-image: repeating-linear-gradient(0deg, transparent 0 30px, rgba(80,50,20,.06) 30px 30.5px);
animation: modalIn var(--t-slow) var(--ease-out);
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h3{
font-family:"IM Fell English",serif; font-style:italic; font-weight:400;
font-size: 32px; margin: 0;
}
.modal .h-fa{ font-family:"Vazirmatn",serif; font-weight: 700; font-size: 20px; color: var(--ink-soft); margin: 4px 0 18px; }
.modal-x{ position:absolute; top:12px; right:14px; background:transparent; border:none; cursor:pointer; font-size:22px; color: var(--ink-soft); }
.modal .stamp{
position:absolute; right: 30px; top: 28px;
width: 90px; height: 90px; border-radius: 50%;
border: 2px solid var(--seal); color: var(--seal);
display:flex; flex-direction:column; align-items:center; justify-content:center;
transform: rotate(-10deg); opacity:.85;
}
.modal .stamp .top, .modal .stamp .bot{ font-family:"IM Fell DW Pica SC",serif; font-size:9px; letter-spacing:.25em; }
.modal .stamp .mid{ font-family:"Vazirmatn",serif; font-weight: 800; font-size: 18px; margin: 4px 0; }
.modal .totals{ margin-top: 18px; font-family:"JetBrains Mono",monospace; font-size: 13px; }
.modal .totals .ln{ display:flex; justify-content:space-between; padding: 3px 0; color: var(--ink-soft); }
.modal .totals .grand{ border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 19px; color: var(--ink); font-weight: 600; }
.form{
display:grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 18px;
}
.form .full{ grid-column: 1 / -1; }
.form label{
display:block; font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint);
margin-bottom: 4px;
}
.form input{
width:100%; border:none; border-bottom: 1.5px solid var(--ink-faint);
background:transparent; padding: 6px 2px 8px; outline: none;
font-family:"Caveat",cursive; font-size: 22px; color: var(--ink);
transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.form input:hover{ border-bottom-color: var(--ink-soft); }
.form input:focus{
border-bottom-color: var(--seal);
background: rgba(255,235,200,.25);
}
/* Phone field — country-code picker + local number on one ledger line. */
.phone-row{ display: flex; align-items: flex-end; gap: 10px; }
.phone-cc{
flex: 0 0 auto;
border: none; border-bottom: 1.5px solid var(--ink-faint);
background: transparent; padding: 6px 18px 8px 2px; outline: none;
font-family: "Cormorant Garamond", serif; font-size: 18px; color: var(--ink);
cursor: pointer;
/* native arrow + a little room so the flag+code never clips */
-webkit-appearance: menulist; appearance: menulist;
transition: border-color var(--t-fast) var(--ease-out);
}
.phone-cc:hover{ border-bottom-color: var(--ink-soft); }
.phone-cc:focus{ border-bottom-color: var(--seal); }
.phone-cc option{ font-size: 15px; }
.phone-num{ flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px){
.phone-cc{ font-size: 16px; padding-bottom: 8px; }
}
/* ── Delivery-area picker (searchable combobox) ───────────────────────── */
.area-combo{ position: relative; }
.area-field{
position: relative; display: flex; align-items: center;
border-bottom: 1.5px solid var(--ink-faint);
transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.area-field:focus-within, .area-combo.open .area-field{
border-bottom-color: var(--seal); background: rgba(255,235,200,.18);
}
.area-search-ic{
position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
font-size: 18px; color: var(--ink-faint); pointer-events: none;
}
.area-combo .area-input{
flex: 1 1 auto; width: 100%;
border: none; background: transparent; outline: none;
padding: 7px 30px 9px 27px;
font-family: "Cormorant Garamond", serif; font-size: 19px; color: var(--ink);
}
.area-combo .area-input::placeholder{ color: var(--ink-faint); opacity: .8; font-style: italic; }
.area-caret{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
color: var(--ink-faint); font-size: 12px; pointer-events: none; }
.area-clear{
position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
border: none; background: transparent; cursor: pointer; color: var(--seal);
font-size: 15px; line-height: 1; padding: 6px 8px;
}
.area-clear:hover{ color: var(--seal-deep); }
@media (max-width: 720px){ .area-combo .area-input{ font-size: 16px; } }
.area-menu{
position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
max-height: 280px; overflow-y: auto;
background: var(--paper-1); border: 1px solid var(--ink-faint);
box-shadow: var(--shadow-3);
}
.area-group-head{
position: sticky; top: 0; z-index: 1;
background: rgba(244,235,214,.97);
padding: 5px 12px;
font-family: "IM Fell DW Pica SC", serif; font-size: 10px;
letter-spacing: .22em; text-transform: uppercase; color: var(--seal-deep);
border-bottom: 1px solid rgba(184,158,110,.35);
}
.area-opt{
display: flex; align-items: baseline; gap: 8px;
padding: 10px 12px; cursor: pointer;
border-bottom: 1px dotted rgba(184,158,110,.22);
touch-action: manipulation;
}
.area-opt-name{ font-family: "Cormorant Garamond", serif; font-size: 17px; color: var(--ink); }
.area-opt-fa{ font-family: "Vazirmatn", serif; font-size: 12px; color: var(--ink-soft); }
.area-opt-fee{
margin-left: auto; white-space: nowrap;
font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--seal-deep);
}
.area-opt.on, .area-opt:hover{ background: rgba(255,232,193,.55); }
.area-opt.sel{ background: rgba(138,28,28,.08); }
.area-opt.sel .area-opt-name{ font-weight: 600; }
.area-empty{
padding: 12px; font-family: "IM Fell English", serif; font-style: italic;
font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}
.area-empty .fa{ display: block; font-family: "Vazirmatn", serif; font-style: normal; font-size: 12px; margin-top: 4px; }
/* Confirmation line once an area is chosen — reads like a stamped receipt note */
.area-fee-note{
margin-top: 8px; padding: 7px 12px;
background: rgba(255,250,235,.7);
border-left: 2px solid var(--seal);
font-family:"IM Fell English",serif; font-size: 14px;
color: var(--seal-deep); line-height: 1.5;
}
.area-fee-note b{ font-weight: 700; }
.area-fee-note .fa{
font-family:"Vazirmatn",serif; font-size: 12px; display:block;
margin-top: 4px; color: var(--ink-soft);
}
.area-fee-hint{
font-style: italic;
background: rgba(255,250,235,.5);
border-left-color: var(--ink-faint);
color: var(--ink-soft);
}
/* Required cue mirrors the old pin-required styling */
.area-required label .req-mark{ color: var(--seal); margin-left: 4px; font-weight: bold; }
.area-required .area-field{ border-bottom-color: var(--seal); }
.place{
margin-top: var(--s-5); width: 100%; padding: 18px;
border: 1.5px solid var(--seal);
background: var(--seal); color: var(--paper-1); cursor:pointer;
font-family:"IM Fell DW Pica SC",serif; font-size: 15px;
letter-spacing: .28em; text-transform: uppercase;
box-shadow: 0 -1px 0 var(--seal-deep) inset, var(--shadow-2);
transition: background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
position: relative;
}
.place:hover:not(:disabled){
background: var(--seal-deep); border-color: var(--seal-deep);
box-shadow: 0 -1px 0 rgba(0,0,0,.3) inset, var(--shadow-3);
transform: translateY(-1px);
}
.place:active:not(:disabled){
transform: translateY(1px);
box-shadow: 0 -1px 0 var(--seal-deep) inset, var(--shadow-1);
}
.place:disabled{ opacity:.42; cursor: not-allowed; box-shadow: none; }
.place:focus-visible{ outline: 2px solid var(--paper-1); outline-offset: -6px; }
/* ── Delivery map (Leaflet/OpenStreetMap) ─────────────────────────────── */
.map-wrap{
position: relative;
margin: 6px 0 10px;
border: 1.5px solid var(--ink-faint);
border-radius: 8px;
overflow: hidden;
box-shadow: inset 0 1px 4px rgba(70,40,15,.12);
}
.map-canvas{
height: 260px;
width: 100%;
background: #e8dec3;
}
/* Warm the OSM tiles toward the parchment palette without hurting legibility */
.map-canvas .leaflet-tile{
filter: sepia(0.28) saturate(0.85) brightness(1.03) contrast(0.94);
}
.map-canvas .leaflet-container{
font-family: "Cormorant Garamond", serif;
background: #e8dec3;
}
/* Fixed centre pin (customer location = map centre) */
.map-centerpin{
position: absolute; left: 50%; top: 50%;
width: 26px; height: 36px;
transform: translate(-50%, -100%);
z-index: 600; pointer-events: none;
}
.map-centerpin .mcp-head{
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 22px; height: 22px; border-radius: 50%;
background: #1f6f4a; border: 3px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.map-centerpin .mcp-stem{
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 0; height: 0;
border-left: 6px solid transparent; border-right: 6px solid transparent;
border-top: 13px solid #1f6f4a;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.map-centerpin::after{
content: ""; position: absolute; left: 50%; top: 100%;
transform: translate(-50%, -50%);
width: 7px; height: 3px; border-radius: 50%;
background: rgba(0,0,0,.28);
}
/* Restaurant marker (divIcon) */
.mp-rest-wrap{ position: relative; }
.mp-rest-dot{
position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
width: 30px; height: 30px; border-radius: 50%;
background: var(--seal, #8a1c1c); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 15px;
border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mp-rest-lbl{
position: absolute; left: 0; top: 0; transform: translate(-50%, 13px);
white-space: nowrap;
background: #fff; color: var(--ink, #2a1c0f);
font-family: "IM Fell DW Pica SC", serif; font-size: 10px; letter-spacing: .05em;
padding: 2px 7px; border: 1px solid #b8a980; border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
/* Live distance badge + drag hint overlays */
.map-dist{
position: absolute; top: 8px; right: 8px; z-index: 600;
background: rgba(42,28,15,.9); color: var(--paper-1, #ece0c4);
font-family: "IM Fell DW Pica SC", serif; font-size: 12px; letter-spacing: .08em;
padding: 4px 9px; border-radius: 6px; pointer-events: none;
}
.map-dist .fa{ font-family: "Vazirmatn", sans-serif; font-size: 11px; margin-right: 4px; opacity: .85; }
.map-hint{
position: absolute; left: 8px; bottom: 8px; right: 8px; z-index: 600;
background: rgba(236,224,196,.92); color: var(--ink-soft, #4a3a22);
font-family: "Cormorant Garamond", serif; font-size: 13px;
padding: 5px 9px; border-radius: 6px; text-align: center; pointer-events: none;
}
.map-hint .fa{ font-family: "Vazirmatn", sans-serif; font-size: 12px; display: block; }
.map-fallback{
padding: 14px; border: 1px dashed var(--ink-faint); border-radius: 8px;
color: var(--ink-soft); font-family: "Cormorant Garamond", serif; font-size: 15px;
margin: 6px 0 10px;
}
.map-fallback .fa{ display: block; font-family: "Vazirmatn", sans-serif; font-size: 13px; margin-top: 4px; }
.geo-pinned-inline{
display: inline-flex; align-items: baseline; gap: 8px;
}
.geo-pinned-inline .geo-coord{
font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-soft);
}
.geo-pinned-inline .geo-fa{
font-family: "Vazirmatn", sans-serif; font-size: 12px; color: var(--olive, #4a6b2f);
}
@media (max-width: 720px){
.map-canvas{ height: 220px; }
}
/* Pin-on-Google-Maps control inside Address section */
.geo-row{
display: flex; gap: 10px; flex-wrap: wrap;
align-items: center; margin-top: 4px;
}
.geo-btn{
appearance: none; cursor: pointer;
border: 1px solid var(--ink); background: transparent; color: var(--ink);
padding: 10px 16px; min-height: 42px;
font-family:"IM Fell DW Pica SC",serif;
font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
flex: 1 1 220px;
justify-content: center;
}
.geo-btn:hover:not(:disabled){ background: var(--ink); color: var(--paper-1); }
.geo-btn:disabled{ opacity: .55; cursor: wait; }
.geo-btn .geo-pin{
font-size: 18px; line-height: 1; color: var(--seal);
}
.geo-btn:hover .geo-pin{ color: #f5dca0; }
.geo-btn .fa{
font-family:"Vazirmatn",serif; font-size: 12px;
letter-spacing: 0; text-transform: none;
color: var(--ink-soft);
}
.geo-btn:hover .fa{ color: rgba(241,213,155,.85); }
.geo-link{
display: inline-flex; align-items: center;
padding: 8px 4px;
font-family:"IM Fell English", serif; font-style: italic;
font-size: 14px; color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px dotted var(--ink-soft);
}
.geo-link:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.geo-pinned{
margin-top: 8px;
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; flex-wrap: wrap;
padding: 8px 12px;
background: rgba(255,250,235,.6);
border: 1px dashed var(--rule);
font-family:"JetBrains Mono",monospace;
font-size: 12px; color: var(--ink);
}
.geo-pinned .geo-fa{
font-family:"Vazirmatn",serif; font-size: 12px;
color: var(--ink-soft);
}
.geo-error{
margin-top: 8px;
padding: 6px 12px;
background: rgba(138,28,28,.06);
border-left: 2px solid var(--seal);
font-family:"Vazirmatn",serif; font-size: 13px;
color: var(--seal-deep);
}
/* Required-pin state — visual cue when delivery is selected but no coords yet */
.geo-required label .req-mark{
color: var(--seal);
margin-left: 4px;
font-weight: bold;
}
.geo-btn-required{
background: var(--seal) !important;
color: var(--paper-1) !important;
border-color: var(--seal) !important;
animation: pinPulse 2.2s ease-out infinite;
}
.geo-btn-required .geo-pin{ color: #f5dca0 !important; }
.geo-btn-required .fa{ color: rgba(255,245,220,.8) !important; }
.geo-btn-required:hover:not(:disabled){
background: var(--seal-deep) !important;
border-color: var(--seal-deep) !important;
}
@keyframes pinPulse{
0% { box-shadow: 0 0 0 0 rgba(138,28,28,.45); }
70% { box-shadow: 0 0 0 10px rgba(138,28,28,0); }
100% { box-shadow: 0 0 0 0 rgba(138,28,28,0); }
}
.geo-hint{
margin-top: 8px;
padding: 8px 12px;
background: rgba(255,250,235,.6);
border: 1px dashed var(--seal);
font-family:"IM Fell English",serif; font-style: italic;
font-size: 13px; color: var(--seal-deep);
line-height: 1.5;
}
.geo-hint .fa{
font-family:"Vazirmatn",serif; font-style: normal;
font-size: 12px; display: block;
margin-top: 4px;
color: var(--ink-soft);
}
.confirm-back{
position:fixed; inset:0; z-index: 300;
background: rgba(34,20,8,.78); display:none;
align-items:center; justify-content:center; padding: 20px;
}
.confirm-back.open{ display:flex; }
.confirm{
width: min(520px, 100%); background: #f7ecd2;
padding: 44px 36px; text-align:center;
border: 1px solid var(--rule);
background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(80,50,20,.06) 28px 28.5px);
position: relative;
}
.confirm .seal{
position:absolute; right: -10px; top: -22px;
width: 130px; height:130px; border-radius:50%;
border: 3px solid var(--seal); color: var(--seal);
display:flex; flex-direction:column; align-items:center; justify-content:center;
transform: rotate(-12deg);
background: rgba(255,235,200,.3);
}
.confirm .seal .top, .confirm .seal .bot{ font-family:"IM Fell DW Pica SC",serif; font-size: 11px; letter-spacing: .3em; }
.confirm .seal .mid{ font-family:"Vazirmatn",serif; font-weight: 800; font-size: 26px; margin: 8px 0; }
.confirm h2{ font-family:"IM Fell English",serif; font-style:italic; font-weight: 400; font-size: 36px; margin: 0; }
.confirm .h-fa{ font-family:"Vazirmatn",serif; font-size: 22px; color: var(--ink-soft); margin-top: 4px; }
.confirm .num{ font-family:"JetBrains Mono",monospace; font-size: 16px; color: var(--ink-faint); margin: 18px 0 8px; }
.confirm .msg{ font-family:"Cormorant Garamond",serif; font-size: 17px; color: var(--ink-soft); margin: 8px auto 0; max-width: 38ch; }
.confirm button{
margin-top: 22px; padding: 10px 22px;
border: 1px solid var(--ink); background: transparent; color: var(--ink);
cursor:pointer;
font-family:"IM Fell DW Pica SC",serif; font-size: 12px;
letter-spacing: .2em; text-transform: uppercase;
}
.confirm button:hover{ background: var(--ink); color: var(--paper-1); }
.toast{
position: fixed; left: 50%; top: 80px; transform: translate(-50%, -20px);
background: var(--ink); color: var(--paper-1);
padding: 12px 22px;
font-family:"IM Fell DW Pica SC",serif; font-size: 13px;
letter-spacing: .2em; text-transform: uppercase;
z-index: 250;
opacity: 0; transition: opacity .3s, transform .3s;
pointer-events: none;
box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
.toast .fa{ font-family:"Vazirmatn",serif; font-size: 14px; letter-spacing: 0; text-transform: none; margin-left: 10px; color: #f5dca0; }
/* ========== Mobile nav burger ========== */
.nav-burger{
display: none;
appearance:none; border: 1px solid var(--ink); background: transparent;
width: 44px; height: 44px;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px; cursor: pointer; padding: 0;
}
.nav-burger span{
display:block; width: 20px; height: 2px; background: var(--ink);
transition: transform .2s, opacity .2s;
}
/* ========== Mobile menu drawer ========== */
.m-menu{
position: fixed; inset: 0; z-index: 150;
background: rgba(34,20,8,.5);
backdrop-filter: blur(3px);
display: none;
}
.m-menu.open{ display: block; }
.m-menu-panel{
position: absolute; top: 0; right: 0; bottom: 0;
width: min(340px, 88vw);
background: var(--paper-1);
background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(80,50,20,.05) 28px 28.5px);
box-shadow: -10px 0 40px rgba(34,20,8,.35);
padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 4px;
border-left: 1px solid var(--rule);
transform: translateX(100%);
transition: transform .25s ease;
overflow-y: auto;
}
.m-menu.open .m-menu-panel{ transform: translateX(0); }
.m-menu-x{
align-self: flex-end;
background: transparent; border: none; cursor: pointer;
width: 44px; height: 44px;
color: var(--ink); font-size: 22px;
margin: -4px -4px 8px 0;
}
.m-menu-brand{
display:flex; align-items:center; gap: 12px;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--rule);
}
.m-menu-brand .seal{
width: 38px; height: 38px; border-radius:50%;
border: 1.5px solid var(--seal); color: var(--seal);
display:grid; place-items:center;
font-family:"Vazirmatn",serif; font-weight: 800; font-size: 16px;
background: rgba(255,235,200,.2);
}
.m-menu-brand .lockup{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.m-menu-brand .lockup .en{ font-family:"IM Fell English", serif; font-style: italic; font-size: 18px; }
.m-menu-brand .lockup .fa{ font-family:"Vazirmatn", serif; font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.m-menu-link{
appearance:none; border: none; background: transparent;
text-align: left;
padding: 14px 8px;
font-family:"IM Fell DW Pica SC","Cormorant Garamond",serif;
font-size: 15px; letter-spacing: .15em; text-transform: uppercase;
color: var(--ink); cursor: pointer;
border-bottom: 1px dotted var(--rule-faint);
display:flex; justify-content: space-between; align-items: baseline;
}
.m-menu-link .fa-mini{
font-family:"Vazirmatn",serif; font-size: 13px; color: var(--ink-soft);
text-transform: none; letter-spacing: 0;
}
.m-menu-link:active{ background: rgba(70,40,15,.08); }
.m-menu-foot{
margin-top: auto; padding-top: 18px;
}
.m-menu-phone{
display: block;
font-family:"JetBrains Mono",monospace; font-size: 18px;
color: var(--ink); text-decoration: none;
padding: 14px 0;
border-top: 1px solid var(--rule);
}
.m-menu-phone .lbl{ font-size: 10px; color: var(--ink-faint); display:block; letter-spacing:.2em; text-transform:uppercase; margin-bottom: 4px; }
/* ========== Mobile cart bottom bar ========== */
.mobile-cart-bar{
display: none;
position: fixed; left: 0; right: 0; bottom: 0;
z-index: var(--z-mobile-bar);
background: var(--ink); color: var(--paper-1);
padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
border-top: 4px solid var(--seal);
box-shadow: 0 -10px 30px rgba(0,0,0,.32), 0 -1px 0 rgba(245,220,160,.15) inset;
align-items: center;
gap: var(--s-3);
animation: cartBarIn .35s var(--ease-out);
}
@keyframes cartBarIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mobile-cart-bar .mcb-info{ flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-cart-bar .mcb-count{
font-family:"IM Fell DW Pica SC",serif; font-size: 11px;
letter-spacing: .22em; text-transform: uppercase;
color: rgba(241,213,155,.85);
}
.mobile-cart-bar .mcb-total{
font-family:"IM Fell English",serif; font-style: italic;
font-size: 22px; font-weight: 600;
color: #f5dca0;
line-height: 1.1;
}
.mobile-cart-bar .mcb-cta{
appearance:none; border: 1.5px solid var(--seal); background: var(--seal); color: var(--paper-1);
padding: 14px 22px; cursor:pointer; min-height: 48px;
font-family:"IM Fell DW Pica SC",serif; font-size: 14px;
letter-spacing: .22em; text-transform: uppercase;
display:flex; align-items:center; gap: var(--s-2);
box-shadow: var(--shadow-2);
transition: background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
position: relative;
}
.mobile-cart-bar .mcb-cta::after{
content: "→"; margin-left: var(--s-1);
transition: transform var(--t-fast) var(--ease-out);
}
.mobile-cart-bar .mcb-cta:active{
background: var(--seal-deep); border-color: var(--seal-deep);
transform: translateY(1px);
box-shadow: var(--shadow-1);
}
.mobile-cart-bar .mcb-cta:hover::after{ transform: translateX(3px); }
.mobile-cart-bar .mcb-cta .fa{
font-family:"Vazirmatn",serif; font-size: 12px;
letter-spacing: 0; text-transform: none; color: rgba(241,213,155,.92);
}
/* ========== Mobile cart sheet ========== */
.m-cart{
position: fixed; inset: 0; z-index: 220;
background: rgba(34,20,8,.6);
backdrop-filter: blur(3px);
display: none;
}
.m-cart.open{ display: block; }
.m-cart-panel{
position: absolute; left: 0; right: 0; bottom: 0;
max-height: 88vh;
background: var(--paper-1);
background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(80,50,20,.05) 28px 28.5px);
border-top: 1px solid var(--rule);
box-shadow: 0 -20px 50px rgba(0,0,0,.4);
transform: translateY(100%);
transition: transform .28s ease;
display: flex; flex-direction: column;
padding-bottom: env(safe-area-inset-bottom);
}
.m-cart.open .m-cart-panel{ transform: translateY(0); }
.m-cart-grab{
width: 44px; height: 4px; border-radius: 2px;
background: var(--ink-faint); opacity: .5;
margin: 10px auto 4px;
}
/* ========== Responsive breakpoints ========== */
@media (max-width: 1080px){
.order-section{ grid-template-columns: 1fr; gap: 30px; }
.order-rail{ display: none; } /* hide desktop rail; mobile bar replaces it */
.order-main{ padding-bottom: 16px; }
.platter{ grid-template-columns: 220px 1fr auto; }
.findus{ grid-template-columns: 1fr; }
.howmade-grid{ grid-template-columns: repeat(2, 1fr); }
.howmade-step + .howmade-step::before{ display: none; }
.mobile-cart-bar.has-items{ display: flex; }
body.has-cart{ padding-bottom: 84px; }
}
@media (max-width: 860px){
.nav-links{ display: none; }
.nav-burger{ display: flex; }
.nav-phone .lbl{ display: none; }
.nav-phone{ font-size: 13px; padding-right: 10px; }
}
@media (max-width: 720px){
.nav-inner{ grid-template-columns: 1fr auto auto; padding: 10px 16px; gap: 10px; }
.nav-phone{ display: none; }
.nav-cart{ padding: 0; width: 44px; height: 44px; justify-content: center; gap: 6px; }
.nav-cart .nc-label{ display: none; }
.nav-cart .badge{ position: absolute; top: -6px; right: -6px; }
.nav-cart{ position: relative; }
.shell{ padding: 0 16px; }
/* Hero ─ scale the sign + bowl, stack content */
.hero{
grid-template-columns: 1fr;
padding: 20px 0 12px;
gap: 18px;
}
.hero::before{ display: none; }
.hero-col-l h1{ font-size: clamp(32px, 9vw, 46px); line-height: 1.05; }
.hero-fa-h{ font-size: 18px; margin: 4px 0 12px; }
.hero-tagline{
flex-direction: column; gap: 4px; padding: 6px 0;
font-size: 11px; letter-spacing: .18em; margin-bottom: 8px;
}
.hero-meta{ grid-template-columns: 1fr 1fr; row-gap: 6px; margin-bottom: 16px; }
.hero-meta > div{ padding: 6px 10px; }
.hero-meta .val{ font-size: 16px; }
.hero-cta-row{ flex-direction: column; align-items: stretch; gap: 8px; }
.btn-primary, .btn-ghost{
width: 100%; justify-content: center; padding: 11px 16px;
min-height: 44px; font-size: 13px; box-sizing: border-box;
}
/* Hide the decorative right column on mobile — saves ~360px of vertical space */
.hero-col-r{ display: none; }
.hero{ padding: 16px 0 6px; gap: 0; grid-template-columns: 1fr; }
/* Status */
.status{ margin-top: 22px; border-top-width: 3px; border-bottom-width: 3px; }
.status-inner{ grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
.status-tag{ font-size: 11px; }
.status-msg{ font-size: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(241,213,155,.2); margin-bottom: 4px; }
.status-stat{
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0; border: 0; text-align: left;
border-top: 1px dotted rgba(241,213,155,.18);
}
.status-stat .v{ font-size: 18px; }
.status-stat .l{ display: inline; margin-top: 0; font-size: 10px; }
/* Menu rows on mobile:
┌──────┬───────────────┬───────┬─────┐
│ icon │ EN name │ Price │ [+] │
│ icon │ FA name │ │ │
└──────┴───────────────┴───────┴─────┘
Icon spans both rows on the left; price+action vertically centered. */
.menu-board{ padding: 0 12px; margin-bottom: 36px; }
.m-row{
grid-template-columns: 44px minmax(0, 1fr) auto auto;
grid-template-rows: auto auto;
align-items: center;
gap: 2px 12px;
padding: 12px 2px;
}
.m-row-icon{
width: 44px; height: 44px;
grid-column: 1; grid-row: 1 / span 2;
}
.m-row-icon svg{ width: 28px; height: 28px; }
.m-row-en{
grid-column: 2; grid-row: 1;
font-size: 18px; line-height: 1.15;
}
.m-row-leader{ display: none; }
.m-row-fa{
grid-column: 2; grid-row: 2;
text-align: left; font-size: 14px; white-space: normal;
}
.m-row-en .hint, .m-row-fa .hint{ display: none; }
.m-row-price{
grid-column: 3; grid-row: 1 / span 2;
align-self: center; min-width: auto;
}
.m-row-price .num{ font-size: 22px; }
.m-row-action{
grid-column: 4; grid-row: 1 / span 2;
align-self: center; width: auto;
}
.m-row-action .stepper{ height: 40px; }
.m-row-action .stepper button{ width: 36px; height: 38px; }
.m-row-action .add-btn{ height: 40px; padding: 0 14px; min-width: 60px; }
/* Order section */
.order-section{ margin-top: 28px; }
.cat-tabs-strip{
top: var(--cat-strip-top, 60px);
margin: 18px -16px 22px;
}
.cat-tabs-strip::before,
.cat-tabs-strip::after{ width: 26px; }
.cat-tabs{ padding: 0 8px; }
.cat-tab{
padding: 12px 14px; gap: 8px;
min-height: 48px;
}
.cat-tab .t-en{ font-size: 11px; letter-spacing: .15em; }
.cat-tab .t-fa{ font-size: 12px; }
.sec-head{ flex-wrap: wrap; gap: 6px 14px; padding-bottom: 10px; }
.sec-head .num{ font-size: 38px; }
.sec-head .t-en{ font-size: 24px; flex: 1 1 60%; }
.sec-head .t-fa{ font-size: 20px; flex: 1 1 100%; }
.sec-head .ornament{ display: none; }
.price-tag .num{ font-size: 26px; }
.stepper{ height: 44px; }
.stepper button{ width: 44px; height: 44px; font-size: 24px; }
.stepper .qty{ width: 36px; font-size: 15px; }
.add-btn{ height: 44px; padding: 0 18px; font-size: 12px; }
/* Platters */
.platters{ margin: 22px 0 40px; }
.platter{ grid-template-columns: 1fr; gap: 14px; padding: 20px; }
.platter.crown{ padding-top: 30px; }
.platter.crown::before{ font-size: 9px; padding: 5px 10px; left: 14px; letter-spacing: .2em; }
.platter-img{ aspect-ratio: 16 / 9; }
.platter-info h3{ flex-wrap: wrap; gap: 4px 12px; }
.platter-info h3 .en{ font-size: 26px; }
.platter-info h3 .fa{ font-size: 18px; }
.platter-info ul{ font-size: 14px; gap: 2px 12px; }
.platter-info ul li .fa{ font-size: 12px; }
.platter-action{
flex-direction: row; justify-content: space-between; align-items: center;
gap: 14px; min-width: 0;
}
.platter-action .price-tag .num{ font-size: 32px; }
/* How made */
.howmade{ padding: 36px 0; margin-top: 50px; }
.howmade-head h2{ font-size: 30px; }
.howmade-head .h-fa{ font-size: 18px; }
.howmade-grid{ grid-template-columns: 1fr; gap: 22px; }
.howmade-step{ text-align: left; padding: 0; }
.howmade-step .nm{ justify-content: flex-start; }
/* Find us */
.findus{ margin-top: 50px; gap: 22px; }
.findus-info{ padding-right: 0; }
.findus-info h2{ font-size: 38px; }
.findus-info .h-fa{ font-size: 20px; margin-bottom: 18px; }
.findus-info dl{ grid-template-columns: 1fr; gap: 0; }
.findus-info dt{
padding-top: 12px; padding-bottom: 4px;
border-top: 1px solid var(--rule);
}
.findus-info dd{
padding-top: 0; padding-bottom: 12px;
border-top: none; font-size: 16px;
}
.findus-map{ min-height: 260px; }
.findus-map .pin .lbl{ font-size: 18px; }
/* Footer */
.footer{ grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 30px 0 36px; margin-top: 50px; }
.footer .right{ text-align: center; }
.footer .center{ margin: 0 auto; order: -1; }
/* Modal: treat as bottom sheet on mobile */
.modal-back{ padding: 0; align-items: flex-end; }
.modal{
width: 100%; max-height: 94vh;
padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
}
.modal h3{ font-size: 26px; padding-right: 80px; }
.modal .stamp{ width: 70px; height: 70px; right: 18px; top: 22px; }
.modal .stamp .mid{ font-size: 14px; }
.modal .totals{ font-size: 12px; }
.form{ grid-template-columns: 1fr; gap: 12px; }
.form input{
font-family:"Cormorant Garamond", serif; /* avoid wonky Caveat for typing */
font-size: 17px; /* ≥16px to prevent iOS auto-zoom */
padding: 8px 2px 8px;
}
.place{ min-height: 50px; padding: 14px; font-size: 13px; }
.confirm{ padding: 36px 22px 26px; }
.confirm .seal{ width: 96px; height: 96px; right: -4px; top: -14px; }
.confirm .seal .mid{ font-size: 20px; }
.confirm h2{ font-size: 28px; padding: 0 8px; }
.confirm .h-fa{ font-size: 18px; }
.confirm .msg{ font-size: 16px; }
.toast{ top: 70px; padding: 10px 16px; font-size: 12px; max-width: calc(100vw - 32px); }
}
@media (max-width: 420px){
.nav-inner{ padding: 8px 12px; gap: 8px; }
.brand{ gap: 10px; }
.brand .seal{ width: 38px; height: 38px; font-size: 16px; }
.brand .lockup .en{ font-size: 17px; }
.brand .lockup .fa{ font-size: 13px; }
.shell{ padding: 0 14px; }
.hero-col-l h1{ font-size: clamp(34px, 12vw, 48px); }
.hero-fa-h{ font-size: 20px; }
.hero-meta .val{ font-size: 16px; }
.hero-meta .lbl{ font-size: 9px; }
.sec-head .num{ font-size: 32px; }
.sec-head .t-en{ font-size: 20px; }
.sec-head .t-fa{ font-size: 17px; }
.m-row{ grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 2px 10px; }
.m-row-icon{
width: 38px; height: 38px;
border: none; background: transparent;
}
.m-row-icon svg{ width: 32px; height: 32px; }
.m-row-en{ font-size: 17px; }
.m-row-fa{ font-size: 14px; }
.m-row-price .num{ font-size: 20px; }
.platter-info h3 .en{ font-size: 22px; }
.platter-info h3 .fa{ font-size: 16px; }
.findus-info h2{ font-size: 32px; }
.findus-info .h-fa{ font-size: 18px; }
}
/* ═══════════════════════════════════════════════════════════════════════
i18n layer (2026-07-16) — trilingual EN / AR / FA with language switcher.
The design keeps its two-script pairing everywhere; these classes let the
CONTENT of a slot carry whichever script the chosen language needs:
`.scr-latin` / `.scr-arab` are applied by the components alongside the
original slot class (e.g. class="m-row-en scr-arab"), and the two-class
selector wins over the slot's own font-family.
═══════════════════════════════════════════════════════════════════════ */
.scr-latin, .scr-latin *:not(.fa):not(.scr-arab){ direction:ltr; unicode-bidi: isolate; }
.scr-arab, .scr-arab *:not(.en):not(.scr-latin){ direction:rtl; unicode-bidi: isolate; }
/* Font for scr-latin ONLY on RTL pages (where it marks English ACCENTS in
slots that set Vazirmatn). On the English page, scr-latin sets no font, so
primary slots keep their original smallcaps/serif design untouched. */
[dir="rtl"] .scr-latin{ font-family:"Cormorant Garamond","IM Fell English",Georgia,serif; }
.scr-arab{ font-family:"Vazirmatn","Gulzar",Tahoma,sans-serif; }
/* smallcaps/uppercase Latin slots keep their look; Arabic script has no
smallcaps — soften tracking so Vazirmatn doesn't gap awkwardly. */
.scr-arab.smallcaps, .smallcaps.scr-arab, .scr-arab[class*="lbl"], .kicker.scr-arab{
letter-spacing: 0 !important; text-transform: none !important;
}
/* Language switcher — wax-seal pills, shared by SPA nav + SSR pages. */
.lang-switch{
display:inline-flex; align-items:center; gap:2px;
border:1px solid var(--ink, #221408); border-radius: 999px;
padding:2px; background: var(--paper-1, #fffaf0);
box-shadow: 0 1px 0 rgba(34,20,8,.12);
}
.lang-pill{
appearance:none; border:none; background:transparent; cursor:pointer;
padding: 3px 10px; border-radius:999px; text-decoration:none;
font-size: 12px; line-height: 1.5; color: var(--ink, #221408);
font-family:"Vazirmatn","Cormorant Garamond",serif; font-weight:600;
letter-spacing:.02em; white-space:nowrap;
}
.lang-pill[lang="en"]{ font-family:"IM Fell DW Pica SC","Cormorant Garamond",serif; letter-spacing:.08em; font-size:11.5px; }
.lang-pill:hover{ color: var(--seal, #8a1c1c); }
.lang-pill.on{
background: var(--ink, #221408); color: var(--paper-1, #fffaf0);
}
.lang-pill.on:hover{ color: var(--paper-1, #fffaf0); }
.m-menu-lang{ margin: 10px 0 4px; display:flex; justify-content:center; }
.m-menu-lang .lang-pill{ font-size: 14px; padding: 6px 16px; }
/* ── RTL adjustments (dir=rtl set for ar/fa) ─────────────────────────────
Flex/grid mirror automatically with dir; these fix hardcoded LTR bits. */
[dir="rtl"] .nav-link .fa-mini{ margin-left:0; margin-right:6px; }
[dir="rtl"] .sec-head .ornament{ transform: scaleX(-1); }
[dir="rtl"] .cshelf-arrow, [dir="rtl"] .cf-cta-arrow{ transform: scaleX(-1); display:inline-block; }
[dir="rtl"] .search-icon{ left:auto; right:14px; }
[dir="rtl"] .search-input{ padding-left:38px; padding-right:42px; }
[dir="rtl"] .search-clear{ right:auto; left:10px; }
[dir="rtl"] .area-search-ic{ left:auto; right:12px; }
[dir="rtl"] .area-input{ padding-left:34px; padding-right:36px; }
[dir="rtl"] .area-clear, [dir="rtl"] .area-caret{ right:auto; left:10px; }
[dir="rtl"] .modal-x{ right:auto; left:14px; }
[dir="rtl"] .m-menu-x{ right:auto; left:14px; }
/* keep prices/quantities Latin-digit + LTR inside RTL rows */
.m-row-price, .rl-price, .price-tag, .amt, .mcb-total, .pc-add, .area-opt-fee{
direction:ltr; unicode-bidi: isolate;
}
/* On narrow screens the top bar is crowded (phone + cart + burger) — the
mobile drawer carries its own, larger switcher instead. */
@media (max-width: 1080px){
.nav .lang-switch{ display:none; }
}
/* Compact nav variant of the switcher: full language names, tighter pills. */
.lang-switch--compact .lang-pill{ padding: 3px 9px; font-size: 12px; }
.lang-switch--compact .lang-pill[lang="en"]{ font-size: 10.5px; }
/* ── Nav tidy (2026-07-17) ────────────────────────────────────────────────
The switcher pushed the bar past its budget and every flex item absorbed
the deficit by WRAPPING (3-line brand, stacked links, broken phone
number). Desktop links are now single-language; beyond that, nothing in
the top bar is ever allowed to wrap — when space runs out we fall to the
burger nav instead of shattering the line. */
.nav-link, .nav-phone, .nav-phone .lbl,
.brand .lockup .en, .brand .lockup .fa{ white-space: nowrap; }
.nav-links{ flex-wrap: nowrap; min-width: 0; }
@media (min-width: 861px){
.nav-inner{ gap: 16px; padding: 12px 20px; max-width: 1400px; }
.nav-link{ padding: 10px 8px; letter-spacing: .09em; font-size: 13.5px; }
.nav-phone .lbl{ display: none; }
.nav-phone{ font-size: 13px; padding-right: 12px; }
.nav-cart{ padding: 11px 16px; }
}
[dir="rtl"] .nav-phone{ padding-right: 0; padding-left: 12px; border-right: none; border-left: 1px solid var(--rule-faint); }
/* Graceful degradation instead of wrapping (full-name switcher = ~167px):
below 1400 the phone number leaves the bar and the links condense a
notch; below 1240 the links fold into the burger menu. */
@media (min-width: 861px) and (max-width: 1399px){
.nav-phone{ display: none; }
.nav-link{ font-size: 12.5px; padding: 10px 6px; letter-spacing: .06em; }
}
@media (max-width: 1240px){
.nav-links{ display: none; }
.nav-burger{ display: flex; }
}
/* ═══════════════════════════════════════════════════════════════════════
i18n layer v2 (2026-07-16) — THE FONT FIX.
Root cause: compound slot selectors (.hero h1, .sec-head .t-en, .nav-link,
.add-btn, ...) hardcode the Latin display fonts (IM Fell / Cormorant /
smallcaps, italic, tracked-uppercase) and OUT-SPECIFY the single-class
.scr-arab — so Arabic/Farsi primary text fell into glyphless Latin serifs
and system fallbacks. This layer makes the CONTENT script always win.
Nested .scr-latin accents (English inside an Arabic-led slot) are excluded.
═══════════════════════════════════════════════════════════════════════ */
.scr-arab:not(.mono),
.scr-arab *:not(.scr-latin):not(.scr-latin *):not(.mono){
font-family:"Vazirmatn","Gulzar",Tahoma,sans-serif !important;
letter-spacing:0 !important;
text-transform:none !important;
font-style:normal !important;
}
/* Large display headings in Arabic script get Amiri — the classical naskh
serif that pairs with Cormorant/IM Fell the way the ledger intends. */
h1.scr-arab:not(.mono), h2.scr-arab:not(.mono), h3.scr-arab:not(.mono),
.sec-head .t-en.scr-arab, .sec-head .t-fa.scr-arab,
.platter-info h3 .en.scr-arab, .platter-info h3 .fa.scr-arab,
.rail-head .t.scr-arab, .rail-head .fa.scr-arab,
.confirm h2.scr-arab:not(.mono), .hero-fa-h.scr-arab:not(.mono){
font-family:"Amiri","Vazirmatn",serif !important;
font-weight:700;
}
/* Arabic script needs taller lines than the tight Latin display setting. */
[dir="rtl"] .hero h1{ line-height:1.45; }
[dir="rtl"] .sec-head .t-en{ line-height:1.35; }
h1.scr-arab, h2.scr-arab{ line-height:1.4; }
/* RTL pages: Latin accents step back so the chosen language clearly leads. */
[dir="rtl"] .scr-latin{ opacity:.72; }
[dir="rtl"] .lang-switch .lang-pill{ opacity:1; }
/* Arabic-script primaries in slots sized for tracked smallcaps read small —
give the main interactive text more presence. */
[dir="rtl"] .nav-link > .scr-arab{ font-size:14.5px; font-weight:600; }
[dir="rtl"] .add-btn{ font-size:13px; font-weight:700; }
[dir="rtl"] .rail-cta, [dir="rtl"] .place{ font-size:16px; }
[dir="rtl"] .m-row-en.scr-arab{ font-size:18px; font-weight:600; }
[dir="rtl"] .btn-primary, [dir="rtl"] .btn-ghost{ letter-spacing:0; }
/* ═══════════════════════════════════════════════════════════════════════
Blog / Journal (2026-07-17) — SEO article pages. Reuses the paper palette;
RTL-aware; Arabic-script bodies inherit the .scr-arab font rules via the
[dir="rtl"] hooks below.
═══════════════════════════════════════════════════════════════════════ */
.blog-page, .article-page{
max-width: 820px; margin: 0 auto; padding: 20px 20px 72px;
}
.article-topbar{
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin: 6px 0 18px;
}
.crumbs{ font-family:"IM Fell English",serif; font-size:14px; color: var(--ink-soft); display:flex; gap:8px; align-items:center; }
.crumbs a{ color: var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color: var(--seal); }
/* ── Index ── */
.blog-head h1{ font-family:"IM Fell English",serif; font-size:40px; margin:0 0 8px; line-height:1.15; }
.blog-head p{ font-family:"Cormorant Garamond",Georgia,serif; font-size:19px; color: var(--ink-soft); margin:0 0 26px; max-width:60ch; }
.blog-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; }
.blog-card a{ display:flex; flex-direction:column; height:100%; text-decoration:none; color: var(--ink); border:1px solid var(--rule-faint); border-radius:10px; overflow:hidden; background: var(--paper-1); transition: transform .18s ease, box-shadow .18s ease; }
.blog-card a:hover{ transform: translateY(-3px); box-shadow: 0 8px 22px rgba(34,20,8,.14); }
.blog-card-img{ display:block; aspect-ratio: 3/2; overflow:hidden; background:#000; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; filter: sepia(.12) saturate(1.05); }
.blog-card-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 18px; }
.blog-card-cat{ font-family:"IM Fell DW Pica SC",serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--seal); }
.blog-card-title{ font-family:"IM Fell English",serif; font-size:22px; line-height:1.2; }
.blog-card-desc{ font-family:"Cormorant Garamond",Georgia,serif; font-size:16px; color: var(--ink-soft); }
/* ── Article ── */
.article-kicker{ font-family:"IM Fell DW Pica SC",serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--seal); margin:0 0 6px; }
.article-title{ font-family:"IM Fell English",serif; font-size:42px; line-height:1.12; margin:0 0 18px; }
.article-hero{ width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; border-radius:12px; filter: sepia(.12) saturate(1.05); margin:0 0 24px; }
.article-tldr{ background: rgba(176,122,31,.08); border:1px solid var(--rule-faint); border-radius:10px; padding:16px 20px; margin:0 0 28px; }
.article-tldr h2{ font-family:"IM Fell DW Pica SC",serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 8px; color: var(--ink); }
.article-tldr ul{ margin:0; padding-inline-start:20px; }
.article-tldr li{ font-family:"Cormorant Garamond",Georgia,serif; font-size:17px; margin:4px 0; }
.article-body{ font-family:"Cormorant Garamond",Georgia,serif; font-size:19.5px; line-height:1.72; color: var(--ink); }
.article-body h2{ font-family:"IM Fell English",serif; font-size:28px; line-height:1.2; margin:34px 0 10px; }
.article-body h3{ font-family:"IM Fell English",serif; font-size:22px; margin:24px 0 8px; }
.article-body p{ margin:0 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 18px; padding-inline-start:24px; }
.article-body li{ margin:6px 0; }
.article-body a{ color: var(--seal); text-underline-offset:3px; }
.article-body strong{ color: var(--ink); }
.article-body blockquote{ margin:20px 0; padding-inline-start:16px; border-inline-start:3px solid var(--seal); color: var(--ink-soft); font-style:italic; }
.article-body table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:16.5px; }
.article-body th, .article-body td{ border:1px solid var(--rule-faint); padding:9px 12px; text-align:start; vertical-align:top; }
.article-body thead th{ background: rgba(176,122,31,.10); font-family:"IM Fell DW Pica SC",serif; letter-spacing:.04em; }
.article-cta{ margin:34px 0; padding:20px 22px; border:1px dashed var(--seal); border-radius:12px; text-align:center; background: rgba(138,28,28,.04); }
.article-cta p{ font-family:"Cormorant Garamond",Georgia,serif; font-size:19px; margin:0 0 12px; }
.article-cta-btn{ display:inline-block; background: var(--ink); color: var(--paper-1); text-decoration:none; padding:11px 26px; border-radius:6px; font-family:"IM Fell DW Pica SC",serif; font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.article-cta-btn:hover{ background: var(--seal); }
.article-faq{ margin:36px 0 0; }
.article-faq h2{ font-family:"IM Fell English",serif; font-size:28px; margin:0 0 14px; }
.article-faq details{ border-bottom:1px solid var(--rule-faint); padding:12px 0; }
.article-faq summary{ font-family:"Cormorant Garamond",Georgia,serif; font-size:20px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.article-faq summary::after{ content:"+"; color: var(--seal); font-size:22px; line-height:1; }
.article-faq details[open] summary::after{ content:"−"; }
.article-faq p{ font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; color: var(--ink-soft); margin:10px 0 4px; line-height:1.6; }
.article-more{ margin:44px 0 0; border-top:1px solid var(--rule-faint); padding-top:20px; }
.article-more h2{ font-family:"IM Fell DW Pica SC",serif; font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; color: var(--seal); }
.article-more ul{ list-style:none; padding:0; margin:0; }
.article-more li{ margin:8px 0; }
.article-more a{ font-family:"IM Fell English",serif; font-size:20px; color: var(--ink); text-decoration:none; }
.article-more a:hover{ color: var(--seal); }
/* RTL: Arabic/Farsi bodies use Vazirmatn; headings use Amiri to match the
rest of the trilingual site; relax the tight Latin display sizing. */
[dir="rtl"] .blog-head h1, [dir="rtl"] .article-title,
[dir="rtl"] .article-body h2, [dir="rtl"] .article-body h3,
[dir="rtl"] .article-faq h2, [dir="rtl"] .blog-card-title{
font-family:"Amiri","Vazirmatn",serif; line-height:1.4;
}
[dir="rtl"] .blog-head p, [dir="rtl"] .article-body, [dir="rtl"] .article-tldr li,
[dir="rtl"] .article-cta p, [dir="rtl"] .article-faq summary, [dir="rtl"] .article-faq p,
[dir="rtl"] .blog-card-desc{ font-family:"Vazirmatn","Gulzar",Tahoma,sans-serif; }
[dir="rtl"] .article-kicker, [dir="rtl"] .article-cta-btn, [dir="rtl"] .article-more h2,
[dir="rtl"] .blog-card-cat{ letter-spacing:0; }
[dir="rtl"] .article-faq summary::after{ margin-inline-start:auto; }
@media (max-width: 680px){
.blog-grid{ grid-template-columns: 1fr; }
.blog-head h1{ font-size:32px; }
.article-title{ font-size:32px; }
.article-body{ font-size:18px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Flash-promo countdown banner (World Cup Night) — 2026-07-18.
Top-of-page strip: two team flags · VS · offer + live countdown · CTA.
Non-sticky (sits above the sticky nav, scrolls away) to avoid layout math.
═══════════════════════════════════════════════════════════════════════ */
/* Warm, premium announcement ribbon — matches the paper/ink/seal-red/gold
brand (the old stadium-green + spinning ball read tacky). Deep ink→seal
gradient, gold accents, crisp static flags, one subtle sheen. */
.wc-promo{
position: relative; overflow: hidden; z-index: 60;
background:
radial-gradient(160% 240% at 50% -70%, rgba(241,213,155,.15), transparent 60%),
linear-gradient(100deg, #1e1207 0%, #45140f 52%, #6b1414 100%);
color: #f4e6c6;
border-top: 1px solid rgba(241,213,155,.30);
border-bottom: 1px solid rgba(241,213,155,.22);
box-shadow: 0 3px 14px rgba(28,10,4,.30);
font-family: "Cormorant Garamond", Georgia, serif;
}
.wc-promo .wc-inner{
max-width: 1200px; margin: 0 auto; padding: 9px 46px 9px 16px;
display: flex; align-items: center; justify-content: center;
gap: 8px 18px; flex-wrap: wrap; text-align: center;
position: relative; z-index: 2;
}
/* one slow, subtle gold sheen — refined, not a light show */
.wc-promo .wc-shine{
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 44%, rgba(255,242,205,.09) 50%, transparent 56%);
background-size: 260% 100%; background-position: 180% 0;
animation: wc-sweep 8s ease-in-out infinite;
}
@keyframes wc-sweep{ 0%{background-position:180% 0;} 60%,100%{background-position:-90% 0;} }
.wc-match{ display: inline-flex; align-items: center; gap: 9px; }
.wc-team{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wc-team b{ font-family: "IM Fell English", serif; font-style: italic; font-weight: 600; font-size: 16px; letter-spacing: .01em; color: #f7eccf; }
.wc-flag{
width: 26px; height: 18px; border-radius: 3px; overflow: hidden; flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(241,213,155,.5), 0 1px 3px rgba(0,0,0,.4);
display: inline-block; line-height: 0;
}
.wc-flag svg{ width: 100%; height: 100%; display: block; }
.wc-vs{ display: inline-grid; place-items: center; }
.wc-vs-txt{ font-family: "IM Fell DW Pica SC", serif; font-size: 10.5px; letter-spacing: .2em; color: #e8c877; opacity: .82; }
.wc-deal{ display: inline-flex; align-items: center; gap: 10px; }
/* The discount is the HERO — a big bold bright-gold badge with a soft gold
glow pulse that pops off the dark ribbon (dark maroon on gold = max contrast). */
.wc-offer{
display: inline-flex; align-items: baseline; gap: 6px;
background: linear-gradient(180deg, #fff1c6, #eac765);
color: #4a1008; line-height: 1;
padding: 5px 16px; border-radius: 999px;
box-shadow: 0 0 0 1px rgba(255,240,190,.6), 0 0 16px rgba(255,208,88,.55), inset 0 1px 0 rgba(255,255,255,.55);
animation: wc-glow 1.9s ease-in-out infinite;
}
@keyframes wc-glow{
0%,100%{ box-shadow: 0 0 0 1px rgba(255,240,190,.5), 0 0 10px rgba(255,208,88,.38), inset 0 1px 0 rgba(255,255,255,.5); }
50%{ box-shadow: 0 0 0 1px rgba(255,244,205,.85), 0 0 22px rgba(255,208,88,.85), 0 0 36px rgba(255,188,60,.45), inset 0 1px 0 rgba(255,255,255,.6); }
}
.wc-pct{ font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800; font-size: 27px; letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.wc-off{ font-family: "IM Fell DW Pica SC", serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* RTL numerals (۲۰٪ / ٢٠٪) need a font with those glyphs — JetBrains Mono lacks them. */
[dir="rtl"] .wc-pct{ font-family: "Vazirmatn", "Amiri", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0; }
[dir="rtl"] .wc-off{ letter-spacing: 0; }
/* "until 5 AM" deadline note beside the badge. */
.wc-until{ font-family: "IM Fell English", serif; font-style: italic; font-size: 13.5px; color: rgba(244,230,198,.85); white-space: nowrap; }
[dir="rtl"] .wc-until{ font-family: "Vazirmatn", "Amiri", sans-serif; font-style: normal; font-size: 12px; }
.wc-count{
font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;
font-size: 12.5px; color: #f4e6c6; direction: ltr; unicode-bidi: isolate;
background: rgba(0,0,0,.20); border: 1px solid rgba(241,213,155,.26);
padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.wc-dot{ width: 8px; height: 8px; border-radius: 50%; background: #ff5a4d; box-shadow: 0 0 0 0 rgba(255,90,77,.7); display: none; }
.wc-promo.is-live .wc-dot{ display: inline-block; animation: wc-pulse 1.3s ease-out infinite; }
@keyframes wc-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(255,90,77,.6);} 70%{ box-shadow: 0 0 0 7px rgba(255,90,77,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,90,77,0);} }
.wc-cta{
display: none; text-decoration: none; white-space: nowrap;
font-family: "IM Fell DW Pica SC", serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
color: #3a1008; background: linear-gradient(180deg, #ffeeba, #e7c264);
padding: 6px 16px; border-radius: 999px; font-weight: 700;
box-shadow: 0 2px 9px rgba(231,194,100,.34); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.wc-promo.is-live .wc-cta{ display: inline-block; }
.wc-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 14px rgba(231,194,100,.5); }
.wc-x{
position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px;
background: transparent; border: none; color: rgba(244,230,198,.5); cursor: pointer;
font-size: 13px; line-height: 1; padding: 6px;
}
.wc-x:hover{ color: #f4e6c6; }
/* RTL: keep the countdown clock LTR; the offer word-spacing relaxes. */
[dir="rtl"] .wc-offer{ letter-spacing: 0; }
[dir="rtl"] .wc-team b{ font-family: "Vazirmatn", "Amiri", sans-serif; font-style: normal; }
@media (max-width: 620px){
.wc-promo .wc-inner{ gap: 4px 12px; padding: 7px 36px 7px 12px; }
.wc-team b{ font-size: 13.5px; }
.wc-pct{ font-size: 23px; }
[dir="rtl"] .wc-pct{ font-size: 21px; }
.wc-off{ font-size: 10px; }
.wc-count{ font-size: 11.5px; }
.wc-flag{ width: 24px; height: 16px; }
}
/* ── Upsell touchpoints (website upsell system, 2026-07-18) ─────────────────
Design vocabulary follows the existing .rail-nudge / .ris-* patterns:
hairline dashed boxes, IM Fell + Vazirmatn dual-script slots, JetBrains
Mono prices, transitions only on opacity/transform at --t-med/--ease-out.
All slots are .scr-arab-safe; positional offsets get [dir="rtl"] flips. */
/* Social proof on the inline ribbon — "Ordered together 161×". Handwritten
accent (Caveat) like .rn-meta; the count stays LTR in RTL contexts. */
.up-proof{
display: inline-block;
margin-inline-start: 8px;
font-family: "Caveat", cursive;
font-size: 13.5px;
color: var(--ink-faint);
letter-spacing: 0;
text-transform: none;
unicode-bidi: isolate;
}
[dir="rtl"] .up-proof{ font-family: "Vazirmatn", sans-serif; font-size: 11.5px; }
/* Checkout last-chance line — one dismissible ledger row above the form/pay
button. Fixed min-height (zero layout shift: it either renders at this
height from modal-open or not at all — it never appears mid-view). */
.up-checkline{
position: relative;
display: grid;
grid-template-columns: 46px 1fr auto auto;
align-items: center;
gap: 12px;
min-height: 66px;
margin: 16px 0 6px;
padding: 12px 14px;
border: 1.5px solid var(--seal);
border-radius: 6px;
background: linear-gradient(135deg, #fbf1d6 0%, #f2e0a9 100%);
box-shadow: var(--shadow-2);
cursor: pointer;
text-align: start;
-webkit-tap-highlight-color: rgba(138,28,28,.12);
transition: transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
/* one-time glow to catch the eye when checkout opens (reduced-motion safe) */
animation: upClGlow 2.1s var(--ease-out) .15s 1;
}
.up-checkline:hover{ transform: translateY(-1px); box-shadow: var(--shadow-3); }
.up-checkline:active{ transform: translateY(0); }
.up-checkline:focus-visible{ outline: 2px solid var(--seal); outline-offset: 2px; }
@keyframes upClGlow{
0% { box-shadow: 0 0 0 0 rgba(138,28,28,0), var(--shadow-2); }
35% { box-shadow: 0 0 0 5px rgba(138,28,28,.16), 0 8px 18px rgba(138,28,28,.20); }
100% { box-shadow: 0 0 0 0 rgba(138,28,28,0), var(--shadow-2); }
}
.up-cl-thumb{
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 6px;
background: rgba(255,252,242,.85);
border: 1px solid var(--paper-edge);
color: var(--seal);
overflow: hidden;
flex-shrink: 0;
}
.up-cl-thumb svg{ width: 28px; height: 28px; }
.up-cl-thumb--photo img{ width: 100%; height: 100%; object-fit: cover; filter: sepia(.08) saturate(.95); }
.up-cl-text{
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.up-cl-label{
font-family: "Caveat", cursive;
font-size: 15px;
line-height: 1.1;
color: var(--seal);
}
.scr-arab.up-cl-label, [dir="rtl"] .up-cl-label{ font-family: "Vazirmatn", sans-serif; font-size: 12.5px; }
.up-cl-item{
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 18px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.up-cl-fa{ font-family: "Vazirmatn", sans-serif; font-style: normal; font-size: 13px; color: var(--ink-soft); }
/* Filled CTA pill — visual only; the whole card is the tap target. */
.up-cl-add{
flex-shrink: 0;
display: inline-flex;
align-items: baseline;
gap: 3px;
background: var(--seal);
color: #fff;
border: 0;
padding: 10px 16px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 2px 0 -1px var(--seal-deep);
pointer-events: none;
unicode-bidi: isolate;
direction: ltr;
transition: filter .15s;
}
.up-checkline:hover .up-cl-add{ filter: brightness(1.09); }
.up-cl-cur{ font-size: 10px; opacity: .85; }
.up-cl-x{
flex-shrink: 0;
align-self: flex-start;
border: none;
background: none;
color: var(--ink-faint);
font-size: 14px;
line-height: 1;
padding: 4px 4px;
cursor: pointer;
position: relative;
z-index: 2;
}
.up-cl-x:hover{ color: var(--seal); }
/* Min-order shortfall helper chip — sits inside the existing warning box. */
.up-shortfall{
margin-top: 8px;
padding-top: 8px;
border-top: 1px dotted var(--rule-faint);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.up-sf-label{
font-family: "Caveat", cursive;
font-size: 14px;
color: var(--ink-soft);
letter-spacing: 0;
text-transform: none;
}
.scr-arab .up-sf-label, [dir="rtl"] .up-sf-label{ font-family: "Vazirmatn", sans-serif; font-size: 12px; }
.up-sf-add{
border: 1px solid var(--ink);
background: rgba(255,250,235,.7);
color: var(--ink);
padding: 7px 12px;
min-height: 34px;
font-family: "IM Fell English", serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.up-sf-add:hover{ background: var(--ink); color: var(--paper-1); }
[dir="rtl"] .up-sf-add{ font-family: "Vazirmatn", sans-serif; font-style: normal; font-size: 13px; }
@media (max-width: 720px){
.up-checkline{ gap: 10px; padding: 11px 12px; grid-template-columns: 42px 1fr auto auto; }
.up-cl-thumb{ width: 42px; height: 42px; }
.up-cl-item{ font-size: 16px; }
.up-cl-add{ padding: 9px 13px; font-size: 14px; }
}
/* ── Rendering cost (2026-08-05 perf pass) ─────────────────────────────────
content-visibility:auto lets the browser skip layout+paint for menu
sections until they approach the viewport — with ~9 sections × ~37 rows of
trilingual text, that was a large slice of every style/layout pass. The
scroll-spy is unaffected: it reads getBoundingClientRect() of sections near
the reading line, which are by definition in/near the viewport and fully
rendered; far sections use the contain-intrinsic-size estimate, and any
drift corrects itself as they scroll in. scrollIntoView (tab taps) forces
on-demand layout of the target per spec. Below-fold size changes cannot
contribute to CLS. */
.menu-cat { content-visibility: auto; contain-intrinsic-size: auto 1200px; }