/* Fonts, self-hosted (Google Fonts, SIL OFL): Lalezar, Anton, Readex Pro.
   Declared here rather than with next/font so only شطة فهد pages load them. */
@font-face{font-family:Lalezar;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/8c701f89af1c2d08.woff2")format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:Lalezar;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/c91ee89d2cacdc66.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Lalezar;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/658a4b7e65d6cee0.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lalezar;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/253e94113a37262d.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lalezar Fallback";src:local(Arial);ascent-override:104.91%;descent-override:63.01%;line-gap-override:0.0%;size-adjust:93.32%}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/0e7b7e0b829e3eb9.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/daf789e4474d0d90.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/9e9f04e3c37952ab.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton Fallback";src:local(Arial);ascent-override:129.7%;descent-override:36.29%;line-gap-override:0.0%;size-adjust:90.69%}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/52acd2ded95ac6cd.woff2")format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/4ce61fe437b63f55.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ecc51711236713ee.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/890431f0a0104557.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/52acd2ded95ac6cd.woff2")format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/4ce61fe437b63f55.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ecc51711236713ee.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/890431f0a0104557.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/52acd2ded95ac6cd.woff2")format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/4ce61fe437b63f55.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ecc51711236713ee.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/890431f0a0104557.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/52acd2ded95ac6cd.woff2")format("woff2");unicode-range:U+6??,U+750-77F,U+870-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF?,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/4ce61fe437b63f55.woff2")format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ecc51711236713ee.woff2")format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/890431f0a0104557.woff2")format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro Fallback";src:local(Arial);ascent-override:92.3%;descent-override:23.07%;line-gap-override:0.0%;size-adjust:108.34%}

/* ════════════════════════════════════════════════════
   شطة فهد — flagship storefront
   Everything is scoped under .shatta (set by ShattaShell), so no other
   tenant is affected. Screen-print look from the label: cream paper, red
   ink, mustard second ink, hard offset shadows, no blur.
   ════════════════════════════════════════════════════ */

.shatta {
  --font-shatta-display: "Lalezar", "Lalezar Fallback";
  --font-shatta-condensed: "Anton", "Anton Fallback";
  --font-shatta-text: "Readex Pro", "Readex Pro Fallback";
  --sh-red: #cb333b;
  --sh-red-deep: #a9252d;
  --sh-yellow: #f2a900;
  --sh-orange: #dc582a;
  --sh-cream: #ede7d4;
  --sh-paper: #f6f1e3;
  --sh-ink: #231512;
  --sh-ink-2: #4a3a33;
  --sh-line: #231512;
  --sh-soft-line: rgba(35, 21, 18, 0.16);
  --sh-shadow: 0 4px 0 var(--sh-ink);
  --sh-radius: 14px;
  --sh-display: var(--font-shatta-display), var(--font-shatta-text), serif;
  --sh-condensed: var(--font-shatta-condensed), var(--font-shatta-display), sans-serif;
  --sh-text: var(--font-shatta-text), var(--font-plex-arabic), system-ui, sans-serif;

  /* Re-point the shared storefront tokens so cart, checkout, tracking and
     the policy pages pick up the brand without being rebuilt. */
  --sf-bg: var(--sh-cream);
  --sf-surface: var(--sh-paper);
  --sf-surface-2: #efe8d6;
  --sf-ink: var(--sh-ink);
  --sf-ink-2: var(--sh-ink-2);
  --sf-muted: #6b5a51;
  --sf-muted-2: #776358;
  --sf-line: rgba(35, 21, 18, 0.18);
  --sf-line-2: rgba(35, 21, 18, 0.3);
  --sf-brand: var(--sh-red);
  --sf-brand-ink: var(--sh-red-deep);
  --sf-brand-soft: rgba(203, 51, 59, 0.1);

  background: var(--sh-cream);
  color: var(--sh-ink);
  font-family: var(--sh-text);
  overflow-x: hidden; /* fallback: iOS < 16 in-app browsers */
  overflow-x: clip;
}
:root:has(.shatta) { scroll-padding-top: 5.5rem; scroll-padding-bottom: 5.5rem; }

.shatta :where(p, li, dd, dt, label, input, textarea, select, button) {
  line-height: 1.7;
}
.shatta:lang(en) :where(p, li, dd, dt, label, input, textarea, select, button) {
  line-height: 1.55;
}

/* Shared storefront classes, re-skinned for the brand */
.shatta .sf-display {
  font-family: var(--sh-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}
.shatta .sf-mono {
  font-family: var(--sh-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.shatta .sf-micro {
  font-family: var(--sh-text);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
}
.shatta .sf-btn-primary {
  background: var(--sh-red);
  color: #fff;
  border: 2px solid var(--sh-ink);
  border-radius: 999px;
  box-shadow: var(--sh-shadow);
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.shatta .sf-btn-primary:hover { opacity: 1; background: var(--sh-red-deep); }
.shatta .sf-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sh-ink); }
.shatta .sf-btn-ghost {
  border: 2px solid var(--sh-ink);
  background: var(--sh-paper);
  font-weight: 600;
}
.shatta .sf-sticky-foot {
  background: color-mix(in oklab, var(--sh-cream) 92%, transparent);
  border-top: 2px solid var(--sh-ink);
}
.shatta .sf-chip { border-color: var(--sf-line-2); }
/* Two-tone focus ring: ink line + yellow halo reads on every surface. */
.shatta :is(a, button, input, select, textarea, summary):focus-visible,
.shatta .sh-pack:has(input:focus-visible) {
  outline: 3px solid var(--sh-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--sh-yellow);
}
.shatta :is(.sh-hero, .sh-redbg, .sh-inkbg, .sh-foot, .sh-sticky) :is(a, button, summary):focus-visible {
  outline-color: var(--sh-yellow);
  box-shadow: 0 0 0 6px var(--sh-ink);
}

/* ── Type helpers ── */
.sh-display { font-family: var(--sh-display); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.sh-condensed { font-family: var(--sh-condensed); font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; text-transform: uppercase; }
.sh-num { font-variant-numeric: tabular-nums; }
.sh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--sh-red-deep);
}
.sh-eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: currentColor;
  transform: rotate(45deg);
}
.sh-h2 {
  font-family: var(--sh-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 4rem);
  line-height: 1.15;
  margin-top: 0.4rem;
}
.shatta:lang(en) .sh-h2 {
  font-family: var(--sh-condensed);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
}
.sh-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .sh-wrap { padding-inline: 2rem; } }

/* Paper grain — a pre-rendered tile, not a live SVG filter (WebKit cost). */
.sh-grain { position: relative; isolation: isolate; }
.sh-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/brands/shatta/v2/grain.webp") 0 0 / 200px;
  opacity: 0.22;
  mix-blend-mode: multiply;
  z-index: 0;
}
.sh-grain > * { position: relative; z-index: 1; }

/* ── Buttons ── */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--sh-ink);
  border-radius: 999px;
  box-shadow: var(--sh-shadow);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sh-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sh-ink); }
.sh-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.sh-btn-red { background: var(--sh-red); color: #fff; }
.sh-btn-red:hover { background: var(--sh-red-deep); }
.sh-btn-yellow { background: var(--sh-yellow); color: var(--sh-ink); }
.sh-btn-yellow:hover { background: #ffbb1a; }
.sh-btn-cream { background: var(--sh-paper); color: var(--sh-ink); }
.sh-btn-ink { background: var(--sh-ink); color: var(--sh-cream); }
.sh-btn-sm { min-height: 2.6rem; padding: 0.45rem 1rem; font-size: 0.92rem; }
.sh-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Announcement + header ── */
.sh-announce {
  background: var(--sh-ink);
  color: var(--sh-cream);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  padding: 0.45rem 1rem;
}
.sh-announce strong { color: var(--sh-yellow); font-weight: 700; }
.sh-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sh-cream);
  /* No backdrop-filter: it would make the header the containing block for
     the shared sign-in sheet (position: fixed) and trap it in the header. */
  border-bottom: 2px solid var(--sh-ink);
}
.sh-head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}
.sh-head-logo img { height: 2.35rem; width: auto; display: block; }
.sh-head-nav { display: none; gap: 1.6rem; font-weight: 600; font-size: 0.95rem; }
.sh-head-nav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.sh-head-nav a:hover { border-color: var(--sh-red); }
@media (min-width: 900px) { .sh-head-nav { display: flex; } }
.sh-head-tools { display: flex; align-items: center; gap: 0.5rem; }
.sh-head-tools { gap: 0.4rem; }
.sh-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.75rem;
  padding-inline: 0.95rem;
  border: 2px solid var(--sh-ink);
  border-radius: 999px;
  background: var(--sh-paper);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--sh-ink);
}
.sh-cart:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sh-ink); }
.sh-cart-count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--sh-red);
  color: #fff;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}

/* ── Hero ── */
.sh-hero {
  background: var(--sh-red);
  color: var(--sh-cream);
  overflow: hidden;
}
.sh-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem 1rem;
  padding-top: 2rem;
  padding-bottom: 3.75rem;
}
.sh-hero-kicker {
  grid-column: 1 / -1;
  color: #fff6ea;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sh-hero-kicker .sh-dot { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: var(--sh-yellow); }
.sh-hero-lines {
  --tf: clamp(4.4rem, 23vw, 10.5rem);
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--tf) * 0.1);
}
.sh-hero-line { display: block; line-height: 0; }
.sh-hero-line:last-child { color: var(--sh-yellow); filter: drop-shadow(0 4px 0 var(--sh-ink)); }
.shatta:lang(en) .sh-hero-lines { --tf: clamp(3.2rem, 14vw, 9rem); }
.sh-hero-art {
  position: relative;
  width: clamp(8rem, 33vw, 24rem);
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Bottle + stickers + tiger share one box sized to the bottle, so the
   stickers stay on the glass (neck and base), never on the label. */
.sh-hero-pack {
  position: relative;
  width: 100%;
  aspect-ratio: 624 / 1600;
  max-height: 32rem;
}
.sh-hero-bottle {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-7deg);
  filter: drop-shadow(0 18px 18px rgba(35, 21, 18, 0.35));
}
/* Tiger = a tone-on-tone second print pass behind the bottle. */
.sh-hero-tiger {
  position: absolute;
  z-index: 1;
  width: 230%;
  max-width: none;
  aspect-ratio: 758 / 482;
  bottom: 12%;
  left: 50%;
  translate: -50% 0;
  background: var(--sh-red-deep);
  -webkit-mask: url("/brands/shatta/v2/tiger-walk.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/tiger-walk.webp") center / contain no-repeat;
}
.sh-sticker {
  position: absolute;
  z-index: 3;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--sh-display);
  font-size: 0.95rem;
  line-height: 1.05;
  border: 2px solid var(--sh-ink);
  box-shadow: 0 3px 0 var(--sh-ink);
}
.shatta:lang(en) .sh-sticker { font-family: var(--sh-condensed); text-transform: uppercase; font-size: 0.95rem; }
.sh-sticker-a { background: var(--sh-yellow); color: var(--sh-ink); top: 0; inset-inline-start: 38%; transform: rotate(-12deg); }
.sh-sticker-b { background: var(--sh-cream); color: var(--sh-red-deep); bottom: 4%; inset-inline-start: -34%; transform: rotate(9deg); width: 3.8rem; height: 3.8rem; }
.sh-sticker-b b { font-family: var(--sh-condensed); font-weight: 400; font-size: 1.35rem; display: block; line-height: 1; }
.sh-hero-copy { grid-column: 1 / -1; max-width: 34rem; }
.sh-hero-sub { font-size: 1.06rem; color: #fff6ea; margin: 0.25rem 0 1.4rem; }
.sh-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; }
.sh-hero-price { display: flex; flex-direction: column; line-height: 1.15; font-size: 0.85rem; font-weight: 500; color: #fff; }
.sh-hero-price strong { font-family: var(--sh-display); font-size: 1.9rem; font-weight: 400; color: #fff; }
.shatta:lang(en) .sh-hero-price strong { font-family: var(--sh-condensed); }

@media (min-width: 768px) {
  .sh-hero-in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: start;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
    min-height: min(46rem, calc(100svh - 7rem));
  }
  .sh-hero-kicker { grid-column: 1; }
  .sh-hero-lines { grid-column: 1; --tf: clamp(4.4rem, 9vw, 8rem); }
  .shatta:lang(en) .sh-hero-lines { --tf: clamp(4rem, 9vw, 9rem); }
  .sh-hero-copy { grid-column: 1; position: relative; z-index: 3; }
  .sh-hero-art { grid-column: 2; grid-row: 1 / span 3; width: 100%; align-self: center; align-items: center; }
  .sh-hero-pack { width: auto; height: clamp(22rem, calc(100svh - 16rem), 34rem); max-height: none; }
  .sh-sticker { width: 6rem; height: 6rem; font-size: 1.25rem; }
  .sh-sticker-a { top: 3%; inset-inline-start: auto; inset-inline-end: -42%; }
  .sh-sticker-b { width: 5rem; height: 5rem; }
  .sh-sticker-b b { font-size: 1.8rem; }
  .sh-hero-sub { font-size: 1.15rem; }
}

/* Torn ticket edge between colour bands (mask, so it inherits any bg) */
.sh-edge { position: relative; }
.sh-edge::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -15px;
  height: 16px;
  background: inherit;
  -webkit-mask: radial-gradient(circle at 12px 16px, #000 11px, transparent 11.5px) 0 0 / 24px 16px repeat-x;
  mask: radial-gradient(circle at 12px 16px, #000 11px, transparent 11.5px) 0 0 / 24px 16px repeat-x;
  z-index: 2;
}

/* ── Marquee: in Arabic the track runs right-to-left so phrases read in order ── */
.sh-marquee {
  background: var(--sh-yellow);
  color: var(--sh-ink);
  border-block: 2px solid var(--sh-ink);
  overflow: hidden;
  direction: ltr;
}
.sh-marquee-track {
  display: flex;
  width: max-content;
  animation: sh-marquee 26s linear infinite;
}
.sh-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.sh-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding-inline: 0 1.1rem;
  white-space: nowrap;
  font-family: var(--sh-display);
  font-size: 1.7rem;
  line-height: 1.6;
}
.sh-marquee-item .is-latin { font-family: var(--sh-condensed); font-size: 1.6rem; text-transform: uppercase; }
.sh-marquee-item svg { flex: none; color: var(--sh-red); }
@keyframes sh-marquee { to { transform: translateX(-50%); } }
.shatta[dir="rtl"] .sh-marquee { direction: rtl; }
.shatta[dir="rtl"] .sh-marquee-track { animation-name: sh-marquee-rtl; }
@keyframes sh-marquee-rtl { to { transform: translateX(50%); } }
.sh-marquee:hover .sh-marquee-track { animation-play-state: paused; }

/* ── Sections ── */
.sh-section { padding-block: 4rem; }
@media (min-width: 768px) { .sh-section { padding-block: 6rem; } }
.sh-cream { background: var(--sh-cream); }
.sh-paper { background: var(--sh-paper); }
.sh-redbg { background: var(--sh-red); color: var(--sh-cream); }
.sh-yellowbg { background: var(--sh-yellow); color: var(--sh-ink); }
.sh-inkbg { background: var(--sh-ink); color: var(--sh-cream); }
.sh-inkbg .sh-eyebrow { color: var(--sh-yellow); }
.sh-redbg .sh-eyebrow { color: #fff; }
.sh-yellowbg .sh-eyebrow { color: var(--sh-ink); }

/* ── Order ── */
.sh-order-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .sh-order-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 4rem; }
}
.sh-order-art {
  position: relative;
  border: 2px solid var(--sh-ink);
  border-radius: 22px;
  overflow: hidden;
  background: var(--sh-red);
  box-shadow: 0 6px 0 var(--sh-ink);
  aspect-ratio: 1 / 1;
}
@media (max-width: 899px) { .sh-order-art { display: none; } }
.sh-order-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; }
.sh-order-intro { color: var(--sh-ink-2); margin: 0.6rem 0 1.5rem; max-width: 34rem; }

.sh-buy { display: grid; gap: 1rem; }
.sh-packs { display: grid; gap: 0.85rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.sh-pack {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.9rem;
  padding: 0.9rem 0.95rem;
  border: 2px solid var(--sh-ink);
  border-radius: var(--sh-radius);
  background: var(--sh-paper);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
  box-shadow: 0 2px 0 var(--sh-ink);
  -webkit-tap-highlight-color: transparent;
}
.sh-pack:hover { background: #fffaf0; }
.sh-pack.is-on {
  background: #fff6dc;
  border-color: var(--sh-red);
  box-shadow: 0 4px 0 var(--sh-red);
  transform: translateY(-2px);
}
.sh-pack.is-out { cursor: not-allowed; opacity: 0.6; }
.sh-pack-img {
  width: 4rem;
  height: 4rem;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--sh-ink);
  background: var(--sh-red);
}
.sh-pack-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-pack-body { display: grid; gap: 0.15rem; min-width: 0; }
.sh-pack-title { font-family: var(--sh-display); font-size: 1.35rem; line-height: 1.25; }
.shatta:lang(en) .sh-pack-title { font-family: var(--sh-condensed); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.sh-pack-desc { display: grid; gap: 0.3rem; }
.sh-pack-note { font-size: 0.85rem; color: var(--sh-ink-2); line-height: 1.45; }
.sh-pack-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--sh-ink-2); line-height: 1.5; }
.sh-pack-facts .is-free,
.sh-pack-facts .is-out {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--sh-ink);
  color: var(--sh-cream);
  font-size: 0.74rem;
}
.sh-pack-facts .is-fee { color: var(--sh-ink-2); font-weight: 500; }
.sh-pack-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; text-align: end; }
.sh-pack-price .sh-num { font-family: var(--sh-display); font-size: 1.9rem; line-height: 1.1; }
.shatta:lang(en) .sh-pack-price .sh-num { font-family: var(--sh-condensed); }
.sh-cur { font-size: 0.75rem; font-weight: 600; color: var(--sh-ink-2); }
.sh-pack-flag {
  position: absolute;
  top: -0.8rem;
  inset-inline-start: 1rem;
  background: var(--sh-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.7rem;
  border: 2px solid var(--sh-ink);
  border-radius: 999px;
  transform: rotate(-2deg);
  z-index: 1;
}
.sh-pack-tick {
  position: absolute;
  top: -0.65rem;
  inset-inline-end: -0.65rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--sh-ink);
  display: grid;
  place-items: center;
  background: var(--sh-red);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sh-pack.is-on .sh-pack-tick { opacity: 1; }
.sh-note {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.85rem;
  border-inline-start: 4px solid var(--sh-red);
  background: var(--sh-paper);
  font-weight: 600;
  font-size: 0.92rem;
}

.sh-buy-row { display: flex; gap: 0.7rem; align-items: stretch; }
.sh-qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--sh-ink);
  border-radius: 999px;
  background: var(--sh-paper);
  box-shadow: 0 2px 0 var(--sh-ink);
  flex: none;
}
.sh-qty button {
  width: 2.75rem;
  height: 100%;
  min-height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  cursor: pointer;
}
.sh-qty button:disabled { opacity: 0.3; cursor: default; }
.sh-qty output { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: 1.1rem; }
.sh-buy-cta { flex: 1; justify-content: space-between; min-height: 3.5rem; font-size: 1.05rem; }
.sh-buy-total { font-weight: 600; opacity: 0.95; }
.sh-buy-total { font-weight: 800; font-size: 1.1rem; }
.sh-added {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--sh-ink);
  border-radius: var(--sh-radius);
  background: var(--sh-yellow);
  box-shadow: 0 3px 0 var(--sh-ink);
  animation: sh-pop 0.25s ease both;
}
.sh-added-msg { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--sh-ink); }
.sh-added-actions { display: inline-flex; align-items: center; gap: 1rem; }
.sh-error { color: var(--sh-red-deep); font-weight: 600; font-size: 0.9rem; }
@keyframes sh-pop { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

.sh-trust { display: grid; gap: 0.55rem; margin-top: 0.4rem; padding: 0; list-style: none; }
.sh-trust li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 500; color: var(--sh-ink-2); line-height: 1.45; }
.sh-trust svg { flex: none; color: var(--sh-red); }
.sh-packlinks { margin-top: 0.9rem; font-size: 0.85rem; color: var(--sh-ink-2); line-height: 1.8; }
.sh-packlinks .sh-link { font-weight: 600; }

/* ── Inside ── */
.sh-inside-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .sh-inside-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4.5rem; } }
.sh-label-art { position: relative; max-width: 26rem; margin-inline: auto; }
.sh-label-art img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(-3deg);
  filter: drop-shadow(0 6px 0 var(--sh-ink));
}
.sh-tape {
  position: absolute;
  top: -0.9rem;
  inset-inline-start: 38%;
  width: 6.5rem;
  height: 1.7rem;
  background: rgba(242, 169, 0, 0.82);
  transform: rotate(4deg);
  z-index: 2;
}
.sh-ingredients { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0; counter-reset: ing; }
@media (min-width: 640px) { .sh-ingredients { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.sh-ingredients li {
  counter-increment: ing;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 0.6rem;
  padding: 0.9rem 0;
  border-top: 2px solid var(--sh-ink);
}
.sh-ingredients li::before {
  content: counter(ing, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--sh-condensed);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--sh-red);
}
.sh-ingredients strong { font-family: var(--sh-display); font-weight: 400; font-size: 1.3rem; line-height: 1.35; }
.shatta:lang(en) .sh-ingredients strong { font-family: var(--sh-condensed); text-transform: uppercase; font-size: 1.25rem; }
.sh-ingredients span { font-size: 0.92rem; color: var(--sh-ink-2); line-height: 1.5; }

.sh-details {
  margin-top: 1.8rem;
  border: 2px solid var(--sh-ink);
  border-radius: var(--sh-radius);
  background: var(--sh-paper);
}
.sh-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  font-weight: 700;
}
.sh-details summary::-webkit-details-marker { display: none; }
.sh-details summary svg { transition: transform 0.2s ease; flex: none; }
.sh-details[open] summary svg { transform: rotate(45deg); }
.sh-details-body { padding: 0 1.1rem 1.2rem; display: grid; gap: 1rem; font-size: 0.92rem; color: var(--sh-ink-2); }
.sh-nutrition { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sh-nutrition caption { text-align: start; font-weight: 700; color: var(--sh-ink); padding-bottom: 0.4rem; }
.sh-nutrition th, .sh-nutrition td { padding: 0.45rem 0; border-top: 1px solid var(--sh-soft-line); text-align: start; font-weight: 500; }
.sh-nutrition td { text-align: end; font-variant-numeric: tabular-nums; color: var(--sh-ink); font-weight: 700; }

/* ── Uses (three dishes, stacked on phones — nothing hidden off-screen) ── */
.sh-uses { display: grid; gap: 1rem; padding: 0; margin: 1.8rem 0 0; list-style: none; }
@media (min-width: 768px) { .sh-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.sh-use {
  position: relative;
  border: 2px solid var(--sh-ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--sh-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sh-use:nth-child(3n + 1) { background: var(--sh-red); color: #fff; --art-ink: var(--sh-yellow); }
.sh-use:nth-child(3n + 2) { background: var(--sh-paper); color: var(--sh-ink); --art-ink: var(--sh-red); }
.sh-use:nth-child(3n + 3) { background: var(--sh-ink); color: var(--sh-cream); --art-ink: var(--sh-yellow); }
.sh-use-photo { aspect-ratio: 4 / 3; border-bottom: 2px solid var(--sh-ink); overflow: hidden; }
.sh-use-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; display: block; }
@media (min-width: 768px) { .sh-use-photo { aspect-ratio: 4 / 5; } }
.sh-use-body { position: relative; padding: 1rem 1.2rem 1.3rem; padding-inline-end: 7.5rem; min-height: 8.5rem; }
.sh-use-num { font-family: var(--sh-condensed); font-size: 1rem; }
.sh-use h3 { font-family: var(--sh-display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.2; margin: 0.1rem 0 0.15rem; }
.shatta:lang(en) .sh-use h3 { font-family: var(--sh-condensed); text-transform: uppercase; line-height: 1; }
.sh-use p { font-size: 0.98rem; font-weight: 500; line-height: 1.5; }
.sh-use-tiger {
  position: absolute;
  inset-inline-end: 0.6rem;
  bottom: 0.6rem;
  width: 6.8rem;
  aspect-ratio: 1;
  background: var(--art-ink);
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}

/* ── Story ── */
.sh-story-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .sh-story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.sh-story-media { position: relative; max-width: 34rem; width: 100%; margin-inline: auto; }
.sh-story-chef {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  aspect-ratio: 884 / 930;
  background: var(--sh-yellow);
  -webkit-mask: url("/brands/shatta/v2/ill-chef.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/ill-chef.webp") center / contain no-repeat;
}
.sh-story-photo {
  position: relative;
  border: 2px solid var(--sh-cream);
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.sh-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-story-tiger {
  position: absolute;
  width: 28%;
  aspect-ratio: 508 / 556;
  top: -9%;
  inset-inline-end: -3%;
  background: var(--sh-yellow);
  -webkit-mask: url("/brands/shatta/v2/tiger-strut.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/tiger-strut.webp") center / contain no-repeat;
  transform: rotate(-6deg);
}
.sh-story-body p { font-size: 1.08rem; color: #f3ead6; margin-top: 1rem; max-width: 34rem; }

/* ── FAQ ── */
.sh-faq-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .sh-faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 4rem; } }
.sh-faq { display: grid; gap: 0.75rem; }
.sh-faq .sh-details { margin: 0; }
.sh-faq .sh-details-body { font-size: 0.98rem; }
.sh-faq-tiger {
  display: none;
  width: 80%;
  aspect-ratio: 758 / 482;
  margin-top: 2rem;
  background: var(--sh-red);
  -webkit-mask: url("/brands/shatta/v2/tiger-walk.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/tiger-walk.webp") center / contain no-repeat;
}
@media (min-width: 900px) { .sh-faq-tiger { display: block; } }

/* ── Final CTA ── */
.sh-final { text-align: center; overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
.sh-final-art {
  width: min(15rem, 52vw);
  aspect-ratio: 819 / 937;
  margin: 0 auto 1rem;
  background: var(--sh-cream);
  -webkit-mask: url("/brands/shatta/v2/ill-pour.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/ill-pour.webp") center / contain no-repeat;
}
.sh-final .sh-typehead { align-items: center; }
.sh-final-tiger {
  width: min(17rem, 62vw);
  aspect-ratio: 585 / 487;
  margin: 0 auto 0.5rem;
  background: var(--sh-cream);
  -webkit-mask: url("/brands/shatta/v2/tiger-head.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/tiger-head.webp") center / contain no-repeat;
}
.sh-final .sh-h2 { font-size: clamp(2.8rem, 12vw, 5.5rem); }
.sh-final p { font-size: 1.1rem; margin: 0.6rem auto 1.8rem; max-width: 30rem; color: #fff6ea; }

/* ── Footer ── */
.sh-foot { background: var(--sh-ink); color: var(--sh-cream); padding-block: 3.5rem 7rem; }
@media (min-width: 640px) { .sh-foot { padding-bottom: 3rem; } }
.sh-foot-top { display: grid; gap: 2.2rem; }
@media (min-width: 768px) { .sh-foot-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.sh-foot-logo img { height: 3.4rem; width: auto; display: block; }
.sh-foot-tag { font-family: var(--sh-display); font-size: 1.5rem; color: var(--sh-yellow); margin-top: 0.9rem; }
.shatta:lang(en) .sh-foot-tag { font-family: var(--sh-condensed); text-transform: uppercase; }
.sh-foot-h { font-weight: 700; font-size: 0.85rem; color: var(--sh-yellow); margin-bottom: 0.7rem; letter-spacing: 0.04em; }
.sh-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.sh-foot a { text-decoration: none; color: #f3ead6; }
.sh-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-foot-legal {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(237, 231, 212, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  font-size: 0.78rem;
  color: #c9bba5;
}
.sh-foot-legal a { color: #c9bba5; text-decoration: underline; text-underline-offset: 2px; }

/* ── Sticky buy bar (phones) ── */
.sh-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* Below the header (40) so the sign-in sheet opened from the header covers it. */
  z-index: 39;
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--sh-ink);
  color: var(--sh-cream);
  border-top: 2px solid var(--sh-ink);
  transform: translateY(110%);
  transition: transform 0.25s ease;
  visibility: hidden;
}
.sh-sticky.is-on { transform: none; visibility: visible; }
.sh-sticky-in { display: flex; align-items: center; gap: 0.6rem; max-width: 40rem; margin-inline: auto; }
.sh-sticky-price { flex: 1; display: flex; flex-direction: column; line-height: 1.15; font-size: 0.78rem; }
.sh-sticky-price strong { font-family: var(--sh-display); font-weight: 400; font-size: 1.35rem; color: #fff; }
.shatta:lang(en) .sh-sticky-price strong { font-family: var(--sh-condensed); }
.sh-sticky .sh-btn { box-shadow: none; border-color: var(--sh-cream); min-height: 2.75rem; }
@media (min-width: 900px) { .sh-sticky { display: none; } }

/* ── Product page ── */
.sh-prod { display: grid; gap: 0; max-width: 72rem; margin-inline: auto; }
@media (min-width: 900px) { .sh-prod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; padding: 3rem 2rem 5rem; } }
.sh-prod-stage {
  position: relative;
  background: var(--sh-red);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
}
@media (min-width: 900px) { .sh-prod-stage { aspect-ratio: 1 / 1; } }
@media (min-width: 900px) { .sh-prod-stage { border: 2px solid var(--sh-ink); border-radius: 24px; box-shadow: 0 6px 0 var(--sh-ink); position: sticky; top: 6rem; } }
.sh-prod-stage > img.sh-prod-photo { width: 100%; height: 100%; object-fit: cover; }
.sh-prod-back {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 2px solid var(--sh-ink);
  background: var(--sh-paper);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 var(--sh-ink);
}
.sh-prod-back svg { transform: scaleX(-1); }
.shatta:lang(en) .sh-prod-back svg { transform: none; }
.sh-prod-info { padding: 1.6rem 1.25rem 2.5rem; }
@media (min-width: 900px) { .sh-prod-info { padding: 0; } }
.sh-prod-title { font-family: var(--sh-display); font-weight: 400; font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.2; margin-top: 0.4rem; text-wrap: balance; }
.shatta:lang(en) .sh-prod-title { font-family: var(--sh-condensed); text-transform: uppercase; line-height: 1; }
.sh-prod-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.sh-prod-price .sh-num { font-family: var(--sh-display); font-size: 2.4rem; color: var(--sh-red); line-height: 1.1; }
.shatta:lang(en) .sh-prod-price .sh-num { font-family: var(--sh-condensed); }
.sh-prod-vat { font-size: 0.8rem; color: var(--sh-ink-2); }
.sh-prod-lead { margin: 1.4rem 0 0.4rem; color: var(--sh-ink-2); font-size: 1rem; }
.sh-prod-label { font-weight: 700; font-size: 0.9rem; margin: 1rem 0 0.7rem; padding: 0; }
.sh-prod .sh-details { margin-top: 1rem; }

/* ── Motion: scroll reveals only where supported; content is visible by
   default so older iPhones and reduced-motion users see everything. ── */
@media (prefers-reduced-motion: no-preference) {
  .sh-hero-tiger { animation: sh-prowl 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sh-sticker-a { animation: sh-stamp 0.5s 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .sh-sticker-b { animation: sh-stamp-b 0.5s 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .sh-sticker:hover { animation: sh-wiggle 0.5s ease; }
  .sh-use:hover { transform: translateY(-3px) rotate(-1deg); }
  .sh-use { transition: transform 0.2s ease; }

  @supports (animation-timeline: view()) {
    .sh-reveal {
      animation: sh-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .sh-label-art img {
      animation: sh-tilt linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
    .sh-final-art {
  width: min(15rem, 52vw);
  aspect-ratio: 819 / 937;
  margin: 0 auto 1rem;
  background: var(--sh-cream);
  -webkit-mask: url("/brands/shatta/v2/ill-pour.webp") center / contain no-repeat;
  mask: url("/brands/shatta/v2/ill-pour.webp") center / contain no-repeat;
}
.sh-final .sh-typehead { align-items: center; }
.sh-final-art {
      animation: sh-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-marquee-track { animation: none; }
  .sh-sticky { transition: none; }
}
@keyframes sh-prowl { from { scale: 0.86; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes sh-stamp { from { transform: scale(1.6) rotate(-30deg); opacity: 0; } to { transform: rotate(-12deg); opacity: 1; } }
@keyframes sh-stamp-b { from { transform: scale(1.6) rotate(30deg); opacity: 0; } to { transform: rotate(9deg); opacity: 1; } }
@keyframes sh-wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: 6deg; } 60% { rotate: -5deg; } }
@keyframes sh-rise { from { opacity: 0.001; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sh-tilt { from { transform: rotate(-10deg) translateY(30px); } to { transform: rotate(-3deg); } }
@keyframes sh-grow { from { transform: scale(0.7) rotate(-8deg); } to { transform: none; } }

/* Language toggle (shared component) in the brand's button style */
.sh-lang > :is(button, a) {
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--sh-ink) !important;
  background: var(--sh-paper);
  color: var(--sh-ink) !important;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--sh-ink);
}
.sh-lang > :is(button, a):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sh-ink); }
.sh-orangebg { background: var(--sh-orange); color: var(--sh-ink); }
.sh-orangebg .sh-eyebrow { color: var(--sh-ink); }

.sh-icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 2px solid var(--sh-ink);
  background: var(--sh-paper);
  display: inline-grid;
  place-items: center;
  box-shadow: 0 3px 0 var(--sh-ink);
}
@media (min-width: 900px) { .sh-only-phone { display: none; } }
@media (max-width: 380px) { .sh-auth { display: none; } }

/* Shared pages (cart, checkout, tracking) — carry the print look through. */
.shatta .sf-emoji { display: none; }
.shatta .sf-emoji-alt { display: inline-block; vertical-align: -0.15em; }
.shatta .text-emerald-700 { color: var(--sh-red-deep); }
.shatta main [style*="solid var(--sf-line)"] {
  border: 2px solid var(--sh-ink) !important;
  border-radius: var(--sh-radius);
  box-shadow: 0 3px 0 var(--sh-ink);
}
.shatta .sf-input {
  border: 2px solid var(--sh-ink);
  border-radius: 12px;
  background: var(--sh-paper);
  min-height: 3.1rem;
}
.shatta .sf-input:focus { box-shadow: 0 3px 0 var(--sh-ink); outline: none; }
.shatta .sf-seg { border: 2px solid var(--sh-ink); background: var(--sh-paper); }
/* Cart stepper's square ± / remove buttons: the shared .sf-seg padding left
   the trash icon about 3 px wide. */
.shatta .sf-seg > button[name="qty"] { padding: 0; }
.shatta .sf-sticky-foot { background: var(--sh-cream); }
.shatta:has(.sf-sticky-foot.fixed) .sh-foot { padding-bottom: 7rem; }

/* ── Brand lettering (masked SVG artwork, see ShattaType) ── */
.sh-type {
  display: inline-block;
  max-width: 100%;
  background-color: currentColor;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.sh-typehead {
  --tf: clamp(2.7rem, 12vw, 4.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--tf) * 0.18);
  margin: 0.7rem 0 0.2rem;
  line-height: 0;
}
.shatta:lang(en) .sh-typehead { --tf: clamp(2rem, 8.6vw, 4.2rem); gap: calc(var(--tf) * 0.12); }
.sh-final .sh-typehead { --tf: clamp(3.4rem, 16vw, 6.5rem); }
.shatta:lang(en) .sh-final .sh-typehead { --tf: clamp(2.2rem, 9vw, 5rem); }