/* ---------------------------------------------------------------------------
   Lasa & Lamsa — storefront theme, built to match sample.html
   Typeface: one system stack everywhere (no webfont request).
--------------------------------------------------------------------------- */

:root {
  --maroon:      #5D1D1E;
  --maroon-mid:  #7E2A2B;
  --maroon-dark: #421314;
  --cream:       #FFF7EA;
  --cream-warm:  #FFEFD6;
  --cream-top:   #FFF3DC;
  --paper:       #FFFDF7;
  --white:       #FFFFFF;
  --sage:        #EFEDE8;
  --ink:         #2B2925;
  --ink-alt:     #2C2A26;
  --ink-soft:    #5E564E;
  --muted:       #6A625A;
  --muted-2:     #7A7268;
  --line:        #F0D9AE;
  --line-soft:   #E4CFA8;
  --line-warm:   #F2DFBE;
  --line-grey:   #E0D6C6;
  --rose:        #E0A489;
  --sand:        #FFE6C4;
  --green:       #2C5E28;
  --danger:      #8A2020;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --shadow:    0 14px 34px rgba(44, 42, 38, .16);
  --shadow-lg: 0 30px 70px rgba(44, 42, 38, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--maroon); }
img { max-width: 100%; display: block; }
button { font-family: var(--font); }

/* Headings share the body stack; hierarchy comes from size and weight. */
h1, .hero__title, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
h1, .hero__title { font-size: 56px; line-height: 1.07; }
h2 { font-size: 42px; line-height: 1.14; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 16px; }

html, body { overflow-x: clip; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* Two-column page layouts (contact, wholesale, about, account). Were inline
   styles, which no media query can collapse. */
.cols-split   { display: grid; grid-template-columns: 1.3fr .9fr; gap: 32px; align-items: start; }
.cols-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.cols-account { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.milestone-row { display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.hero-art img { width: 100%; height: auto; border-radius: 26px; box-shadow: var(--shadow-lg); }
.lede { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Eyebrow above every section heading */
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--maroon);
}

.sec-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.sec-head h2 { margin: 0; }
.sec-head p.sub { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }

.sec-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 36px; margin-bottom: 40px; max-width: none; text-align: left;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border: none; border-radius: 999px;
  background: var(--maroon); color: var(--cream);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--maroon-dark); color: var(--cream); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid #C79A8C; padding: 14px 26px; }
.btn--outline:hover { border-color: var(--maroon); color: var(--maroon); background: transparent; }
.btn--light { background: var(--paper); color: var(--maroon); border: 1px solid var(--line-soft); }
.btn--light:hover { background: var(--cream-warm); color: var(--maroon); }
.btn--sm { padding: 11px 18px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.btn--block { width: 100%; }

/* Cart button used on product cards — outlined, fills on hover */
.btn-cart {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  padding: 13px 18px; background: var(--cream-warm); color: var(--ink-alt);
  border: 1.5px solid var(--maroon); border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(93,29,30,.18);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-cart:hover { background: var(--maroon); color: var(--cream); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(93,29,30,.28); }
.btn-cart svg { color: var(--maroon); transition: color .18s ease; }
.btn-cart:hover svg { color: var(--cream); }
.btn-cart:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--maroon);
}
.link-arrow:hover { color: var(--maroon-dark); }

/* ---- Top bar ------------------------------------------------------------ */
.topbar { background: var(--cream-warm); border-bottom: 1px solid var(--line-warm); color: var(--ink); }
.topbar .wrap {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-block: 10px; font-size: 13px; font-weight: 500;
}
.topbar__cta {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 5px 15px; border-radius: 999px;
  background: var(--maroon); color: var(--cream);
  font-weight: 800; font-size: 12px;
}
.topbar__cta:hover { background: var(--maroon-mid); color: var(--cream); }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 246, 227, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-warm);
}
.site-header .wrap { display: flex; align-items: center; gap: 14px; padding: 10px 24px; flex-wrap: nowrap; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 46px; width: auto; }
.brand span {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); line-height: 1.55; white-space: nowrap;
}

.nav {
  display: flex; align-items: center; column-gap: 11px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
  font-size: 13px; font-weight: 500;
}
.nav > a, .nav__drop > a { padding: 8px 0; white-space: nowrap; }
.nav a.is-active { color: var(--maroon); font-weight: 700; }

.nav__drop { position: relative; }
.nav__drop > a { display: flex; align-items: center; gap: 7px; }
.nav__caret {
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); display: block;
}
.nav__menu {
  position: absolute; top: 34px; left: -20px; width: 252px; padding: 10px 0;
  background: var(--white); border: 1px solid var(--line-warm); border-radius: 14px;
  box-shadow: 0 22px 48px rgba(44,42,38,.14);
  display: grid; font-size: 15px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a { padding: 11px 22px; }
.nav__menu a:hover { background: var(--cream-warm); color: var(--maroon); }

.header-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  position: relative; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--maroon); background: var(--paper);
  display: grid; place-items: center; color: var(--maroon); cursor: pointer;
  box-shadow: 0 2px 0 rgba(93,29,30,.18);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover { background: var(--cream-warm); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(93,29,30,.28); }
.badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--maroon); color: var(--cream);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}

/* "Order now" — two stacked lines, the lower one rotates */
.btn-order {
  display: grid; gap: 1px; padding: 9px 18px;
  background: var(--maroon); color: var(--cream);
  border: none; border-radius: 999px; text-align: center; white-space: nowrap;
  cursor: pointer; transition: background .18s ease;
}
.btn-order:hover { background: var(--maroon-dark); color: var(--cream); }
.btn-order b { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.btn-order span { font-size: 11px; opacity: .9; transition: opacity .25s ease; }

.nav-toggle { display: none; }

/* Search drawer */
.search-panel {
  position: absolute; top: 52px; right: 24px; z-index: 70; width: min(380px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px;
  box-shadow: 0 26px 60px rgba(30,22,16,.22); padding: 16px;
}
.search-panel[hidden] { display: none; }
.search-field {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: var(--cream);
}
.search-field input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.search-result { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid #F0E3CB; }
.search-result:last-child { border-bottom: 0; }
.search-result img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }

/* ---- Marquee ------------------------------------------------------------ */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { background: var(--maroon); color: #fff; overflow: hidden; padding: 15px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee__set {
  display: flex; gap: 40px; flex: none; padding-right: 40px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--cream-top) 0%, #FFF1D8 48%, var(--cream) 100%);
  border-bottom: 1px solid var(--line-warm);
}
.hero__inner {
  max-width: 1280px; margin: 0 auto; padding: 18px 28px 22px;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 44px; align-items: stretch;
}
.hero .hero__title { margin: 0 0 16px; text-wrap: pretty; }
.hero .hero__title em { font-style: normal; color: var(--maroon); }
.hero__lede { margin: 0 0 28px; max-width: 490px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.hero__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
.hero__play { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.hero__play i {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--maroon);
  display: grid; place-items: center; font-style: normal;
}
.hero__play i::before {
  content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 9px solid var(--maroon);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 26px; border-top: 1px solid var(--line-warm); }
.stats .n { font-size: 30px; font-weight: 700; color: var(--ink-alt); letter-spacing: -0.02em; }
.stats .n span { font-size: 16px; color: var(--maroon); }
.stats .l { font-size: 12px; color: var(--muted); margin-top: 3px; }

.hero__right { position: relative; display: flex; flex-direction: column; gap: 16px; }
.hero__art {
  flex: 1; min-height: 240px; border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative;
}
.hero__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) brightness(1.04);
}

/* ---- Hero slides ----------------------------------------------------------
   Copy and art are each a stack of slides; JS moves .is-active between them.
   Copy slides share one grid cell so the block is as tall as the tallest slide
   and the stats below never jump. Art slides crossfade and drift (Ken Burns). */
.hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-width: 0; }
.hero__copy .hero__slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;
}
.hero__copy .hero__slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .8s ease .15s, transform .8s ease .15s, visibility 0s;
}
.hero__copy .stats { grid-row: 2; }

.hero__art img.hero__slide { opacity: 0; transition: opacity 1.1s ease; will-change: opacity, transform; }
.hero__art img.hero__slide.is-active { opacity: 1; animation: hero-drift var(--hero-ms, 6000ms) ease-out forwards; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
/* A lone slide sits still — the drift only makes sense as a lead-in to the next. */
.hero[data-slides="1"] .hero__art img.hero__slide.is-active { animation: none; }

.hero__dots {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 6px 8px; border-radius: 999px;
  background: rgba(31, 29, 26, .28); backdrop-filter: blur(6px);
}
.hero__dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 247, 234, .55); transition: transform .2s ease, background .2s ease;
}
.hero__dots button:hover { background: var(--cream); }
.hero__dots button[aria-selected="true"] { background: var(--cream); transform: scale(1.35); }
.hero__dots button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* First paint: the hero eases in rather than snapping. */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero__copy { animation: hero-in .7s ease both; }
.js .hero__right { animation: hero-in .7s ease .12s both; }

/* ---- Scroll reveal -------------------------------------------------------
   Sections drift up as they enter the viewport. Everything is visible without
   JS (.js is set by app.js) and for anyone who asked for reduced motion. */
.js [data-reveal], .js [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.js [data-reveal].is-in, .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__copy .hero__slide, .hero__art img.hero__slide, .js .hero__copy, .js .hero__right,
  .js [data-reveal], .js [data-reveal-stagger] > * {
    animation: none !important; transition: none !important; opacity: 1; transform: none;
  }
  .hero__copy .hero__slide:not(.is-active), .hero__art img.hero__slide:not(.is-active) { opacity: 0; }
}
.hero__rating {
  position: absolute; z-index: 2; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 11px; padding: 11px 18px;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow);
}
.hero__rating i { width: 36px; height: 36px; border-radius: 50%; background: var(--cream-warm); display: grid; place-items: center; }
.hero__rating i .cup { display: block; }
.hero__rating b { display: block; font-size: 13px; font-weight: 800; }
.hero__rating small { display: block; font-size: 12px; color: var(--muted); }

.hero__badges { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero__badge {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line-warm); border-radius: 20px;
}
.hero__badge b { font-size: 22px; font-weight: 700; color: var(--maroon); letter-spacing: -0.02em; }
.hero__badge span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ---- Placeholder tint used where a photo has not been uploaded ---------- */
.shot {
  background-color: var(--sand);
  background-image: repeating-linear-gradient(135deg, rgba(93,29,30,.16) 0 2px, transparent 2px 10px);
  display: grid; place-items: center;
}
.shot span { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Sections ----------------------------------------------------------- */
.section { max-width: 1280px; margin: 0 auto; padding: 90px 28px; }
.section--tint  { background: var(--cream-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--sage  { background: var(--sage); color: var(--ink); }
.section--inner { max-width: 1280px; margin: 0 auto; padding: 88px 28px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---- Category card ------------------------------------------------------ */
.cat-card { display: block; background: var(--white); border: 1px solid var(--line-warm); border-radius: 22px; overflow: hidden; transition: border-color .18s ease; }
.cat-card:hover { border-color: var(--maroon); }
.cat-card .shot { aspect-ratio: 4/3; }
.cat-card__body { padding: 22px 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-card__body b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.cat-card__body small { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.cat-card__go { width: 34px; height: 34px; border-radius: 50%; background: var(--cream-warm); display: grid; place-items: center; color: var(--maroon); font-size: 15px; flex: none; }

/* ---- About -------------------------------------------------------------- */
.about { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.about__art { position: relative; padding-bottom: 56px; }
.about__art-main { width: 82%; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; }
.about__art-sub {
  position: absolute; right: 0; bottom: 0; width: 56%; aspect-ratio: 1/1;
  border-radius: 24px; border: 8px solid var(--cream); overflow: hidden;
}
.about__badge {
  position: absolute; left: 0; bottom: 34px; padding: 16px 22px;
  background: var(--ink-alt); color: var(--cream-warm); border-radius: 18px;
  box-shadow: 0 18px 40px rgba(44,42,38,.22);
}
.about__badge b { display: block; font-size: 30px; font-weight: 700; color: var(--rose); letter-spacing: -0.02em; }
.about__badge span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.about p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 560px; text-wrap: pretty; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; max-width: 520px; margin: 0 0 30px; }
.pillar { display: flex; gap: 12px; align-items: flex-start; }
.pillar i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--cream-warm);
  color: var(--maroon); display: grid; place-items: center; flex: none;
  font-size: 13px; font-weight: 800; font-style: normal;
}
.pillar b { display: block; font-size: 15px; font-weight: 700; }
.pillar span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-top: 2px; }

/* ---- Journey timeline --------------------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: rgba(93,29,30,.22); }
.timeline__item { position: relative; padding: 0 16px; }
.timeline__dot {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--maroon); margin-bottom: 20px;
}
.timeline__dot::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--maroon); display: block; }
.timeline__year { font-size: 26px; font-weight: 700; color: var(--maroon-mid); margin-bottom: 8px; letter-spacing: -0.02em; }
.timeline__item h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.timeline__item p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }

/* ---- Tabs --------------------------------------------------------------- */
.tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 38px; }
.tab {
  font-size: 13px; font-weight: 700; padding: 12px 22px; border-radius: 999px;
  white-space: nowrap; border: 1px solid var(--line); background: var(--white);
  color: var(--ink-alt); cursor: pointer; transition: all .16s ease;
}
.tab:hover { border-color: var(--maroon); color: var(--maroon); }
.tab.is-active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }

/* ---- Product card ------------------------------------------------------- */
.p-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.p-card .shot { position: relative; aspect-ratio: 4/3; }
.p-card .shot { overflow: hidden; }
.p-card .shot img { position: absolute; inset: 0; }
.p-card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--maroon); color: var(--cream); padding: 6px 11px; border-radius: 999px;
}
.p-card__rate {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 12px; font-weight: 700; background: var(--white);
  padding: 6px 11px; border-radius: 999px; color: var(--ink-alt);
}
.p-card__body { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.p-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p-card__top h3 { margin: 0; }
.p-card__price { font-size: 17px; font-weight: 800; color: var(--maroon); white-space: nowrap; }
.p-card__note { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.p-card__packs { font-size: 12px; color: var(--muted); }

/* ---- Wholesale panels --------------------------------------------------- */
.panel-light { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 34px 32px 30px; }
.panel-dark  { background: var(--ink-alt); border-radius: 24px; padding: 34px 32px 30px; color: var(--cream-warm); }
.panel-dark h3 { color: var(--cream); }
.panel-dark .eyebrow { color: var(--rose); }
.panel-dark p { color: rgba(255,247,234,.82); }

.blend-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: var(--cream); border: 1px solid var(--line-warm); border-radius: 16px;
}
.blend-row b { display: block; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.blend-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.blend-row__price { font-size: 16px; font-weight: 800; color: var(--maroon); white-space: nowrap; }

.garden-search {
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px;
  background: rgba(255,247,234,.1); border: 1px solid rgba(255,247,234,.26);
  border-radius: 999px; margin-bottom: 20px;
}
.garden-search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; background: transparent; border: none; outline: none; color: var(--cream); }
.garden-search input::placeholder { color: rgba(255,247,234,.55); }
.garden-search button {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border: none; border-radius: 50%; background: var(--rose); color: var(--ink-alt);
  font-size: 18px; cursor: pointer;
}
.garden-row {
  display: flex; align-items: center; gap: 16px; padding: 13px 18px;
  background: rgba(255,247,234,.07); border: 1px solid rgba(255,247,234,.16); border-radius: 16px;
}
.trade-badge { padding: 3px 10px; border-radius: 999px; background: rgba(224,164,137,.16); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); }
.garden-search__go { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--rose); color: var(--ink-alt); font-size: 18px; }
.garden-enquire { flex: none; padding: 7px 13px; border: 1px solid var(--rose); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--rose); }
.garden-enquire:hover { background: var(--rose); color: var(--ink-alt); }
@media (max-width: 640px) { .blend-row { flex-wrap: wrap; } .garden-row { flex-wrap: wrap; } }
.garden-row b { display: block; font-size: 18px; font-weight: 600; color: var(--cream); letter-spacing: -0.01em; }
.garden-row small { display: block; font-size: 13px; color: rgba(255,247,234,.72); margin-top: 3px; }
.garden-row span.grades { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); white-space: nowrap; }

/* ---- Offer countdown ---------------------------------------------------- */
.offer { display: grid; grid-template-columns: 1fr 0.85fr; gap: 60px; align-items: center; padding-block: 76px; }
.countdown { display: flex; gap: 12px; margin-bottom: 32px; }
.countdown div { width: 74px; padding: 14px 0; text-align: center; background: var(--white); border: 1px solid var(--line-grey); border-radius: 14px; }
.countdown b { display: block; font-size: 26px; font-weight: 700; color: var(--maroon); letter-spacing: -0.02em; }
.countdown span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.offer__art { position: relative; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden; }
.offer__art img { position: absolute; inset: 0; }

/* ---- Team --------------------------------------------------------------- */
.team-card { background: var(--white); border: 1px solid var(--line-warm); border-radius: 22px; overflow: hidden; text-align: center; }
.team-card .shot { aspect-ratio: 1/1; }
.team-card__body { padding: 22px 20px 26px; }
.team-card__body h3 { margin: 0 0 5px; font-size: 20px; }
.team-card__body p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Reviews ------------------------------------------------------------ */
.review { margin: 0; padding: 30px 28px; background: var(--white); border: 1px solid var(--line); border-radius: 22px; }
.review__stars { margin: 0 0 14px; font-size: 14px; color: var(--maroon); letter-spacing: .1em; }
.review blockquote { margin: 0 0 20px; font-size: 19px; line-height: 1.55; letter-spacing: -0.01em; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review figcaption i {
  width: 40px; height: 40px; border-radius: 50%; flex: none; font-style: normal;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(135deg, rgba(44,42,38,.14) 0 2px, transparent 2px 8px);
}
.review figcaption i { overflow: hidden; }
.review figcaption i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review figcaption b { display: block; font-size: 14px; font-weight: 700; }
.review figcaption small { display: block; font-size: 13px; color: var(--muted); }

/* ---- Booking / enquiry -------------------------------------------------- */
.booking { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.hours-row {
  display: flex; justify-content: space-between; gap: 20px; padding: 16px 22px;
  background: var(--white); border: 1px solid var(--line-warm); border-radius: 16px;
}
.hours-row b { font-size: 14px; font-weight: 700; }
.hours-row span { font-size: 14px; color: var(--ink-soft); }
.phone-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: var(--ink-alt); color: var(--cream-warm); border-radius: 18px; max-width: 470px;
}
.phone-card i { width: 42px; height: 42px; border-radius: 50%; background: var(--maroon); color: var(--cream); display: grid; place-items: center; font-weight: 800; font-style: normal; flex: none; }
.phone-card small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,234,.7); }
.phone-card b { display: block; font-size: 18px; font-weight: 700; }

.form-card { background: var(--white); border: 1px solid var(--line-warm); border-radius: 24px; padding: 34px; }
.form-card h3 { margin: 0 0 22px; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid label.full { grid-column: span 2; }
.form-grid label > span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea {
  font: inherit; font-size: 15px; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--cream);
  border-radius: 12px; color: var(--ink); width: 100%;
}
.form-grid textarea { resize: vertical; min-height: 108px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--maroon); outline-offset: 1px; }
.form-grid button { grid-column: span 2; font-size: 14px; font-weight: 700; padding: 16px; background: var(--maroon); color: var(--cream); border: none; border-radius: 999px; cursor: pointer; }
.form-grid button:hover { background: var(--ink-alt); }

/* ---- Blog card ---------------------------------------------------------- */
.post-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: border-color .18s ease; }
.post-card:hover { border-color: var(--maroon); }
.post-card .shot { position: relative; aspect-ratio: 16/10; }
.post-card__date { position: absolute; bottom: 14px; left: 14px; z-index: 2; font-size: 12px; font-weight: 700; background: var(--white); padding: 7px 12px; border-radius: 999px; }
.post-card__body { padding: 24px 22px 26px; }
.post-card__kicker { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.post-card__body h3 { margin: 0 0 10px; line-height: 1.28; }
.post-card__body p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

/* ---- Newsletter strip --------------------------------------------------- */
.news { background: var(--maroon); color: var(--cream-warm); }
.news .wrap { padding: 56px 28px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.news h3 { margin: 0 0 8px; font-size: 30px; font-weight: 700; }
.news p { margin: 0; font-size: 16px; color: rgba(255,247,234,.84); }
.news form { display: flex; gap: 10px; flex: 1; min-width: 300px; }
.news input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 15px 18px; border: none; border-radius: 999px; color: var(--ink); }
.news button { font: inherit; font-size: 14px; font-weight: 700; padding: 15px 28px; background: var(--ink-alt); color: var(--cream); border: none; border-radius: 999px; cursor: pointer; }
.news button:hover { background: var(--maroon-mid); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--sage); color: var(--ink-soft); border-top: 1px solid var(--line-grey); }
.site-footer__grid {
  max-width: 1280px; margin: 0 auto; padding: 68px 28px 30px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 36px;
}
.site-footer img { height: 86px; width: auto; margin-bottom: 18px; }
.site-footer h4 { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.site-footer .links { display: grid; gap: 11px; font-size: 15px; }
.site-footer p { font-size: 15px; line-height: 1.7; }
.site-footer__bottom {
  max-width: 1280px; margin: 0 auto; padding: 22px 28px 40px;
  border-top: 1px solid var(--line-grey); display: flex;
  justify-content: space-between; gap: 22px; font-size: 13px; flex-wrap: wrap;
}

/* ---- Order-now modal ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(30,22,16,.62); display: grid; place-items: center; padding: 28px; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal__box {
  position: relative; width: 100%; max-width: 760px; background: var(--paper);
  border: 1px solid var(--line-soft); border-radius: 26px;
  padding: 44px 40px 40px; box-shadow: 0 40px 90px rgba(30,22,16,.4);
}
.modal__close {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line-soft); background: var(--white);
  color: var(--maroon); font-size: 17px; cursor: pointer; transition: background .18s ease;
}
.modal__close:hover { background: var(--cream-warm); }
.modal h3 { margin: 0 0 8px; text-align: center; font-size: 34px; font-weight: 700; color: var(--ink); }
.modal__own {
  display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 22px;
  background: var(--maroon); color: var(--cream); border-radius: 20px; transition: background .18s ease;
}
.modal__own:hover { background: var(--maroon-dark); color: var(--cream); }
.modal__own img { height: 52px; width: auto; flex: none; }
.modal__own b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.modal__own span { display: block; font-size: 13.5px; line-height: 1.6; color: rgba(255,247,234,.86); }
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.market {
  display: grid; justify-items: center; gap: 10px; padding: 18px 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; text-align: center;
}
.market:hover { border-color: var(--maroon); background: var(--cream-warm); }
.market i {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream-warm); font-size: 17px; font-weight: 700; color: var(--maroon); font-style: normal;
}
.market span { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* ---- Shared bits -------------------------------------------------------- */
.alert { padding: 13px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.alert--success { background: #EDF6EC; border-color: #A9CDA4; color: var(--green); }
.alert--error   { background: #FDECEC; border-color: #E5B4B4; color: var(--danger); }
.alert--info    { background: var(--cream-warm); border-color: var(--line); color: #8A5A20; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.panel h3 { margin-top: 0; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--cream); font: inherit; font-size: 15px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--maroon); outline-offset: 1px; background: var(--white); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); margin: 5px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.breadcrumb { font-size: 13px; color: var(--muted); padding: 20px 0; }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 24px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.pagination .is-active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }

.price { font-size: 18px; font-weight: 700; color: var(--maroon); }
.price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.price del { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }

.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill--pending { background: #FFF3DC; color: #8A5A20; }
.pill--paid, .pill--delivered { background: #EDF6EC; color: var(--green); }
.pill--failed, .pill--cancelled { background: #FDECEC; color: var(--danger); }
.pill--shipped, .pill--confirmed, .pill--packed { background: #E9F0F7; color: #24527E; }
.pill--refunded { background: var(--sage); color: var(--ink); }

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }

.cart-layout { display: grid; grid-template-columns: 1.6fr .9fr; gap: 30px; align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: var(--cream-warm); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-soft); border-radius: 999px; overflow: hidden; background: var(--cream); }
.qty button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 17px; cursor: pointer; color: var(--maroon); }
.qty button:hover { background: var(--cream-warm); }
.qty input { width: 42px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 700; font-size: 14px; }
.summary { position: sticky; top: 100px; }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14.5px; }
.summary-row--total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; font-size: 21px; font-weight: 700; }
.summary-row .free { color: var(--green); font-weight: 700; }
.ship-meter { height: 6px; border-radius: 999px; background: var(--cream-warm); overflow: hidden; margin: 6px 0 14px; }
.ship-meter span { display: block; height: 100%; background: var(--maroon); border-radius: 999px; }
.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 13px; padding: 0; }
.steps li { display: flex; align-items: center; gap: 9px; color: var(--muted); list-style: none; }
.steps li b { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; font-size: 12px; }
.steps li.is-on { color: var(--maroon); font-weight: 700; }
.steps li.is-on b { background: var(--maroon); color: var(--cream); }
.steps .sep { flex: 1; height: 1px; background: var(--line); max-width: 42px; }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.rating .stars { color: #D9A441; letter-spacing: 1px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.chip { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .16s ease; }
.chip:hover { border-color: var(--maroon); color: var(--maroon); }
.chip.is-active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }
input[name="variant_id"]:checked + .chip { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }
input[name="variant_id"]:checked + .chip .muted { color: rgba(255,247,234,.75); }
input[name="variant_id"]:disabled + .chip { opacity: .45; cursor: not-allowed; }
.wish-btn {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,253,247,.92); color: var(--maroon);
  display: grid; place-items: center; cursor: pointer; font-size: 15px;
  box-shadow: 0 4px 12px rgba(44,42,38,.16);
}
.wish-btn.is-on { background: var(--maroon); color: var(--cream); }
/* ---- Back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: 24px; bottom: 84px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--maroon); color: var(--cream); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .18s ease;
}
.to-top.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--ink); }
.to-top:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 76px; width: 42px; height: 42px; } }
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 14px 22px;
  border-radius: 14px; box-shadow: var(--shadow-lg); font-size: 14px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-on { opacity: 1; transform: translateY(0); }

/* ---- About page --------------------------------------------------------- */
.about-intro { padding: 36px 0 8px; text-align: center; }
.about-intro h1 { max-width: 20ch; margin: 10px auto 18px; font-weight: 600; }
.about-intro h1 em { font-style: normal; color: var(--maroon); }
.about-rule { display: block; width: 64px; height: 2px; background: var(--maroon); margin: 0 auto 40px; }
.about-banner { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 28px 56px -24px rgba(93,29,30,.45); max-width: 1080px; margin: 0 auto; aspect-ratio: 1080 / 460; }
.about-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.about-banner__shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(40,12,12,.6), rgba(40,12,12,0)); }
.about-banner__text { position: absolute; left: 34px; bottom: 28px; text-align: left; display: grid; gap: 10px; justify-items: start; }
.about-banner__pill { padding: 8px 20px; border-radius: 999px; background: var(--maroon); color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 17px; }
.about-banner__text p { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--cream); }
.about-banner__text em { font-weight: 500; color: #E8C9A0; }
.about-story { padding: 56px 18px 24px; }
.about-story__col { max-width: 760px; margin: 0 auto; display: grid; gap: 44px; }
.about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.about-head h2 { margin: 0; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); display: flex; align-items: center; gap: 14px; flex: 1; }
.about-head h2::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.about-head__ico { width: 38px; height: 38px; border-radius: 50%; background: var(--sand); color: #451214; display: grid; place-items: center; flex: none; }
.about-block__body { padding-left: 52px; display: grid; gap: 20px; }
.about-block__body p { margin: 0; font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
.about-block__body strong { color: var(--ink); font-weight: 600; }
.about-figs { display: flex; flex-wrap: wrap; gap: 20px; }
.about-fig { flex: 1; min-width: 220px; margin: 0; display: grid; gap: 10px; align-content: start; }
.about-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.about-fig--sq img { aspect-ratio: 1 / 1; }
.about-fig--top img { object-position: center 20%; }
.about-fig figcaption { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.about-quote { margin: 4px 0; padding: 24px 26px; background: var(--sand); border-left: 3px solid var(--maroon); border-radius: 4px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.65; color: var(--ink); }
.about-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.about-chips li { padding: 10px 18px; border-radius: 999px; background: var(--sand); color: #451214; font-size: 13px; font-weight: 600; }
.about-people { display: flex; flex-wrap: wrap; gap: 24px; }
.about-person { width: 118px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.about-person__pic { width: 92px; height: 92px; border-radius: 50%; background: var(--sand); border: 1.5px dashed var(--maroon); color: #451214; display: grid; place-items: center; }
.about-person b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.about-person small { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.about-promise { margin-top: 56px; padding: 48px 18px; text-align: center; background: var(--maroon); }
.about-promise .eyebrow { color: #E8C9A0; margin-bottom: 10px; }
.about-promise__text { margin: 0 auto; max-width: 700px; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.45; color: #fff; }
@media (max-width: 640px) {
  .about-banner { aspect-ratio: 16 / 10; border-radius: 14px; }
  .about-banner__text { left: 18px; bottom: 16px; }
  .about-banner__text p { font-size: 18px; }
  .about-banner__pill { font-size: 14px; padding: 6px 14px; }
  .about-story { padding-top: 40px; }
  .about-block__body { padding-left: 0; }
  .about-quote { font-size: 16px; padding: 18px 20px; }
  .about-promise__text { font-size: 19px; }
  .about-person { width: 96px; }
  .about-person__pic { width: 76px; height: 76px; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
  .timeline::before { display: none; }
  .market-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  h1, .hero__title { font-size: 38px; }
  h2 { font-size: 30px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: 20px; gap: 0; }
  .hero .hero__title { margin-bottom: 10px; }
  .hero__lede { margin-bottom: 16px; }
  /* Keep "Explore blends" and "Watch our story" side by side. */
  .hero__cta { margin-bottom: 0; flex-wrap: nowrap; gap: 12px; padding-bottom: 6px; }
  .hero__cta .btn { padding: 14px 20px; white-space: nowrap; flex: none; }
  .hero__play { gap: 8px; font-size: 13px; white-space: nowrap; min-width: 0; }
  .hero__play i { width: 38px; height: 38px; flex: none; }
  /* Slides stay layered (absolute); the box takes its height from its width.
     (min-height + aspect-ratio would force a 400px minimum width.) */
  .hero__art { min-height: 0; aspect-ratio: 4 / 3; flex: none; }
  .hero__right { min-width: 0; }
  .about, .offer, .booking, .cart-layout { grid-template-columns: 1fr; gap: 36px; }
  .cols-split, .cols-2, .cols-account { grid-template-columns: 1fr; gap: 28px; }
  .hero-art { order: -1; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .summary { position: static; }
  .sec-head--split { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* backdrop-filter would make the header the containing block of the fixed drawer */
  .site-header { backdrop-filter: none; background: var(--paper); }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(250px, 70vw);
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 10px 20px 20px; transform: translateX(100%);
    transition: transform .25s ease; z-index: 65; overflow-y: auto; font-size: 13.5px;
  }
  .nav.is-open { transform: translateX(0); }
  .nav > a, .nav__drop > a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; width: auto; border: 0; box-shadow: none; padding: 0 0 6px 12px; background: transparent; display: none; }
  .nav__drop.is-open .nav__menu { display: block; }
  .nav__drop > a { justify-content: space-between; }
  .nav__drop .nav__caret { transition: transform .2s ease; }
  .nav__drop.is-open .nav__caret { transform: rotate(225deg) translateY(-2px); }
  .nav__menu a { display: block; padding: 6px 0; font-size: 12.5px; border-bottom: 0; }
}

@media (max-width: 640px) {
  .wrap, .section { padding-left: 18px; padding-right: 18px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section--inner { padding: 56px 18px; }
  h1, .hero__title { font-size: 31px; }
  h2 { font-size: 26px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero__copy .stats { display: none; }   /* home hero figures are desktop-only */
  .hero__badges { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .field-row, .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full, .form-grid button { grid-column: span 1; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
  .countdown div { width: auto; flex: 1; }
  .cart-line { grid-template-columns: 70px 1fr; }
  .cart-line img { width: 70px; height: 70px; }
  .topbar .wrap { gap: 10px; font-size: 12px; }
  .topbar .wrap span.hide-sm { display: none; }
  .topbar__cta { padding: 4px 11px; font-size: 11px; }
  .modal__box { padding: 36px 22px 28px; }

  .site-header .wrap { padding: 8px 14px; gap: 8px; }
  .brand { gap: 0; }
  .brand img { height: 40px; }
  .brand span { display: none; }
  .header-actions { gap: 6px; }
  .icon-btn { width: 36px; height: 36px; }
  .btn-order { padding: 8px 12px; }
  .btn-order b { font-size: 12px; }
  .btn-order span { display: none; }
  .search-panel { right: 14px; }
  .milestone-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 340px) {
  .topbar__cta { display: none; }
  .header-actions .icon-btn[aria-label="Wishlist"] { display: none; }
}

/* ---------------------------------------------------------------------------
   Shared classes used by the inner pages (shop, blog, cart, account, 404).
--------------------------------------------------------------------------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p  { margin: 6px 0 0; color: var(--muted); max-width: 560px; }

.btn--ghost { background: transparent; color: var(--maroon); border: 1.5px solid var(--maroon); }
.btn--ghost:hover { background: var(--maroon); color: var(--cream); }

/* Generic card, used for blog tiles and anything not a product */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--maroon); transform: translateY(-3px); box-shadow: var(--shadow); }

.product-card__media { position: relative; aspect-ratio: 16/10; background: var(--sand); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.product-card__name { font-size: 20px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.product-card__note { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; flex: 1; line-height: 1.62; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 11px; border-radius: 999px;
  background: var(--maroon); color: var(--cream);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.tag--rose  { background: var(--rose); color: #3A1A10; }
.tag--muted { background: var(--sage); color: var(--ink); }

/* ---- Language picker ---------------------------------------------------- */
/* Our own control in the top bar; Google's widget below it is loaded but hidden. */
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--maroon);
}
.lang select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-warm); border-radius: 999px;
  background: transparent; color: inherit;
  padding: 4px 26px 4px 10px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1.4; cursor: pointer;
  /* Caret, inline so it needs no extra request and inherits no colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235D1D1E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
}
.lang select:hover  { border-color: var(--maroon); }
.lang select:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.lang select option { color: #1c1c1c; background: #fff; }

/*
 * Google's own chrome. The widget must stay in the DOM and keep a box — its
 * script measures the container — so it is moved out of view rather than
 * display:none'd, which would stop it initialising in some browsers.
 */
#google_translate_element {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* The floating banner and the toolbar it pushes the page down by. */
.goog-te-banner-frame, iframe.skiptranslate, .skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
/* Google marks translated words with a background + tooltip; we want neither. */
font[style] { background: none !important; box-shadow: none !important; }
.goog-tooltip, .goog-tooltip:hover, .goog-text-highlight {
  display: none !important; background: none !important; box-shadow: none !important;
}

@media (max-width: 900px) {
  .lang select { padding: 3px 22px 3px 8px; font-size: 12px; }
  .lang svg { display: none; }
}

/* ---- Steaming cup ---------------------------------------------------------
   steaming_cup() in functions.php. Each wisp drifts up and fades on its own
   offset so the steam never reads as a single shape moving. */
.cup { display: inline-block; vertical-align: middle; overflow: visible; }
.cup .steam {
  opacity: 0; transform-box: fill-box; transform-origin: 50% 100%;
  animation: cup-steam 2.6s ease-in-out infinite;
}
.cup .steam--2 { animation-delay: .55s; }
.cup .steam--3 { animation-delay: 1.1s; }
@keyframes cup-steam {
  0%   { opacity: 0;  transform: translateY(3px) scaleY(.85); }
  25%  { opacity: .9; }
  70%  { opacity: .35; }
  100% { opacity: 0;  transform: translateY(-5px) scaleY(1.15); }
}
.cup--slow .steam { animation-duration: 4s; }
.cup--slow .steam--2 { animation-delay: .9s; }
.cup--slow .steam--3 { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .cup .steam { animation: none; opacity: .55; transform: none; }
}

/* Hero rating badge carries the cup in place of the plain dot. */
.hero__rating .cup { color: var(--maroon); }

/* ---- Product image zoom ---------------------------------------------------
   Desktop: hovering magnifies in place by scaling the image around the cursor,
   so there is no second panel to lay out. Touch: no hover, so the button and a
   tap open the full-size lightbox instead. */
.pdp-shot {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--cream-warm);
  box-shadow: var(--shadow-lg); cursor: zoom-in;
}
.pdp-shot img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .35s ease;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.pdp-shot.is-zoomed img { transform: scale(2.4); transition: transform .12s ease-out; }

.pdp-zoom-btn {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 247, 234, .92); color: var(--maroon);
  box-shadow: 0 4px 14px rgba(31, 29, 26, .25);
  transition: transform .18s ease, background .18s ease;
}
.pdp-zoom-btn:hover { background: var(--cream); transform: translateY(-2px); }
.pdp-zoom-btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.pdp-zoom-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

.pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pdp-thumbs img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 12px;
  border: 2px solid var(--line-warm); cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.pdp-thumbs img:hover { transform: translateY(-2px); }
.pdp-thumbs img.is-on { border-color: var(--maroon); }

/* ---- Full-size viewer ---------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; background: rgba(31, 29, 26, .88);
  backdrop-filter: blur(4px); cursor: zoom-out;
}
/* display:flex above would otherwise beat the hidden attribute, as .modal found. */
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  cursor: default; animation: lb-in .22s ease both;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lightbox__close, .lightbox__nav {
  flex: none; border: 0; cursor: pointer; color: var(--cream);
  background: rgba(255, 247, 234, .14); border-radius: 50%;
  display: grid; place-items: center; transition: background .18s ease;
}
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; font-size: 17px; }
.lightbox__nav { width: 46px; height: 46px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 247, 234, .3); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
body.lb-open { overflow: hidden; }

/* Touch has no hover: a tap goes straight to the lightbox (app.js suppresses
   the magnifier once it has seen a touch, so no transform rule is needed). */
@media (hover: none) { .pdp-shot { cursor: pointer; } }
@media (max-width: 640px) {
  .pdp-thumbs img { width: 60px; height: 60px; }
  .lightbox { padding: 12px; gap: 4px; }
  .lightbox__nav { width: 38px; height: 38px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-shot img, .lightbox img, .pdp-zoom-btn, .pdp-thumbs img { transition: none; animation: none; }
}