/* =========================================================================
   Olifantenpad Studio
   Palette and type sampled directly from the existing Square site.
   ========================================================================= */

:root {
  --olive:        #4A562A;
  --olive-deep:   #3C461F;
  --olive-soft:   #8C9376;
  --cream:        #F2EDE3;
  --cream-lift:   #F5F6F3;
  --paper:        #FFFFFF;
  --sage:         #AAAF99;
  --gold:         #9B804A;
  --gold-lift:    #B0924F;
  --ink:          #1F2417;
  --slate:        #323B43;
  --line:         rgba(74, 86, 42, 0.16);
  --line-soft:    rgba(74, 86, 42, 0.09);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1200px;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(31, 36, 23, 0.06);
  --shadow-md: 0 8px 28px rgba(31, 36, 23, 0.10);
  --shadow-lg: 0 18px 50px rgba(31, 36, 23, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--olive);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.shell-narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--cream); color: var(--olive);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  padding: 13px 28px; border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-gold   { background: var(--gold); color: var(--cream); }
.btn-gold:hover { background: var(--gold-lift); }

.btn-olive  { background: var(--olive); color: var(--cream); }
.btn-olive:hover { background: var(--olive-deep); }

.btn-outline { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn-outline:hover { background: var(--olive); color: var(--cream); }

.btn-outline-light { background: transparent; color: var(--cream); border-color: rgba(242,237,227,.5); }
.btn-outline-light:hover { background: var(--cream); color: var(--olive); }

.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 16px 38px; font-size: 16px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- header */
.site-header {
  background: var(--olive);
  color: var(--cream);
  border-bottom: 1px solid rgba(242, 237, 227, 0.12);
  position: sticky; top: 0; z-index: 60;
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 0; min-height: 74px;
}
.brand {
  font-family: var(--font-display); font-size: 25px; line-height: 1.1;
  text-decoration: none; color: var(--cream); max-width: 230px;
}
.brand:hover { color: #fff; }
/* An uploaded logo sits where the studio name would. Its height comes from
   the admin ("Logo height"), so the width follows the image's own shape. */
.brand__logo {
  display: block; width: auto; height: auto; max-width: 260px;
  object-fit: contain;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  text-decoration: none; color: var(--cream); font-size: 15px;
  padding: 9px 14px; border-radius: var(--radius);
  transition: background-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: rgba(242,237,227,.14); color: #fff; }
/* The calendar tab leads with a small icon, then the admin-chosen word. */
.site-nav .nav-cal { display: inline-flex; align-items: center; gap: 7px; }
.site-nav .nav-cal svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7;
}

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  background: none; border: 0; color: var(--cream); cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; position: relative;
  transition: background-color .16s ease;
}
.icon-btn:hover { background: rgba(242,237,227,.14); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px;
  background: var(--gold); color: #fff; font-size: 10.5px; font-weight: 600;
  border-radius: 999px; display: none; align-items: center; justify-content: center;
  padding: 0 4px; font-family: var(--font-body);
}
.cart-count.is-on { display: inline-flex; }

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; color: var(--cream); text-align: center;
  background: var(--olive-deep) center/cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.5));
}
.hero__inner {
  width: min(100% - 40px, 860px); margin-inline: auto;
  padding: clamp(84px, 15vw, 168px) 0;
}
.hero h1 {
  font-size: clamp(52px, 9vw, 96px); margin-bottom: 14px; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero p { font-size: clamp(17px, 2.4vw, 21px); margin-bottom: 32px; color: rgba(242,237,232,.94); }

/* ------------------------------------------------------------- sections */
.band { background: var(--cream); padding: clamp(52px, 7vw, 88px) 0; }
.band-lift { background: var(--cream-lift); }
.band-olive { background: var(--olive); color: var(--cream); padding: clamp(52px, 7vw, 80px) 0; }
.band-olive h2, .band-olive h3 { color: var(--cream); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 12px; }
.section-head p { color: #55603C; margin: 0; }
.band-olive .section-head p { color: rgba(242,237,227,.8); }

.eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 12px;
}

/* --------------------------------------------------------------- cards */
.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  transition: box-shadow .22s ease, transform .22s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.card__media {
  aspect-ratio: 1; background: var(--olive-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 21px; margin-bottom: 8px; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--gold); }
.card__text { font-size: 14.5px; color: #5C6547; margin-bottom: 16px; flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.price { font-family: var(--font-display); font-size: 20px; color: var(--olive); }
.price-sm { font-size: 17px; }

.meta { font-size: 13.5px; color: #6C7556; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: #5C6547; margin-bottom: 14px; }
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }

.tag {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(155,128,74,.14); color: var(--gold);
  padding: 5px 10px; border-radius: 999px;
}
.tag-olive { background: rgba(74,86,42,.12); color: var(--olive); }

/* ----------------------------------------------------------- notices */
.flash {
  padding: 13px 18px; border-radius: var(--radius); font-size: 15px;
  margin-bottom: 22px; border: 1px solid transparent;
}
.flash-success { background: rgba(74,86,42,.1); border-color: rgba(74,86,42,.28); color: var(--olive-deep); }
.flash-error   { background: rgba(161,54,38,.09); border-color: rgba(161,54,38,.3); color: #8A2F1F; }

.notice {
  background: var(--cream-lift); border-left: 3px solid var(--gold);
  padding: 16px 20px; font-size: 15px; color: #4C5539; border-radius: 0 var(--radius) var(--radius) 0;
}

/* --------------------------------------------------------------- forms */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--olive-deep); }
.field .hint { font-size: 13px; color: #6C7556; margin-top: 6px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="url"],
select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 15.5px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--olive-soft);
  box-shadow: 0 0 0 3px rgba(140,147,118,.24);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
input:disabled, input:readonly { background: #EDEBE4; color: #8A8F7C; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--olive); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }

/* ---------------------------------------------------------- page heads */
.page-head {
  background: var(--olive); color: var(--cream);
  padding: clamp(40px, 6vw, 66px) 0; text-align: center;
}
.page-head h1 { font-size: clamp(34px, 5.5vw, 54px); color: #fff; margin-bottom: 10px; }
.page-head p { margin: 0; color: rgba(242,237,227,.82); font-size: 17px; max-width: 640px; margin-inline: auto; }

.breadcrumb { font-size: 13.5px; color: #6C7556; margin-bottom: 18px; }
.breadcrumb a { color: var(--olive); }

/* ------------------------------------------------------- class detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } }

.prose { font-size: 16.5px; color: #454E34; }
.prose h3 { font-size: 23px; color: var(--olive); margin-top: 30px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
/* The About page - photos flank the text, one column per side. The text
   column wraps long words, emails and links instead of pushing sideways,
   and on small screens it moves above the photos. */
.about-layout { display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
.about-col--main { flex: 1 1 480px; min-width: 0; max-width: 760px; margin-inline: auto; }
.about-col--side { flex: 0 1 290px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about-col--side img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line-soft);
  background: var(--cream-lift);
}
/* Each photo's size is picked in Site content: large fills the column
   (the default), medium and small sit centred inside it. */
.about-col--side .about-photo--s { width: 55%; margin-inline: auto; }
.about-col--side .about-photo--m { width: 78%; margin-inline: auto; }
/* [[photo:N]] markers in the text: full-width photo between paragraphs.
   Mobile-only — desktop keeps the flanking-column layout untouched. */
.about-inline-photo { display: none; margin: 6px 0 18px; }
.about-inline-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line-soft);
  background: var(--cream-lift);
}
.about-prose { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  /* ONE grid holds the prose and every gallery photo. The two side columns
     dissolve into it (display:contents) so all photos share the same rows:
     that is what lets a later portrait back-fill the hole a full-width
     landscape leaves behind, no matter which column the photo came from.
     (Two separate per-column grids could never fill each other's gaps.) */
  .about-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 16px;
    grid-auto-flow: row dense;
  }
  .about-col--main {
    order: -1;
    grid-column: 1 / -1;
    max-width: none;
    flex-basis: auto;
  }
  /* No box of our own: the photos become grid items of .about-layout. */
  .about-col--side { display: contents; }
  /* Photos become a tidy 2-up grid of equal tiles. The mixed s/m widths
     read as a deliberate collage on desktop, but on a phone the ragged
     heights just look unfinished. Landscapes are excluded here rather than
     overridden below: an explicit `aspect-ratio: auto` on a not-yet-loaded
     photo discards the width/height attributes' ratio and collapses the box
     to nothing, which is exactly the layout jump this rule set exists to
     avoid. Un-declared, the attributes reserve the real shape on their own. */
  .about-col--side img:not(.about-photo--landscape),
  .about-col--side .about-photo--s:not(.about-photo--landscape),
  .about-col--side .about-photo--m:not(.about-photo--landscape) {
    width: 100%; margin-inline: 0;
    aspect-ratio: 4 / 5; object-fit: cover;
  }
  /* A landscape photo takes a whole row at its own proportions: never
     cropped to the portrait tile, never beside another photo. No
     aspect-ratio here on purpose — see the note above. */
  .about-col--side .about-photo--landscape {
    width: 100%; margin-inline: 0;
    grid-column: 1 / -1;
    object-fit: contain;
  }
  /* A photo pinned into the text drops out of the grid so it appears once.
     Specificity note: this must outrank the base `.about-col--side img`
     rule (0,1,1), hence the extra class — a bare `.about-photo--used`
     (0,1,0) loses and the photo renders twice. */
  .about-col--side .about-photo--used { display: none; }
  .about-inline-photo { display: block; }
}

.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-md);
}
.panel--sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .panel--sticky { position: static; } }

/* ------------------------------------------------------------- calendar */
.cal { user-select: none; }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cal__label { font-family: var(--font-display); font-size: 20px; color: var(--olive); }
.cal__nav {
  background: var(--cream); border: 1px solid var(--line); color: var(--olive);
  width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer;
  font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.cal__nav:hover { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.cal__nav[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal__dow {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8A8F7C; padding: 6px 0;
}
.cal__dow.is-weekend { color: var(--gold); }

.cal__day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--cream-lift); color: var(--ink);
  font-family: var(--font-body); font-size: 14.5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cal__day:hover:not(:disabled) { border-color: var(--olive-soft); }

.cal__day--past { background: #EFEDE6; color: #B4B7AA; cursor: not-allowed; }
.cal__day--closed { background: #E9E2D5; color: #A79C86; cursor: not-allowed; }
.cal__day--full { background: #EAE7DD; color: #9DA093; cursor: not-allowed; }
.cal__day--full::after { content: "full"; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }

/* The class's own run window excludes this date. */
.cal__day--off {
  background: repeating-linear-gradient(45deg, #F1EEE6 0 5px, #E8E5DB 5px 10px);
  color: #AEB1A4; cursor: not-allowed; border-color: transparent;
}
.cal__day--off .cal__seats { color: #AEB1A4; }

.cal__day--open { background: var(--paper); border-color: var(--line); color: var(--olive); font-weight: 600; }
.cal__day--open:hover { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.cal__day--open:hover .cal__seats { color: rgba(242,237,227,.85); }

.cal__day.is-selected { background: var(--olive); color: var(--cream); border-color: var(--olive-deep); }
.cal__day.is-selected .cal__seats { color: rgba(242,237,227,.85); }

.cal__seats { font-size: 10.5px; font-weight: 500; color: var(--gold); line-height: 1; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: #6C7556; }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.swatch--open { background: var(--paper); border-color: var(--olive-soft); }
.swatch--full { background: #EAE7DD; border-color: #D5D3C9; }
.swatch--off { background: repeating-linear-gradient(45deg, #F1EEE6 0 4px, #E8E5DB 4px 8px); }
.swatch--sel { background: var(--olive); border-color: var(--olive); }
.swatch--closed { background: #E9E2D5; border-color: #D8CFBC; }
/* A future day with nothing on it - present, but not bookable. */
.cal__day--quiet { color: #ADAF9F; }
.cal__day--quiet:hover { border-color: var(--line-soft); }
.cal__day--today { box-shadow: inset 0 0 0 2px var(--gold); }
.cal__day--today.is-selected { box-shadow: inset 0 0 0 2px rgba(242,237,227,.55); }

/* The standalone calendar page: the month on the left, the chosen day on
   the right. Same .cal pieces as the booking calendars, just wider. */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
.cal-layout .cal__day { font-size: 15px; }

.cal-panel { position: sticky; top: 24px; }
.cal-panel__title {
  font-family: var(--font-display); font-size: 27px; font-weight: 400;
  color: var(--olive); margin: 4px 0 18px;
}

.cal-rows { display: flex; flex-direction: column; }
.cal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
  text-decoration: none; color: inherit; transition: background-color .16s ease;
}
.cal-row:hover { background: rgba(170,175,153,.09); }
.cal-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cal-row .tag { align-self: flex-start; margin: 0; }
.cal-row__title { font-family: var(--font-display); font-size: 19px; color: var(--olive-deep); }
.cal-row__meta { font-size: 13px; color: #6C7556; }
.cal-row__img {
  width: 64px; height: 64px; flex: none;
  object-fit: cover; border-radius: 6px;
  background: var(--cream-lift);
}
.cal-row__end { display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 480px) {
  .cal-row { flex-direction: column; align-items: flex-start; }
  .cal-row__img { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------- slot list */
.slots { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.slot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--cream-lift); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.slot:hover:not(:disabled) { border-color: var(--olive-soft); background: var(--paper); }
.slot.is-selected { background: var(--olive); border-color: var(--olive-deep); color: var(--cream); }
.slot.is-selected .slot__seats { color: rgba(242,237,227,.88); }
.slot:disabled { opacity: .55; cursor: not-allowed; }
.slot__time { font-weight: 600; }
.slot__seats { font-size: 13.5px; color: var(--gold); font-weight: 600; }
.slot__seats.is-full { color: #A0472F; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stepper button {
  width: 42px; height: 42px; border: 0; background: var(--cream-lift);
  font-size: 19px; cursor: pointer; color: var(--olive); line-height: 1;
}
.stepper button:hover:not(:disabled) { background: var(--olive); color: var(--cream); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper input {
  width: 56px; text-align: center; border: 0; border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); border-radius: 0; background: var(--paper);
  font-weight: 600; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0; border-top: 1px solid var(--line); margin-top: 6px;
}
.total-row strong { font-family: var(--font-display); font-size: 25px; color: var(--olive); font-weight: 400; }

/* --------------------------------------------------------------- shop */
.stock-tag { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.stock-tag.is-out { color: #A0472F; }

.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .product-detail { grid-template-columns: minmax(0, 1fr); } }

.product-image {
  background: var(--cream-lift); border: 1px solid var(--line-soft);
  border-radius: var(--radius); aspect-ratio: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }

/* Photo carousel — arrows on the image, and a slow auto-advance. */
.gallery { position: relative; width: 100%; height: 100%; }
.gallery__track { display: flex; height: 100%; transition: transform .45s ease; }
.gallery__track img { flex: 0 0 100%; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(242,237,227,.86); color: var(--olive-deep);
  font-size: 26px; line-height: 1; cursor: pointer; font-family: var(--font-body);
}
.gallery__nav:hover { background: var(--cream); }
.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }
.gallery__dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 7px;
}
.gallery__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(31,36,23,.26); cursor: pointer;
}
.gallery__dot.is-active { background: var(--olive); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
  font-size: 14px; padding: 8px 17px; border-radius: 999px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); color: var(--olive);
}
.chip:hover, .chip.is-on { background: var(--olive); color: var(--cream); border-color: var(--olive); }

/* --------------------------------------------------------------- cart */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #7C8269; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.table td { padding: 16px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }

.cart-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); background: var(--cream-lift); }

.summary-box {
  background: var(--cream-lift); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 15px; }
.summary-line.is-total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px;
  font-family: var(--font-display); font-size: 22px; color: var(--olive);
}

/* ----------------------------------------------------------- checkout */
.pay-note {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  color: #6C7556; margin-top: 14px;
}
.pay-note svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }

/* The Stripe card field is an iframe, so the input box is drawn around it
   to match the text fields above. Stripe toggles these state classes on
   the mount element itself. */
.card-input {
  min-height: 50px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.card-input.StripeElement--focus {
  border-color: var(--olive-soft); box-shadow: 0 0 0 3px rgba(140,147,118,.24);
}
.card-input.StripeElement--invalid { border-color: #A13626; }
.card-brands { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; align-items: center; }
.card-brands img { height: 23px; width: auto; opacity: .9; }

.demo-banner {
  background: rgba(155,128,74,.12); border: 1px dashed var(--gold);
  color: #6E5A31; font-size: 13.5px; padding: 11px 15px;
  border-radius: var(--radius); margin-bottom: 20px;
}

/* ------------------------------------------------------- confirmation */
.confirm-mark {
  width: 64px; height: 64px; border-radius: 50%; background: var(--olive);
  color: var(--cream); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.confirm-mark svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; }

.receipt { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.receipt__row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
.receipt__row:last-child { border-bottom: 0; }
.receipt__row dt { color: #6C7556; margin: 0; }
.receipt__row dd { margin: 0; text-align: right; font-weight: 500; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--olive); color: var(--cream); padding-top: clamp(44px, 6vw, 64px); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 40px; }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand { font-family: var(--font-display); font-size: 26px; margin-bottom: 14px; }
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-nav a { color: rgba(242,237,227,.86); text-decoration: none; font-size: 15px; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-news h3 { font-size: 26px; margin-bottom: 16px; }
.news-form { display: flex; max-width: 420px; }
.news-form input {
  flex: 1; border: 0; border-radius: var(--radius) 0 0 var(--radius);
  padding: 13px 16px; background: var(--paper); font-size: 15px;
}
.news-form input:focus { box-shadow: inset 0 0 0 2px var(--olive-soft); }
.news-form button {
  background: var(--gold); color: var(--cream); border: 0; cursor: pointer;
  padding: 0 24px; font-size: 15px; font-family: var(--font-body);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.news-form button:hover { background: var(--gold-lift); }

.footer-bottom {
  border-top: 1px solid rgba(242,237,227,.18); padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: rgba(242,237,227,.72);
}
.footer-bottom a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* --------------------------------------------------------------- error */
.error-state { text-align: center; padding: clamp(60px, 12vw, 130px) 0; background: var(--cream); }
.error-state .code { font-family: var(--font-display); font-size: clamp(64px, 14vw, 120px); color: var(--sage); line-height: 1; }

/* ------------------------------------------------------------- utility */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; }
.muted { color: #6C7556; }
.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;
}
.stack > * + * { margin-top: 14px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 34px 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--olive-deep); flex-direction: column; align-items: stretch;
    padding: 8px 0 16px; gap: 0; display: none;
    border-bottom: 1px solid rgba(242,237,227,.14);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 24px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { gap: 12px; }
  .brand { font-size: 21px; max-width: none; }
  .brand__logo { max-height: 40px; max-width: 200px; }
  .header-actions { margin-left: auto; }
  /* Fingers are bigger than cursors: give buttons and text links a
     comfortable 44px tap target instead of the desktop-pretty 37px. */
  .btn { min-height: 44px; }
  .footer-links a { padding: 7px 0; }
  .table thead { display: none; }
  .table tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .table td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 12px; text-align: right; }
  .table td::before {
    content: attr(data-label); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: #7C8269; font-weight: 600; text-align: left;
  }
  .table .num { text-align: right; }
}