/* Tealife US storefront — shared styles
   Palette matches the Tealife brand identity (japanesetea.sg): olive + cream, airy/minimal. */

/* Self-hosted fonts (AUD-039) — latin subset, woff2. Both families ship as a single
   variable woff2 covering their weight range, so each weight below points at the same
   per-family file (Google serves byte-identical latin woff2 across the requested weights).
   font-display: swap keeps text visible during load. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/storefront/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/storefront/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/storefront/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/storefront/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/storefront/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/storefront/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --olive: #5E6146;
  --olive-dark: #535540;
  --grey-light: #E6E8E6;
  --cream: #ECE4B7;
  --pink: #EF476F;
  --surface: #ffffff;
  --bg: #F9F9F7;
  --border: #E0E0DC;
  --text: #2C2C2A;
  --muted: #6B6B65;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

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

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ── Nav — white, logo centered, cart top-right ── */
/* AUD-147 — sticky nav stack: pins the logo nav (.nav) + the category nav
   (.category-nav) together at the top of the viewport as ONE unit, so both stay
   visible while scrolling. A shared sticky wrapper (rather than a per-element
   `top` offset on .category-nav) avoids hardcoding the logo-bar's pixel height —
   that height mixes rem padding with a px logo image + px border and would
   otherwise drift on font-size/logo changes, leaving a gap or overlap. z-index 20
   keeps the whole stack above scrolling page content. */
.nav-stack {
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-logo img {
  height: 90px;
  width: auto;
}
.cart-link {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}
.cart-link:hover { color: var(--olive); }
.cart-badge {
  background: var(--olive);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-badge.hidden { display: none; }

/* ── Category nav (AUD-144; made sticky in AUD-147) — secondary link row below
   the logo nav. It is NOT independently sticky: it is pinned together with .nav
   via the shared sticky .nav-stack wrapper (reverses the v0.6.58 "not sticky"
   decision — users were losing track of category navigation once it scrolled off).
   Flat row of links — adding a 4th <a> later just works (flex + wrap). ── */
.category-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.category-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.category-nav a {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.category-nav a:hover { color: var(--olive); }

/* ── Announcement bar ── */
.announce-bar {
  background: var(--olive);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* ── Homepage hero (AUD-191/192) — server-rendered in index.html directly
   (see the comment there for why it's static markup, not buildHomeBody()).
   No image by design: mobile LCP was brought from 13.7s to ~3.3s partly by
   removing weight from the top of the page, and a background/decorative
   image here would undo that. Kept short vertically — height, font sizes
   and margins are all fixed values (no dynamic content that could resize
   it after paint), so it can't contribute to layout shift and doesn't push
   the product grid far down the page on mobile. */
.home-hero { padding: 1.5rem 0 0.25rem; }
.home-hero h1 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.55rem;
}
.home-hero p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
.home-hero-trust { margin-top: 0; font-weight: 500; color: var(--olive-dark); }

/* ── Section heading ── */
.section-head {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2rem 0 1.25rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* ── Breadcrumb ── */
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.75rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--olive); text-decoration: underline; }
.breadcrumb .sep { margin: 0 0.4rem; }

/* ── Product grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  padding-bottom: 3rem;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  color: var(--text);
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(83,85,64,0.10);
}
.product-card-img {
  aspect-ratio: 1;
  background: var(--grey-light);
  overflow: hidden;
  position: relative;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.product-card:hover .product-card-img img { transform: scale(1.03); }
.product-card-body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.product-card-origin {
  font-size: 0.75rem;
  color: var(--olive);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.3rem 0 0.5rem;
}
.product-card-desc {
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.product-card-price {
  font-weight: 600;
  color: var(--olive-dark);
  font-size: 1rem;
  margin-top: auto;
  margin-bottom: 0.85rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--olive);
  background: var(--olive);
  color: #fff;
  transition: background 0.15s, opacity 0.15s;
  letter-spacing: 0.02em;
}
.btn:hover { background: var(--olive-dark); border-color: var(--olive-dark); }
.btn-block { width: 100%; }
.btn-outline {
  background: transparent;
  color: var(--olive);
}
.btn-outline:hover { background: rgba(94,97,70,0.06); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

/* ── Product detail ── */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 2.5rem 0; }
.gallery-main { aspect-ratio: 1; background: var(--grey-light); border-radius: 10px; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.gallery-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--grey-light); }
.gallery-thumb.active { border-color: var(--olive); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-title { font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.origin-badge { display: inline-block; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--olive); background: rgba(94,97,70,0.1); padding: 0.25rem 0.7rem; border-radius: 20px; margin: 0.6rem 0; }
.product-short { color: var(--muted); margin-bottom: 1.5rem; }
.product-price { font-size: 1.6rem; font-weight: 600; color: var(--olive-dark); margin-bottom: 1.25rem; }
.product-price .compare { font-size: 1rem; color: var(--muted); text-decoration: line-through; margin-left: 0.5rem; font-weight: 400; }

.variant-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.5rem; }
.variant-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.variant-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.15s;
}
.variant-pill .pill-price { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.variant-pill.active { border-color: var(--olive); background: rgba(94,97,70,0.05); box-shadow: 0 0 0 1px var(--olive) inset; }
.variant-pill.disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }

.qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.qty-row label { font-size: 0.9rem; color: var(--muted); }
.qty-select { padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.95rem; background: var(--surface); }

.add-confirm { color: var(--olive); font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; min-height: 1.2em; }

.trust-signals { margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; }

.collapsible { border-top: 1px solid var(--border); margin-top: 2rem; }
.collapsible summary { cursor: pointer; font-weight: 600; padding: 1.25rem 0; list-style: none; font-size: 1.05rem; }
.collapsible summary::after { content: '＋'; float: right; color: var(--muted); }
.collapsible[open] summary::after { content: '－'; }
.collapsible .collapsible-body { padding-bottom: 1.5rem; color: var(--muted); }

/* ── Cart ── */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; padding: 2.5rem 0; align-items: start; }
.cart-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem; margin-bottom: 0.85rem; }
.cart-item-img { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--grey-light); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.15; }
.cart-item-size { font-size: 0.82rem; color: var(--muted); }
.cart-item-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.cart-item-controls select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; }
.cart-remove { background: none; border: none; color: var(--pink); font-size: 0.82rem; cursor: pointer; padding: 0; }
.cart-item-total { font-weight: 600; color: var(--olive-dark); white-space: nowrap; }

.cart-summary { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; position: sticky; top: 90px; }
.cart-summary h3 { font-family: var(--display); font-size: 1.5rem; margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.95rem; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.85rem; font-weight: 700; font-size: 1.15rem; }
.summary-muted { color: var(--muted); }

.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state p { color: var(--muted); margin-bottom: 1.5rem; }

.back-link { display: inline-block; color: var(--muted); font-size: 0.9rem; margin: 1.5rem 0 0; }
.back-link:hover { color: var(--olive); }

/* ── Footer ── */
.footer { background: var(--olive-dark); color: rgba(255,255,255,0.7); padding: 2.5rem 1.25rem; margin-top: 3rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.footer-links a { margin-left: 1.25rem; color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: #fff; }

/* ── Loading / state ── */
.loading { text-align: center; padding: 3rem; color: var(--muted); }

/* ── Responsive ── */
@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .nav-logo img { height: 70px; }
  /* AUD-191/192 — keep the homepage hero compact on phones so the product
     grid stays reachable near the top of the page without much scrolling. */
  .home-hero { padding: 1.1rem 0 0.15rem; }
  .home-hero h1 { font-size: 1.5rem; }
  .home-hero p { font-size: 0.88rem; margin-bottom: 0.6rem; }
  .home-hero-trust { font-size: 0.78rem; }
  /* AUD-147 — now that the category row is sticky/pinned, keep it to a SINGLE line
     at mobile widths (no wrap to 2 lines, which would make the pinned header eat a
     big fixed chunk of a small viewport). If the 3 links don't fit, scroll
     horizontally instead — keeps the sticky row's height predictable. */
  .category-nav-inner { gap: 1.25rem; padding: 0.6rem 1rem; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
}

/* ── Auth pages ── */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 420px;
}
.auth-title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.auth-sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
.form-group {
  margin-bottom: 1.1rem;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--olive);
}
.form-helper {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
}
.form-check input[type=checkbox] {
  margin-top: 2px;
  accent-color: var(--olive);
  flex-shrink: 0;
}
.auth-error {
  background: rgba(239,71,111,0.08);
  color: var(--pink);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  display: none;
}
.auth-error.visible { display: block; }
.auth-success {
  background: rgba(94,97,70,0.08);
  color: var(--olive-dark);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  display: none;
}
.auth-success.visible { display: block; }
.auth-links {
  margin-top: 1.25rem;
  font-size: 0.87rem;
  color: var(--muted);
  text-align: center;
}
.auth-links a { color: var(--olive); font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }

/* ── Account page ── */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  padding: 2.5rem 0 3rem;
  align-items: start;
}
.account-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  position: sticky;
  top: 100px;
}
.account-name {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.account-email {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  word-break: break-all;
}
.account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.account-tab {
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.account-tab.active {
  color: var(--olive);
  border-bottom-color: var(--olive);
}
.account-tab-panel { display: none; }
.account-tab-panel.active { display: block; }
.order-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.order-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.order-ref { font-weight: 600; font-family: var(--display); font-size: 1.1rem; }
.order-date { font-size: 0.82rem; color: var(--muted); }
.order-total { font-weight: 600; color: var(--olive-dark); }
.order-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-paid { background: rgba(94,97,70,0.12); color: var(--olive-dark); }
.status-shipped { background: rgba(45,106,79,0.12); color: #2D6A4F; }
.status-cancelled { background: rgba(239,71,111,0.1); color: var(--pink); }
.order-items-detail {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: none;
  font-size: 0.88rem;
  color: var(--muted);
}
.order-items-detail.open { display: block; }
.address-display {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--olive-dark);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Nav account link ── */
.nav-account {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-account:hover { color: var(--olive); }

/* ── Account responsive ── */
@media (max-width: 760px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Cart badge bounce animation ── */
@keyframes cartBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-badge.cart-bounce {
  animation: cartBounce 0.4s ease;
}

/* ── Image lightbox ── */
.gallery-main { cursor: zoom-in; }
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 200;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }

/* ── Product search + filter bar ── */
.shop-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.shop-search {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.shop-search:focus { border-color: var(--olive); }
.shop-search::placeholder { color: var(--muted); }
.shop-brand-select {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 160px;
}
.shop-brand-select:focus { border-color: var(--olive); }
.shop-results-count {
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Trust badges ── */
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.3;
}
.trust-badge-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.trust-badge strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Reviews ── */
.reviews-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.reviews-section h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.reviews-avg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.stars {
  color: #C9A84C;
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.85rem;
}
.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.review-author {
  font-weight: 600;
  font-size: 0.9rem;
}
.review-date {
  font-size: 0.78rem;
  color: var(--muted);
}
.review-body {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
}
.review-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}
.review-form h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.star-picker {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.star-picker button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #d1d5db;
  padding: 0;
  line-height: 1;
  transition: color 0.1s;
}
.star-picker button.selected,
.star-picker button.hovered {
  color: #C9A84C;
}
.review-form input,
.review-form textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  margin-bottom: 0.75rem;
  transition: border-color 0.15s;
}
.review-form input:focus,
.review-form textarea:focus { border-color: var(--olive); }
.review-form textarea { min-height: 90px; resize: vertical; }
.review-msg {
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 0.5rem;
}
.rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* —— Checkout spinner —— */
.checkout-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--muted);
}
.checkout-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--cream);
  border-top-color: var(--olive);
  border-radius: 50%;
  flex-shrink: 0;
  animation: checkoutSpin 0.8s linear infinite;
}
@keyframes checkoutSpin {
  to { transform: rotate(360deg); }
}

/* ── BTL footer subscribe box — constrained width (AUD-122) ── */
#footer-btl-form {
  max-width: 480px;
}

/* ── Add-to-cart drawer (AUD-123) ── */
.cart-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
}
.cart-drawer-overlay.open { display: block; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: #fff;
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  background: var(--olive);
  color: #fff;
  flex-shrink: 0;
}
.cart-drawer-header h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cart-drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
  padding: 0;
}
.cart-drawer-close:hover { opacity: 1; }

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.cart-drawer-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.cart-drawer-item-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--grey-light);
  flex-shrink: 0;
}
.cart-drawer-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-drawer-item-info {
  flex: 1;
  min-width: 0;
}
.cart-drawer-item-name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.cart-drawer-item-size {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.cart-drawer-item-qty {
  font-size: 0.82rem;
  color: var(--muted);
}
.cart-drawer-item-price {
  font-weight: 600;
  color: var(--olive-dark);
  font-size: 0.95rem;
  white-space: nowrap;
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.cart-drawer-subtotal strong {
  color: var(--text);
  font-size: 1rem;
}

.cart-drawer-footer {
  padding: 1rem 1.25rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cart-drawer-footer .btn {
  width: 100%;
  justify-content: center;
}
.cart-drawer-continue {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--body);
  padding: 0.25rem 0;
}
.cart-drawer-continue:hover { color: var(--olive); }

@media (max-width: 420px) {
  .cart-drawer { width: 100vw; }
}

/* Emergency banner */
.emergency-banner {
  width: 100%;
  background: #EF476F;
  color: #fff;
  text-align: center;
  padding: 10px 1.5rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.emergency-banner-text { flex: 1; }
.emergency-banner-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
  line-height: 1;
  flex-shrink: 0;
}
.emergency-banner-close:hover { opacity: 1; }

/* Vacation / closure banner (AUD-154) — separate strip below the announce bar */
.vacation-banner {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.9rem;
}
.vacation-banner p { margin: 0; }
.vacation-banner--active {
  background: #f59e0b;
  color: #1c1917;
  font-weight: 600;
}
.vacation-banner--preview {
  background: #fde68a;
  color: #78350f;
  font-weight: 500;
}

/* Singapore geo banner (AUD-160) */
.geo-banner {
  width: 100%;
  background: #e0f2fe;       /* sky-100 */
  color: #0c4a6e;            /* sky-900 */
  text-align: center;
  padding: 10px 40px 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  position: relative;
  line-height: 1.5;
}
.geo-banner a {
  color: #0369a1;            /* sky-700 */
  font-weight: 600;
  text-decoration: underline;
}
.geo-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #0c4a6e;
  opacity: 0.6;
  line-height: 1;
  padding: 4px;
}
.geo-banner-close:hover { opacity: 1; }