/* Deliberately plain and short. You are better at CSS than any scaffold I can
   guess at, so this is structure and tokens only. Change the custom properties
   and the whole store follows. */

:root {
  --ink:        #1a1a1a;
  --ink-soft:   #6b6b6b;
  --line:       #e2e2e2;
  --bg:         #ffffff;
  --bg-soft:    #f7f7f5;
  --accent:     #2f5d50;
  --accent-ink: #ffffff;
  --measure:    68ch;
  --gap:        1.5rem;
  --radius:     3px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: static; width: auto; height: auto; clip: auto;
  display: inline-block; padding: .5rem 1rem; background: var(--accent); color: var(--accent-ink);
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 720px; }
.pad { padding-block: 2.5rem 4rem; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.site-head nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-head nav a { text-decoration: none; color: var(--ink-soft); font-size: .95rem; }
.site-head nav a:hover { color: var(--ink); }
.head-right { display: flex; align-items: center; gap: 1rem; }

/* Hamburger. Three bars from one element and its two pseudo-elements, which
   folds into a cross when open — no icon font, no second asset to load. */
.navtoggle {
  width: 44px; height: 44px;          /* full touch target, not just the glyph */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; padding: 0;
}
.bars { position: relative; }
.bars, .bars::before, .bars::after {
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .18s ease, top .18s ease, background-color .18s ease;
}
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after  { top: 6px; }
[aria-expanded="true"] .bars { background: transparent; }
[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .bars::after  { top: 0; transform: rotate(-45deg); }

/* The collapse is scoped to html.js, so without JavaScript the links stay
   visible rather than becoming unreachable behind a button that does nothing. */
@media (max-width: 799px) {
  .navtoggle { display: inline-flex; }
  .js #catnav { display: none; }
  .js #catnav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .9rem; width: 100%; padding-block: .75rem .25rem;
    border-top: 1px solid var(--line);
  }
  .js #catnav.open a { font-size: 1.05rem; padding-block: .2rem; }
}
.badge {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 0 .45rem; font-size: .78rem;
}

/* Headings */
.page-h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.2; margin: 0 0 1.5rem; letter-spacing: -.02em; }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs span { margin: 0 .35rem; }

/* Grid */
.cat-block { margin-bottom: 3rem; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: 1.25rem; }
.cat-head h2 { margin: 0; font-size: 1.15rem; }
.cat-head h2 a { color: var(--ink); text-decoration: none; }
.count { color: var(--ink-soft); font-size: .85rem; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.card a { text-decoration: none; color: inherit; }
.card-img { position: relative; background: var(--bg-soft); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-size: .95rem; font-weight: 500; margin: .7rem 0 .25rem; }

/* The card heading holds three runs: the name in Latin letters, the same name
   in its own script, and the English one people search for. Each is a block so
   they stack, and weight and colour carry the hierarchy rather than size alone
   — at 200px wide there is no room for a size ramp across three lines. */
.card-title > span { display: block; }
.ct-native {
  font-weight: 400;
  /* Indic scripts sit shorter than Latin at the same size and their vowel
     signs need headroom above and below, so this is bumped and given more
     leading. Drop it back to 1em and the marks clip on Android. */
  font-size: 1.05em;
  line-height: 1.4;
  margin-top: .1rem;
  font-family: "Noto Sans Kannada", "Noto Sans Tamil", "Noto Sans Telugu",
               "Noto Sans Malayalam", "Noto Sans Devanagari", "Tunga",
               "Nirmala UI", "Kannada Sangam MN", system-ui, sans-serif;
}
.ct-en { font-weight: 400; font-size: .8em; color: var(--ink-soft); margin-top: .1rem; }
.flag {
  position: absolute; inset-inline-end: .5rem; inset-block-end: .5rem;
  background: var(--ink); color: #fff; font-size: .72rem; padding: .15rem .5rem; border-radius: var(--radius);
}
.price { margin: 0; font-size: .95rem; }
.price.big { font-size: 1.4rem; margin: .5rem 0 .2rem; }
.now { color: var(--accent); font-weight: 600; }
.was { color: var(--ink-soft); margin-inline-start: .5rem; font-weight: 400; }

/* Product page */
.product { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .navtoggle { display: none; }
  #catnav { order: 2; width: auto; }
  .head-right { order: 3; }

  .product { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .detail { grid-column: 1 / -1; max-width: var(--measure); }
}
.gallery { display: grid; gap: .75rem; }
.gallery img { border-radius: var(--radius); background: var(--bg-soft); }
.buy h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.02em; }
.taxline, .stockline, .sku { color: var(--ink-soft); font-size: .85rem; }
.summary { max-width: var(--measure); }
.variants h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.variants ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.variants li { border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .7rem; font-size: .9rem; }
.current { font-weight: 600; }
.muted { color: var(--ink-soft); font-size: .8rem; margin-inline-start: .35rem; }

.addform { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 .5rem; }
.addform label { display: block; font-size: .85rem; color: var(--ink-soft); }
input[type="number"] { width: 5rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
button {
  font: inherit; cursor: pointer; padding: .55rem 1.1rem;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius);
}
button:hover { opacity: .9; }
.linkbtn { background: none; border: none; color: var(--ink-soft); padding: 0; text-decoration: underline; }
.primary { padding: .75rem 1.6rem; font-size: 1.05rem; }
.soldout { background: var(--bg-soft); padding: 1rem; border-radius: var(--radius); }

.specs { border-collapse: collapse; width: 100%; max-width: var(--measure); }
.specs th, .specs td { text-align: start; padding: .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 34%; font-weight: 500; color: var(--ink-soft); }

/* Cart */
.cart { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.cart th, .cart td { text-align: start; padding: .75rem .5rem; border-bottom: 1px solid var(--line); }
.cart tfoot th, .cart tfoot td { border-bottom: none; padding-top: 1rem; }
.qtyform { display: flex; gap: .4rem; }
.qtyform button { padding: .4rem .7rem; font-size: .85rem; }
.notice { background: var(--bg-soft); border-inline-start: 3px solid var(--accent); padding: .75rem 1rem; border-radius: var(--radius); }
.shipnote { color: var(--ink-soft); font-size: .9rem; }

/* Checkout and the way back out, on one row. The link is deliberately quiet —
   it is the escape hatch, not the thing you want people clicking. */
.cart-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.cart-actions form { margin: 0; }
.keep-shopping { color: var(--ink-soft); font-size: .95rem; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-soft); padding-block: 2.5rem 1.5rem; margin-top: 4rem; }
.foot-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 .6rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .35rem; font-size: .93rem; }
.fine { color: var(--ink-soft); font-size: .82rem; margin-top: 2rem; }

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

/* Plant-specific blocks */
.names { color: var(--ink-soft); font-size: .9rem; margin: .4rem 0 1rem; }
.names em { font-style: italic; }
.quickfacts { list-style: none; padding: 0; margin: 1.25rem 0; border-top: 1px solid var(--line); }
.quickfacts li { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.quickfacts li span { flex: 0 0 8.5rem; color: var(--ink-soft); }
.dispatch { color: var(--ink-soft); font-size: .85rem; background: var(--bg-soft); padding: .6rem .8rem; border-radius: var(--radius); max-width: var(--measure); }

/* Yield — the promise, so it sits directly under the price */
.yieldline {
  margin: .35rem 0 1rem; padding: .55rem .75rem;
  background: var(--bg-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius); font-size: .95rem;
}
.yieldline span { font-weight: 700; margin-right: .4rem; }
.card-yield { margin: .15rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.flag.soft { background: var(--accent); color: var(--accent-ink); }
.notice.warn { border-left: 3px solid #a33; background: #fdf3f3; padding: .75rem; }
button[disabled] { opacity: .45; cursor: not-allowed; }