/* ==========================================================================
   ZEFY SHAWARMA — main stylesheet
   --------------------------------------------------------------------------
   HOW TO RE-SKIN THIS SITE
   Everything you are likely to change lives in the :root block directly
   below. Change a value there once and it updates across every page.
   Nothing else in this file needs editing for a colour / font / spacing
   change. Section-specific styles start at "4. HEADER".
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS  —  EDIT THESE
   ========================================================================== */
:root {

  /* ---- Brand colours ---------------------------------------------------- */
  --color-brand:            #2C7346;   /* logo green: buttons, links, accents  */
  --color-brand-dark:       #1F5733;   /* hover state for the logo green       */
  --color-brand-soft:       #E9F3EC;   /* pale tint of the brand colour        */

  /* Secondary accent — the reference layout uses a warmer terracotta for the
     floating order button than for its red links. Set this to the same value
     as --color-brand if you would rather have one accent colour. */
  --color-accent:           #F58735;   /* logo orange: the hero "&", highlights */
  --color-accent-dark:      #D96A1A;

  /* ---- Neutrals --------------------------------------------------------- */
  --color-ink:              #111111;   /* headings                             */
  --color-body:             #4A4A4A;   /* paragraph text                       */
  --color-muted:            #8A8A8A;   /* captions, meta, disabled             */
  --color-line:             #E6E1D9;   /* borders and dividers                 */

  /* ---- Surfaces --------------------------------------------------------- */
  --color-page:             #FFFFFF;   /* default page background              */
  --color-cream:            #F7F3EC;   /* warm section background              */
  --color-cream-deep:       #EFE9E0;   /* slightly darker warm background      */
  --color-card:             #FFFFFF;   /* product / blog card background       */
  --color-faq:              #F5F5F5;   /* FAQ panel background                 */
  --color-footer:           #000000;   /* footer background                    */
  --color-footer-text:      #FFFFFF;   /* footer text                          */
  --color-footer-muted:     #A8A8A8;   /* footer secondary text                */

  /* ---- Typography ------------------------------------------------------- */
  /* Display font = the big rough poster headings (WRAPS, BOWLS ...).
     Swap the first name below for your own licensed font once you have it,
     and add its @font-face rule in section 2. */
  --font-display: 'Rubik Dirt', 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;        /* handwritten notes */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:        clamp(42px, 7.2vw, 100px);   /* hero headline                */
  --fs-display:     clamp(46px, 7.5vw, 100px);   /* WRAPS / BOWLS section titles */
  --fs-display-sm:  clamp(30px, 4.2vw, 63px);    /* band headings                */
  --ls-display:     -0.77px;  /* display headings track slightly tight        */
  --fs-h2:          clamp(22px, 2.4vw, 30px);
  --fs-h3:          20px;
  --fs-base:        16px;
  --fs-sm:          14px;
  --fs-xs:          12px;

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* ---- Layout ----------------------------------------------------------- */
  --container:      1140px;   /* max content width — matches the reference    */
  --gutter:         24px;     /* left/right page padding                      */
  --section-y:      clamp(48px, 7vw, 96px);  /* vertical rhythm between blocks */
  --header-h:       95px;     /* desktop sticky header height                 */
  --header-h-mob:   64px;
  --header-gutter:  clamp(16px, 3.4vw, 56px);  /* side padding of the full-width header */
  --logo-h:         53px;     /* logo height in the header                    */
  --card-w:         299px;    /* product card width in the carousels          */
  --card-gap:       20px;

  /* ---- Shape & depth ---------------------------------------------------- */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   24px;
  --radius-pill: 48px;

  --shadow-card:  0 8px 28px -14px rgba(0,0,0,.28);
  --shadow-hover: 0 18px 38px -18px rgba(0,0,0,.34);
  --shadow-brand: 0 24px 20px -22px rgba(182,21,27,.70);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.4,.16,.2,1);
  --dur:  .28s;
}

/* ==========================================================================
   2. FONT LOADING
   --------------------------------------------------------------------------
   Google Fonts are pulled in via <link> in each page's <head>.
   To use a licensed display font instead, drop the files into /fonts,
   uncomment the block below, then set --font-display above to its name.
   ========================================================================== */
/*
@font-face {
  font-family: 'My Display Font';
  src: url('../fonts/my-display-font.woff2') format('woff2'),
       url('../fonts/my-display-font.woff')  format('woff');
  font-weight: 400;
  font-display: swap;
}
*/

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Components set their own display, which would otherwise beat the hidden
   attribute the scripts use to show and hide them. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-brand); }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--color-ink);
  line-height: var(--lh-snug);
  font-weight: 700;
}

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Shared layout helpers ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

.section--cream      { background: var(--color-cream); }
.section--cream-deep { background: var(--color-cream-deep); }

/* Subtle paper grain used on the warm sections */
.section--paper {
  background-color: var(--color-cream);
  background-image: url('../images/decor/bg-paper.webp');
  background-size: 300px 300px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Display headings ----------------------------------------------------- */
.display-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: #000;
  text-transform: uppercase;
  margin: 0;
}

.display-title--sm { font-size: var(--fs-display-sm); }

.script-note {
  font-family: var(--font-script);
  color: var(--color-brand);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); color: #fff; transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: #fff; }

.btn--ghost {
  padding: 0;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-brand);
  border-radius: 0;
}
.btn--ghost:hover { color: var(--color-brand); }

/* ==========================================================================
   4. HEADER  (sticky, logo centred between two nav groups)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-line);
}

.site-header.is-scrolled { box-shadow: 0 6px 18px -14px rgba(0,0,0,.4); }

/* Full width: the bar spans the whole screen rather than the 1140px
   container, with a gutter that grows on wide monitors. */
.site-header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-inline: var(--header-gutter);
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav--end { justify-content: flex-end; }

.header-end { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.nav__link--mobile { display: none; }

/* Nav type matches the reference: 15px, regular weight, slightly negative
   tracking, and NO text-transform — the labels are typed in caps in the HTML,
   so you can change the casing there without fighting the CSS. */
.nav__link {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.25px;
  color: var(--color-ink);
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--color-brand); }

.site-logo img { height: var(--logo-h); width: auto; }

/* --- Dropdown ------------------------------------------------------------- */
.has-dropdown { position: relative; }

.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); }

.dropdown-toggle .caret {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  margin-top: -3px;
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: var(--color-page);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: none;
}
.has-dropdown.is-open .dropdown { display: block; }

.dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  color: var(--color-body);
}
.dropdown a:hover { background: var(--color-brand-soft); color: var(--color-brand); }

/* --- Header icons (search, account, cart) --------------------------------- */
.icon-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--color-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] { background: var(--color-cream); color: var(--color-brand); }

.header-actions { display: flex; align-items: center; gap: 6px; }

/* Item count on the cart icon */
.cart-count {
  position: absolute; top: 1px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--color-brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.cart-count.is-bumped { animation: cart-bump .4s ease-out; }
@keyframes cart-bump { 40% { transform: scale(1.35); } }

/* Green dot on the account icon while signed in */
.icon-btn__dot {
  position: absolute; top: 7px; right: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #1F9D55; box-shadow: 0 0 0 2px var(--color-page);
}

/* The account icon is a dropdown toggle too, so drop the nav underline */
.account-menu .dropdown-toggle { color: var(--color-ink); }
.dropdown--account { min-width: 220px; }
.dropdown__head {
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  color: var(--color-body);
}
.dropdown button:hover { background: var(--color-brand-soft); color: var(--color-brand); }

/* --- Full-width search panel ---------------------------------------------- */
.search-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--color-page);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 24px 40px -24px rgba(0,0,0,.35);
  animation: search-drop .22s var(--ease);
}
.search-panel[hidden] { display: none; }
@keyframes search-drop { from { opacity: 0; transform: translateY(-8px); } }

.search-panel__inner {
  padding: clamp(18px, 3vw, 34px) var(--header-gutter) clamp(22px, 3vw, 38px);
}

.search-panel__form {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 10px;
  color: var(--color-ink);
}
.search-panel__form:focus-within { border-color: var(--color-brand); }
.search-panel__form svg { flex: none; }
.search-panel__form input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: clamp(20px, 2.6vw, 32px); font-weight: 600;
  letter-spacing: -.02em; color: var(--color-ink);
}
.search-panel__form input::placeholder { color: #B9B3AA; font-weight: 500; }
.search-panel__form input::-webkit-search-cancel-button { display: none; }

.search-panel__close {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-cream);
}
.search-panel__close:hover { background: var(--color-brand); color: #fff; }

.search-panel__label {
  margin: 20px 0 12px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted);
}

/* Four suggestions in a row; each is a thumbnail + name + where it lives */
.search-suggest {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.search-suggest a {
  display: flex; align-items: center; gap: 14px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.search-suggest a:hover,
.search-suggest [aria-selected="true"] a {
  border-color: var(--color-brand); background: var(--color-brand-soft); color: inherit;
  transform: translateY(-2px);
}
.search-suggest__thumb {
  flex: none; width: 56px; height: 56px; border-radius: 10px;
  object-fit: cover; background: var(--color-cream);
  display: grid; place-items: center; color: var(--color-brand);
}
.search-suggest__name { display: block; font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.search-suggest__name mark { background: none; color: var(--color-brand); }
.search-suggest__meta { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }

/* "Popular searches" chips, shown before anything is typed */
.search-suggest--chips { display: flex; flex-wrap: wrap; gap: 10px; }
.search-suggest--chips a {
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink);
}
.search-suggest__empty { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--fs-sm); }

.search-backdrop {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(17,17,17,.38);
  animation: fade-in .2s ease-out;
}
.search-backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
body.is-searching { overflow: hidden; }

/* --- Mobile toggle -------------------------------------------------------- */
.nav-toggle { display: none; width: 44px; height: 44px; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ''; display: block; width: 24px; height: 2px;
  background: var(--color-ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span { margin-inline: auto; position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top:  7px; }

.nav-toggle.is-active span { background: transparent; }
.nav-toggle.is-active span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--color-cream);
  background-image: url('../images/decor/bg-paper.webp');
  background-size: 300px;
  overflow: hidden;
  padding-block: clamp(30px, 5vw, 60px);
}

/* Full-bleed: the grid ignores the 1140px container so the two photos can
   run right to the screen edges and grow with the viewport. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 36px);
  min-height: min(80vh, 760px);
}

.hero__copy { text-align: center; padding-inline: var(--gutter); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: .98;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 18px;
}
.hero__title .amp { color: var(--color-accent); }

.hero__price-note {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.hero__price-note .label {
  font-family: var(--font-script);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-ink);
}
.hero__price-note .price {
  font-family: var(--font-script);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--color-brand);
  font-weight: 700;
}
.hero__price-note .arrow {
  position: absolute;
  left: -104px; top: 4px;
  width: 92px;
  opacity: .9;
}

/* The photos are cut-outs cropped at their outer edge, so each one sits
   flush against its side of the screen and fills its whole column. */
.hero__media { width: 100%; }
.hero__media img { width: 100%; max-width: 760px; height: auto; }
.hero__media--left  img { margin-right: auto; }
.hero__media--right img { margin-left: auto; }

.hero__cta { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   6. PRODUCT SECTIONS  (wraps, bowls — horizontal scroll rail)
   ========================================================================== */
.product-section { position: relative; overflow: hidden; }

/* Oversized watermark behind the rail */
/* Both drift slowly left-to-right and back, on slightly different clocks so
   they never move in lockstep. See @keyframes drift-x in section 13 for why
   this animates `transform` rather than `translate`. */
.product-section__watermark {
  position: absolute;
  left: -40px;
  top: 34%;
  width: clamp(140px, 20vw, 300px);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  animation: drift-x 9s ease-in-out infinite alternate;
}

.product-section__skewer {
  position: absolute;
  left: 18px;
  bottom: 40px;
  width: clamp(70px, 9vw, 140px);
  opacity: .5;
  pointer-events: none;
  animation: drift-x 13s ease-in-out infinite alternate;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

/* Hand-drawn underline that sits beneath the WRAPS / BOWLS headings */
.section-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.section-head__underline {
  display: block;
  width: 206px;
  max-width: 60%;
  height: auto;
}

.section-head__link {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-brand);
  padding-bottom: 3px;
  white-space: nowrap;
}
.section-head__link:hover { color: var(--color-brand); }

/* --- The rail ------------------------------------------------------------- */
.rail-wrap { position: relative; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 6px 22px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.rail-btn {
  position: absolute;
  top: 40%;
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-page);
  box-shadow: var(--shadow-card);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail-btn:hover { background: var(--color-brand); color: #fff; transform: scale(1.06); }
.rail-btn--prev { left: -10px; }
.rail-btn--next { right: -10px; }
.rail-btn[disabled] { opacity: .35; pointer-events: none; }

/* --- Product card --------------------------------------------------------- */
.product-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.product-card__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-cream);
  aspect-ratio: 6 / 5;
  margin-bottom: 16px;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 8px;
}

.product-card__text {
  font-size: var(--fs-sm);
  color: var(--color-body);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* clamp long descriptions so cards stay even */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-card__price { font-size: 17px; font-weight: 700; color: var(--color-ink); }

.product-card__add {
  background: var(--color-brand);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease);
}
.product-card__add:hover { background: var(--color-brand-dark); color: #fff; }

/* ==========================================================================
   7. FEATURE BANDS  (catering / social)
   ========================================================================== */
.band__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.band--reverse .band__media { order: -1; }

.band__media img { border-radius: var(--radius-lg); width: 100%; }

.band__title { margin-bottom: 18px; }

.band__text { font-size: 17px; max-width: 52ch; margin-bottom: 26px; }

/* ==========================================================================
   8. BLOG / DISCOVER
   ========================================================================== */
.blog-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.blog-card__media { aspect-ratio: 16 / 10; background: var(--color-cream); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }

.blog-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

.blog-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 12px;
  line-height: 1.35;
}

.blog-card__link {
  margin-top: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.section-foot { display: flex; justify-content: center; margin-top: 38px; }

/* ==========================================================================
   9. FAQ ACCORDION
   ========================================================================== */
.faq-list { display: grid; gap: 14px; max-width: 980px; margin-inline: auto; }

/* The reference uses square-cornered FAQ panels on a flat grey.
   Set a --radius value here if you prefer rounded ones. */
.faq-item { background: var(--color-faq); border-radius: 0; overflow: hidden; }

.faq-item__q {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
}

.faq-item__q .sign { position: relative; width: 16px; height: 16px; flex: none; }
.faq-item__q .sign::before,
.faq-item__q .sign::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--color-brand); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-item__q .sign::before { width: 16px; height: 2px; }
.faq-item__q .sign::after  { width: 2px;  height: 16px; }
.faq-item.is-open .faq-item__q .sign::after { transform: scaleY(0); opacity: 0; }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }

.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding: 0 24px 22px; margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-footer); color: var(--color-footer-text); }

/* Brand column (logo + blurb) first, then the four link columns */
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding-block: clamp(40px, 6vw, 72px);
}

.site-footer__logo { display: inline-block; margin-bottom: 18px; }
.site-footer__logo img { height: 52px; width: auto; }

.footer-brand p { max-width: 30ch; line-height: 1.6; }

.site-footer__credit { color: var(--color-footer-text); font-weight: 600; }
.site-footer__credit:hover { color: var(--color-brand); }

.footer-col__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-footer-text);
  margin-bottom: 18px;
}

.footer-col li + li { margin-top: 10px; }

.footer-col a,
.footer-col p {
  font-size: var(--fs-sm);
  color: var(--color-footer-muted);
  margin: 0;
}
.footer-col a:hover { color: var(--color-footer-text); }

.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: var(--color-footer-text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-row a:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.site-footer__bar {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--color-footer-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   12. INNER PAGES  (menu, about, contact, catering, blog)
   ========================================================================== */
.page-hero {
  background-color: var(--color-cream);
  background-image: url('../images/decor/bg-paper.webp');
  background-size: 300px;
  padding-block: clamp(46px, 7vw, 90px);
  text-align: center;
}
.page-hero__title { margin-bottom: 10px; }
.page-hero__text { max-width: 60ch; margin-inline: auto; }

.breadcrumb {
  display: flex; gap: 8px; justify-content: center;
  font-size: var(--fs-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: var(--color-brand); }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* --- Menu category tabs --------------------------------------------------- */
.menu-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}

.menu-tab {
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.menu-tab:hover { border-color: var(--color-brand); color: var(--color-brand); }
.menu-tab.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.menu-group + .menu-group { margin-top: var(--section-y); }
.menu-group__title { margin-bottom: 26px; }

/* --- Forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 7px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-page);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  transition: border-color var(--dur) var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--color-brand); outline: none; }

.form-field textarea { min-height: 140px; resize: vertical; }

/* --- Info / contact tiles ------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.info-tile {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.info-tile__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 10px;
}
.info-tile p { font-size: var(--fs-sm); margin: 0; }
.info-tile p + p { margin-top: 6px; }

.map-embed {
  border: 0;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--color-cream);
}

/* --- Catering packages ---------------------------------------------------- */
.package-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 30px;
  background: var(--color-card);
  display: flex;
  flex-direction: column;
}
.package-card--featured { border-color: var(--color-brand); box-shadow: var(--shadow-card); }

.package-card__badge {
  align-self: flex-start;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.package-card__price {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--color-ink);
  margin: 6px 0 18px;
}

.package-card ul { margin-bottom: 26px; }
.package-card li {
  font-size: var(--fs-sm);
  padding-left: 26px;
  position: relative;
}
.package-card li + li { margin-top: 10px; }
.package-card li::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
}
.package-card .btn { margin-top: auto; }

/* --- Stats ---------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  color: var(--color-brand);
  line-height: 1;
}
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 8px;
}

/* --- Rich text (about / article bodies) ----------------------------------- */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { font-size: var(--fs-h2); margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.4em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .45em; }

/* ==========================================================================
   12b. DISCOVER PAGES  (our-story, kitchen, ingredients, locations, careers)
   ========================================================================== */
.dropdown a[aria-current="page"] { background: var(--color-brand-soft); color: var(--color-brand); }

/* Section intro: centred display heading with an optional lead line */
.section-intro { text-align: center; max-width: 64ch; margin: 0 auto 40px; }
.section-intro .display-title { margin-bottom: 14px; }
.section-intro p { margin: 0; }

/* Pill links between the five Discover pages. Deliberately NOT .menu-tab —
   main.js intercepts clicks on those for the menu filter. */
.discover-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.discover-tab {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: var(--color-page);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: all var(--dur-ui) ease-in-out;
}
.discover-tab:hover { border-color: var(--color-brand); color: var(--color-brand); }
.discover-tab[aria-current="page"] { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* Round badge holding an inline SVG icon. The icon draws in currentColor,
   so it follows --color-brand. */
.icon-badge {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: grid; place-items: center;
  margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(44,115,70,.12);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-badge svg { width: 38px; height: 38px; }
.feature:hover .icon-badge { background: var(--color-brand); color: #fff; transform: rotate(-6deg) scale(1.05); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.feature {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.feature__title { font-size: 18px; margin-bottom: 8px; }
.feature p { font-size: var(--fs-sm); margin: 0; }

/* Handwritten pull quote */
.pull-quote {
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.15;
  color: var(--color-ink);
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* --- Timeline (Our Story) ------------------------------------------------- */
.timeline { max-width: 860px; margin-inline: auto; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  left: 110px;
  width: 2px;
  background: var(--color-line);
}
.timeline__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 40px;
  position: relative;
  padding-bottom: 38px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: 104px; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 0 5px var(--color-brand-soft);
}
.timeline__year {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--color-brand);
  padding-right: 20px;
}
.timeline__title { font-size: 19px; margin-bottom: 6px; }
.timeline__item p { margin: 0; }

/* --- Numbered steps (From the Kitchen) ------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  counter-reset: step;
}
.step {
  counter-increment: step;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: 14px;
}
.step__title { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: var(--fs-sm); margin: 0; }

/* --- Sourcing list (Ingredients) ------------------------------------------ */
.source-list { display: grid; gap: 14px; max-width: 980px; margin-inline: auto; }
.source-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.source-row__name { font-size: 18px; font-weight: 700; color: var(--color-ink); margin: 0; }
.source-row p { margin: 0; font-size: var(--fs-sm); }
.tag {
  display: inline-block;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* --- Location cards ------------------------------------------------------- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.location-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.location-card__media { aspect-ratio: 16 / 9; background: var(--color-cream); }
.location-card__media img { width: 100%; height: 100%; object-fit: cover; }
.location-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.location-card__title { font-size: 22px; margin-bottom: 6px; }
.location-card__addr { font-size: var(--fs-sm); margin-bottom: 4px; }
.location-card__phone { font-size: var(--fs-sm); color: var(--color-brand); font-weight: 600; }
.hours { margin: 18px 0 24px; border-top: 1px solid var(--color-line); }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-sm);
  padding-block: 9px;
  border-bottom: 1px solid var(--color-line);
}
.hours li span:first-child { color: var(--color-ink); font-weight: 600; }
.location-card__actions { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.location-card__actions .btn { padding: 12px 22px; }

/* --- Job listings (Careers) ----------------------------------------------- */
.job-list { display: grid; gap: 14px; max-width: 980px; margin-inline: auto; }
.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: border-color var(--dur-ui) ease-in-out, box-shadow var(--dur-ui) ease-in-out;
}
.job:hover { border-color: var(--color-brand); box-shadow: var(--shadow-card); }
.job__title { font-size: 19px; margin-bottom: 4px; }
.job p { margin: 0; font-size: var(--fs-sm); }
.job__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.job .btn { padding: 12px 24px; }

.form-card {
  max-width: 820px;
  margin-inline: auto;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-card);
}
.form-card .btn { margin-top: 24px; }

/* --- Closing call-to-action band ------------------------------------------ */
.cta-band {
  background: var(--color-brand);
  color: #fff;
  text-align: center;
  padding-block: clamp(56px, 8vw, 96px);
}
.cta-band .display-title { color: #fff; margin-bottom: 14px; }
.cta-band p { max-width: 56ch; margin: 0 auto 28px; color: rgba(255,255,255,.88); font-size: 17px; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn--light { background: #fff; color: var(--color-brand); }
.btn--light:hover { background: var(--color-ink); color: #fff; transform: translateY(-2px); }
.btn--outline-light { border: 2px solid #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--color-brand); }

@media (max-width: 640px) {
  .timeline::before { left: 6px; }
  .timeline__item { grid-template-columns: 1fr; padding-left: 34px; row-gap: 8px; }
  .timeline__item::before { left: 0; top: 6px; }
  .source-row { grid-template-columns: 1fr; gap: 8px; }
  .source-row .tag { justify-self: start; }
  .job .btn { width: 100%; }
}

/* ==========================================================================
   13. ANIMATIONS
   --------------------------------------------------------------------------
   Keyframes and timings matched to the reference layout:
     popUp / popOut      0.4s ease-out forwards   — modals, cart panel
     slide-up-down       3s ease-in-out           — the "added to cart" toast
     loading-skeleton    1s infinite alternate    — placeholder shimmer
   The reference's own transitions are 0.2s ease-in-out on transform/opacity
   and 0.3s ease-in-out generally, which is what --dur-fast / --dur-ui below
   reproduce.
   ========================================================================== */
:root {
  --dur-fast: .2s;    /* transform / opacity micro-interactions */
  --dur-ui:   .3s;    /* general UI state changes               */
  --dur-pop:  .4s;    /* modal pop in / out                     */
}

@keyframes popUp {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@keyframes popOut {
  from { transform: scale(1);  opacity: 1; }
  to   { transform: scale(.5); opacity: 0; }
}

@keyframes slide-up-down {
    0% { bottom: 0;      opacity: 0; }
   30% { bottom: 10%;    opacity: 1; }
   70% { bottom: 10%;    opacity: 1; }
  100% { bottom: -100px; opacity: 0; }
}

@keyframes loading-skeleton {
  from { opacity: .4; }
  to   { opacity: 1; }
}

/* Slow horizontal drift for the decorative art beside the WRAPS heading.

   This animates `transform`, NOT `translate`, on purpose. Those elements use
   `translate` for their scroll-reveal, and an animation always beats a
   transition on the same property — driving the drift through `transform`
   lets the two run at once instead of the drift killing the reveal. */
@keyframes drift-x {
  from { transform: translateX(0); }
  to   { transform: translateX(38px); }
}

.is-popping-in  { animation: popUp  var(--dur-pop) ease-out forwards; }
.is-popping-out { animation: popOut var(--dur-pop) ease-out forwards; }

.is-skeleton { animation: 1s infinite alternate loading-skeleton; }

/* --- Toast ---------------------------------------------------------------
   Fires when an "Add" button is pressed, the way the reference confirms an
   item going into the cart. It removes itself when the animation ends. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--color-ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.25px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  animation: slide-up-down 3s ease-in-out forwards;
  pointer-events: none;
}

/* --- Scroll reveal -------------------------------------------------------
   Cards fade up and settle while their photo zooms out of an overscale.

   Note this deliberately uses the INDEPENDENT `translate` and `scale`
   properties rather than `transform`. The cards already use `transform`
   for their hover lift and the images use it for the hover zoom — driving
   the reveal through separate properties means the two never overwrite
   each other, and hover keeps working the moment the reveal finishes.

   Add data-reveal to any element to opt it in. js/main.js observes them
   and staggers each group with --reveal-delay.
   -------------------------------------------------------------------------- */
/* Everything below is scoped to .has-js, which an inline snippet in each
   page's <head> sets. Without JS the cards are simply visible — they can
   never get stuck hidden because a script failed to load. */
.has-js [data-reveal] {
  opacity: 0;
  translate: 0 30px;
  scale: .94;

  /* transform and box-shadow are re-declared here on purpose. This selector
     outranks the plain `.product-card` rule below, so a transition list that
     named only the reveal properties would silently strip the card's hover
     easing and make the lift snap. Keep all four. */
  transition: opacity .65s var(--ease),
              translate .65s var(--ease),
              scale .65s var(--ease),
              transform var(--dur-fast) ease-in-out,
              box-shadow var(--dur-fast) ease-in-out;

  /* Cleared by main.js once the reveal finishes, so hover is never delayed */
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, translate, scale;
}

/* Reveals to --reveal-opacity, not a hard 1. Decorative elements like the
   watermark are meant to sit faint (opacity .07) — animating them to full
   would blow them out. Set --reveal-opacity on any element that has its own
   resting opacity; everything else gets 1. */
.has-js [data-reveal].is-visible {
  opacity: var(--reveal-opacity, 1);
  translate: 0 0;
  scale: 1;
}

/* --- Zoom variant --------------------------------------------------------
   Grows into place from a smaller scale with no vertical travel. Used on the
   section headings and the big decorative art, where a slide would fight the
   fact that they are already anchored to the layout. */
.has-js [data-reveal="zoom"] {
  translate: 0 0;
  scale: .72;
  transition: opacity .8s var(--ease),
              scale .8s var(--ease),
              transform var(--dur-fast) ease-in-out,
              box-shadow var(--dur-fast) ease-in-out;
  transition-delay: var(--reveal-delay, 0s);
}

.has-js [data-reveal="zoom"].is-visible { scale: 1; }

/* The photo starts overscaled and eases back — a slower settle than the
   card itself, which is what makes it read as a zoom rather than a slide. */
.has-js [data-reveal] .product-card__media img,
.has-js [data-reveal] .blog-card__media img {
  scale: 1.2;
  /* transform kept in the list for the same reason as the card above —
     without it the hover zoom on a revealed card would snap. */
  transition: scale 1.05s var(--ease),
              transform var(--dur-pop) ease;
  transition-delay: var(--reveal-delay, 0s);
}

.has-js [data-reveal].is-visible .product-card__media img,
.has-js [data-reveal].is-visible .blog-card__media img { scale: 1; }

/* Once revealed, drop will-change so we stop paying for the layer */
[data-reveal].is-revealed { will-change: auto; }

/* Nothing hidden if the visitor asked for less motion. Selectors must match
   the .has-js specificity above or these would lose the cascade. */
@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
  .has-js [data-reveal] .product-card__media img,
  .has-js [data-reveal] .blog-card__media img { scale: 1; transition: none; }
}

/* --- Reference-matched interaction timings -------------------------------- */
.product-card,
.blog-card {
  transition: transform var(--dur-fast) ease-in-out,
              box-shadow var(--dur-fast) ease-in-out;
}

.product-card__media img,
.blog-card__media img {
  transition: transform var(--dur-pop) ease;
}

/* Image pushes in slightly while the card lifts */
.product-card:hover .product-card__media img,
.blog-card:hover .blog-card__media img { transform: scale(1.06); }

.btn,
.product-card__add,
.menu-tab,
.nav__link::after,
.social-row a,
.rail-btn { transition: all var(--dur-ui) ease-in-out; }

/* ==========================================================================
   13b. VIDEO BAND
   --------------------------------------------------------------------------
   Full-width autoplay/muted/looping background video with copy on top —
   the same treatment the reference site uses.

   The <video> sits behind a poster image, so if the video file is missing,
   slow, or blocked (or the visitor prefers reduced motion) the poster still
   renders and the section looks finished. Drop your clip at
   videos/hero.mp4 and it starts playing with no other change.
   ========================================================================== */
.video-band {
  position: relative;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.video-band__media { position: absolute; inset: 0; z-index: 0; }

.video-band__media img,
.video-band__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video stacks on top of the poster once it can play */
.video-band__media video { position: absolute; inset: 0; }

/* Darkening layer so the text stays readable over any footage */
.video-band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.62));
}

.video-band__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding-block: clamp(84px, 14vw, 190px);
}

.video-band__inner .display-title,
.video-band__inner h2 { color: #fff; }

.video-band__text {
  max-width: 54ch;
  margin: 0 auto 28px;
  font-size: 17px;
  color: rgba(255,255,255,.88);
}

/* No autoplaying motion for visitors who asked not to have it */
@media (prefers-reduced-motion: reduce) {
  .video-band__media video { display: none; }
}

/* ==========================================================================
   14. ILLUSTRATIONS
   --------------------------------------------------------------------------
   The SVGs in images/illustrations/ are drawn as single-colour shapes and
   painted here with CSS masks. That means their colour comes from a token,
   so changing --color-brand recolours every icon and doodle too.

   Each doodle modifier class below sets its own --icon. The url() is
   written here, relative to this stylesheet, on purpose: a relative url()
   placed in an inline style="--icon:..." resolves against the stylesheet
   that USES it, which pointed at css/images/... and painted nothing.
   ========================================================================== */
.doodle {
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* --- Floating doodles ----------------------------------------------------- */
/* Decorative only. Each one is positioned by a modifier class below. */
.doodle {
  position: absolute;
  color: var(--color-brand);
  opacity: .16;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.doodle--herb   { width: 90px;  height: 120px; --icon: url('../images/illustrations/doodle-herb.svg'); }
.doodle--chili  { width: 80px;  height: 110px; --icon: url('../images/illustrations/doodle-chili.svg'); }
.doodle--lemon  { width: 104px; height: 104px; --icon: url('../images/illustrations/doodle-lemon.svg'); }
.doodle--sesame { width: 130px; height: 74px; opacity: .22; --icon: url('../images/illustrations/doodle-sesame.svg'); }

/* Positions — tweak or add your own */
.doodle--tl { top: 6%;  left: 4%;  transform: rotate(-16deg); }
.doodle--tr { top: 9%;  right: 5%; transform: rotate(14deg); }
.doodle--bl { bottom: 8%; left: 6%; transform: rotate(9deg); }
.doodle--br { bottom: 7%; right: 4%; transform: rotate(-12deg); }

/* Keep doodles from crowding small screens */
@media (max-width: 860px) {
  .doodle { display: none; }
}

/* --- Brush divider -------------------------------------------------------- */
.divider-brush {
  display: block;
  width: 100%;
  height: 34px;
  color: var(--color-cream);
  background-color: currentColor;
  -webkit-mask: url('../images/illustrations/divider-brush.svg') center / 100% 100% no-repeat;
          mask: url('../images/illustrations/divider-brush.svg') center / 100% 100% no-repeat;
}
.divider-brush--flip { transform: rotate(180deg); }

/* ==========================================================================
   14b. SHOP & ACCOUNT  (account, cart, checkout, order-complete)
   ========================================================================== */

/* --- Shared bits ---------------------------------------------------------- */
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert {
  padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.5;
  border: 1px solid transparent; margin-bottom: 18px;
}
.alert[hidden] { display: none; }
.alert--error   { background: #FDECEC; border-color: #F5C2C2; color: #8E1418; }
.alert--success { background: #EAF6EF; border-color: #BFE3CD; color: #16603A; }
.alert--info    { background: var(--color-cream); border-color: var(--color-line); color: var(--color-ink); }
.alert a { text-decoration: underline; font-weight: 600; }

.form-stack { display: grid; gap: 16px; }
.form-row-between {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: var(--fs-sm);
}
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--color-brand); }
.link { color: var(--color-brand); font-weight: 600; }
.link:hover { text-decoration: underline; }
.muted { color: var(--color-muted); font-size: var(--fs-sm); }

/* Password field with a show/hide toggle inside it */
.password-field { position: relative; }
.password-field input { padding-right: 70px; }
.password-field button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-muted);
}
.password-field button:hover { color: var(--color-brand); background: var(--color-brand-soft); }

/* --- Account: sign in / register / forgot / reset ------------------------- */
.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 1040px; margin-inline: auto;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.auth__art {
  position: relative; min-height: 560px;
  background: #111 center / cover no-repeat;
  color: #fff; display: flex; align-items: flex-end;
  padding: clamp(24px, 4vw, 44px);
}
.auth__art::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.05) 65%);
}
.auth__art > * { position: relative; }
.auth__art .display-title { color: #fff; font-size: clamp(34px, 4vw, 54px); margin-bottom: 10px; }
.auth__art p { color: rgba(255,255,255,.85); margin: 0; max-width: 34ch; }

.auth__body { padding: clamp(26px, 4vw, 52px); }

.auth-tabs {
  display: flex; gap: 6px; padding: 5px; margin-bottom: 26px;
  background: var(--color-cream); border-radius: var(--radius-pill);
}
.auth-tabs button {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-body);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.auth-tabs button[aria-selected="true"] { background: var(--color-page); color: var(--color-brand); box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }

.auth-panel[hidden] { display: none; }
.auth-panel h2 { font-size: 26px; margin-bottom: 6px; }
.auth-panel > p { margin-bottom: 22px; font-size: var(--fs-sm); }
.auth-switch { margin: 22px 0 0; text-align: center; font-size: var(--fs-sm); }

/* --- Account: dashboard --------------------------------------------------- */
.account-dash { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.account-side {
  background: var(--color-card); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: 26px; text-align: center;
  position: sticky; top: calc(var(--header-h) + 20px);
}
.avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--color-brand); color: #fff;
  font-size: 28px; font-weight: 700;
}
.account-side h2 { font-size: 20px; margin-bottom: 2px; overflow-wrap: anywhere; }
.account-side p { overflow-wrap: anywhere; }
.account-side .btn { margin-top: 20px; }

.panel {
  background: var(--color-card); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px);
}
.panel + .panel { margin-top: 24px; }
.panel__title { font-size: 20px; margin-bottom: 18px; }

.orders-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.orders-table th {
  text-align: left; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 700; padding: 0 10px 10px;
  border-bottom: 1px solid var(--color-line);
}
.orders-table td { padding: 14px 10px; border-bottom: 1px solid var(--color-line); }
.orders-table tr:last-child td { border-bottom: 0; }

.status {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-cream); color: var(--color-ink); white-space: nowrap;
}
.status--paid { background: #EAF6EF; color: #16603A; }
.status--awaiting_transfer, .status--pending_payment { background: #FFF4DE; color: #8A5A00; }

/* --- Cart & checkout layout ----------------------------------------------- */
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }

.cart-list { display: grid; gap: 14px; }
.cart-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 36px;
  gap: 18px; align-items: center;
  background: var(--color-card); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 12px;
}
.cart-line img { width: 96px; height: 80px; object-fit: cover; border-radius: 10px; }
.cart-line__name { font-weight: 700; color: var(--color-ink); display: block; line-height: 1.3; }
.cart-line__meta { font-size: var(--fs-sm); color: var(--color-muted); }
.cart-line__total { font-weight: 700; color: var(--color-ink); min-width: 70px; text-align: right; }
.cart-line__remove {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--color-muted);
}
.cart-line__remove:hover { background: var(--color-brand-soft); color: var(--color-brand); }

.qty {
  display: inline-flex; align-items: center; justify-self: start;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
}
.qty button { width: 34px; height: 34px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--color-ink); }
.qty button:hover { color: var(--color-brand); }
.qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: var(--fs-sm); }

.cart-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.summary {
  background: var(--color-cream); border-radius: var(--radius-lg);
  padding: 26px; position: sticky; top: calc(var(--header-h) + 20px);
}
.summary__title { font-size: 20px; margin-bottom: 16px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); padding: 7px 0; }
.summary__row--total {
  border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 14px;
  font-size: 18px; font-weight: 700; color: var(--color-ink);
}
.summary__items { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.summary__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.summary__item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.summary__item b { color: var(--color-ink); }
.summary .btn { margin-top: 18px; }
.summary__note { font-size: var(--fs-xs); color: var(--color-muted); margin: 12px 0 0; text-align: center; }

.empty-state { text-align: center; padding: clamp(40px, 7vw, 80px) 20px; }
.empty-state svg { margin: 0 auto 18px; color: var(--color-brand); }
.empty-state h2 { font-size: 26px; }
.empty-state p { max-width: 42ch; margin: 0 auto 24px; }

/* --- Checkout ------------------------------------------------------------- */
.checkout-step + .checkout-step { margin-top: 24px; }
.checkout-step__title { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 18px; }
.checkout-step__num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-brand); color: #fff; font-size: 14px;
}

/* Delivery / pickup and the payment methods share this card-radio look */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius);
  cursor: pointer; background: var(--color-page);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: #CFC7BB; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #CFC7BB; display: grid; place-items: center;
}
.choice input:checked ~ .choice__dot { border-color: var(--color-brand); }
.choice input:checked ~ .choice__dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand); }
.choice.is-checked { border-color: var(--color-brand); background: var(--color-brand-soft); }
.choice input:focus-visible ~ .choice__dot { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.choice__text { flex: 1; min-width: 0; }
.choice__text b { display: block; color: var(--color-ink); font-size: var(--fs-sm); }
.choice__text small { color: var(--color-muted); font-size: var(--fs-xs); }
.choice__logo { flex: none; height: 22px; width: auto; }
.choice.is-off { opacity: .55; cursor: not-allowed; }

.pay-panel { margin-top: 18px; }
.pay-panel[hidden] { display: none; }
.pay-panel__box {
  background: var(--color-cream); border-radius: var(--radius); padding: 18px;
  font-size: var(--fs-sm);
}
.pay-panel__box p:last-child { margin-bottom: 0; }
.card-brands { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.card-brands span {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 7px;
  border-radius: 4px; background: #fff; border: 1px solid var(--color-line); color: var(--color-ink);
}
#paypal-buttons { margin-top: 14px; min-height: 45px; }

.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 14px; }

/* --- Order complete ------------------------------------------------------- */
.done { max-width: 720px; margin-inline: auto; text-align: center; }
.done__icon {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; background: #EAF6EF; color: #1F9D55;
  animation: pop-in .5s cubic-bezier(.2,1.4,.4,1);
}
.done__icon--wait { background: #FFF4DE; color: #B07400; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.done .panel { text-align: left; margin-top: 28px; }
.bank-details { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: var(--fs-sm); margin: 0; }
.bank-details dt { color: var(--color-muted); }
.bank-details dd { margin: 0; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }

/* "Add" turns green for a moment after adding */
.product-card__add.is-added { background: #1F9D55; border-color: #1F9D55; color: #fff; }

/* Search results note on the menu page */
.search-note {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--color-cream); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 30px;
  font-size: var(--fs-sm);
}

@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art { min-height: 200px; }
  .shop-grid, .account-dash { grid-template-columns: 1fr; }
  .summary, .account-side { position: static; }
}
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr) 32px; gap: 8px 12px; }
  .cart-line img { width: 72px; height: 64px; grid-row: span 3; align-self: start; }
  .cart-line .qty { grid-column: 2; }
  .cart-line__total { grid-column: 2; text-align: left; }
  .cart-line__remove { grid-column: 3; grid-row: 1; }
  .orders-table thead { display: none; }
  .orders-table tr { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
  .orders-table td { border: 0; padding: 3px 0; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  /* Headline on top, then the two photos side by side — each one still
     flush to its own screen edge, so together they span the full width. */
  .hero { padding-bottom: 0; }
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: clamp(18px, 4vw, 36px);
    min-height: 0;
  }
  .hero__copy { grid-column: 1 / -1; grid-row: 1; }
  .hero__media--left  { grid-column: 1; grid-row: 2; align-self: end; }
  .hero__media--right { grid-column: 2; grid-row: 2; align-self: end; }
  .hero__media img { max-width: none; }
  .hero__price-note .arrow { display: none; }
  .band__grid { grid-template-columns: 1fr; }
  .band--reverse .band__media { order: 0; }
}

@media (max-width: 980px) {
  /* Row 1 is the visible bar; rows 2 and 3 hold the two nav groups,
     which are display:none until the header gets .is-open. */
  .site-header__inner {
    height: auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--header-h-mob) auto auto;
    column-gap: 12px;
    row-gap: 0;
  }

  .nav-toggle { display: grid; place-items: center; grid-column: 1; grid-row: 1; justify-self: start; margin-left: -8px; }

  /* The right group dissolves so its two parts can sit in different rows:
     the icons stay in the top bar, the links drop into the open menu. */
  .header-end { display: contents; }
  .header-actions { grid-column: 3; grid-row: 1; justify-self: end; margin-right: -6px; gap: 0; }
  .account-menu { display: none; }
  .nav__link--mobile { display: block; }

  .site-logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-logo img { height: 40px; }

  .nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .nav--start { grid-row: 2; }
  .nav--end   { grid-row: 3; padding-bottom: 14px; }

  .site-header.is-open .nav { display: flex; }

  .nav__link { padding-block: 13px; border-bottom: 1px solid var(--color-line); }
  .nav__link::after { display: none; }

  /* The dropdown becomes an indented sub-list rather than a floating panel */
  .dropdown {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    padding: 4px 0 10px 12px;
    min-width: 0;
  }
  .has-dropdown.is-open .dropdown { display: block; }

  .search-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .rail-btn { display: none; }
  .rail { grid-auto-columns: 82%; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__bar { justify-content: center; text-align: center; }
  .search-suggest { grid-template-columns: 1fr; gap: 8px; }
  .search-suggest a { padding: 8px; }
  .search-suggest__thumb { width: 44px; height: 44px; }

  .section-head { align-items: flex-start; }
}

/* ==========================================================================
   16. MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}