/* =====================================================================
   AWTAR chocolate · styles.css  (the LOOK of the customer menu page)
   ---------------------------------------------------------------------
   HOW TO READ CSS (Cascading Style Sheets):
     selector {            <- WHICH elements to style (.name = class, #name = id)
       property: value;    <- WHAT to change about them, one line each
     }
   - Units: px = screen pixels · % = share of the parent · em = relative
     to the font size · vw = % of the screen width · fr = a share of
     the free space in a grid.
   - "start" / "end" (e.g. margin-inline-start) follow the reading
     direction: in Arabic (right-to-left) start = RIGHT, end = LEFT.
   - Colours and sizes are named once in :root (just below) and reused
     with var(--name). To restyle the site, start there.
   - Every line below ends with a comment explaining it.
   - After editing, bump ?v=... in index.html so phones load the new file.
   ===================================================================== */

/* DESIGN TOKENS. ':root' = the <html> element. Variables (names starting with --) are defined here once and reused everywhere with var(--name). Change a colour here and the whole site follows. */
:root {
  --paper: #FBF9F4;  /* almost-white card colour */
  --cream: #F4F0E8;  /* page background (cream paper) */
  --sand: #EAE3D6;  /* light beige for chips, counters and empty photo boxes */
  --line: #E0D7C7;  /* thin border colour */
  --gold: #A68B5B;  /* gold accent (borders, highlights) */
  --gold-deep: #7E6642;  /* darker gold for small text, so it stays readable */
  --cocoa: #3B2418;  /* main brand brown: buttons, headings */
  --cocoa-2: #5A3A2A;  /* slightly lighter brown for button hover */
  --ink: #2B1B12;  /* darkest colour, normal body text */
  --muted: #6F6052;  /* grey-brown for secondary text */
  --vip: #8E1F24;  /* burgundy, used only for the VIP section */
  --new: #2F6B4F;  /* green for 'new' badges and success */
  --wa: #1F8F4E;  /* WhatsApp green */
  --danger: #A3322B;  /* red for errors and delete buttons */
  --r-sm: 10px;  /* small corner rounding */
  --r: 16px;  /* normal corner rounding (cards) */
  --r-lg: 24px;  /* large corner rounding (panels) */
  --shadow: 0 1px 2px rgba(59,36,24,.05),0 12px 32px -12px rgba(59,36,24,.14);  /* the standard soft shadow under cards */
  --ease: cubic-bezier(.2,.7,.2,1);  /* animation speed curve: starts fast, ends gently */
  --t-fast: 140ms;  /* short animation time (hover effects) */
  --t: 240ms;  /* normal animation time (panels sliding in) */
  --f-body: "Tajawal",system-ui,sans-serif;  /* font for normal Arabic text (Tajawal), with fall-backs */
  --f-head: "Noto Kufi Arabic","Tajawal",sans-serif;  /* font for Arabic headings (Noto Kufi Arabic) */
  --f-latin: "Cormorant Garamond",Georgia,serif;  /* elegant serif font for Latin text and numbers (AWTAR, No. 57) */
  --gutter: clamp(16px,4vw,40px);  /* side space of the page: 4% of the screen width, between 16px and 40px */
  --maxw: 1240px;  /* maximum width of the content on big screens */
}

/* '*' = EVERY element on the page. */
* {
  box-sizing: border-box;  /* width/height include padding and border, so sizes are predictable */
}

/* Any element with the HTML attribute 'hidden' (JavaScript adds/removes it to show or hide things). */
[hidden] {
  display: none!important;  /* hide it completely (takes no space) (!important beats any other rule) */
}

/* The whole document. */
html {
  scroll-behavior: smooth;  /* jump to #links smoothly instead of instantly */
  scroll-padding-top: 128px;  /* when jumping to a #section, stop 128px lower so the sticky header doesn't cover the title */
  -webkit-text-size-adjust: 100%;  /* stop iPhones from auto-enlarging text when rotated */
}

/* The visible page. */
body {
  margin: 0;  /* no outside space (margin) */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  color: var(--ink);  /* text colour (--ink is a design token set in :root) */
  font: 400 16px/1.65 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
  overflow-x: hidden;  /* never allow sideways scrolling of the page */
}

/* The page while a product or cart panel is open (JavaScript adds the class 'locked'). */
body.locked {
  overflow: hidden;  /* hide anything that sticks out of the box */
}

/* Every picture. */
img {
  max-width: 100%;  /* never wider than 100% */
  display: block;  /* takes a full line of its own */
}

/* Every link. */
a {
  color: inherit;  /* text colour */
}

/* Buttons and form fields. (A comma means: the same rules for each of these.) Browsers give them their own font by default; this makes them match the page. */
button,input,textarea {
  font: inherit;  /* use the same font as the rest of the page */
  color: inherit;  /* text colour */
}

/* All headings (h1 = biggest, h3 = smaller). */
h1,h2,h3 {
  font-family: var(--f-head);  /* font family (--f-head is a design token set in :root) */
  font-weight: 600;  /* semi-bold */
  line-height: 1.3;  /* line height 1.3 */
  margin: 0;  /* no outside space (margin) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* 'sr' = Screen-Reader only: text that is invisible on screen but read aloud to blind users. */
.sr {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  width: 1px;  /* fixed width of 1px */
  height: 1px;  /* fixed height of 1px */
  overflow: hidden;  /* hide anything that sticks out of the box */
  clip: rect(0 0 0 0);  /* cut the visible area down to nothing (screen readers still read it) */
  white-space: nowrap;  /* never break this text onto two lines */
}

/* The hidden 'skip to the menu' link for keyboard users. It sits above the screen until focused. */
.skip {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  inset-inline-start: 8px;  /* 8px from the START side (right in Arabic, left in English) */
  top: -60px;  /* -60px from the top (here: hidden above the screen until focused) */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  padding: 8px 14px;  /* inside space (padding): 8px 14px  (top/bottom, left/right) */
  border-radius: 8px;  /* rounded corners */
  z-index: 100;  /* stacking order 100: higher numbers sit on top of lower ones */
}

/* ':focus' = when the element is selected with the keyboard (Tab key). Then slide the skip link into view. */
.skip:focus {
  top: 8px;  /* 8px from the top */
}

/* Whatever is focused BY KEYBOARD gets a visible gold ring (mouse clicks don't show it). */
:focus-visible {
  outline: 2px solid var(--gold-deep);  /* visible focus ring for keyboard users (--gold-deep is a design token set in :root) */
  outline-offset: 3px;  /* gap of 3px between the element and its focus ring */
  border-radius: 6px;  /* rounded corners */
}
/* ---------- buttons ---------- */

/* BUTTONS. Base look shared by every button. A class like 'btn' is a reusable label you put on HTML elements: class="btn btn-primary". */
.btn {
  display: inline-flex;  /* flexbox, but the box itself sits inside a line of text like a word */
  align-items: center;  /* centre children vertically (on the cross axis) */
  justify-content: center;  /* centre children along the main axis */
  gap: 8px;  /* space between children: 8px */
  min-height: 44px;  /* at least 44px tall (44px+ = easy to tap with a finger) */
  padding: 10px 20px;  /* inside space (padding): 10px 20px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  border: 1px solid transparent;  /* a line along the whole edge: thickness, style, colour */
  font-weight: 700;  /* bold */
  font-size: 15px;  /* text size: 15px */
  text-decoration: none;  /* remove the underline that links normally have */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  transition: background var(--t-fast),transform var(--t-fast) var(--ease),border-color var(--t-fast);  /* animate changes to background, border-color, transform instead of jumping */
  white-space: nowrap;  /* never break this text onto two lines */
}

/* ':active' = while the button is being pressed. Shrink it slightly, like a real button. */
.btn:active {
  transform: scale(.97);  /* grow/shrink to .97 times its size */
}

/* The main (most important) action: dark brown button. */
.btn-primary {
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
}

/* ':hover' = when the mouse is over it. */
.btn-primary:hover {
  background: var(--cocoa-2);  /* background colour (--cocoa-2 is a design token set in :root) */
}

/* 'Ghost' button: transparent with an outline, for less important actions. */
.btn-ghost {
  background: transparent;  /* no background (see-through) */
  border-color: var(--line);  /* colour of the border (--line is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* Ghost button under the mouse. */
.btn-ghost:hover {
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
}

/* Ghost button that can't be used right now (e.g. 'Next' on the last product). */
.btn-ghost:disabled {
  opacity: .4;  /* see-through: .4 (1 = solid, 0 = invisible) */
  cursor: not-allowed;  /* show the 'not allowed' cursor */
}

/* Outline button in red, for actions like 'cancel order'. */
.btn-danger-ghost {
  background: transparent;  /* no background (see-through) */
  color: var(--danger);  /* text colour (--danger is a design token set in :root) */
  border-color: color-mix(in srgb,var(--danger) 30%,transparent);  /* colour of the border (--danger is a design token set in :root) */
}

/* Solid red button, for confirming something destructive. */
.btn-danger {
  background: var(--danger);  /* background colour (--danger is a design token set in :root) */
  color: #fff;  /* text colour */
}

/* WhatsApp-green button. */
.btn-wa {
  background: var(--wa);  /* background colour (--wa is a design token set in :root) */
  color: #fff;  /* text colour */
}

/* WhatsApp button under the mouse: slightly darker green. */
.btn-wa:hover {
  background: #18763F;  /* background colour */
}

/* The WhatsApp icon inside that button. (A space means 'inside': svg elements inside .btn-wa.) */
.btn-wa svg {
  width: 22px;  /* fixed width of 22px */
  height: 22px;  /* fixed height of 22px */
  fill: none;  /* icons are drawn as outlines, so no fill colour */
  stroke: currentColor;  /* outline colour of icon lines = the current text colour */
  stroke-width: 1.8;  /* thickness of the icon lines: 1.8 */
}

/* Smaller button size. */
.btn-sm {
  min-height: 44px;  /* at least 44px tall (44px+ = easy to tap with a finger) */
  padding: 8px 16px;  /* inside space (padding): 8px 16px  (top/bottom, left/right) */
  font-size: 14px;  /* text size: 14px */
}

/* Bigger button size. */
.btn-lg {
  min-height: 52px;  /* at least 52px tall (44px+ = easy to tap with a finger) */
  padding: 12px 26px;  /* inside space (padding): 12px 26px  (top/bottom, left/right) */
  font-size: 16px;  /* text size: 16px */
}

/* Button that stretches to the full width. */
.btn-block {
  width: 100%;  /* fill the parent's full width */
}
/* ---------- top bar ---------- */

/* TOP BAR: logo, search box and cart button, stuck to the top of the screen. */
.topbar {
  position: sticky;  /* stay in the normal flow, but stick to the top while scrolling past */
  top: 0;  /* 0 from the top */
  z-index: 30;  /* stacking order 30: higher numbers sit on top of lower ones */
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 16px;  /* space between children: 16px */
  padding: 10px var(--gutter);  /* inside space (padding): 10px var(--gutter)  (top/bottom, left/right) */
  background: color-mix(in srgb,var(--cream) 92%,transparent);  /* background = the cream colour mixed with a little transparency */
  backdrop-filter: saturate(1.2) blur(10px);  /* blur whatever is behind this element (frosted-glass look) */
  border-bottom: 1px solid var(--line);  /* a line along the bottom edge: thickness, style, colour (--line is a design token set in :root) */
}

/* The logo link (top corner). */
.brand {
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 10px;  /* space between children: 10px */
  text-decoration: none;  /* remove the underline that links normally have */
  flex: none;  /* don't grow or shrink: keep its natural size */
}

/* The small gold logo mark. */
.brand img {
  height: 36px;  /* fixed height of 36px */
  width: auto;  /* width follows the height (keeps the picture's shape) */
}

/* The word 'AWTAR' next to the mark. */
.brand-word {
  font: 600 22px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  letter-spacing: .14em;  /* extra space between letters (.14em; 'em' = relative to the font size) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-direction: column;  /* stack children top-to-bottom */
  direction: ltr;  /* write this left-to-right even on the Arabic (right-to-left) page */
}

/* The small word 'chocolate' under 'AWTAR'. */
.brand-word small {
  font-size: 11px;  /* text size: 11px */
  letter-spacing: .5em;  /* extra space between letters (.5em; 'em' = relative to the font size) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
  margin-top: 3px;  /* outside space (margin) (top only): 3px */
}

/* The rounded search box. */
.search {
  flex: 1;  /* grow to take the leftover space */
  max-width: 460px;  /* never wider than 460px */
  margin-inline-start: auto;  /* auto outside space (margin) = push it as far as possible (centres it or pushes it to one side) */
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 8px;  /* space between children: 8px */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  padding: 0 14px;  /* inside space (padding): 0 14px  (top/bottom, left/right) */
  min-height: 44px;  /* at least 44px tall (44px+ = easy to tap with a finger) */
}

/* ':focus-within' = when anything INSIDE it (the text field) is focused: gold border. */
.search:focus-within {
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
}

/* The magnifying-glass icon. */
.search svg {
  width: 18px;  /* fixed width of 18px */
  height: 18px;  /* fixed height of 18px */
  fill: none;  /* icons are drawn as outlines, so no fill colour */
  stroke: var(--muted);  /* icon line colour (--muted is a design token set in :root) */
  stroke-width: 2;  /* thickness of the icon lines: 2 */
  flex: none;  /* don't grow or shrink: keep its natural size */
}

/* The text field where people type. */
.search input {
  border: 0;  /* no border */
  background: transparent;  /* no background (see-through) */
  outline: 0;  /* remove the default focus outline (we draw our own) */
  width: 100%;  /* fill the parent's full width */
  min-width: 0;  /* allow shrinking below the content's natural width (stops overflow) */
  padding: 8px 0;  /* inside space (padding): 8px 0  (top/bottom, left/right) */
}

/* The round cart button. */
.cart-btn {
  position: relative;  /* keep it in place, but let absolutely-positioned children be placed relative to it */
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  width: 46px;  /* fixed width of 46px */
  height: 46px;  /* fixed height of 46px */
  border-radius: 50%;  /* fully round corners (a circle) */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  flex: none;  /* don't grow or shrink: keep its natural size */
}

/* The bag icon inside the cart button. */
.cart-btn svg {
  width: 22px;  /* fixed width of 22px */
  height: 22px;  /* fixed height of 22px */
  fill: none;  /* icons are drawn as outlines, so no fill colour */
  stroke: currentColor;  /* outline colour of icon lines = the current text colour */
  stroke-width: 1.8;  /* thickness of the icon lines: 1.8 */
}

/* The little gold number bubble on the cart button. */
.cart-count {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  top: -4px;  /* -4px from the top (here: hidden above the screen until focused) */
  inset-inline-end: -4px;  /* -4px from the END side (left in Arabic, right in English) */
  min-width: 22px;  /* at least 22px wide */
  height: 22px;  /* fixed height of 22px */
  padding: 0 6px;  /* inside space (padding): 0 6px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  background: var(--gold);  /* background colour (--gold is a design token set in :root) */
  color: #fff;  /* text colour */
  font-size: 12px;  /* text size: 12px */
  font-weight: 700;  /* bold */
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  border: 2px solid var(--cream);  /* a line along the whole edge: thickness, style, colour (--cream is a design token set in :root) */
}

/* Two classes together (no space) = the element has BOTH. JavaScript adds 'bump' for a moment when something is added. */
.cart-btn.bump {
  animation: bump .45s var(--ease);  /* play the @keyframes animation named 'bump' once */
}

/* An ANIMATION recipe called 'bump'. The browser moves smoothly between the steps listed inside. */
@keyframes bump {

  /* 40% of the way through */
  40% {
    transform: scale(1.15);  /* grow/shrink to 1.15 times its size */
  }
}
/* ---------- hero ---------- */

/* HERO = the big welcome area at the top: text on one side, tower photo on the other. */
.hero {
  max-width: var(--maxw);  /* never wider than var(--maxw) (--maxw is a design token set in :root) */
  margin: 0 auto;  /* no outside space (margin) above/below, and auto left/right = centre the box horizontally */
  padding: clamp(28px,6vw,72px) var(--gutter) clamp(20px,4vw,48px);  /* inside space (padding): clamp(28px,6vw,72px) var(--gutter) clamp(20px,4vw,48px)  (top, left/right, bottom) */
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 1.2fr .8fr;  /* 2 columns sharing the width in the ratio 1.2 : .8 ('fr' = a share) */
  gap: clamp(24px,5vw,64px);  /* space between children: clamp(24px,5vw,64px) */
  align-items: center;  /* centre children vertically (on the cross axis) */
}

/* Small gold label above a heading ('أهلاً بكم'). */
.eyebrow {
  margin: 0 0 8px;  /* outside space (margin): 0 0 8px  (top, left/right, bottom) */
  font: 600 14px/1 var(--f-head);  /* shorthand: weight, size/line-height, family (--f-head is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}

/* The big welcome heading. */
.hero h1 {
  font-size: clamp(28px,4.6vw,52px);  /* text size that scales with the screen: never below 28px, never above 52px */
  font-weight: 600;  /* semi-bold */
}

/* The second line of the heading (inside <em>), in gold. */
.hero h1 em {
  font-style: normal;  /* not italic (the <em> tag is italic by default) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}

/* The short intro paragraph under the heading. */
.lede {
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: clamp(16px,1.6vw,18px);  /* text size that scales with the screen: never below 16px, never above 18px */
  max-width: 46ch;  /* never wider than 46ch */
  margin: 16px 0 24px;  /* outside space (margin): 16px 0 24px  (top, left/right, bottom) */
}

/* The row of two buttons in the hero. */
.hero-actions {
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  gap: 12px;  /* space between children: 12px */
}

/* The '1 choose · 2 add · 3 send' steps line. */
.steps {
  list-style: none;  /* remove the bullet points */
  padding: 0;  /* no inside space (padding) */
  margin: 28px 0 0;  /* outside space (margin): 28px 0 0  (top, left/right, bottom) */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  gap: 8px 20px;  /* space between children: 8px 20px (rows columns) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: 14px;  /* text size: 14px */
}

/* The round number circles in the steps. */
.steps b {
  display: inline-grid;  /* grid, but the box itself sits inside a line of text like a word */
  place-items: center;  /* centre the content both horizontally and vertically */
  width: 24px;  /* fixed width of 24px */
  height: 24px;  /* fixed height of 24px */
  border-radius: 50%;  /* fully round corners (a circle) */
  background: var(--sand);  /* background colour (--sand is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  font-size: 13px;  /* text size: 13px */
  margin-inline-end: 6px;  /* outside space (margin) (end side only: left in Arabic): 6px */
}

/* The frame around the tower photo (arch-shaped top). */
.hero-art {
  margin: 0;  /* no outside space (margin) */
  position: relative;  /* keep it in place, but let absolutely-positioned children be placed relative to it */
  aspect-ratio: 4/5;  /* keep a fixed width:height shape of 4/5 */
  border-radius: 200px 200px var(--r-lg) var(--r-lg);  /* rounded corners, the top two much rounder (arch shape) */
  overflow: hidden;  /* hide anything that sticks out of the box */
  box-shadow: var(--shadow);  /* soft shadow around the box (x y blur spread colour) (--shadow is a design token set in :root) */
  background: var(--sand);  /* background colour (--sand is a design token set in :root) */
}

/* The tower photo itself. */
.hero-art img {
  width: 100%;  /* fill the parent's full width */
  height: 100%;  /* fill the parent's full height */
  object-fit: cover;  /* fill the box and crop the picture's edges, without stretching it */
  object-position: 50% 35%;  /* which part of the picture stays visible when cropped (50% 35% = horizontal vertical) */
}
/* ---------- category chips ---------- */

/* CATEGORY CHIPS bar: the row of section buttons that sticks under the top bar. */
.chips {
  position: sticky;  /* stay in the normal flow, but stick to the top while scrolling past */
  top: 67px;  /* 67px from the top */
  z-index: 20;  /* stacking order 20: higher numbers sit on top of lower ones */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  border-bottom: 1px solid var(--line);  /* a line along the bottom edge: thickness, style, colour (--line is a design token set in :root) */
}

/* The scrollable strip that holds the chips. */
.chips-track {
  max-width: var(--maxw);  /* never wider than var(--maxw) (--maxw is a design token set in :root) */
  margin: 0 auto;  /* no outside space (margin) above/below, and auto left/right = centre the box horizontally */
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 8px;  /* space between children: 8px */
  overflow-x: auto;  /* show a horizontal scroll only when content is wider than the box */
  padding: 10px var(--gutter);  /* inside space (padding): 10px var(--gutter)  (top/bottom, left/right) */
  scrollbar-width: none;  /* hide the scrollbar (Firefox) */
}

/* '::-webkit-scrollbar' = the scrollbar itself in Chrome/Safari. Hide it. */
.chips-track::-webkit-scrollbar {
  display: none;  /* hide it completely (takes no space) */
}

/* One category button (pill shape). */
.chip {
  flex: none;  /* don't grow or shrink: keep its natural size */
  display: inline-flex;  /* flexbox, but the box itself sits inside a line of text like a word */
  align-items: center;  /* centre children vertically (on the cross axis) */
  min-height: 44px;  /* at least 44px tall (44px+ = easy to tap with a finger) */
  padding: 8px 16px;  /* inside space (padding): 8px 16px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  text-decoration: none;  /* remove the underline that links normally have */
  font-weight: 500;  /* medium weight */
  font-size: 14px;  /* text size: 14px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  transition: background var(--t-fast),color var(--t-fast),border-color var(--t-fast);  /* animate changes to background, border-color, color instead of jumping */
}

/* Chip under the mouse. */
.chip:hover {
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
}

/* The chip of the section you are looking at right now (JavaScript adds 'on'). */
.chip.on {
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  border-color: var(--cocoa);  /* colour of the border (--cocoa is a design token set in :root) */
}

/* The little coloured dot in the 'new' and 'best seller' chips. */
.chip .dot {
  display: inline-block;  /* sits inside a line of text, but can have its own width/height */
  width: 7px;  /* fixed width of 7px */
  height: 7px;  /* fixed height of 7px */
  border-radius: 50%;  /* fully round corners (a circle) */
  margin-inline-end: 6px;  /* outside space (margin) (end side only: left in Arabic): 6px */
  vertical-align: middle;  /* line it up with the middle of the text */
}
/* ---------- sections & horizontal rows ---------- */

/* SECTIONS: one block per category (VIP, Classic, ...). */
.sec {
  max-width: var(--maxw);  /* never wider than var(--maxw) (--maxw is a design token set in :root) */
  margin: 0 auto;  /* no outside space (margin) above/below, and auto left/right = centre the box horizontally */
  padding: 36px 0 8px;  /* inside space (padding): 36px 0 8px  (top, left/right, bottom) */
}

/* The heading line of a section: title on one side, arrow buttons on the other. */
.sec-head {
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: end;  /* line children up along the bottom edge */
  justify-content: space-between;  /* push the first child to one end and the last to the other */
  gap: 16px;  /* space between children: 16px */
  padding: 0 var(--gutter);  /* inside space (padding): 0 var(--gutter)  (top/bottom, left/right) */
  margin-bottom: 16px;  /* outside space (margin) (bottom only): 16px */
}

/* The section title. */
.sec-head h2 {
  font-size: clamp(22px,2.6vw,30px);  /* text size that scales with the screen: never below 22px, never above 30px */
}

/* The one-line description under the section title. */
.sec-head p {
  margin: 4px 0 0;  /* outside space (margin): 4px 0 0  (top, left/right, bottom) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: 15px;  /* text size: 15px */
  max-width: 60ch;  /* never wider than 60ch */
}

/* The '· 22 صنفاً' item count next to the title. */
.sec-head .count {
  unicode-bidi: isolate;  /* keep this text's direction separate from the Arabic around it */
  font: 500 13px/1 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  white-space: nowrap;  /* never break this text onto two lines */
}

/* The pair of arrow buttons that scroll a row. */
.row-ctrl {
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 8px;  /* space between children: 8px */
  flex: none;  /* don't grow or shrink: keep its natural size */
}

/* One round arrow button. */
.row-ctrl button {
  width: 44px;  /* fixed width of 44px */
  height: 44px;  /* fixed height of 44px */
  border-radius: 50%;  /* fully round corners (a circle) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  font-size: 18px;  /* text size: 18px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* Arrow button under the mouse. */
.row-ctrl button:hover {
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
}

/* Arrow when there is nothing more to scroll in that direction: faded. */
.row-ctrl button:disabled {
  opacity: .35;  /* see-through: .35 (1 = solid, 0 = invisible) */
  cursor: default;  /* normal arrow cursor */
  border-color: var(--line);  /* colour of the border (--line is a design token set in :root) */
}

/* The VIP section's title is burgundy. */
.sec.vip .sec-head h2 {
  color: var(--vip);  /* text colour (--vip is a design token set in :root) */
}

/* The 'new' and 'best seller' sections at the top. */
.sec.feature {
  padding-top: 28px;  /* inside space (padding) (top only): 28px */
}

/* '::before' = an extra decorative box drawn just before the title's text. Here: a gold dot. */
.sec.feature .sec-head h2::before {
  content: "";  /* create an empty decorative box before the text (used for the dot) */
  display: inline-block;  /* sits inside a line of text, but can have its own width/height */
  width: 10px;  /* fixed width of 10px */
  height: 10px;  /* fixed height of 10px */
  border-radius: 50%;  /* fully round corners (a circle) */
  margin-inline-end: 10px;  /* outside space (margin) (end side only: left in Arabic): 10px */
  vertical-align: middle;  /* line it up with the middle of the text */
  background: var(--gold);  /* background colour (--gold is a design token set in :root) */
}

/* In the 'new' section that dot is green instead. */
.sec.feature.is-new .sec-head h2::before {
  background: var(--new);  /* background colour (--new is a design token set in :root) */
}

/* A horizontal, swipeable row of product cards. */
.row {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-auto-flow: column;  /* put new grid items in new COLUMNS (one long horizontal row) */
  grid-auto-columns: clamp(160px,42vw,230px);  /* each card column is 42% of the screen width, but at least 160px and at most 230px */
  gap: 16px;  /* space between children: 16px */
  overflow-x: auto;  /* show a horizontal scroll only when content is wider than the box */
  padding: 4px var(--gutter) 18px;  /* inside space (padding): 4px var(--gutter) 18px  (top, left/right, bottom) */
  scroll-snap-type: x mandatory;  /* horizontal scrolling always comes to rest on a card (snap points) */
  scroll-padding-inline: var(--gutter);  /* when snapping, keep the same side gap as the page (--gutter is a design token set in :root) */
  scrollbar-width: thin;  /* use a thin scrollbar */
  scrollbar-color: var(--line) transparent;  /* colours of the thin scrollbar (thumb, track) */
  overscroll-behavior-x: contain;  /* sideways swipes at the end of a row don't trigger the browser's back gesture */
}

/* '>' = direct children only. Every card in a row snaps into place when you stop swiping. */
.row > * {
  scroll-snap-align: start;  /* each card snaps so its start edge lines up with the row's start */
}
/* ---------- product card ---------- */

/* PRODUCT CARD: photo, number, name and price. */
.card {
  position: relative;  /* keep it in place, but let absolutely-positioned children be placed relative to it */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r);  /* rounded corners (--r is a design token set in :root) */
  overflow: hidden;  /* hide anything that sticks out of the box */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-direction: column;  /* stack children top-to-bottom */
  transition: transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t);  /* animate changes to border-color, box-shadow, transform instead of jumping */
}

/* Card under the mouse: lifts up a little with a shadow. */
.card:hover {
  transform: translateY(-3px);  /* shift it vertically by -3px */
  box-shadow: var(--shadow);  /* soft shadow around the box (x y blur spread colour) (--shadow is a design token set in :root) */
  border-color: color-mix(in srgb,var(--gold) 45%,var(--line));  /* colour of the border (--gold is a design token set in :root) */
}

/* The clickable area of the card (opens the product page). */
.card-link {
  text-decoration: none;  /* remove the underline that links normally have */
  color: inherit;  /* text colour */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-direction: column;  /* stack children top-to-bottom */
  flex: 1;  /* grow to take the leftover space */
}

/* The photo box at the top of the card. */
.card-media {
  aspect-ratio: 16/10;  /* keep a fixed width:height shape of 16/10 */
  background: #EFEBE3;  /* background colour */
  overflow: hidden;  /* hide anything that sticks out of the box */
}

/* The product photo inside the card. */
.card-media img {
  width: 100%;  /* fill the parent's full width */
  height: 100%;  /* fill the parent's full height */
  object-fit: cover;  /* fill the box and crop the picture's edges, without stretching it */
  transition: transform .5s var(--ease);  /* animate changes to transform instead of jumping */
}

/* When the card is hovered, zoom the photo slightly. */
.card:hover .card-media img {
  transform: scale(1.04);  /* grow/shrink to 1.04 times its size */
}

/* The text part of the card under the photo. */
.card-body {
  padding: 12px;  /* inside space (padding): 12px */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-direction: column;  /* stack children top-to-bottom */
  gap: 4px;  /* space between children: 4px */
  flex: 1;  /* grow to take the leftover space */
}

/* The 'No. 57' menu number. */
.card-num {
  font: 600 12px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
  letter-spacing: .06em;  /* extra space between letters (.06em; 'em' = relative to the font size) */
}

/* The product name. */
.card-name {
  font: 700 15px/1.4 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  margin: 2px 0 4px;  /* outside space (margin): 2px 0 4px  (top, left/right, bottom) */
}

/* The price at the bottom of the card. */
.card-price {
  margin-top: auto;  /* auto outside space (margin) = push it as far as possible (centres it or pushes it to one side) */
  font-weight: 700;  /* bold */
  font-size: 14px;  /* text size: 14px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* 'السعر عند الطلب' (price on request) is quieter than a real price. */
.card-price.ask {
  font-weight: 500;  /* medium weight */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: 13px;  /* text size: 13px */
}

/* The holder for badges in the top corner of a card. */
.badges {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  top: 8px;  /* 8px from the top */
  inset-inline-start: 8px;  /* 8px from the START side (right in Arabic, left in English) */
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 4px;  /* space between children: 4px */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  z-index: 1;  /* stacking order 1: higher numbers sit on top of lower ones */
}

/* One small coloured label ('جديد', 'الأكثر مبيعاً', 'VIP'). */
.badge {
  font-size: 12px;  /* text size: 12px */
  font-weight: 700;  /* bold */
  padding: 4px 10px;  /* inside space (padding): 4px 10px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  color: #fff;  /* text colour */
  line-height: 1.5;  /* line height 1.5 */
}

/* 'New' badge: green. */
.badge.new {
  background: var(--new);  /* background colour (--new is a design token set in :root) */
}

/* 'Sold out' badge (products with "available": false): grey. */
.badge.out {
  background: var(--muted);  /* background colour (--muted is a design token set in :root) */
}

/* 'Best seller' badge: dark gold. */
.badge.best {
  background: var(--gold-deep);  /* background colour (--gold-deep is a design token set in :root) */
}

/* 'VIP' badge: burgundy. */
.badge.vip {
  background: var(--vip);  /* background colour (--vip is a design token set in :root) */
}

/* The round '+' button on each card that adds one piece to the cart. */
.quick-add {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  bottom: 8px;  /* 8px from the bottom */
  inset-inline-end: 8px;  /* 8px from the END side (left in Arabic, right in English) */
  width: 40px;  /* fixed width of 40px */
  height: 40px;  /* fixed height of 40px */
  border-radius: 50%;  /* fully round corners (a circle) */
  border: 0;  /* no border */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  font-size: 22px;  /* text size: 22px */
  line-height: 1;  /* line height 1 */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  box-shadow: 0 2px 8px -2px rgba(43,27,18,.28);  /* soft shadow around the box (x y blur spread colour) */
  transition: transform var(--t-fast) var(--ease),background var(--t-fast);  /* animate changes to background, transform instead of jumping */
}

/* '+' under the mouse. */
.quick-add:hover {
  background: var(--gold-deep);  /* background colour (--gold-deep is a design token set in :root) */
}

/* '+' while pressed. */
.quick-add:active {
  transform: scale(.9);  /* grow/shrink to .9 times its size */
}

/* '+' turns green with a ✓ for a moment after adding. */
.quick-add.added {
  background: var(--new);  /* background colour (--new is a design token set in :root) */
}

/* The '× 2' tag on a card showing how many are in the cart. */
.card .in-cart {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  top: 8px;  /* 8px from the top */
  inset-inline-end: 8px;  /* 8px from the END side (left in Arabic, right in English) */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  font-size: 12px;  /* text size: 12px */
  font-weight: 700;  /* bold */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  padding: 4px 8px;  /* inside space (padding): 4px 8px  (top/bottom, left/right) */
  z-index: 1;  /* stacking order 1: higher numbers sit on top of lower ones */
}
/* package card (no photo — typographic) */

/* PACKAGE CARDS have no photo: the box shows the number of trays as big text instead. */
.pack .card-media {
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  background: radial-gradient(120% 90% at 50% 0%,#FFFDF8 0%,var(--sand) 100%);  /* soft round gradient: light at the top centre fading to sand */
  position: relative;  /* keep it in place, but let absolutely-positioned children be placed relative to it */
}

/* The big tray number (e.g. 5). */
.pack-trays {
  font: 600 56px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}

/* The word 'صواني' (trays) under the number. */
.pack-trays small {
  display: block;  /* takes a full line of its own */
  font: 500 14px/1.4 var(--f-head);  /* shorthand: weight, size/line-height, family (--f-head is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  text-align: center;  /* centre the text */
  margin-top: 4px;  /* outside space (margin) (top only): 4px */
}

/* 'بكجات صغيرة' label in the corner of a package card. */
.pack-size {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  bottom: 10px;  /* 10px from the bottom */
  inset-inline-start: 12px;  /* 12px from the START side (right in Arabic, left in English) */
  font-size: 12px;  /* text size: 12px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* '10-15 شخص' (number of people) on a package card. */
.pack-people {
  font-size: 13px;  /* text size: 13px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}
/* package info box */

/* The box that lists what packages include and exclude. */
.pack-info {
  margin: 8px var(--gutter) 0;  /* outside space (margin): 8px var(--gutter) 0  (top, left/right, bottom) */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r);  /* rounded corners (--r is a design token set in :root) */
  padding: 18px 20px;  /* inside space (padding): 18px 20px  (top/bottom, left/right) */
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));  /* as many equal columns as fit, each at least 220px wide */
  gap: 18px;  /* space between children: 18px */
  font-size: 14px;  /* text size: 14px */
}

/* Headings inside that box. */
.pack-info h3 {
  font-size: 16px;  /* text size: 16px */
  margin-bottom: 6px;  /* outside space (margin) (bottom only): 6px */
}

/* The lists inside that box. */
.pack-info ul {
  margin: 0;  /* no outside space (margin) */
  padding-inline-start: 18px;  /* inside space (padding) (start side only: right in Arabic): 18px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* The 'not included' heading is red. */
.pack-info .no h3 {
  color: var(--danger);  /* text colour (--danger is a design token set in :root) */
}

/* The small headings between package sizes (small / medium / large). */
.sub-head {
  padding: 0 var(--gutter);  /* inside space (padding): 0 var(--gutter)  (top/bottom, left/right) */
  margin: 10px 0 8px;  /* outside space (margin): 10px 0 8px  (top, left/right, bottom) */
  font: 600 16px/1 var(--f-head);  /* shorthand: weight, size/line-height, family (--f-head is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}
/* search results */

/* SEARCH RESULTS area (replaces the sections while you type). */
.search-results {
  max-width: var(--maxw);  /* never wider than var(--maxw) (--maxw is a design token set in :root) */
  margin: 0 auto;  /* no outside space (margin) above/below, and auto left/right = centre the box horizontally */
  padding: 28px var(--gutter) 8px;  /* inside space (padding): 28px var(--gutter) 8px  (top, left/right, bottom) */
}

/* 'Results for ...' heading. */
.search-results h2 {
  font-size: 22px;  /* text size: 22px */
  margin-bottom: 14px;  /* outside space (margin) (bottom only): 14px */
}

/* Grid of result cards that fills the width. */
.grid {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));  /* as many equal columns as fit, each at least 160px wide */
  gap: 14px;  /* space between children: 14px */
}

/* Message shown when there is nothing to show (no results, empty cart). */
.empty {
  text-align: center;  /* centre the text */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  padding: 40px 16px;  /* inside space (padding): 40px 16px  (top/bottom, left/right) */
  display: grid;  /* grid: lay children out in rows and columns */
  justify-items: center;  /* centre each grid child horizontally */
  gap: 10px;  /* space between children: 10px */
}
/* visit strip */

/* 'From our store' strip near the bottom: text and three photos. */
.visit {
  max-width: var(--maxw);  /* never wider than var(--maxw) (--maxw is a design token set in :root) */
  margin: 48px auto 0;  /* outside space (margin): 48px auto 0  (top, left/right, bottom) */
  padding: 0 var(--gutter);  /* inside space (padding): 0 var(--gutter)  (top/bottom, left/right) */
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: .8fr 1.2fr;  /* 2 columns sharing the width in the ratio .8 : 1.2 ('fr' = a share) */
  gap: 28px;  /* space between children: 28px */
  align-items: center;  /* centre children vertically (on the cross axis) */
}

/* Its heading. */
.visit h2 {
  font-size: clamp(22px,2.6vw,30px);  /* text size that scales with the screen: never below 22px, never above 30px */
  margin-bottom: 8px;  /* outside space (margin) (bottom only): 8px */
}

/* Its paragraph. */
.visit p {
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  margin: 0;  /* no outside space (margin) */
}

/* The three photos side by side. */
.visit-strip {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns ('fr' = a share of the free space) */
  gap: 10px;  /* space between children: 10px */
  height: 300px;  /* fixed height of 300px */
}

/* Each photo. */
.visit-strip img {
  width: 100%;  /* fill the parent's full width */
  height: 100%;  /* fill the parent's full height */
  object-fit: cover;  /* fill the box and crop the picture's edges, without stretching it */
  object-position: 50% 25%;  /* which part of the picture stays visible when cropped (50% 25% = horizontal vertical) */
  border-radius: var(--r);  /* rounded corners (--r is a design token set in :root) */
}

/* ':nth-child(2)' = the 2nd photo only. Give it an arch top. */
.visit-strip img:nth-child(2) {
  border-radius: 120px 120px var(--r) var(--r);  /* rounded corners, the top two much rounder (arch shape) */
}
/* footer */

/* FOOTER: dark brown band at the bottom of the page. */
.footer {
  margin-top: 56px;  /* outside space (margin) (top only): 56px */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: #E9DFCF;  /* text colour */
  padding: 40px var(--gutter) calc(96px + env(safe-area-inset-bottom));  /* inside space (padding): 40px var(--gutter) calc(96px + env(safe-area-inset-bottom)) */
  text-align: center;  /* centre the text */
  display: grid;  /* grid: lay children out in rows and columns */
  justify-items: center;  /* centre each grid child horizontally */
  gap: 12px;  /* space between children: 12px */
}

/* The cream logo in the footer. */
.footer-logo {
  height: 120px;  /* fixed height of 120px */
  width: auto;  /* width follows the height (keeps the picture's shape) */
  opacity: .95;  /* see-through: .95 (1 = solid, 0 = invisible) */
}

/* The slogan line in the footer. */
.footer-tag {
  margin: 0;  /* no outside space (margin) */
  font-family: var(--f-head);  /* font family (--f-head is a design token set in :root) */
  font-size: 16px;  /* text size: 16px */
  max-width: 40ch;  /* never wider than 40ch */
}

/* The list of footer links (WhatsApp, Instagram, map...). */
.footer-links {
  list-style: none;  /* remove the bullet points */
  margin: 6px 0 0;  /* outside space (margin): 6px 0 0  (top, left/right, bottom) */
  padding: 0;  /* no inside space (padding) */
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  gap: 10px;  /* space between children: 10px */
  justify-content: center;  /* centre children along the main axis */
}

/* Each footer link, drawn as a pill. */
.footer-links a,.footer-links span {
  display: inline-flex;  /* flexbox, but the box itself sits inside a line of text like a word */
  align-items: center;  /* centre children vertically (on the cross axis) */
  min-height: 40px;  /* at least 40px tall */
  padding: 6px 14px;  /* inside space (padding): 6px 14px  (top/bottom, left/right) */
  border: 1px solid rgba(233,223,207,.25);  /* a line along the whole edge: thickness, style, colour */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  text-decoration: none;  /* remove the underline that links normally have */
  font-size: 14px;  /* text size: 14px */
}

/* Footer link under the mouse. */
.footer-links a:hover {
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
}

/* The small print at the very bottom. */
.footer-small {
  margin: 8px 0 0;  /* outside space (margin): 8px 0 0  (top, left/right, bottom) */
  font-size: 12px;  /* text size: 12px */
  opacity: .7;  /* see-through: .7 (1 = solid, 0 = invisible) */
}
/* floating cart bar */

/* FLOATING CART BAR on phones: 'X pieces in the cart · Review order ←'. */
.cart-bar {
  position: fixed;  /* pin it to the screen: it stays put while the page scrolls */
  inset-inline: 12px;  /* 12px from the left and right edges */
  bottom: calc(12px + env(safe-area-inset-bottom));  /* distance from the bottom, plus the iPhone home-bar safe area */
  z-index: 25;  /* stacking order 25: higher numbers sit on top of lower ones */
  display: flex;  /* flexbox: place the children side by side in a line */
  justify-content: space-between;  /* push the first child to one end and the last to the other */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 12px;  /* space between children: 12px */
  min-height: 56px;  /* at least 56px tall (44px+ = easy to tap with a finger) */
  padding: 10px 20px;  /* inside space (padding): 10px 20px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  text-decoration: none;  /* remove the underline that links normally have */
  box-shadow: 0 12px 30px -10px rgba(43,27,18,.55);  /* soft shadow around the box (x y blur spread colour) */
  font-weight: 500;  /* medium weight */
  max-width: 560px;  /* never wider than 560px */
  margin-inline: auto;  /* auto outside space (margin) = push it as far as possible (centres it or pushes it to one side) */
  animation: rise var(--t) var(--ease);  /* play the @keyframes animation named 'rise' once */
}

/* The 'Review order' part of that bar. (CTA = Call To Action.) */
.cart-bar-cta {
  font-weight: 700;  /* bold */
  color: #F0D9A8;  /* text colour */
}

/* An ANIMATION recipe called 'rise'. The browser moves smoothly between the steps listed inside. */
@keyframes rise {

  /* the starting point of the animation (it ends at the element's normal look) */
  from {
    transform: translateY(20px);  /* shift it vertically by 20px */
    opacity: 0;  /* fully invisible */
  }
}
/* ---------- sheets (product page & cart) ---------- */

/* SHEETS = full-screen panels that open over the menu (product page and cart). */
.sheet {
  position: fixed;  /* pin it to the screen: it stays put while the page scrolls */
  inset: 0;  /* stick to all four edges of the screen (top/right/bottom/left = 0) */
  z-index: 50;  /* stacking order 50: higher numbers sit on top of lower ones */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  overflow-y: auto;  /* scroll vertically inside this box when content is taller */
  overscroll-behavior: contain;  /* when this panel hits its end, don't scroll the page behind it */
  animation: sheetIn var(--t) var(--ease);  /* play the @keyframes animation named 'sheetIn' once */
}

/* An ANIMATION recipe called 'sheetIn'. The browser moves smoothly between the steps listed inside. */
@keyframes sheetIn {

  /* the starting point of the animation (it ends at the element's normal look) */
  from {
    opacity: 0;  /* fully invisible */
    transform: translateY(16px);  /* shift it vertically by 16px */
  }
}

/* The content column inside a sheet. */
.sheet-inner {
  max-width: 980px;  /* never wider than 980px */
  margin: 0 auto;  /* no outside space (margin) above/below, and auto left/right = centre the box horizontally */
  padding: 14px var(--gutter) calc(40px + env(safe-area-inset-bottom));  /* inside space (padding): 14px var(--gutter) calc(40px + env(safe-area-inset-bottom)) */
}

/* The top line of a sheet ('← back' button etc.), stuck to the top while scrolling. */
.sheet-top {
  display: flex;  /* flexbox: place the children side by side in a line */
  justify-content: space-between;  /* push the first child to one end and the last to the other */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 12px;  /* space between children: 12px */
  margin-bottom: 16px;  /* outside space (margin) (bottom only): 16px */
  position: sticky;  /* stay in the normal flow, but stick to the top while scrolling past */
  top: 0;  /* 0 from the top */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  padding: 8px 0;  /* inside space (padding): 8px 0  (top/bottom, left/right) */
  z-index: 2;  /* stacking order 2: higher numbers sit on top of lower ones */
}

/* 'pv' = product view. The small 'category · number' text at the top. */
.pv-crumb {
  font-size: 13px;  /* text size: 13px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* Product page layout: photo on one side, details on the other. */
.product {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 1fr 1fr;  /* 2 equal columns ('fr' = a share of the free space) */
  grid-template-rows: auto 1fr;  /* row 1 sizes to content, row 2 takes the rest */
  column-gap: 40px;  /* space between columns: 40px */
}

/* The top line spans both columns. */
.product .sheet-top {
  grid-column: 1/-1;  /* span from the first to the last column (full width) */
}

/* The big product photo frame. */
.pv-media {
  margin: 0;  /* no outside space (margin) */
  align-self: start;  /* this item sits at the top of its grid/flex cell instead of stretching */
  border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  overflow: hidden;  /* hide anything that sticks out of the box */
  background: #EEEAE0;  /* background colour */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
}

/* The big product photo. */
.pv-media img {
  width: 100%;  /* fill the parent's full width */
  height: auto;  /* height follows the content (keeps the picture's shape) */
}

/* For packages (no photo): the frame shows the tray number on a gradient. */
.pv-media.pack-art {
  aspect-ratio: 4/3;  /* keep a fixed width:height shape of 4/3 */
}

/* For packages (no photo): the frame shows the tray number on a gradient. */
.pv-media.pack-art {
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  background: radial-gradient(120% 90% at 50% 0%,#FFFDF8 0%,var(--sand) 100%);  /* soft round gradient: light at the top centre fading to sand */
}

/* The details column (name, description, price, buttons). */
.pv-body {
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-direction: column;  /* stack children top-to-bottom */
  gap: 10px;  /* space between children: 10px */
  padding-top: 8px;  /* inside space (padding) (top only): 8px */
}

/* Badges on the product page. */
.pv-badges {
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 6px;  /* space between children: 6px */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
}

/* One badge on the product page. */
.pv-badges .badge {
  font-size: 12px;  /* text size: 12px */
}

/* The product name on the product page. */
.pv-body h2 {
  font-size: clamp(26px,3.4vw,38px);  /* text size that scales with the screen: never below 26px, never above 38px */
}

/* 'No. 57' above the product name. */
.pv-num {
  font: 600 15px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
  letter-spacing: .06em;  /* extra space between letters (.06em; 'em' = relative to the font size) */
}

/* Product description. */
.pv-desc {
  margin: 0;  /* no outside space (margin) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: 17px;  /* text size: 17px */
}

/* Product price. */
.pv-price {
  margin: 6px 0 0;  /* outside space (margin): 6px 0 0  (top, left/right, bottom) */
  font: 700 24px/1.2 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* 'Price on request' version of the price. */
.pv-price.ask {
  font-size: 17px;  /* text size: 17px */
  font-weight: 500;  /* medium weight */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* Quantity stepper + 'Add to cart' button. */
.pv-buy {
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 12px;  /* space between children: 12px */
  align-items: center;  /* centre children vertically (on the cross axis) */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  margin-top: 6px;  /* outside space (margin) (top only): 6px */
}

/* The 'Add to cart' button takes the remaining width. */
.pv-buy .btn-lg {
  flex: 1;  /* grow to take the leftover space */
  min-width: 180px;  /* at least 180px wide */
}

/* 'Previous / Next product' buttons at the bottom. */
.pv-nav {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 1fr 1fr;  /* 2 equal columns ('fr' = a share of the free space) */
  gap: 12px;  /* space between children: 12px */
  margin-top: auto;  /* auto outside space (margin) = push it as far as possible (centres it or pushes it to one side) */
  padding-top: 20px;  /* inside space (padding) (top only): 20px */
}

/* Each of those two buttons fills its half. */
.pv-nav .btn {
  width: 100%;  /* fill the parent's full width */
}

/* Package facts as little pills (trays, people, ribbons). */
.pv-facts {
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  gap: 8px;  /* space between children: 8px */
  margin: 0;  /* no outside space (margin) */
  padding: 0;  /* no inside space (padding) */
  list-style: none;  /* remove the bullet points */
}

/* One fact pill. */
.pv-facts li {
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  padding: 6px 12px;  /* inside space (padding): 6px 12px  (top/bottom, left/right) */
  font-size: 14px;  /* text size: 14px */
}

/* QUANTITY STEPPER: [ + ] 3 [ − ]. */
.stepper {
  display: inline-flex;  /* flexbox, but the box itself sits inside a line of text like a word */
  align-items: center;  /* centre children vertically (on the cross axis) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  height: 52px;  /* fixed height of 52px */
}

/* The + and − buttons. */
.stepper button {
  width: 48px;  /* fixed width of 48px */
  height: 100%;  /* fill the parent's full height */
  border: 0;  /* no border */
  background: none;  /* no background (see-through) */
  font-size: 22px;  /* text size: 22px */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
}

/* + or − under the mouse. */
.stepper button:hover {
  background: var(--sand);  /* background colour (--sand is a design token set in :root) */
}

/* The number in the middle. */
.stepper output {
  min-width: 34px;  /* at least 34px wide */
  text-align: center;  /* centre the text */
  font-weight: 700;  /* bold */
  font-size: 17px;  /* text size: 17px */
}

/* Smaller stepper used in the cart list. */
.stepper.sm {
  height: 40px;  /* fixed height of 40px */
}

/* Its smaller buttons. */
.stepper.sm button {
  width: 38px;  /* fixed width of 38px */
  font-size: 18px;  /* text size: 18px */
}

/* Its smaller number. */
.stepper.sm output {
  min-width: 26px;  /* at least 26px wide */
  font-size: 15px;  /* text size: 15px */
}
/* cart */

/* CART PAGE title ('تذكرة الطلب'). */
.cart h2 {
  font-size: clamp(24px,3vw,32px);  /* text size that scales with the screen: never below 24px, never above 32px */
  margin-bottom: 14px;  /* outside space (margin) (bottom only): 14px */
}

/* The list of items in the cart. */
.cart-list {
  list-style: none;  /* remove the bullet points */
  margin: 0;  /* no outside space (margin) */
  padding: 0;  /* no inside space (padding) */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  overflow: hidden;  /* hide anything that sticks out of the box */
}

/* One cart line: picture | name and price | stepper and delete. */
.cart-item {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 64px 1fr auto;  /* columns: 64px 1fr auto (fixed size for the picture, the rest for text, 'auto' = as wide as needed) */
  gap: 12px;  /* space between children: 12px */
  align-items: center;  /* centre children vertically (on the cross axis) */
  padding: 12px 14px;  /* inside space (padding): 12px 14px  (top/bottom, left/right) */
  border-bottom: 1px solid var(--line);  /* a line along the bottom edge: thickness, style, colour (--line is a design token set in :root) */
}

/* ':last-child' = the last line. No border under it. */
.cart-item:last-child {
  border-bottom: 0;  /* no border */
}

/* The small square picture of each cart line. */
.cart-item img,.cart-item .ci-pack {
  width: 64px;  /* fixed width of 64px */
  height: 64px;  /* fixed height of 64px */
  border-radius: 12px;  /* rounded corners */
  object-fit: cover;  /* fill the box and crop the picture's edges, without stretching it */
  background: var(--sand);  /* background colour (--sand is a design token set in :root) */
}

/* For packages: the tray number instead of a picture. ('ci' = cart item.) */
.cart-item .ci-pack {
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  font: 600 26px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}

/* Item name (a link back to its product page). */
.ci-name {
  font: 700 15px/1.35 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  text-decoration: none;  /* remove the underline that links normally have */
}

/* Category, number and line price under the name. */
.ci-meta {
  font-size: 13px;  /* text size: 13px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* Stepper + delete button. */
.ci-actions {
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 6px;  /* space between children: 6px */
}

/* Round red trash-can button. */
.ci-del {
  width: 40px;  /* fixed width of 40px */
  height: 40px;  /* fixed height of 40px */
  border-radius: 50%;  /* fully round corners (a circle) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  background: transparent;  /* no background (see-through) */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  color: var(--danger);  /* text colour (--danger is a design token set in :root) */
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
}

/* The trash-can icon. */
.ci-del svg {
  width: 18px;  /* fixed width of 18px */
  height: 18px;  /* fixed height of 18px */
  fill: none;  /* icons are drawn as outlines, so no fill colour */
  stroke: currentColor;  /* outline colour of icon lines = the current text colour */
  stroke-width: 1.8;  /* thickness of the icon lines: 1.8 */
}

/* Delete button under the mouse: pale red background. */
.ci-del:hover {
  background: #F6E6E3;  /* background colour */
}

/* The totals line under the cart list. */
.cart-total {
  display: flex;  /* flexbox: place the children side by side in a line */
  justify-content: space-between;  /* push the first child to one end and the last to the other */
  align-items: baseline;  /* line children up on their text baseline */
  gap: 12px;  /* space between children: 12px */
  padding: 14px 6px 0;  /* inside space (padding): 14px 6px 0  (top, left/right, bottom) */
  font-size: 15px;  /* text size: 15px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
}

/* The total amount, big. */
.cart-total b {
  font-size: 22px;  /* text size: 22px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* ORDER FORM: name, phone, pickup/delivery, date, notes. */
.order-form {
  margin-top: 24px;  /* outside space (margin) (top only): 24px */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  padding: 20px;  /* inside space (padding): 20px */
  display: grid;  /* grid: lay children out in rows and columns */
  gap: 14px;  /* space between children: 14px */
}

/* 'بيانات الطلب' heading of the form. */
.order-form h3 {
  font-size: 18px;  /* text size: 18px */
}

/* One form field: label + input + error message, stacked. */
.field {
  display: grid;  /* grid: lay children out in rows and columns */
  gap: 6px;  /* space between children: 6px */
  margin: 0;  /* no outside space (margin) */
  border: 0;  /* no border */
  padding: 0;  /* no inside space (padding) */
}

/* The field's label. (<legend> is the label of a group of radio buttons.) */
.field label,.field legend {
  font-weight: 700;  /* bold */
  font-size: 14px;  /* text size: 14px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* '(اختياري)' = optional, in grey. */
.opt {
  font-weight: 400;  /* normal weight */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* Text boxes. ':not([type=radio])' = every input EXCEPT radio buttons. */
.field input:not([type=radio]),.field textarea {
  width: 100%;  /* fill the parent's full width */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  background: #fff;  /* background colour */
  border-radius: 12px;  /* rounded corners */
  padding: 12px 14px;  /* inside space (padding): 12px 14px  (top/bottom, left/right) */
  min-height: 48px;  /* at least 48px tall (44px+ = easy to tap with a finger) */
  font-size: 16px;  /* text size: 16px */
}

/* A text box being typed in: gold border and a soft gold glow. */
.field input:focus,.field textarea:focus {
  outline: 0;  /* remove the default focus outline (we draw our own) */
  border-color: var(--gold);  /* colour of the border (--gold is a design token set in :root) */
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent);  /* soft shadow around the box (x y blur spread colour) (--gold is a design token set in :root) */
}

/* A field with a mistake (JavaScript adds 'bad'): red border. */
.field.bad input {
  border-color: var(--danger);  /* colour of the border (--danger is a design token set in :root) */
}

/* Red error message under a field. */
.err {
  margin: 0;  /* no outside space (margin) */
  color: var(--danger);  /* text colour (--danger is a design token set in :root) */
  font-size: 13px;  /* text size: 13px */
  min-height: 0;  /* at least 0 tall */
}

/* ':empty' = has no text. Then hide it completely. */
.err:empty {
  display: none;  /* hide it completely (takes no space) */
}

/* SEGMENTED CHOICE: pickup | delivery shown as two big buttons (they are really radio buttons). */
.seg {
  display: grid;  /* grid: lay children out in rows and columns */
  grid-template-columns: 1fr 1fr;  /* 2 equal columns ('fr' = a share of the free space) */
  gap: 8px;  /* space between children: 8px */
}

/* Its label spans both columns. */
.seg legend {
  grid-column: 1/-1;  /* span from the first to the last column (full width) */
  margin-bottom: 6px;  /* outside space (margin) (bottom only): 6px */
}

/* Each option box. */
.seg label {
  display: flex;  /* flexbox: place the children side by side in a line */
  align-items: center;  /* centre children vertically (on the cross axis) */
  gap: 8px;  /* space between children: 8px */
  justify-content: center;  /* centre children along the main axis */
  min-height: 48px;  /* at least 48px tall (44px+ = easy to tap with a finger) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: 12px;  /* rounded corners */
  background: #fff;  /* background colour */
  cursor: pointer;  /* show the hand cursor: it can be clicked */
  font-weight: 500;  /* medium weight */
}

/* ':has(input:checked)' = the option whose radio button is selected: filled brown. */
.seg label:has(input:checked) {
  border-color: var(--cocoa);  /* colour of the border (--cocoa is a design token set in :root) */
  background: var(--cocoa);  /* background colour (--cocoa is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
}

/* Hide the real round radio button (the whole box is clickable instead). */
.seg input {
  position: absolute;  /* take it out of the normal flow and place it relative to the nearest positioned parent */
  opacity: 0;  /* fully invisible */
  pointer-events: none;  /* ignore clicks/taps (they pass through to what is underneath) */
}

/* Each option box. */
.seg label {
  position: relative;  /* keep it in place, but let absolutely-positioned children be placed relative to it */
}

/* Show the focus ring on the option box when chosen with the keyboard. */
.seg label:has(input:focus-visible) {
  outline: 2px solid var(--gold-deep);  /* visible focus ring for keyboard users (--gold-deep is a design token set in :root) */
  outline-offset: 2px;  /* gap of 2px between the element and its focus ring */
}

/* Small grey help text under the send button. */
.fine {
  margin: 0;  /* no outside space (margin) */
  font-size: 13px;  /* text size: 13px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  text-align: center;  /* centre the text */
}

/* The error message under the send button is centred. */
.form-err {
  text-align: center;  /* centre the text */
}

/* Space for the Cloudflare Turnstile 'are you human' box (only if turned on). */
.captcha {
  display: flex;  /* flexbox: place the children side by side in a line */
  justify-content: center;  /* centre children along the main axis */
  min-height: 65px;  /* at least 65px tall */
}

/* '#' = the element with that id. The send button while sending (disabled): faded with a busy cursor. */
#send-btn[disabled] {
  opacity: .7;  /* see-through: .7 (1 = solid, 0 = invisible) */
  cursor: progress;  /* show the 'busy' cursor while sending */
}

/* ORDER RECEIVED box (after sending). */
.done {
  text-align: center;  /* centre the text */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  padding: 36px 20px;  /* inside space (padding): 36px 20px  (top/bottom, left/right) */
  display: grid;  /* grid: lay children out in rows and columns */
  justify-items: center;  /* centre each grid child horizontally */
  gap: 8px;  /* space between children: 8px */
}

/* The green round ✓. */
.done-mark {
  width: 64px;  /* fixed width of 64px */
  height: 64px;  /* fixed height of 64px */
  border-radius: 50%;  /* fully round corners (a circle) */
  background: var(--new);  /* background colour (--new is a design token set in :root) */
  color: #fff;  /* text colour */
  font-size: 32px;  /* text size: 32px */
  display: grid;  /* grid: lay children out in rows and columns */
  place-items: center;  /* centre the content both horizontally and vertically */
  animation: pop .4s var(--ease);  /* play the @keyframes animation named 'pop' once */
}

/* An ANIMATION recipe called 'pop'. The browser moves smoothly between the steps listed inside. */
@keyframes pop {

  /* the starting point of the animation (it ends at the element's normal look) */
  from {
    transform: scale(.6);  /* grow/shrink to .6 times its size */
    opacity: 0;  /* fully invisible */
  }
}

/* 'تم استلام طلبك' title. */
.done h3 {
  font-size: 22px;  /* text size: 22px */
}

/* Live order status line on the 'order received' screen. */
.done-status {
  font-weight: 700;  /* bold */
  color: var(--cocoa) !important;  /* text colour; !important beats the grey of '.done p' */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  padding: 6px 14px;  /* inside space (padding): 6px top/bottom, 14px left/right */
}

/* ---------- REMEMBERED CUSTOMER (no login): welcome line, "not you?", device note, my orders ---------- */

/* 'أهلاً بعودتك، سارة. طلباتي السابقة' line in the hero, only for a returning customer. */
.welcome {
  margin: 14px 0 0;  /* outside space (margin): 14px on top only */
  font-size: 15px;  /* text size: 15px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* The 'طلباتي السابقة' link in it. */
.welcome a {
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
  font-weight: 700;  /* bold */
  text-underline-offset: 3px;  /* a little gap between the text and its underline */
}

/* A button that looks like a text link ('لست أنت؟ امسح البيانات'). */
.link-btn {
  background: none;  /* no button background */
  border: 0;  /* no border */
  padding: 6px 0;  /* a little height so it is easier to tap */
  font: inherit;  /* same font as the text around it */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  text-decoration: underline;  /* underlined, like a link */
  text-underline-offset: 3px;  /* a little gap between the text and its underline */
  cursor: pointer;  /* hand cursor: it can be clicked */
}

/* 'عبّأنا بياناتك من طلبك السابق' line at the top of the form. */
.returning {
  margin: -6px 0 0;  /* sit close under the form heading */
  font-size: 14px;  /* text size: 14px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* 'نحفظ بياناتك وطلباتك على هذا الجهاز وهذا المتصفح…' note. */
.device-note {
  margin: 0;  /* no outside space (margin) */
  padding: 10px 14px;  /* inside space (padding): 10px top/bottom, 14px left/right */
  font-size: 13px;  /* text size: 13px */
  line-height: 1.7;  /* comfortable line spacing for Arabic */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  background: var(--cream);  /* background colour (--cream is a design token set in :root) */
  border: 1px dashed var(--line);  /* dashed border: a gentle 'good to know' box */
  border-radius: var(--r-sm);  /* rounded corners (--r-sm is a design token set in :root) */
  text-align: center;  /* centre the text */
}

/* 'طلباتي' screen. */
.my-orders {
  display: grid;  /* grid: lay children out in rows and columns */
  gap: 14px;  /* space between children: 14px */
}

/* The list of past orders. */
.hist-list {
  list-style: none;  /* no bullet points */
  margin: 0;  /* no outside space (margin) */
  padding: 0;  /* no inside space (padding) */
  display: grid;  /* grid: lay children out in rows and columns */
  gap: 12px;  /* space between children: 12px */
}

/* One past order: a card. */
.hist-item {
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  border: 1px solid var(--line);  /* thin border (--line is a design token set in :root) */
  border-radius: var(--r);  /* rounded corners (--r is a design token set in :root) */
  padding: 14px 16px;  /* inside space (padding): 14px top/bottom, 16px left/right */
  display: grid;  /* grid: lay children out in rows and columns */
  gap: 6px;  /* space between children: 6px */
  justify-items: start;  /* children keep their own width (the button doesn't stretch) */
}

/* Order number + status pill on one line. */
.hist-top {
  display: flex;  /* flexbox: place the children side by side in a line */
  flex-wrap: wrap;  /* wrap onto a new line on narrow phones */
  align-items: center;  /* centre them vertically */
  gap: 8px 10px;  /* space between children: 8px between lines, 10px side by side */
  width: 100%;  /* use the whole card width */
}

/* The order number. */
.hist-top b {
  font-family: var(--f-latin);  /* the Latin serif font, like the receipt */
  font-size: 19px;  /* text size: 19px */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* Status pill: grey-beige by default, coloured by status (data-s="..."). */
.hist-status {
  font-size: 13px;  /* text size: 13px */
  font-weight: 700;  /* bold */
  padding: 3px 10px;  /* inside space (padding): 3px top/bottom, 10px left/right */
  border-radius: 999px;  /* pill shape */
  background: var(--sand);  /* background colour (--sand is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}
.hist-status[data-s="ready"] { background: color-mix(in srgb,var(--new) 14%,#fff); color: var(--new); }  /* ready: green */
.hist-status[data-s="cancelled"] { background: color-mix(in srgb,var(--danger) 10%,#fff); color: var(--danger); }  /* cancelled: red */
.hist-status[data-s="done"] { background: transparent; color: var(--muted); border: 1px solid var(--line); }  /* delivered: quiet */

/* Date · pickup/delivery · pieces · total. */
.hist-meta {
  margin: 0;  /* no outside space (margin) */
  font-size: 13px;  /* text size: 13px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* The item names. */
.hist-items {
  margin: 0 0 4px;  /* a little space under it, before the button */
  font-size: 14px;  /* text size: 14px */
  color: var(--ink);  /* text colour (--ink is a design token set in :root) */
  line-height: 1.7;  /* comfortable line spacing for Arabic */
}

/* The small 'clearing browser data also clears this list' line under it. */
.hist-foot small {
  display: block;  /* its own line */
  margin-top: 4px;  /* a little space above it */
  font-size: 12px;  /* text size: 12px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* 'لست أنت؟ امسح البيانات من هذا الجهاز' under the list. */
.hist-foot {
  margin: 0;  /* no outside space (margin) */
  text-align: center;  /* centre it */
  font-size: 14px;  /* text size: 14px */
}

/* Product page 'Add to cart' when the item is sold out. */
#pv-add:disabled {
  opacity: .5;  /* see-through: half visible */
  cursor: not-allowed;  /* show the 'not allowed' cursor */
}

/* Paragraphs in that box. */
.done p {
  margin: 0;  /* no outside space (margin) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* The order number, bold. */
.done b {
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
  font-size: 18px;  /* text size: 18px */
}

/* Buttons in that box. */
.done .btn {
  margin-top: 12px;  /* outside space (margin) (top only): 12px */
}
/* confirm dialog */

/* CONFIRM DIALOG ('Cancel the order?'). <dialog> is a built-in pop-up element. */
.confirm {
  border: 0;  /* no border */
  border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  padding: 24px;  /* inside space (padding): 24px */
  max-width: min(380px,calc(100vw - 32px));  /* at most 380px, and always 32px narrower than the screen */
  background: var(--paper);  /* background colour (--paper is a design token set in :root) */
  color: var(--ink);  /* text colour (--ink is a design token set in :root) */
  box-shadow: var(--shadow);  /* soft shadow around the box (x y blur spread colour) (--shadow is a design token set in :root) */
}

/* '::backdrop' = the dark see-through layer behind an open dialog. */
.confirm::backdrop {
  background: rgba(43,27,18,.45);  /* background colour */
}

/* The question text. */
.confirm p {
  margin: 0 0 18px;  /* outside space (margin): 0 0 18px  (top, left/right, bottom) */
  font: 600 17px/1.5 var(--f-head);  /* shorthand: weight, size/line-height, family (--f-head is a design token set in :root) */
  color: var(--cocoa);  /* text colour (--cocoa is a design token set in :root) */
}

/* Its Yes/No buttons. */
.confirm-actions {
  display: flex;  /* flexbox: place the children side by side in a line */
  gap: 10px;  /* space between children: 10px */
  justify-content: flex-end;  /* push children to the end side */
  flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
}
/* toast */

/* TOAST = the small message that pops up at the bottom for 2 seconds ('Added to cart'). Hidden by default. */
.toast {
  position: fixed;  /* pin it to the screen: it stays put while the page scrolls */
  bottom: calc(84px + env(safe-area-inset-bottom));  /* distance from the bottom, plus the iPhone home-bar safe area */
  left: 50%;  /* start at the horizontal middle of the screen */
  transform: translate(-50%,20px);  /* shift left by half its own width (so it is truly centred), and 20px down */
  opacity: 0;  /* fully invisible */
  pointer-events: none;  /* ignore clicks/taps (they pass through to what is underneath) */
  z-index: 60;  /* stacking order 60: higher numbers sit on top of lower ones */
  background: var(--ink);  /* background colour (--ink is a design token set in :root) */
  color: var(--paper);  /* text colour (--paper is a design token set in :root) */
  padding: 10px 18px;  /* inside space (padding): 10px 18px  (top/bottom, left/right) */
  border-radius: 999px;  /* pill shape: corners so round the ends become half-circles */
  font-size: 14px;  /* text size: 14px */
  transition: opacity var(--t),transform var(--t) var(--ease);  /* animate changes to opacity, transform instead of jumping */
  max-width: calc(100vw - 32px);  /* never wider than calc(100vw - 32px) */
  text-align: center;  /* centre the text */
}

/* When JavaScript adds 'show', the toast fades and slides into view. */
.toast.show {
  opacity: 1;  /* fully visible */
  transform: translate(-50%,0);  /* shift left by half its own width (so it is truly centred) */
}
/* ---------- responsive ---------- */

/* RESPONSIVE DESIGN. '@media' rules apply only when the condition is true. Here: screens 900px wide or more (laptops, desktops). */
@media (min-width:900px) {

  /* Big screens don't need the floating cart bar (the cart button is always visible). */
  .cart-bar {
    display: none;  /* hide it completely (takes no space) */
  }

  /* Cards are a fixed 220px wide. */
  .row {
    grid-auto-columns: 220px;  /* each card column is 220px */
  }
}

/* Screens narrower than 900px (phones, tablets): people swipe, so arrows are not needed. */
@media (max-width:899px) {

  /* Hide the row arrows. */
  .row-ctrl {
    display: none;  /* hide it completely (takes no space) */
  }
}

/* Screens up to 760px wide (phones and small tablets): stack things vertically. */
@media (max-width:760px) {

  /* Hero becomes one column. */
  .hero {
    grid-template-columns: 1fr;  /* 1 equal columns ('fr' = a share of the free space) */
    padding-top: 20px;  /* inside space (padding) (top only): 20px */
  }

  /* The tower photo goes ABOVE the text as a short, wide banner, so the menu
     itself starts on the first screen instead of below the fold
     ("the fold" = the bottom edge of the screen before you scroll). */
  .hero-art {
    order: -1;  /* move this item first, before items that come earlier in the HTML */
    aspect-ratio: 5/2;  /* short banner: 2.5 times wider than tall (about 145px high on a phone) */
    border-radius: var(--r-lg);  /* rounded corners (--r-lg is a design token set in :root) */
  }

  /* Show the middle of the tower (the macarons), not the base. */
  .hero-art img {
    object-position: 50% 45%;  /* which part of the picture stays visible when cropped (50% 45% = horizontal vertical) */
  }

  /* Tighter hero on phones: smaller heading and less space between its parts. */
  .hero {
    gap: 14px;  /* space between the photo and the text */
    padding-bottom: 8px;  /* less space under the hero */
  }
  .hero h1 {
    font-size: 24px;  /* smaller heading on phones (it was 28px and took 4 lines) */
  }
  .lede {
    font-size: 15px;  /* slightly smaller intro sentence */
    margin: 8px 0 14px;  /* less space above and below it */
  }
  .steps {
    margin-top: 14px;  /* less space above the '1 choose · 2 add · 3 send' line */
  }

  /* Product page: photo above details. */
  .product {
    grid-template-columns: 1fr;  /* 1 equal columns ('fr' = a share of the free space) */
    column-gap: 0;  /* space between columns: 0 */
  }

  /* 'From our store': text above photos. */
  .visit {
    grid-template-columns: 1fr;  /* 1 equal columns ('fr' = a share of the free space) */
  }

  /* Shorter photos. */
  .visit-strip {
    height: 220px;  /* fixed height of 220px */
  }

  /* The top bar is a little shorter here, so the chips stick a bit higher. */
  .chips {
    top: 65px;  /* 65px from the top */
  }
}

/* Phones (up to 560px wide). */
@media (max-width:560px) {

  /* Top bar wraps onto two lines. */
  .topbar {
    gap: 10px;  /* space between children: 10px */
    flex-wrap: wrap;  /* let children wrap onto a new line when there is no room */
  }

  /* Search box gets its own full-width second line. */
  .search {
    order: 3;  /* place it at position 3 (3 = after the others) */
    flex-basis: 100%;  /* take a full line of its own */
    max-width: none;  /* never wider than none */
    margin: 0;  /* no outside space (margin) */
  }

  /* Logo pushed to the start, cart button to the end. */
  .brand {
    margin-inline-end: auto;  /* auto outside space (margin) = push it as far as possible (centres it or pushes it to one side) */
  }

  /* Top bar is taller (two lines), so the chips stick lower. */
  .chips {
    top: 121px;  /* 121px from the top */
  }

  /* Jumping to a section leaves more room for the taller header. */
  html {
    scroll-padding-top: 180px;  /* when jumping to a #section, stop 180px lower so the sticky header doesn't cover the title */
  }

  /* Cart line: picture | text, and the buttons go on a second line. */
  .cart-item {
    grid-template-columns: 56px 1fr;  /* columns: 56px 1fr (fixed size for the picture, the rest for text, 'auto' = as wide as needed) */
    row-gap: 8px;  /* space between rows: 8px */
  }

  /* Smaller cart pictures. */
  .cart-item img,.cart-item .ci-pack {
    width: 56px;  /* fixed width of 56px */
    height: 56px;  /* fixed height of 56px */
  }

  /* Buttons sit under the text, spread to both ends. */
  .ci-actions {
    grid-column: 2;  /* sit in the second column */
    justify-content: space-between;  /* push the first child to one end and the last to the other */
  }
}

/* ACCESSIBILITY: people who turned on 'reduce motion' in their phone/computer settings get (almost) no animations. */
@media (prefers-reduced-motion:reduce) {

  /* Every element, including decorative ::before/::after boxes. */
  *,*::before,*::after {
    animation-duration: .01ms!important;  /* make every animation finish almost instantly */
    transition-duration: .01ms!important;  /* make every transition finish almost instantly */
    scroll-behavior: auto!important;  /* turn smooth scrolling off */
  }
}
/* ---------- PDF receipt ---------- */

/* RECEIPT (the HTML version, used only for the print fallback; the PDF is drawn by JavaScript). */
.receipt {
  width: 520px;  /* fixed width of 520px */
  padding: 24px;  /* inside space (padding): 24px */
  background: #fff;  /* background colour */
  color: #3B2418;  /* text colour */
  font: 400 14px/1.6 var(--f-body);  /* shorthand: weight, size/line-height, family (--f-body is a design token set in :root) */
}

/* Receipt header: logo and order number, with a gold line under it. */
.receipt header {
  display: flex;  /* flexbox: place the children side by side in a line */
  justify-content: space-between;  /* push the first child to one end and the last to the other */
  align-items: center;  /* centre children vertically (on the cross axis) */
  border-bottom: 2px solid var(--gold);  /* a line along the bottom edge: thickness, style, colour (--gold is a design token set in :root) */
  padding-bottom: 12px;  /* inside space (padding) (bottom only): 12px */
  margin-bottom: 12px;  /* outside space (margin) (bottom only): 12px */
}

/* Logo on the receipt. */
.receipt header img {
  height: 64px;  /* fixed height of 64px */
  width: auto;  /* width follows the height (keeps the picture's shape) */
}

/* The title + order number block. */
.receipt header div {
  display: grid;  /* grid: lay children out in rows and columns */
  justify-items: end;  /* push each grid child to the end side */
  gap: 4px;  /* space between children: 4px */
}

/* 'إيصال طلب' title. */
.receipt header b {
  font: 700 20px/1.2 var(--f-head);  /* shorthand: weight, size/line-height, family (--f-head is a design token set in :root) */
}

/* Order number. */
.receipt header span {
  font: 600 16px/1 var(--f-latin);  /* shorthand: weight, size/line-height, family (--f-latin is a design token set in :root) */
  color: var(--gold-deep);  /* text colour (--gold-deep is a design token set in :root) */
}

/* Tables on the receipt. */
.receipt table {
  width: 100%;  /* fill the parent's full width */
  border-collapse: collapse;  /* table cells share one border instead of doubling it */
  margin-bottom: 12px;  /* outside space (margin) (bottom only): 12px */
}

/* Table cells (th = heading cell, td = normal cell). */
.receipt th,.receipt td {
  text-align: start;  /* align text to the start side (right in Arabic) */
  padding: 6px 8px;  /* inside space (padding): 6px 8px  (top/bottom, left/right) */
  vertical-align: top;  /* line it up with the middle of the text */
}

/* Labels in the customer-details table. */
.r-info th {
  width: 120px;  /* fixed width of 120px */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-weight: 500;  /* medium weight */
}

/* Column headings of the items table (thead = table head). */
.r-items thead th {
  background: #F4F0E8;  /* background colour */
  font-weight: 700;  /* bold */
  border-bottom: 1px solid var(--line);  /* a line along the bottom edge: thickness, style, colour (--line is a design token set in :root) */
}

/* Item cells, with a line under each row. */
.r-items td {
  border-bottom: 1px solid var(--line);  /* a line along the bottom edge: thickness, style, colour (--line is a design token set in :root) */
}

/* Category under each item name. */
.r-items small {
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
}

/* Columns 1 (#) and 3 (quantity) stay narrow. */
.r-items td:nth-child(1),.r-items td:nth-child(3) {
  width: 48px;  /* fixed width of 48px */
}

/* Total line on the receipt. */
.r-total {
  margin: 8px 0;  /* outside space (margin): 8px 0  (top/bottom, left/right) */
  font-size: 16px;  /* text size: 16px */
}

/* Small print at the bottom of the receipt. */
.r-foot {
  margin: 16px 0 0;  /* outside space (margin): 16px 0 0  (top, left/right, bottom) */
  color: var(--muted);  /* text colour (--muted is a design token set in :root) */
  font-size: 12px;  /* text size: 12px */
}

/* The hidden holder used to print the receipt. */
#receipt-print {
  display: none;  /* hide it completely (takes no space) */
}

/* PRINTING: these rules apply only when the page is printed (or saved as PDF from the print dialog). */
@media print {

  /* Hide everything on the page except the receipt holder. */
  body > *:not(#receipt-print) {
    display: none!important;  /* hide it completely (takes no space) (!important beats any other rule) */
  }

  /* Show the receipt holder. */
  #receipt-print {
    display: block;  /* takes a full line of its own */
  }

  /* Let the receipt use the full paper width. */
  #receipt-print .receipt {
    width: auto;  /* width follows the height (keeps the picture's shape) */
  }
}

/* Preview picture of the receipt on the 'order received' screen. */
.done-receipt {
  width: 100%;  /* fill the parent's full width */
  max-width: 440px;  /* never wider than 440px */
  height: auto;  /* height follows the content (keeps the picture's shape) */
  margin-top: 12px;  /* outside space (margin) (top only): 12px */
  border: 1px solid var(--line);  /* a line along the whole edge: thickness, style, colour (--line is a design token set in :root) */
  border-radius: var(--r-md,12px);  /* rounded corners (--r-md is a design token set in :root) */
  box-shadow: var(--shadow);  /* soft shadow around the box (x y blur spread colour) (--shadow is a design token set in :root) */
  background: #fff;  /* background colour */
}