/* ============================================================
   OSRI storefront — design tokens, layout, components

   Identity: warm ivory ground, espresso text, terracotta accent.
   Change the tokens below and the whole site follows.
   ============================================================ */

:root {
  /* ---- Official OSRI palette (OSRI_Brand_Colors.txt, vector master) ----
     These five are the brand. Do not drift from them; the tints and
     shades below are derived from them purely for UI states.          */
  --brand:      #B5522F;   /* Primary Terracotta — wordmark, primary identity */
  --indigo:     #2F4A5E;   /* Secondary Indigo — tagline and supporting text  */
  --mustard:    #C99447;   /* Accent Mustard — floral accent                  */
  --bg:         #F7EFE3;   /* Background Cream                                */
  --ink:        #4B2E1E;   /* Deep Brown — body text and monochrome alternate */

  /* Derived from the five above, for hovers, borders and surfaces.

     Colour roles — terracotta is the IDENTITY, indigo is the INTERFACE:
       terracotta  logo, eyebrows, bestseller badge, discount %, tinted panels
       indigo      anything you click — buttons, links, focus, cart badge
     Keeping these apart stops the "Add to cart" button competing with the
     wordmark for attention, and matches the brand doc, which assigns
     terracotta to the wordmark rather than to interface elements.        */
  --brand-dark: #8F4025;
  --brand-soft: #FAEDE6;
  --indigo-dark: #24394A;
  --indigo-soft: #E9EEF3;
  --surface:    #FFFFFF;
  --surface-2:  #F1E7D9;
  --ink-soft:   #6B4A38;
  --muted:      #8A7565;
  --line:       #E6D9C8;
  --line-soft:  #F1E9DC;

  /* Semantic states, kept clear of the brand colours so they read as status */
  --ok:         #3D6B54;   /* free shipping, success, applied codes */
  --sale:       #B3261E;   /* errors only */

  --radius:     14px;
  --radius-sm:  9px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(42, 33, 28, .06);
  --shadow-md:  0 6px 20px rgba(42, 33, 28, .09);
  --shadow-lg:  0 18px 50px rgba(42, 33, 28, .16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1280px;
  --header-h: 68px;
}

* { box-sizing: border-box; }

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

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Cormorant Garamond runs small and light for its point size, so headings
   are set larger and heavier here than a Fraunces or Playfair would need. */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 500; }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); font-weight: 500; }
h3 { font-size: 1.22rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.stack-sm > * + * { margin-top: 8px; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 600; letter-spacing: .015em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--indigo); color: #fff; }
.btn--primary:hover { background: var(--indigo-dark); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2E1B10; }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--light:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.link-more {
  font-size: .85rem; font-weight: 600; color: var(--indigo-dark);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-more:hover { color: var(--ink); }

/* ---------- header ---------- */

.announce {
  background: var(--ink);
  color: #F3EFE6;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.announce b { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 239, 227, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

/* Official logo artwork. The compact lockup (letters + floral, no tagline)
   is used wherever the mark is small enough that the tagline would blur. */
.brand { display: inline-flex; align-items: center; }
.brand__logo {
  height: 38px; width: auto;
  display: block;
}
.footer__logo {
  height: 68px; width: auto;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .brand__logo { height: 32px; }
  .footer__logo { height: 58px; }
}

.nav { display: flex; justify-content: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--radius-pill);
  font-size: .88rem; font-weight: 500; color: var(--ink-soft);
  transition: background .16s ease, color .16s ease;
}
.nav__link:hover, .nav__item:hover > .nav__link,
.nav__link[aria-current="page"] { background: var(--indigo-soft); color: var(--indigo-dark); }
.nav__link svg { width: 11px; height: 11px; opacity: .6; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px; padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: .88rem;
}
.dropdown a:hover { background: var(--surface-2); }
.dropdown a span { font-size: .74rem; color: var(--muted); }

.header-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .16s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cart-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--indigo); color: #fff;
  border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.cart-count[hidden] { display: none; }

.hamburger { display: none; }

/* mobile drawer nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__panel {
  position: absolute; inset: 0 auto 0 0;
  width: min(330px, 86vw);
  background: var(--surface);
  padding: 20px;
  overflow-y: auto;
  animation: slideInLeft .24s ease;
}
.mobile-nav__panel a {
  display: block; padding: 12px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
}
.mobile-nav__panel .m-head {
  font-family: var(--serif); font-size: 1.05rem;
  padding: 16px 6px 6px; color: var(--muted);
  border: 0;
}
@keyframes slideInLeft { from { transform: translateX(-100%); } }

/* ---------- overlay + drawers ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(42, 33, 28, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(420px, 92vw);
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: var(--shadow-lg);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.cart-drawer__head h3 { font-size: 1.15rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px 20px; }
.cart-drawer__foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; }

.ship-bar { margin-bottom: 14px; }
.ship-bar__text { font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.ship-bar__track { height: 5px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.ship-bar__fill { height: 100%; background: var(--indigo); border-radius: var(--radius-pill); transition: width .3s ease; }

.mini-line {
  display: grid; grid-template-columns: 68px 1fr auto; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.mini-line img { width: 68px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); }
.mini-line__title { font-size: .88rem; font-weight: 600; line-height: 1.35; }
.mini-line__meta { font-size: .76rem; color: var(--muted); }
.mini-line__price { font-size: .88rem; font-weight: 600; white-space: nowrap; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state h3 { margin-bottom: 8px; color: var(--ink); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  margin: 22px auto 0;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(400px, 56vw, 560px);
  display: flex; align-items: center;
  background: var(--surface-2);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(247, 239, 227, .97) 0%, rgba(247, 239, 227, .9) 34%, rgba(247, 239, 227, .12) 66%);
}
.hero__inner { position: relative; padding: clamp(28px, 5vw, 60px); max-width: 620px; }
.eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 14px;
}
.hero p.lede {
  font-size: 1.02rem; color: var(--ink-soft); max-width: 46ch; margin: 16px 0 26px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 28px;
}
.trust-strip div {
  background: var(--surface);
  padding: 16px 18px;
  font-size: .82rem;
}
.trust-strip strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.trust-strip span { color: var(--muted); }

/* ---------- sections ---------- */

.section { padding: clamp(46px, 6vw, 72px) 0 0; }
.section:last-of-type { padding-bottom: clamp(46px, 6vw, 72px); }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px;
}
.section__head p { color: var(--muted); margin: 6px 0 0; font-size: .92rem; }

/* category tiles */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cat-card { text-align: center; }
.cat-card__img {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 12px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.cat-card:hover .cat-card__img { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h3 { font-size: .96rem; }
.cat-card span { font-size: .76rem; color: var(--muted); }

/* product grid + cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 20px;
}
.product-grid--5 { grid-template-columns: repeat(5, 1fr); }

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 12px;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.card:hover .card__media img { transform: scale(1.045); }

.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff;
}
.badge--bestseller { background: var(--brand); }
.badge--new { background: var(--ink); }
.badge--premium { background: var(--mustard); }
.badge--sale { background: var(--sale); }
.badge--out { background: #6E7B76; }

.card__add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.card:hover .card__add, .card:focus-within .card__add { opacity: 1; transform: translateY(0); }

.card__cat { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card__title {
  font-family: var(--sans); font-size: .92rem; font-weight: 600; line-height: 1.4;
  margin: 3px 0 6px;
}
.card__title a:hover { color: var(--indigo-dark); }

.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__now { font-size: 1rem; font-weight: 700; }
.price__was { font-size: .84rem; color: var(--muted); text-decoration: line-through; }
.price__off { font-size: .76rem; font-weight: 700; color: var(--brand); }

.stars { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); }
.stars__glyph { color: var(--mustard); letter-spacing: .06em; }

/* ---------- story banner ---------- */

.story {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.story__media { aspect-ratio: 5 / 4; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__body { padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0; }
.story__body p { color: var(--ink-soft); margin: 14px 0 22px; }
.story--flip .story__media { order: 2; }
.story--flip .story__body { padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.value__icon {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center;
}
.value__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.value h3 { font-size: 1rem; margin-bottom: 6px; }
.value p { margin: 0; font-size: .87rem; color: var(--muted); }

/* newsletter */
.newsletter {
  background: var(--brand-soft);
  border-radius: 22px;
  padding: clamp(30px, 5vw, 56px);
  text-align: center;
}
.newsletter p { color: var(--ink-soft); max-width: 52ch; margin: 12px auto 24px; }
.newsletter form {
  display: flex; gap: 10px; max-width: 460px; margin: 0 auto; flex-wrap: wrap;
}
.newsletter input {
  flex: 1 1 220px; min-width: 0;
  padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; font: inherit; font-size: .9rem;
}
.newsletter small { display: block; margin-top: 12px; color: var(--muted); font-size: .78rem; }

/* ---------- footer ---------- */

.site-footer {
  margin-top: clamp(50px, 7vw, 84px);
  background: var(--ink);
  color: #C9D2CE;
  padding: 52px 0 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px;
  padding-bottom: 38px;
}
.site-footer h4 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  margin-bottom: 14px;
}
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; font-size: .88rem; }
.footer-about p { font-size: .88rem; max-width: 38ch; margin: 14px 0 0; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: #97A5A0;
}
.pay-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-row span {
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px;
  padding: 3px 9px; font-size: .72rem;
}

/* ---------- collection page ---------- */

.crumbs { font-size: .8rem; color: var(--muted); padding: 18px 0 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 6px; opacity: .55; }

.page-head { padding: 22px 0 26px; }
.page-head p { color: var(--muted); margin: 10px 0 0; max-width: 60ch; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 0; border-block: 1px solid var(--line);
  margin-bottom: 26px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .82rem; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.select {
  padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: .84rem; cursor: pointer;
}
.result-count { font-size: .84rem; color: var(--muted); }

/* ---------- product page ---------- */

.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); padding-top: 22px; }
.gallery__main {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* Real photography is shown whole rather than cropped. Letting the image set
   its own height means no blank bands above and below, whatever its shape —
   a fixed frame plus `contain` always leaves gaps on one axis. */
/* The frame shrinks to the photo rather than the photo fitting a frame, so
   there is never a blank band. Letting the image size itself (auto width AND
   auto height, bounded by max-*) keeps its aspect ratio intact — setting
   width:100% alongside max-height is what reintroduced letterboxing. */
.gallery__main--photo {
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
}
.gallery__main--photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;      /* stop a tall photo pushing the buy button off-screen */
  object-fit: contain;
  border-radius: var(--radius);
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.gallery__thumb {
  aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: none; padding: 0; cursor: pointer;
  transition: border-color .16s ease;
}
.gallery__thumb.is-active { border-color: var(--ink); border-width: 2px; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }
.pdp__price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.pdp__price .price__now { font-size: 1.55rem; }
.pdp__tax { font-size: .8rem; color: var(--muted); }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); padding: 2px; background: none; cursor: pointer;
  overflow: hidden;
}
.swatch.is-active { border-color: var(--ink); border-width: 2px; }
.swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.field-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin: 22px 0 8px;
}

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); overflow: hidden;
}
.qty button {
  width: 40px; height: 42px; border: 0; background: none;
  font-size: 1.1rem; cursor: pointer; color: var(--ink-soft);
}
.qty button:hover { background: var(--surface-2); }
.qty input {
  width: 46px; height: 42px; border: 0; text-align: center;
  font: inherit; font-weight: 600; background: none;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.buy-row .btn { flex: 1 1 190px; }

.pdp__meta {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: grid; gap: 10px; font-size: .87rem;
}
.pdp__meta div { display: flex; gap: 10px; }
.pdp__meta dt, .pdp__meta strong { min-width: 96px; color: var(--muted); font-weight: 500; }

.accordion { margin-top: 24px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  padding: 15px 2px; cursor: pointer; font-weight: 600; font-size: .92rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.15rem; color: var(--muted); }
.accordion details[open] summary::after { content: "\2013"; }
.accordion .acc-body { padding: 0 2px 18px; font-size: .89rem; color: var(--ink-soft); }
.accordion ul { margin: 0; padding-left: 18px; }
.accordion li { margin-bottom: 6px; }

/* ---------- cart page ---------- */

.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; padding-top: 8px; }
.cart-lines { border-top: 1px solid var(--line); }
.cart-line {
  display: grid; grid-template-columns: 104px 1fr auto; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.cart-line__img {
  width: 104px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.cart-line h3 { font-family: var(--sans); font-size: .98rem; font-weight: 600; }
.cart-line__sub { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.cart-line__ctl { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cart-line__right { text-align: right; font-weight: 700; white-space: nowrap; }
.text-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .82rem; color: var(--muted); text-decoration: underline;
}
.text-btn:hover { color: var(--sale); }

.summary {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  position: sticky; top: calc(var(--header-h) + 16px);
}
.summary h2 { font-size: 1.2rem; margin-bottom: 16px; }
.summary__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: .9rem;
}
.summary__row--total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-size: 1.08rem; font-weight: 700;
}
.summary__row .muted { color: var(--muted); }
.summary__row .free { color: var(--ok); font-weight: 600; }

.promo { display: flex; gap: 8px; margin: 14px 0 4px; }
.promo input {
  flex: 1; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font: inherit; font-size: .85rem; background: var(--bg);
}
.note { font-size: .8rem; margin-top: 8px; }
.note--ok { color: var(--ok); }
.note--err { color: var(--sale); }

/* ---------- pre-launch / empty catalog states ---------- */

/* Shown in a product rail before any products exist, so the homepage
   reads as "not stocked yet" rather than broken. */
.coming-soon {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.coming-soon h3 { font-size: 1.35rem; }
.coming-soon p { margin: 0; color: var(--muted); max-width: 44ch; font-size: .9rem; }

/* Build-time notice for the site owner. Delete the element to remove it. */
.setup-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 22px auto 0;
  padding: 14px 18px;
  background: var(--brand-soft);
  border: 1px solid #E8D3C6;
  border-radius: var(--radius);
  font-size: .87rem; color: var(--ink-soft);
}
.setup-note strong { color: var(--brand-dark); }
.setup-note code {
  background: #fff; border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-size: .85em;
}

/* Marks a business detail that has not been filled in yet. */
.todo {
  color: var(--brand-dark); background: var(--brand-soft);
  border-radius: 5px; padding: 1px 7px;
  font-size: .8rem; font-style: italic;
}

/* ---------- editorial pages (about, policies) ---------- */

.prose { max-width: 68ch; }
.prose p { color: var(--ink-soft); margin: 0 0 18px; }
.prose h2 { margin: 38px 0 12px; }
.prose h3 { margin: 26px 0 8px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--indigo-dark); border-bottom: 1px solid currentColor; }

.page-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0; border-block: 1px solid var(--line); margin-bottom: 30px;
}
.page-nav a {
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); font-size: .84rem;
}
.page-nav a:hover { border-color: var(--ink); }

/* ---------- contact ---------- */

.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.contact-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.contact-card h3 { margin-bottom: 14px; }
.contact-list { display: grid; gap: 14px; }
.contact-list div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: .9rem; }
.contact-list dt, .contact-list .k { color: var(--muted); }

.form-row { margin-bottom: 16px; }
.form-row label {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 7px;
}
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: .92rem;
}
.form-row textarea { min-height: 130px; resize: vertical; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ---------- interim checkout (WhatsApp + UPI QR) ---------- */

.checkout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }

.step { counter-increment: step; margin-bottom: 26px; }
.step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step__num {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--indigo); color: #fff;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
}
.step__head h2 { font-size: 1.4rem; }

.pay-options { display: grid; gap: 10px; }
.pay-option {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.pay-option:hover { border-color: var(--ink); }
.pay-option input { margin-top: 3px; accent-color: var(--indigo); }
.pay-option strong { display: block; font-size: .95rem; }
.pay-option span { font-size: .84rem; color: var(--muted); }
.pay-option.is-selected { border-color: var(--indigo); background: var(--indigo-soft); }

.qr-panel {
  text-align: center;
  padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.qr-panel canvas, .qr-panel img {
  width: 208px; height: 208px;
  margin: 0 auto 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 8px; background: #fff;
}
.qr-panel .qr-amount { font-size: 1.5rem; font-weight: 700; font-family: var(--serif); }
.qr-vpa {
  display: inline-block; margin-top: 8px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 6px 12px;
}
.qr-note { font-size: .82rem; color: var(--muted); margin-top: 12px; }

.order-ref {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: var(--radius-sm); padding: 3px 10px; font-size: .86rem;
}

.warn-note {
  display: flex; gap: 10px;
  padding: 13px 16px; margin-top: 14px;
  background: var(--indigo-soft); border: 1px solid #CFDAE3;
  border-radius: var(--radius);
  font-size: .85rem; color: var(--ink-soft);
}

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
}

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-pill);
  font-size: .88rem; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid, .product-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .hamburger { display: grid; }
  .header-bar { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: center; }
  .pdp { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .story, .story--flip { grid-template-columns: 1fr; }
  .story--flip .story__media { order: 0; }
  .story__body, .story--flip .story__body { padding: 28px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .product-grid, .product-grid--5 { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .card__add { opacity: 1; transform: none; }
  .hero { border-radius: 16px; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(247, 239, 227, .95) 40%, rgba(247, 239, 227, .55) 100%);
  }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line__img { width: 84px; }
  .cart-line__right { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}