/*
 * Ghosn storefront stylesheet. Load AFTER /lib/bootstrap/bootstrap.rtl.min.css (Arabic) or
 * /lib/bootstrap/bootstrap.min.css (English /en/). Spec: docs/design-system.md (section 2),
 * docs/ui-and-copy.md (2.1-2.3, 3). Logical properties only, so one file serves RTL and LTR;
 * the one physical exception is marked. Light theme only.
 * Gold rule: #D2B576 (--gh-gold-500) is never text, icons or control borders on light grounds
 * (1.98:1 on white); gold-coloured text on light grounds is #6E6342 (--gh-gold-700).
 * Cache-busting is by file name: rename to ghosn.5.css on change (no ?v= query).
 */

/* ---- Fonts (self-hosted Fontsource files, OFL: /fonts/OFL-*.txt) ---- */
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(../fonts/readex-pro-arabic-wght-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(../fonts/readex-pro-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/aref-ruqaa-arabic-400-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---- Tokens (docs/design-system.md 2.2) ---- */
:root {
  /* brand */
  --gh-green-900: #1B3315; --gh-green-800: #1F3A17; --gh-green-700: #28491E;
  --gh-green-100: #E8EFE3; --gh-green-50: #F3F7F0;
  --gh-gold-700: #6E6342;  /* gold TEXT on light grounds, 5.2-6.0:1 */
  --gh-gold-600: #A88A4A;  /* gold graphics on white only, 3.28:1 */
  --gh-gold-500: #D2B576;  /* brand gold: fills, ornaments, text on green/teal only */
  --gh-gold-300: #E6D3A6; --gh-gold-100: #F6EEDA;
  --gh-teal-800: #1A4047; --gh-teal-100: #E3EEF0;
  /* surfaces */
  --gh-white: #FFFFFF; --gh-ivory: #FBF8F1; --gh-paper: #F5F0E4; --gh-sand: #EEE9DB;
  /* text */
  --gh-ink: #1C2417; --gh-ink-2: #4A5244; --gh-ink-3: #5E6657; --gh-placeholder: #6B7164;
  --gh-on-dark: #D9E2D3; /* body text on green-900, 10.3:1 */
  /* lines: decorative vs control (controls need >= 3:1) */
  --gh-line: #E2DCCB; --gh-border: #8C8672;
  /* states */
  --gh-success: #1F6B33; --gh-success-bg: #E6F4EA;
  --gh-warning: #7A4A00; --gh-warning-bg: #FFF3D1;
  --gh-danger: #B3261E;  --gh-danger-bg: #FDECEA;
  --gh-info: #1A4047;    --gh-info-bg: #E3EEF0;
  --gh-wa: #075E54; --gh-wa-hover: #054C44;
  /* focus */
  --gh-focus: #1A4047; --gh-focus-on-dark: #D2B576; --gh-focus-w: 3px; --gh-focus-offset: 2px;
  /* type */
  --gh-font: "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --gh-font-display: "Aref Ruqaa", "Readex Pro", serif; /* hero/tagline only, 28px and up */
  --gh-lh-ar: 1.8; --gh-lh-en: 1.6; --gh-lh-head-ar: 1.45; --gh-lh-head-en: 1.25;
  --gh-fs-xs: .8125rem; --gh-fs-sm: .9375rem; --gh-fs-lg: 1.1875rem;
  --gh-fs-h4: 1.125rem; --gh-fs-h3: 1.25rem;
  --gh-fs-h2: clamp(1.4rem, 1.2rem + .9vw, 1.875rem);
  --gh-fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  /* shape, space, motion */
  --gh-r-sm: .375rem; --gh-r-md: .625rem; --gh-r-lg: 1rem; --gh-r-xl: 1.5rem;
  --gh-r-arch: 999px 999px .875rem .875rem; /* logo arch: semicircle top */
  --gh-target: 2.75rem; /* 44px primary targets; never below 1.5rem (24px) */
  --gh-section-y: clamp(2.5rem, 6vw, 5rem);
  --gh-shadow-sm: 0 1px 2px rgba(27, 51, 21, .08);
  --gh-shadow-md: 0 4px 14px rgba(27, 51, 21, .10);
  --gh-shadow-lg: 0 12px 32px rgba(27, 51, 21, .14);
  --gh-dur: 160ms; --gh-ease: cubic-bezier(.2, .7, .2, 1);
  --gh-pattern-opacity: .08;
  --gh-sticky-h: 4rem;

  /* ---- Bootstrap 5.3 mapping (no Sass) ---- */
  --bs-primary: #28491E;  --bs-primary-rgb: 40, 73, 30;
  --bs-success: #1F6B33;  --bs-success-rgb: 31, 107, 51;
  --bs-danger: #B3261E;   --bs-danger-rgb: 179, 38, 30;
  --bs-info: #1A4047;     --bs-info-rgb: 26, 64, 71;
  --bs-body-font-family: var(--gh-font);
  --bs-body-color: #1C2417; --bs-body-color-rgb: 28, 36, 23;
  --bs-body-bg: #FBF8F1;    --bs-body-bg-rgb: 251, 248, 241;
  --bs-secondary-color: #4A5244; --bs-emphasis-color: #1C2417;
  --bs-heading-color: #1B3315;
  --bs-link-color: #28491E; --bs-link-color-rgb: 40, 73, 30;
  --bs-link-hover-color: #1B3315; --bs-link-hover-color-rgb: 27, 51, 21;
  --bs-link-decoration: underline;
  --bs-border-color: #E2DCCB; /* decorative; controls use --gh-border */
  --bs-border-radius: .625rem; --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: 1rem; --bs-border-radius-xl: 1.5rem;
  --bs-box-shadow-sm: var(--gh-shadow-sm);
  --bs-box-shadow: var(--gh-shadow-md);
  --bs-box-shadow-lg: var(--gh-shadow-lg);
  --bs-focus-ring-color: #1A4047;
  --bs-form-invalid-color: #B3261E; --bs-form-invalid-border-color: #B3261E;
  --bs-form-valid-color: #1F6B33;   --bs-form-valid-border-color: #1F6B33;
  --bs-gutter-x: 1rem; /* 16px mobile gutter */
}

/* ---- Typography (2.3) ---- */
html[lang="ar"] { font-size: 106.25%; --bs-body-line-height: var(--gh-lh-ar); } /* 17px root: Arabic runs small at 16 */
html[lang="en"] { --bs-body-line-height: var(--gh-lh-en); }
html { scroll-padding-block: 5rem 6rem; } /* keeps focus clear of the sticky bar (SC 2.4.11) */
h1, h2, h3, h4, h5, h6 { line-height: var(--gh-lh-head-en); font-weight: 600; }
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) { line-height: var(--gh-lh-head-ar); } /* Bootstrap hard-codes 1.2 */
h1 { font-size: var(--gh-fs-h1); }
h2 { font-size: var(--gh-fs-h2); }
h3 { font-size: var(--gh-fs-h3); }
h4 { font-size: var(--gh-fs-h4); }
b, strong { font-weight: 600; }
:lang(ar) { letter-spacing: 0; text-transform: none; font-style: normal; } /* never break Arabic joining */
a { text-underline-offset: .2em; }
small, .small { font-size: var(--gh-fs-sm); }
.text-muted-gh { color: var(--gh-ink-3); }
.text-gold { color: var(--gh-gold-700); } /* the only gold text on light grounds */
.eyebrow { color: var(--gh-gold-700); font-size: var(--gh-fs-sm); font-weight: 500; }
.display-ruqaa { font-family: var(--gh-font-display); font-weight: 400; font-size: max(1.75rem, var(--gh-fs-h1)); line-height: 1.45; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }

/* ---- Bootstrap components that ignore --bs-primary ---- */
.btn { --bs-btn-font-weight: 500; min-height: var(--gh-target); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color var(--gh-dur) var(--gh-ease), color var(--gh-dur) var(--gh-ease), border-color var(--gh-dur) var(--gh-ease); }
.btn-primary {
  --bs-btn-bg: #28491E; --bs-btn-border-color: #28491E; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1F3A17; --bs-btn-hover-border-color: #1F3A17; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1B3315; --bs-btn-active-border-color: #1B3315; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #EEE9DB; --bs-btn-disabled-border-color: #EEE9DB; --bs-btn-disabled-color: #5E6657; --bs-btn-disabled-opacity: 1;
}
.btn-outline-primary {
  --bs-btn-color: #28491E; --bs-btn-border-color: #28491E;
  --bs-btn-hover-bg: #E8EFE3; --bs-btn-hover-color: #1B3315; --bs-btn-hover-border-color: #28491E;
  --bs-btn-active-bg: #E8EFE3; --bs-btn-active-color: #1B3315; --bs-btn-active-border-color: #1B3315;
  --bs-btn-disabled-color: #5E6657; --bs-btn-disabled-border-color: #8C8672; --bs-btn-disabled-opacity: 1;
  border-width: 2px;
}
.btn-gold { /* dark grounds only */
  --bs-btn-bg: #D2B576; --bs-btn-border-color: #D2B576; --bs-btn-color: #1C2417;
  --bs-btn-hover-bg: #E6D3A6; --bs-btn-hover-border-color: #E6D3A6; --bs-btn-hover-color: #1C2417;
  --bs-btn-active-bg: #E6D3A6; --bs-btn-active-border-color: #E6D3A6; --bs-btn-active-color: #1C2417;
}
.btn-wa {
  --bs-btn-bg: #075E54; --bs-btn-border-color: #075E54; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #054C44; --bs-btn-hover-border-color: #054C44; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #054C44; --bs-btn-active-border-color: #054C44; --bs-btn-active-color: #fff;
}
.btn-icon { width: var(--gh-target); padding-inline: 0; } /* square icon button; give it an aria-label */
.nav-pills { --bs-nav-pills-link-active-bg: #28491E; --bs-nav-pills-link-active-color: #fff; }
.form-control, .form-select { min-height: var(--gh-target); border-color: var(--gh-border); background-color: #fff; }
.form-control::placeholder { color: var(--gh-placeholder); opacity: 1; }
.form-label { font-weight: 500; margin-block-end: .375rem; }
.form-text { color: var(--gh-ink-3); font-size: var(--gh-fs-sm); }
.form-check-input { border-color: var(--gh-border); width: 1.5rem; height: 1.5rem; } /* 24px minimum */
.form-check-input:checked { background-color: #28491E; border-color: #28491E; }

/* One solid focus ring everywhere; Bootstrap's is translucent */
:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible {
  outline: var(--gh-focus-w) solid var(--gh-focus);
  outline-offset: var(--gh-focus-offset);
  box-shadow: none;
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gh-focus); }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--gh-focus-on-dark); }

/* Alerts: text + icon, never colour alone */
.alert { --bs-alert-border-color: transparent; display: flex; gap: .625rem; align-items: flex-start; }
.alert-success { --bs-alert-color: var(--gh-success); --bs-alert-bg: var(--gh-success-bg); }
.alert-warning { --bs-alert-color: var(--gh-warning); --bs-alert-bg: var(--gh-warning-bg); }
.alert-danger  { --bs-alert-color: var(--gh-danger);  --bs-alert-bg: var(--gh-danger-bg); }
.alert-info    { --bs-alert-color: var(--gh-info);    --bs-alert-bg: var(--gh-info-bg); }
.alert a { color: inherit; font-weight: 500; }

/* ---- Utilities ---- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); } /* only for icons that point (3, rule 3) */
.skip-link { position: absolute; inset-inline-start: .5rem; inset-block-start: -10rem; z-index: 1100; background: #fff; color: var(--gh-green-900); padding: .5rem 1rem; border-radius: var(--gh-r-md); }
.skip-link:focus { inset-block-start: .5rem; }
.honeypot { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; } /* aria-hidden + tabindex=-1 in markup */
.flash:empty { display: none; }
/* htmx (includeIndicatorStyles:false, so these replace its injected styles) */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.section-band { padding-block: var(--gh-section-y); }
.band-paper { background: var(--gh-paper); }
.band-green-50 { background: var(--gh-green-50); }

/* Sprig motif: decorative, behind content, never under text without a solid layer */
.pattern-sprig { position: relative; isolation: isolate; }
.pattern-sprig::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/sprig.svg) repeat; background-size: 5.5rem auto;
  opacity: var(--gh-pattern-opacity);
}

/* ---- Header (not sticky) ---- */
.site-header { background: #fff; border-block-end: 1px solid var(--gh-line); }
.site-header-inner { display: flex; align-items: center; gap: .5rem; min-height: 4.5rem; }
.site-logo { display: inline-flex; flex: none; }
.site-logo img { height: 3.5rem; width: auto; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.lang-link { font-weight: 500; }
.cart-link { position: relative; text-decoration: none; }
.cart-count {
  position: absolute; inset-block-start: -.25rem; inset-inline-end: -.25rem;
  min-width: 1.375rem; height: 1.375rem; padding-inline: .25rem; border-radius: 999px;
  background: var(--gh-green-900); color: #fff; font-size: var(--gh-fs-xs); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.cart-count:empty { display: none; }
/* Mobile menu: <details class="site-menu"><summary class="btn btn-outline-primary btn-icon">...</summary><nav class="site-menu-panel">...</nav></details> */
.site-menu { position: relative; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu-panel {
  position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + .5rem); z-index: 1000;
  min-width: 16rem; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-r-lg);
  box-shadow: var(--gh-shadow-lg); padding: .5rem;
}
.site-menu-panel a { display: flex; align-items: center; min-height: var(--gh-target); padding-inline: .75rem; border-radius: var(--gh-r-md); color: var(--gh-ink); }
.site-menu-panel a:hover { background: var(--gh-green-50); }
.site-menu-panel hr { margin-block: .5rem; border-color: var(--gh-line); opacity: 1; }
/* Desktop nav (>= 992px): .site-nav holds links and an optional <details class="site-menu"> for sections */
.site-nav { display: none; }
.site-nav a { color: var(--gh-ink); font-weight: 500; }
@media (min-width: 992px) {
  .site-header-inner > .site-menu { display: none; }
  .site-nav { display: flex; align-items: center; gap: 1.25rem; margin-inline-start: 1.5rem; }
}

/* ---- Hero (home) ---- */
.hero { background: var(--gh-green-900); color: var(--gh-on-dark); padding-block: clamp(2.5rem, 8vw, 5rem); text-align: center; }
.hero .site-logo img, .hero-logo { height: clamp(7rem, 20vw, 10rem); width: auto; }
.hero h1, .hero-title { color: #fff; }
.about-tagline { font-family: var(--gh-font-display); font-size: 1.75rem; line-height: 1.45; color: var(--gh-gold-700); } /* gold text on light: 5.2:1 */
.hero-tagline { font-family: var(--gh-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); line-height: 1.45; color: var(--gh-gold-500); margin-block: 1rem 1.5rem; } /* gold on green-900: 6.93:1 */

/* ---- Grids: 2 columns < 768, 3 at md, 4 at lg ---- */
.tile-grid, .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .tile-grid, .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 992px) { .tile-grid, .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Occasion tile: the whole tile is one link ---- */
.tile-arch { display: flex; flex-direction: column; gap: .5rem; min-height: var(--gh-target); text-decoration: none; color: var(--gh-green-900); font-weight: 600; text-align: center; }
.tile-arch:hover { color: var(--gh-green-700); text-decoration: underline; }
.tile-arch-photo { display: block; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--gh-r-arch); overflow: hidden; background: var(--gh-paper); }
.tile-arch-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gh-dur) var(--gh-ease); }
.tile-arch:hover .tile-arch-photo img { transform: scale(1.03); }
/* The no-photo placeholder (an ivory SVG): a hairline frame and the paper ground of its box blended in,
   so it reads as a photo slot on ivory and white instead of floating (tiles, cards, gallery, cart). */
.img-placeholder { border: 1px solid var(--gh-line); border-radius: inherit; mix-blend-mode: multiply; }
.tile-arch:focus-visible { border-radius: var(--gh-r-md); }

/* ---- Product card: whole card is one link, no add button ---- */
.product-card { display: flex; flex-direction: column; gap: .375rem; height: 100%; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-r-lg); padding: .5rem .5rem .75rem; text-decoration: none; color: var(--gh-ink); transition: box-shadow var(--gh-dur) var(--gh-ease); }
.product-card:hover { box-shadow: var(--gh-shadow-md); color: var(--gh-ink); }
.product-card:hover .product-card-name { text-decoration: underline; }
.product-card-photo { position: relative; display: block; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--gh-r-md); overflow: hidden; background: var(--gh-paper); }
.product-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-card-name { margin: 0; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* badges stacked over the photo's top start corner (owner, 2026-10-22: availability, then ready today, then
   bestseller or new); each pill's own colours keep the contrast on any photo */
.card-badges { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.card-badges .badge { box-shadow: var(--gh-shadow-sm); }

/* ---- Badges: text + icon, pill shape ---- */
.badge { --bs-badge-font-size: var(--gh-fs-xs); --bs-badge-font-weight: 500; --bs-badge-padding-y: .4em; --bs-badge-padding-x: .8em; --bs-badge-border-radius: 999px; display: inline-flex; align-items: center; gap: .375rem; line-height: 1.2; }
.badge-available   { --bs-badge-color: var(--gh-green-700); background: var(--gh-green-100); } /* 8.67:1 */
.badge-unavailable { --bs-badge-color: var(--gh-ink-2); background: var(--gh-sand); }          /* 6.71:1 */
.badge-bestseller  { --bs-badge-color: var(--gh-gold-700); background: var(--gh-gold-100); }   /* 5.15:1 */
.badge-ready       { --bs-badge-color: var(--gh-teal-800); background: var(--gh-teal-100); }   /* 9.50:1 */
.badge-new         { --bs-badge-color: var(--gh-green-800); background: var(--gh-white); border: 1px solid var(--gh-line); } /* 12.53:1 */

/* ---- Price: markup is <bdi class="price">150 د.ل</bdi> ---- */
.price { font-weight: 600; color: var(--gh-green-900); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: isolate; }
.price-lg { font-size: var(--gh-fs-h3); }

/* ---- Product page gallery: scroll-snap, thumbnails are #photo-n anchors, no JS ---- */
.gallery { display: flex; flex-direction: column; gap: .75rem; }
.gallery-main { position: relative; } /* the badges (.card-badges) sit over the photo's top corner, as on the cards */
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: .5rem; border-radius: var(--gh-r-lg); scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3 / 4; margin: 0; background: var(--gh-paper); border-radius: var(--gh-r-lg); overflow: hidden; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.gallery-thumbs a { display: block; width: 3.5rem; aspect-ratio: 3 / 4; border-radius: var(--gh-r-sm); overflow: hidden; border: 2px solid transparent; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--gh-green-700); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Product page bits ---- */
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.delivery-note { display: flex; gap: .5rem; align-items: flex-start; color: var(--gh-info); background: var(--gh-info-bg); border-radius: var(--gh-r-md); padding: .625rem .875rem; font-size: var(--gh-fs-sm); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Forms ---- */
.field { margin-block-end: 1.5rem; }
.field-error { display: flex; gap: .375rem; align-items: flex-start; margin-block-start: .375rem; color: var(--gh-danger); font-size: var(--gh-fs-sm); font-weight: 500; }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border: 2px solid var(--gh-danger); }
/* Physical exception (docs/ui-and-copy.md 3, rule 5): an LTR phone field sits right-aligned in RTL */
[dir="rtl"] input[type="tel"] { text-align: right; }
.error-summary { background: var(--gh-danger-bg); color: var(--gh-danger); border-radius: var(--gh-r-md); padding: 1rem 1.25rem; margin-block-end: 1.5rem; }
.error-summary h2 { color: var(--gh-danger); font-size: var(--gh-fs-h4); margin-block-end: .5rem; }
.error-summary ul { margin: 0; padding-inline-start: 1.25rem; }
.error-summary a { color: var(--gh-danger); }
/* Choice card: <label class="choice-card"><input type="checkbox|radio"><span>Label<small>hint</small></span></label>
   (the span keeps the hint under the label; the card is a flex row) */
.choice-card { display: flex; gap: .75rem; align-items: center; min-height: var(--gh-target); padding: .75rem .875rem; border: 1px solid var(--gh-border); border-radius: var(--gh-r-md); background: #fff; font-weight: 500; cursor: pointer; }
.choice-card input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--gh-green-700); }
.choice-card small { display: block; font-weight: 400; color: var(--gh-gold-700); }
.choice-card:has(input:checked) { border: 2px solid var(--gh-green-700); background: var(--gh-gold-100); }
.choice-card:focus-within { outline: var(--gh-focus-w) solid var(--gh-focus); outline-offset: var(--gh-focus-offset); }
.choice-card input:focus-visible { outline: none; } /* the card carries the ring */
.choice-group { display: grid; gap: .75rem; }
@media (min-width: 576px) { .choice-group-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Reveal: <div class="reveal"><input class="reveal-toggle" type="checkbox">...<div class="reveal-body">...</div></div>.
   Browsers without :has() show the body (safe default, server validates either way). */
@supports selector(:has(*)) {
  .reveal:not(:has(.reveal-toggle:checked)) .reveal-body { display: none; }
}
.char-count { color: var(--gh-ink-3); font-size: var(--gh-fs-sm); text-align: end; }

/* ---- Checkout steps: <ol class="steps"><li aria-current="step">...</li><li>...</li></ol> ---- */
.steps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0 0 1.5rem; color: var(--gh-ink-3); font-size: var(--gh-fs-sm); font-weight: 500; counter-reset: step; }
.steps li { display: flex; align-items: center; gap: .5rem; counter-increment: step; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 2px solid var(--gh-border); font-variant-numeric: tabular-nums; }
.steps li[aria-current="step"] { color: var(--gh-green-900); font-weight: 600; }
.steps li[aria-current="step"]::before { background: var(--gh-green-700); border-color: var(--gh-green-700); color: #fff; }

/* ---- Summary (dl) and totals ---- */
.summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; margin: 0; }
.summary dt { font-weight: 400; color: var(--gh-ink-2); }
.summary dd { margin: 0; padding-inline-start: 1rem; text-align: end; }
.summary .summary-total { padding-block-start: .75rem; border-block-start: 1px solid var(--gh-line); font-weight: 600; color: var(--gh-ink); }
.summary-block { background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-r-lg); padding: 1rem 1.25rem; margin-block-end: 1rem; }
.summary-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-block-end: .5rem; }
.summary-block-head h2 { font-size: var(--gh-fs-h4); margin: 0; }
.phone-readback { font-size: var(--gh-fs-h3); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.order-number { font-size: var(--gh-fs-h1); font-weight: 600; color: var(--gh-green-900); font-variant-numeric: tabular-nums; }

/* ---- Cart line ---- */
.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: start; padding-block: 1rem; border-block-end: 1px solid var(--gh-line); }
.cart-line-thumb { width: 4rem; aspect-ratio: 3 / 4; border-radius: var(--gh-r-sm); overflow: hidden; background: var(--gh-paper); }
.cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-body { display: flex; flex-direction: column; gap: .5rem; }
.cart-line-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.cart-line-controls .form-select { width: auto; }
.cart-line-total { text-align: end; }

/* ---- Sticky mobile CTA (product page and cart; never on the checkout form) ---- */
.sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: var(--gh-sticky-h); padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: #fff; border-block-start: 1px solid var(--gh-line); box-shadow: var(--gh-shadow-md);
}
.sticky-cta-actions { display: flex; gap: .5rem; }
body:has(.sticky-cta) { padding-block-end: calc(var(--gh-sticky-h) + 1rem + env(safe-area-inset-bottom)); }
.inline-cta { display: none; } /* the in-page button; shown from md up */
@media (min-width: 768px) {
  .sticky-cta { display: none; }
  body:has(.sticky-cta) { padding-block-end: 0; }
  .inline-cta { display: inline-flex; }
}

/* ---- Long-form text (terms, privacy, about) ---- */
.prose { max-width: 42rem; }
.prose h2 { margin-block: 2rem .75rem; }
.prose h3 { margin-block: 1.5rem .5rem; }
.prose ul, .prose ol { padding-inline-start: 1.5rem; }

/* ---- Opening hours ---- */
.hours-table { width: 100%; max-width: 28rem; border-collapse: collapse; }
.hours-table th, .hours-table td { padding: .5rem .75rem; border-block-end: 1px solid var(--gh-line); text-align: start; }
.hours-table th { font-weight: 500; }
.hours-table .is-today { background: var(--gh-green-50); font-weight: 600; }

/* ---- Empty states: one sentence, one action ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-block: 3rem; color: var(--gh-ink-2); }
.empty-state img { width: 4rem; height: auto; opacity: .9; } /* /img/mark.svg works here */

/* ---- Footer: green-900 ground (the credit mark only passes on 900) ---- */
.site-footer { background: var(--gh-green-900); color: var(--gh-on-dark); padding-block: 2.5rem 1.5rem; margin-block-start: var(--gh-section-y); font-size: var(--gh-fs-sm); }
.site-footer h2, .site-footer .footer-title { color: var(--gh-gold-500); font-size: var(--gh-fs-h4); font-weight: 600; } /* 6.93:1 */
.site-footer a { color: var(--gh-on-dark); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--gh-focus-on-dark); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: .375rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid rgba(217, 226, 211, .25); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}