/* ============================================================
   MAANAS FASHION JEWELLERY — styles
   Deep green and gold, after the Maanas billing software.

   LAYOUT INTENT
   Phone chrome is one 58px green bar. Search expands only when
   asked for; categories and filters live in a bottom sheet behind
   the filter button. Nothing competes with the jewellery.

   UNITS
   rem    type, spacing, radii. 1rem = the reader's own base size,
          so enlarging text scales the whole layout with it.
   px     ONLY hairlines, focus rings and shadows, which should stay
          crisp at one device pixel. Also media breakpoints, which
          describe the device, not the type.
   clamp  page gutters and display type — bounded at both ends.
   %, fr, minmax, aspect-ratio   every width and the card grid.
   ============================================================ */

:root {
  /* green — the frame of the whole page */
  --green-900:  #0B3426;
  --green-800:  #10402E;
  --green-700:  #175C40;
  --green-600:  #1E7A52;
  --green-100:  #E4EFE7;
  --green-050:  #F1F7F2;

  /* gold — the jewellery accent */
  --gold-600:   #A07B1E;
  --gold-500:   #C9A227;
  --gold-400:   #DCBE6A;
  --gold-100:   #F6EBCD;

  /* ground */
  --cream:      #FBF7EE;
  --card:       #FFFFFF;
  --line:       #E8E1D3;

  /* text */
  --ink:        #1A2A22;
  --ink-soft:   #6A7A71;
  --on-green:   #F4EFE3;
  --on-green-dim: #B9CCC0;

  /* semantic */
  --wa:         #1E8E4E;
  --wa-dark:    #16693A;
  --danger:     #B3261E;

  --radius:     1rem;
  --radius-sm:  0.625rem;
  --shadow-sm:  0 1px 2px rgba(11,52,38,.06), 0 2px 8px rgba(11,52,38,.05);
  --shadow:     0 2px 6px rgba(11,52,38,.07), 0 12px 28px rgba(11,52,38,.09);
  --shadow-lg:  0 16px 48px rgba(11,52,38,.28);
  --max:        96rem;
  --gutter:     clamp(1rem, 4vw, 1.5rem);
  --bar:        4.75rem;   /* phone header height */
}

* { box-sizing: border-box; }

/* 100% = whatever the reader set in their browser. Never px here. */
html { font-size: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, .serif {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: .01em;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

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

/* ============ HEADER — the green frame ============ */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--green-900);
  color: var(--on-green);
}

.header-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  min-height: var(--bar); padding: 0.5rem var(--gutter);
  max-width: var(--max); margin: 0 auto;
}

/* brand lockup */
.brand { display: flex; align-items: center; gap: 0.625rem; order: 1;
         text-decoration: none; margin-right: auto; min-width: 0; }

/* phone: the logo is not clickable */
@media (max-width: 759px) { .brand { pointer-events: none; } }
.brand-logo { height: 3.75rem; width: auto; display: block; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.625rem); line-height: 1.05;
  font-weight: 600; color: #fff; letter-spacing: .02em;
}
.brand-tag {
  font-size: 0.5625rem; color: var(--gold-400); letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; margin-top: 0.125rem;
  white-space: nowrap;
}

/* icon buttons sit on the green */
.icon-btn {
  position: relative; flex: 0 0 auto; order: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(220,190,106,.28);
  color: var(--on-green);
  transition: background .15s, border-color .15s, color .15s;
}
.icon-btn:hover { background: rgba(220,190,106,.2); border-color: var(--gold-400);
                  color: #fff; }
.icon-btn[aria-expanded="true"] { background: var(--gold-500); border-color: var(--gold-500);
                                  color: var(--green-900); }
.icon-btn svg { width: 1.1875rem; height: 1.1875rem; }

.cart-count, .pip {
  position: absolute; top: -0.1875rem; right: -0.1875rem;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem;
  border-radius: 0.5625rem; background: var(--gold-500); color: var(--green-900);
  font-size: 0.625rem; font-weight: 800; line-height: 1.125rem; text-align: center;
  border: 2px solid var(--green-900);
}

/* search field — wraps below the bar on phones, inline on desktop */
.search-wrap { order: 5; flex-basis: 100%; display: none; padding-bottom: 0.5rem; }
.header-bar.search-open .search-wrap { display: block; }

.search-box { position: relative; }
.search-box svg {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--ink-soft); pointer-events: none;
}
.search-box input {
  width: 100%; padding: 0.6875rem 0.875rem 0.6875rem 2.4375rem;
  border: 1px solid transparent; border-radius: 62.4375rem;
  background: #fff; color: var(--ink); font-size: 0.9375rem;
}
.search-box input::placeholder { color: var(--ink-soft); }
.search-box input:focus { outline: none; border-color: var(--gold-500);
                          box-shadow: 0 0 0 3px rgba(201,162,39,.35); }

/* category rail — hidden on phones, where it lives in the sheet */
.chips-strip { display: none; }

.chips { display: flex; gap: 0.5rem; overflow-x: auto;
         scrollbar-width: none; -ms-overflow-style: none; }
.chips::-webkit-scrollbar { display: none; }
.chips-wrap { flex-wrap: wrap; overflow: visible; }

.chip {
  flex: 0 0 auto; padding: 0.5rem 1rem; border-radius: 62.4375rem;
  background: rgba(255,255,255,.07); color: var(--on-green);
  border: 1px solid rgba(220,190,106,.3);
  font-size: 0.8438rem; white-space: nowrap; transition: all .15s;
}
.chip:hover { background: rgba(220,190,106,.18); border-color: var(--gold-400); }
.chip[aria-pressed="true"] {
  background: var(--gold-500); color: var(--green-900);
  border-color: var(--gold-500); font-weight: 700;
}

/* the gold hairline that separates green from cream */
.gold-rule {
  height: 3px;
  background: linear-gradient(90deg,
    var(--gold-600), var(--gold-400) 35%, var(--gold-500) 65%, var(--gold-600));
}

/* ============ FILTER SHEET ============ */

.overlay {
  position: fixed; inset: 0; background: rgba(11,52,38,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.filter-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-direction: column;
  max-height: 85vh;
  background: var(--cream);
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(101%);
  visibility: hidden;
  transition: transform .26s cubic-bezier(.3, .8, .4, 1), visibility 0s .26s;
}
.filter-panel.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .26s cubic-bezier(.3, .8, .4, 1), visibility 0s 0s;
}

.sheet-grip {
  width: 2.5rem; height: 0.25rem; border-radius: 62.4375rem;
  background: var(--line); margin: 0.625rem auto 0;
}

.sheet-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; flex: 1; font-size: 1.375rem; color: var(--green-800); }

.sheet-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.125rem 1.125rem;
              -webkit-overflow-scrolling: touch; }

.sheet-section { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.sheet-section:last-child { border-bottom: none; }
.sheet-section h3 {
  margin: 0 0 0.75rem; font-family: inherit;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-600);
}

/* inside the cream sheet the chips invert to green-on-light */
.sheet-body .chip { background: #fff; color: var(--ink); border-color: var(--line); }
.sheet-body .chip:hover { border-color: var(--green-700); color: var(--green-800); }
.sheet-body .chip[aria-pressed="true"] {
  background: var(--green-800); color: #fff; border-color: var(--green-800);
}

.price-row { display: flex; gap: 0.75rem; }
.price-row .field { flex: 1; margin-bottom: 0; }

.switch { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; }
.switch input { width: 1.125rem; height: 1.125rem; accent-color: var(--green-700); }

.sheet-foot {
  display: flex; gap: 0.75rem; padding: 0.875rem 1.125rem;
  padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--card);
}
.sheet-foot .btn { flex: 1; }

/* ============ RESULTS ============ */

.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem; padding: 1.5rem 0 1.125rem; flex-wrap: wrap;
}
.results-head h1 {
  margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
  color: var(--green-800); text-wrap: balance; line-height: 1.1;
}
/* small gold bar under the section title */
.results-head h1::after {
  content: ""; display: block; width: 2.25rem; height: 2px;
  background: var(--gold-500); margin-top: 0.5rem; border-radius: 2px;
}
.results-count { color: var(--ink-soft); font-size: 0.8125rem;
                 font-variant-numeric: tabular-nums; padding-bottom: 0.25rem; }

/* 1 per row on phones → 2 → 3 on tablet → 4 on desktop */
.grid {
  display: grid; gap: 1.125rem;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 0.5rem;
}

.card {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-0.1875rem);
              border-color: var(--gold-400); }

.card-media {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--green-050); border: none; padding: 0; display: block;
  /* keeps the whole card inside the viewport on short screens */
  max-height: 42vh;
  max-height: 42svh;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* gold discount badge — the pop of colour on every tile */
.badge {
  position: absolute; top: 0.625rem; left: 0.625rem;
  background: linear-gradient(145deg, var(--gold-400), var(--gold-500));
  color: var(--green-900);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .03em;
  padding: 0.3125rem 0.625rem; border-radius: 0.375rem;
  box-shadow: 0 2px 6px rgba(11,52,38,.2);
}
.oos-veil {
  position: absolute; inset: 0; background: rgba(11,52,38,.55);
  display: flex; align-items: center; justify-content: center;
}
.oos-veil span {
  background: var(--cream); color: var(--green-900);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .12em;
  padding: 0.4375rem 0.875rem; border-radius: 0.375rem; text-transform: uppercase;
}

.card-body { padding: 0.9375rem 1rem 1rem; display: flex; flex-direction: column;
             gap: 0.4375rem; flex: 1; }
.card-cat  { font-size: 0.5938rem; letter-spacing: .15em; text-transform: uppercase;
             color: var(--gold-600); font-weight: 700; }
.card-name {
  margin: 0; font-size: 0.9688rem; font-weight: 600; line-height: 1.35;
  font-family: inherit; color: var(--ink);
}
/* Two lines, always — a one-line name still occupies two lines' height,
   so every card in the grid is exactly the same height. Longer names are
   cut with an ellipsis; tapping the name opens the full details. */
.card-name .name-btn {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;              /* 2 lines at line-height 1.35 */
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.card-name .name-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.card-name, .card-name .name-btn { overflow-wrap: anywhere; }

/* price: MRP struck out, discount %, NET */
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
         margin-top: auto; padding-top: 0.25rem;
         font-variant-numeric: tabular-nums; }
.price .net  { font-size: 1.3125rem; font-weight: 700; color: var(--green-800);
               letter-spacing: -.01em; }
.price .mrp  { font-size: 0.8438rem; color: var(--ink-soft); text-decoration: line-through; }
.price .off  { font-size: 0.75rem; font-weight: 700; color: var(--green-600);
               background: var(--green-100); padding: 0.125rem 0.4375rem;
               border-radius: 0.25rem; }
.price-label { font-size: 0.625rem; color: var(--ink-soft); letter-spacing: .06em;
               font-variant-numeric: tabular-nums; }

.card-actions { display: flex; gap: 0.5rem; margin-top: 0.625rem; }

/* ============ BUTTONS ============ */

.btn {
  flex: 1; padding: 0.6875rem 0.875rem; border-radius: var(--radius-sm);
  border: 1px solid var(--green-800); background: transparent; color: var(--green-800);
  font-size: 0.8438rem; font-weight: 600; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--green-100); }
.btn-primary { background: var(--green-800); color: #fff; }
.btn-primary:hover { background: var(--green-900); border-color: var(--green-900); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink-soft); background: var(--card); }
.btn-ghost:hover { border-color: var(--green-700); color: var(--green-800);
                   background: var(--card); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.btn-lg { padding: 0.875rem 1.125rem; font-size: 0.9375rem; }

.empty, .loading { text-align: center; padding: 4rem 1.25rem; color: var(--ink-soft); }
.empty h2 { margin: 0 0 0.5rem; font-size: 1.5rem; color: var(--green-800); }

.pager { display: flex; justify-content: center; align-items: center; gap: 0.875rem;
         padding: 1.75rem 0 2.75rem; }
.pager button { padding: 0.625rem 1.125rem; border-radius: var(--radius-sm);
                border: 1px solid var(--line); background: var(--card);
                font-size: 0.875rem; color: var(--green-800); font-weight: 600; }
.pager button:hover:not([disabled]) { border-color: var(--green-700); }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }
.pager span { font-size: 0.8125rem; color: var(--ink-soft); }

/* ============ DRAWERS ============ */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(27.5rem, 100%); background: var(--cream);
  transform: translateX(100%); visibility: hidden;
  transition: transform .24s ease, visibility 0s .24s;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer.open {
  transform: translateX(0); visibility: visible;
  transition: transform .24s ease, visibility 0s 0s;
}

.drawer-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.125rem; background: var(--green-900); color: var(--on-green);
}
.drawer-head h2 { margin: 0; font-size: 1.375rem; flex: 1; color: #fff; }

.close-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--green-800);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.close-btn:hover { background: var(--green-100); }
.close-btn svg { width: 1rem; height: 1rem; }
.drawer-head .close-btn {
  background: rgba(255,255,255,.1); border-color: rgba(220,190,106,.3); color: var(--on-green);
}
.drawer-head .close-btn:hover { background: rgba(220,190,106,.2); }

.drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.125rem;
               -webkit-overflow-scrolling: touch; }
.drawer-foot { border-top: 1px solid var(--line); background: var(--card);
               padding: 1rem 1.125rem;
               padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* cart lines */
.line { display: flex; gap: 0.8125rem; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: none; }
.line img { width: 4.875rem; height: 4.875rem; border-radius: var(--radius-sm); object-fit: cover;
            background: var(--green-050); flex: 0 0 auto; }
.line-main { flex: 1; min-width: 0; }
.line-name { font-size: 0.9062rem; font-weight: 600; margin: 0 0 0.1875rem;
             overflow-wrap: anywhere; }
.line-meta { font-size: 0.75rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.line-price { font-size: 0.9375rem; font-weight: 700; margin-top: 0.375rem;
              color: var(--green-800); font-variant-numeric: tabular-nums; }
.line-price .mrp { font-weight: 400; font-size: 0.75rem; color: var(--ink-soft);
                   text-decoration: line-through; margin-left: 0.4375rem; }

/* quantity stepper and Remove sit side by side, not stacked */
.qty-row { display: flex; align-items: center; gap: 0.875rem;
           flex-wrap: wrap; margin-top: 0.5625rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line);
       border-radius: 62.4375rem; background: var(--card); flex: 0 0 auto; }
.qty button { width: 2rem; height: 2rem; border: none; background: none;
              font-size: 1.0625rem; line-height: 1; color: var(--green-800);
              border-radius: 62.4375rem; }
.qty button:hover { background: var(--green-100); }
.qty span { min-width: 1.75rem; text-align: center; font-size: 0.875rem; font-weight: 600;
            font-variant-numeric: tabular-nums; }
/* inline "are you sure?" — no browser dialog, works in every context */
/* the same confirmation, used full width in the cart footer */
.confirm-block { margin-top: 0.75rem; }
.confirm-block .confirm-actions .confirm-yes,
.confirm-block .confirm-actions .confirm-no { flex: 1; min-height: 2.75rem; }

.confirm-row { margin-top: 0.5625rem; padding: 0.625rem 0.75rem;
               background: #FCEFEE; border: 1px solid #F0D4D1;
               border-radius: var(--radius-sm); }
.confirm-q { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600;
             color: #7A1C16; }
.confirm-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.confirm-yes, .confirm-no {
  padding: 0.4375rem 0.75rem; border-radius: 0.4375rem;
  font-size: 0.8125rem; font-weight: 600; min-height: 2rem;
}
.confirm-yes { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.confirm-yes:hover { background: #8F1E17; }
.confirm-no { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.confirm-no:hover { border-color: var(--green-700); color: var(--green-800); }

.remove-btn { background: none; border: none; color: var(--danger);
              font-size: 0.75rem; padding: 0.25rem 0; text-decoration: underline;
              flex: 0 0 auto; }

.totals { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.totals .row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.totals .row.grand { font-size: 1.1875rem; font-weight: 700; padding-top: 0.625rem;
                     margin-top: 0.5rem; border-top: 1px solid var(--line);
                     color: var(--green-800); }
.totals .saved { color: var(--green-600); font-weight: 600; }

.note { font-size: 0.7812rem; color: var(--ink-soft); margin: 0.625rem 0 0; line-height: 1.55; }

/* ============ FORMS ============ */

.field { margin-bottom: 0.875rem; }
.field label { display: block; font-size: 0.75rem; font-weight: 600;
               color: var(--ink-soft); margin-bottom: 0.375rem; }
.field .req { color: var(--danger); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.8125rem; font-size: 0.9375rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}
.field textarea { min-height: 5rem; resize: vertical; }
.field .hint { font-size: 0.7188rem; color: var(--ink-soft); margin-top: 0.3125rem; }
.field .err  { font-size: 0.75rem; color: var(--danger); margin-top: 0.3125rem; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }

/* ============ ORDER CONFIRMATION ============ */

.sent { text-align: center; padding: 0.5rem 0 1.5rem; }
.sent-mark {
  width: 3.75rem; height: 3.75rem; margin: 0.5rem auto 1.125rem; border-radius: 50%;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
}
.sent-mark svg { width: 1.75rem; height: 1.75rem; }
.sent h3 { margin: 0 0 0.625rem; font-size: 1.5rem; color: var(--green-800); }
.sent .note { margin: 0 auto 1.25rem; max-width: 34em; }
.sent .btn { width: 100%; }
.sent details { text-align: left; }
.sent summary { cursor: pointer; font-size: 0.8125rem; color: var(--ink-soft); padding: 0.5625rem 0; }
.sent pre {
  white-space: pre-wrap; word-break: break-word; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.8125rem; font-size: 0.75rem; line-height: 1.55; margin: 0.375rem 0 0;
  max-height: 16.25rem; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ PRODUCT MODAL ============ */

.modal { position: fixed; inset: 0; z-index: 60; display: none;
         align-items: flex-end; justify-content: center; }
.modal.open { display: flex; }
.modal-card {
  background: var(--cream); width: 100%; max-width: 56.25rem;
  max-height: 94vh; overflow-y: auto;
  border-radius: 1.25rem 1.25rem 0 0; box-shadow: var(--shadow-lg);
}
/* phone only: the sheet sits below the header, so size it to the space that is left */
@media (max-width: 759px) { .modal-card { max-height: 98%; } }
.modal-head { position: sticky; top: 0; z-index: 2;
              background: var(--green-900); color: var(--on-green);
              display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; }
.modal-head h2 { margin: 0; flex: 1; min-width: 0; font-size: 1.3125rem; color: #fff;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-head .close-btn {
  background: rgba(255,255,255,.1); border-color: rgba(220,190,106,.3); color: var(--on-green);
}
.modal-body { padding: 1.125rem; padding-bottom: max(1.375rem, env(safe-area-inset-bottom));
              overflow-x: hidden; }
.modal-body h3 { overflow-wrap: anywhere; }
.modal-card { overflow-x: hidden; }

/* breathing room between the photo and the details beneath it on phones */
.modal-grid > div + div { margin-top: 1.25rem; }
/* photo carousel: native swipe via scroll-snap; arrows, dots and keys on top */
.carousel { position: relative; border-radius: var(--radius); overflow: hidden;
            background: var(--green-050); }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
             scrollbar-width: none; -webkit-overflow-scrolling: touch;
             overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; width: 100%; aspect-ratio: 1/1; object-fit: cover;
             scroll-snap-align: center; scroll-snap-stop: always; user-select: none;
             -webkit-user-drag: none; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem;
           border-radius: 50%; border: none; background: rgba(255,255,255,.88); color: var(--green-900);
           font-size: 1.625rem; line-height: 1; padding: 0 0 0.2rem; box-shadow: var(--shadow-sm); }
.car-btn:hover { background: #fff; }
.car-btn.prev { left: 0.5rem; } .car-btn.next { right: 0.5rem; }
.car-dots { position: absolute; left: 0; right: 0; bottom: 0.625rem; display: flex;
            justify-content: center; gap: 0.5rem; }
.car-dot { width: 0.625rem; height: 0.625rem; padding: 0; border-radius: 50%;
           border: 1px solid rgba(255,255,255,.9); background: rgba(0,0,0,.35); }
.car-dot.on { background: var(--gold-500); border-color: var(--gold-500); transform: scale(1.2); }
.modal-price { display: flex; align-items: baseline; gap: 0.6875rem; flex-wrap: wrap;
               margin: 1rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.modal-price .net { font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2rem);
                    font-weight: 700; color: var(--green-800); }
.modal-price .mrp { font-size: 1rem; color: var(--ink-soft); text-decoration: line-through; }
.modal-price .off { font-size: 0.875rem; font-weight: 700; color: var(--green-600);
                    background: var(--green-100); padding: 0.25rem 0.625rem;
                    border-radius: 0.375rem; }
.spec { display: flex; gap: 0.625rem; font-size: 0.8438rem; padding: 0.5625rem 0;
        border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-soft); min-width: 6.5rem; }
.spec dd { margin: 0; font-variant-numeric: tabular-nums; }
.qr-block { margin-top: 1rem; text-align: center; }
.qr-block img { width: 8.5rem; height: 8.5rem; margin: 0 auto; border-radius: 0.5rem;
                border: 1px solid var(--line); background: var(--card); padding: 0.4375rem; }

/* ============ FOOTER ============ */

.site-footer {
  background: radial-gradient(ellipse at 22% 40%, var(--green-700) 0%, var(--green-800) 50%, var(--green-900) 100%);
  color: var(--on-green-dim); margin-top: 2.5rem;
  /* bottom: 2.25rem + 3/4 of the place-order button's height (3.25rem) */
  padding: 2.25rem var(--gutter) calc(max(2.25rem, env(safe-area-inset-bottom)) + 2.44rem);
  font-size: 0.875rem; line-height: 1.55;
  border-top: 2px solid var(--gold-500);
}
.site-footer .wrap { padding: 0; max-width: 68rem; }
.site-footer strong { color: var(--on-green); font-weight: 600; }

/* phone: logo, how to order, get in touch, note */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; align-items: start; }
.footer-center { order: -1; }
.footer-logo { width: min(15rem, 68vw); height: auto; margin: 0 auto; display: block; }

.site-footer h4 { margin: 0 0 0.75rem; font-family: "Cormorant Garamond", Georgia, serif;
                  font-size: 1.375rem; font-weight: 600; line-height: 1.1;
                  color: var(--gold-400); letter-spacing: .03em; }
.site-footer h4::after { content: ""; display: block; width: 1.75rem; height: 1px;
                         background: var(--gold-500); margin: 0.5rem 0 0; }

.footer-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem;
                max-width: 21rem; text-align: left; }
.footer-steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer-steps li span { flex: 0 0 1.375rem; height: 1.375rem; border-radius: 50%; margin-top: 0.1rem;
                        background: var(--gold-500); color: var(--green-900); font-weight: 700;
                        font-size: 0.6875rem; display: flex; align-items: center; justify-content: center; }

.footer-side p { margin: 0 0 0.75rem; }
.footer-link { display: flex; gap: 0.625rem; align-items: flex-start; justify-content: flex-start;
               margin: 0.875rem 0 0; text-align: left; text-decoration: none; color: inherit; }
.footer-link svg { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; color: var(--gold-400); margin-top: 0.15rem; }
.footer-link:hover strong, .footer-link:focus-visible strong { color: var(--gold-400); }
.footer-link:hover { text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }


/* tablet and desktop: the logo is centred in all the space to the left of the text */
@media (min-width: 48rem) {
  .site-footer .wrap { max-width: none; }
  .footer-grid { grid-template-columns: 1fr minmax(12rem, 16rem) minmax(12rem, 16rem); gap: 1.5rem 2.5rem;
                 text-align: left; align-items: center; }
  .footer-center { grid-column: 1; grid-row: 1; order: 0; }
  .footer-left   { grid-column: 2; grid-row: 1; }
  .footer-right  { grid-column: 3; grid-row: 1; }
  .footer-logo   { width: 100%; max-width: 19rem; margin: 0 auto; }
  .footer-steps  { max-width: none; }
}
@media (min-width: 64rem) {
  .footer-grid { grid-template-columns: 1fr minmax(14rem, 17rem) minmax(14rem, 17rem); gap: 1.5rem 3rem; }
  .footer-logo { max-width: 23rem; }
}
@media (min-width: 80rem) {
  /* wide screens: logo area plus two equal text columns that share the rest, so the gap
     between the texts grows and the right edge isn't left empty */
  .footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr; column-gap: 4rem; }
  .footer-left, .footer-right { max-width: 24rem; }
  .footer-right { justify-self: center; }
}

/* ============ FLOATING PLACE-ORDER BUTTON ============ */

.order-fab {
  position: fixed; z-index: 45;
  right: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1.25rem; border-radius: 62.4375rem;
  background: var(--wa); color: #fff;
  border: 1px solid var(--wa-dark);
  font-size: 0.9375rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(11,52,38,.3);
  font-variant-numeric: tabular-nums;
  transition: background .15s, transform .15s;
}
.order-fab:hover { background: var(--wa-dark); transform: translateY(-1px); }
.order-fab svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }

/* out of the way whenever a drawer, sheet or the details view is open */
body.no-scroll .order-fab { display: none !important; }

/* room under the catalogue so the button never sits on the last card */
body.has-fab main { padding-bottom: 4.5rem; }

/* ============ TOAST ============ */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1.125rem);
  background: var(--green-900); color: var(--on-green);
  border: 1px solid var(--gold-600);
  padding: 0.75rem 1.25rem; border-radius: 62.4375rem;
  font-size: 0.875rem; opacity: 0; pointer-events: none; transition: all .22s; z-index: 80;
  max-width: calc(100vw - 2rem); text-align: center; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-fab .toast { bottom: 5.25rem; }

/* ============ BREAKPOINTS ============ */

/* ============ PHONE: HORIZONTAL CARD ============
   One column on phones, so the card turns on its side: photo left,
   details right. A vertical card with a full-width square photo is
   ~555px tall and shows one product per screen; this is ~190px and
   shows three or four, which is how people actually scan a catalogue
   on a phone. The 2/3/4-column grids keep the upright card. */
@media (max-width: 539px) {
  .grid { gap: 1.25rem; }

  .card { flex-direction: row; align-items: stretch; }

  .card-media {
    flex: 0 0 42%;
    aspect-ratio: auto;        /* panel takes its height from the card */
    max-height: none;
    min-height: 8.75rem;
    border-right: 1px solid var(--line);
  }

  .card-body {
    flex: 1 1 auto; min-width: 0;
    padding: 0.875rem 1rem;
    gap: 0.375rem;
  }

  /* the discount moves out of the text column and onto the photo,
     where it is bigger and reads at a glance */
  .badge { top: 0.5rem; left: 0.5rem; font-size: 0.8125rem; font-weight: 800;
           padding: 0.375rem 0.6875rem; border-radius: 0.4375rem;
           box-shadow: 0 2px 8px rgba(11,52,38,.3); }
  .oos-veil span { font-size: 0.625rem; padding: 0.375rem 0.625rem; }

  .card-name { font-size: 0.9375rem; }

  /* one line, always: the pill was what pushed the price onto a
     second line on longer amounts and made cards different heights */
  .price { gap: 0.375rem; flex-wrap: nowrap; }
  .price .off { display: none; }
  .pl-mrp     { display: none; }   /* MRP is already struck out above */
  .price .net { font-size: 1.1875rem; }
  .price .mrp { font-size: 0.8125rem; }

  /* content flows from the top, like a list row — no auto gap */
  .price { margin-top: 0.1875rem; }

  .card-actions { gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; }
  .card-actions .btn { font-size: 0.75rem; padding: 0.5rem 0.375rem;
                       letter-spacing: -.01em;
                       min-height: 2.75rem; }   /* 44px tap target */

  /* narrow phones: give the text column back the width that the roomier
     padding took, so the button labels stay on one line */
  @media (max-width: 389px) {
    .card-media { flex-basis: 38%; }
    .card-body { padding: 0.8125rem 0.875rem; }
    .card-actions .btn { font-size: 0.6875rem; padding-inline: 0.25rem; }
  }
}

/* large phones — 2 per row */
@media (min-width: 540px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
}

/* tablet — 3 per row, category rail appears, search goes inline */
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; }

  .on-phone { display: none !important; }
  .on-phone-block { display: none !important; }

  .header-bar { min-height: 6rem; padding: 0.75rem var(--gutter); gap: 0.75rem; }
  .search-wrap { order: 2; flex-basis: auto; flex: 1 1 12rem;
                 max-width: 26rem; display: block; padding-bottom: 0; }
  .icon-btn { width: 2.625rem; height: 2.625rem; }
  .brand-logo { height: 5rem; }

  .chips-strip {
    display: block; background: var(--green-800);
    padding: 0.625rem var(--gutter);
  }
  .chips-strip .chips { max-width: var(--max); margin: 0 auto; }

  /* the sheet becomes a right-hand drawer */
  .filter-panel {
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(24rem, 100%); max-height: none;
    border-radius: 0; transform: translateX(101%);
  }
  .filter-panel.open { transform: translateX(0); }
  @media (prefers-reduced-motion: no-preference) { .filter-panel { will-change: transform; } }
  .sheet-grip { display: none; }

  .modal { align-items: center; }
  .modal-card { border-radius: 1.25rem; }
  .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  .modal-grid > div + div { margin-top: 0; }
}

@media (min-width: 860px) {
  body { font-size: 1rem; }
}

/* desktop — 4 per row, roomier cards */
@media (min-width: 1160px) {
  /* more margin on big screens so the catalogue sits on the page
     rather than running into its edges */
  :root { --gutter: clamp(1.75rem, 2.6vw, 2.75rem); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .card-body { padding: 1.0625rem 1.125rem 1.125rem; }
  .card-name { font-size: 1rem; }
  .price .net { font-size: 1.375rem; }
}

/* SHORT SCREENS — landscape phones, very short windows.
   Width-based rules alone can't see that a 390px-tall screen has no room
   for a 130px header. Here the category rail folds back into the sheet and
   the chrome shrinks, so a whole product card still fits on screen. */
@media (max-height: 38rem) {
  .chips-strip { display: none !important; }
  .on-phone-block { display: block !important; }
  .header-bar { min-height: 3.25rem; padding-block: 0.375rem; }
  .brand-logo { height: 2.5rem; }
  .card-media { max-height: 27vh; max-height: 27svh; }
  .card-body { padding: 0.75rem 0.875rem 0.875rem; gap: 0.3125rem; }
  .results-head { padding: 1rem 0 0.75rem; }
  .filter-panel { max-height: 92vh; max-height: 92svh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Optional line at the very top of the site, set from the shop's billing app */
.site-banner { background: var(--gold-100, #F6EBCD); color: #5C4410; text-align: center; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; }