:root {
  /* ============================================================
   * Sinar Elektronik — brand color system
   * Centralized tokens. Rebrand the whole site by editing here.
   * ============================================================ */

  /* Brand */
  --primary: #C8102E;          /* Sinar red */
  --primary-dark: #A50D25;     /* burgundy / hover */
  --primary-light: #FDECEF;    /* red tint (subtle backgrounds) */

  /* Surfaces */
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-secondary: #F7F7F7;

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --border: #E5E5E5;

  /* Semantic */
  --success: #198754;
  --warning: #F59E0B;
  --danger: #DC2626;

  /* Elevation & shape */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --radius: 12px;
  --radius-sm: 8px;

  /* ---- Legacy aliases ----
   * The prior dark theme used these names throughout both stylesheets.
   * They now map onto the light palette so every existing rule re-themes
   * automatically without renaming selectors. */
  --bg: var(--background);
  --surface-2: var(--surface-secondary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --primary-hover: var(--primary-dark);
  --accent: var(--primary);   /* former teal accent → brand red */
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container { width: min(1180px, 92%); margin: 0 auto; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent;
  line-height: 1.2;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
/* Primary — red fill, white text */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-sm); }
/* Secondary — white with red border + red text */
.btn-secondary { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.btn-secondary:hover { background: var(--primary-light); }
/* Tertiary / ghost — transparent, dark text, red on hover */
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-primary); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-block { width: 100%; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem 0;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.25rem; color: var(--text-primary); }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--primary); color: #fff; font-size: 1rem; font-weight: 800;
  flex-shrink: 0;
}
/* When the mark holds the logo image, let it fill the round badge. */
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* An image-based mark doesn't need the red fill behind it. */
.brand-mark.has-img { background: transparent; }
.brand-name { letter-spacing: -.01em; }
.brand-name span { color: var(--primary); }

.search-wrap { position: relative; flex: 1; max-width: 520px; }
.search-input {
  width: 100%; padding: .7rem 1rem .7rem 2.6rem;
  background: var(--surface-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
.search-input::placeholder { color: var(--text-secondary); }
.search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); opacity: .6; }

.header-actions { margin-left: auto; }
.cart-btn {
  position: relative; display: flex; align-items: center; gap: .45rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary); padding: .6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.cart-btn:hover { border-color: var(--primary); color: var(--primary); }
.cart-count {
  background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* (The old static hero was replaced by the admin-managed banner carousel —
   see "Homepage: banner carousel" further down.) */

/* Catalog */
.catalog-section { padding: 2rem 0 4rem; }
.catalog-head { margin-bottom: 1.5rem; }
.catalog-head h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-primary); letter-spacing: -.01em; }
.catalog-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
  padding: .45rem 1rem; border-radius: 999px; font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: all .15s ease;
}
.filter-chip:hover { color: var(--primary); border-color: var(--primary); }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sort-select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  padding: .55rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem;
}
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: var(--shadow-lg); }
.card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.card-media {
  position: relative;
  /* Square frame. Product photos are square-ish or portrait far more often than
     landscape, and a 4/3 box left big empty margins beside them (a 0.9-ratio
     photo filled only ~67% of it). A 1:1 box lets the same photo fill ~90%
     without cropping anything out of the artwork. max-height stops the frame
     getting huge in a full-width single-column layout on phones; min-height is
     the fallback where aspect-ratio isn't supported. */
  aspect-ratio: 1 / 1; min-height: 150px; max-height: 320px;
  font-size: 3.4rem; display: grid; place-items: center;
  /* White, not grey: most supplier photos are shot on white, so whatever margin
     is left over blends into the frame instead of framing it in grey. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Never let an oversized image spill onto the card text (see below). */
  overflow: hidden;
}
.card.is-out .card-media { opacity: .6; filter: grayscale(.5); }
.stock-pill {
  position: absolute; top: .6rem; left: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .24rem .55rem; border-radius: var(--radius-sm); text-transform: uppercase;
}
.stock-pill.out { background: #fdecec; color: var(--danger); border: 1px solid #f7cccc; }
.stock-pill.low { background: #fff7e6; color: #b26a00; border: 1px solid #f5d99a; }
/* Discount / SALE badge (top-right) */
.sale-badge {
  position: absolute; top: .6rem; right: .6rem;
  background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .24rem .5rem; border-radius: var(--radius-sm); text-transform: uppercase;
}
.add-btn:disabled { opacity: .5; cursor: not-allowed; }
.add-btn:disabled:hover { background: var(--surface); border-color: var(--border); color: var(--primary); }
/* Sits above the (positioned) media box and is opaque, so card text can never
   be painted over by artwork again. */
.card-body {
  position: relative; z-index: 1; background: var(--surface);
  padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1;
}
.card-cat { color: var(--text-secondary); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
/* Product name: plain, always-visible text. It must never depend on :hover or a
   tap — there is no hover state on touch devices, so a reveal-on-hover name is
   invisible on mobile. The explicit values below are a guard against a future
   rule (or a stale cached stylesheet) hiding it again. */
.card-name {
  font-weight: 600; font-size: 1rem; color: var(--text-primary);
  opacity: 1; visibility: visible; overflow-wrap: anywhere;
}
.card:hover .card-name, .card:focus-within .card-name { opacity: 1; visibility: visible; }
.card-rating { color: var(--text-secondary); font-size: .85rem; }
/* The star itself is gold so the rating reads at a glance against grey text. */
.card-rating .star, .detail-rating .star { color: var(--warning); }
/* Price block — supports optional crossed-out original + red sale price */
.card-prices { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-original { color: var(--text-secondary); font-size: .9rem; text-decoration: line-through; }
.price-off { color: var(--primary); font-size: .78rem; font-weight: 700; }
.card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .7rem; }
.card-price { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.card-price.on-sale { color: var(--primary); }
.add-btn {
  background: var(--surface); border: 1px solid var(--primary); color: var(--primary);
  padding: .5rem .95rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .85rem; cursor: pointer;
  transition: all .15s ease;
}
.add-btn:hover { background: var(--primary); color: #fff; }

.empty-state { text-align: center; color: var(--text-secondary); padding: 3rem 0; font-size: 1.05rem; }
.grid-status { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 3rem 0; font-size: 1.05rem; }
.grid-status.error { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Cart drawer */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--surface); border-left: 1px solid var(--border); z-index: 60;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease;
  box-shadow: var(--shadow);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--border); }
.cart-header h3 { font-size: 1.2rem; }
.icon-btn { background: none; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; }
.icon-btn:hover { color: var(--primary); }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.cart-item { display: grid; grid-template-columns: 48px 1fr auto; gap: .8rem; align-items: center; }
.cart-item-media { font-size: 1.8rem; text-align: center; }
.cart-item-name { font-weight: 600; font-size: .95rem; }
.cart-item-price { color: var(--muted); font-size: .85rem; }
.qty { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.qty button { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; font-weight: 700; transition: all .15s ease; }
.qty button:hover { border-color: var(--primary); color: var(--primary); }
.qty span { min-width: 20px; text-align: center; font-size: .9rem; }
.remove-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: .8rem; }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.qty button:disabled:hover { border-color: var(--border); color: var(--text-primary); }
.qty-max-note { color: var(--warning); font-size: .72rem; margin-top: .3rem; }
.cart-footer { padding: 1.2rem 1.3rem; border-top: 1px solid var(--border); }
.cart-summary { margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; color: var(--muted); padding: .25rem 0; }
.summary-row span { color: var(--muted); }
.cart-total-row { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: 1.05rem; }
.cart-total-row span { color: var(--text); }
.cart-total-row strong { font-size: 1.35rem; color: var(--text); }

.btn:disabled { opacity: .5; cursor: not-allowed; }
.cart-drawer { box-shadow: var(--shadow-lg); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 2.5rem 0 1.5rem; background: var(--surface); }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-tag { color: var(--muted); margin-top: .4rem; font-size: .9rem; }
.footer-cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-cols h4 { font-size: .95rem; margin-bottom: .7rem; }
.footer-cols a { display: block; color: var(--muted); font-size: .88rem; padding: .18rem 0; }
.footer-cols a:hover { color: var(--primary); }
.footer-copy { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 2rem; }

/* Responsive */
@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; }
  .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .btn { width: 100%; }
}


/* ---- Product detail modal ---- */
.detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 70; }
.detail-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%);
  width: min(880px, 94%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  z-index: 80; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.detail-modal.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.detail-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-secondary);
  border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-secondary);
  transition: all .15s ease;
}
.detail-close:hover { color: var(--primary); border-color: var(--primary); }

.detail-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.8rem; padding: 1.8rem; }
.detail-media {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  /* Square panel: a portrait photo can't stretch the modal any more. */
  aspect-ratio: 1 / 1; min-height: 260px;
}
.detail-emoji { font-size: clamp(4rem, 14vw, 7rem); }

.detail-info { display: flex; flex-direction: column; }
.detail-brand { color: var(--text-secondary); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.detail-name { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: .35rem 0 .5rem; color: var(--text-primary); letter-spacing: -.01em; }
.detail-rating { color: var(--text-secondary); font-size: .95rem; }
.detail-prices { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: .6rem 0 .5rem; }
.detail-price { font-size: 2rem; font-weight: 800; color: var(--text-primary); }
.detail-price.on-sale { color: var(--primary); }
.detail-price-original { color: var(--text-secondary); font-size: 1.15rem; text-decoration: line-through; }
.detail-price-off { color: var(--primary); font-size: .85rem; font-weight: 700; background: var(--primary-light); padding: .2rem .5rem; border-radius: var(--radius-sm); }
.detail-stock { font-size: .9rem; font-weight: 600; }
.detail-stock.in { color: var(--success); }
.detail-stock.low { color: var(--warning); }
.detail-stock.out { color: var(--danger); }
.detail-desc { color: var(--text-secondary); margin: 1rem 0 1.3rem; line-height: 1.65; }

.detail-buy { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.detail-buy.is-out { opacity: .8; }
.detail-qty { margin-top: 0; }
.detail-qty button { width: 34px; height: 34px; font-size: 1.1rem; }
.detail-qty span { min-width: 28px; font-size: 1rem; }
.detail-buy .btn { flex: 1; padding: .75rem 1rem; }
.detail-buy .btn:disabled { opacity: .55; cursor: not-allowed; }

.detail-specs h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.detail-specs table { width: 100%; border-collapse: collapse; }
.detail-specs th, .detail-specs td {
  text-align: left; padding: .6rem .2rem; border-bottom: 1px solid var(--border); font-size: .92rem;
}
.detail-specs th { color: var(--muted); font-weight: 500; width: 42%; }
.detail-specs td { color: var(--text); }
.detail-specs tr:last-child th, .detail-specs tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  .detail-body { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.4rem; }
  .detail-media { min-height: 180px; }
}


/* ---- Checkout page ---- */
.checkout-steps { display: flex; align-items: center; gap: .5rem; margin: 0 auto; font-size: .85rem; }
.checkout-steps .step { color: var(--muted); }
.checkout-steps .step.active { color: var(--text); font-weight: 700; }
.checkout-steps .step.done { color: var(--accent); }
.checkout-steps .step-sep { color: var(--muted); }

.checkout-page { padding: 2.5rem 0 4rem; }
.checkout-title { font-size: 2rem; font-weight: 800; margin-bottom: 1.6rem; }

.empty-checkout { text-align: center; padding: 3rem 0; color: var(--muted); }
.empty-checkout p { margin-bottom: 1.2rem; font-size: 1.1rem; }

.checkout-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2rem; align-items: start; }

/* Form */
.checkout-form { display: flex; flex-direction: column; gap: 1.6rem; }
.form-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.form-section h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .85rem; color: var(--muted); font-weight: 500; }
.field input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* The delivery-area select matches the text inputs beside it. */
.field select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.field input.invalid, .field select.invalid { border-color: var(--danger); }
.field select:disabled { background: var(--surface-secondary); color: var(--text-secondary); }
.field-error { color: var(--danger); font-size: .78rem; min-height: .9rem; }
.field-hint { color: var(--text-secondary); font-size: .78rem; }

/* Jabodetabek-only coverage note, shown with the Delivery option. */
.delivery-note {
  margin-top: .9rem; background: var(--primary-light); border: 1px solid #f3c9d1;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem;
}
.delivery-note strong { font-size: .88rem; color: var(--primary); }
.delivery-note span { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }

.payment-mount { min-height: 40px; }
/* Payment info note (shown when no gateway is mounted). Quieter than
   .delivery-note above it — this is information, not a restriction. */
.payment-note {
  background: var(--surface-secondary); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem;
}
.payment-note p { color: var(--text-secondary); font-size: .88rem; line-height: 1.55; }
.payment-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.form-error-banner {
  background: #fdecec; border: 1px solid #f7cccc;
  color: var(--danger); padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9rem;
}
.btn-lg { padding: .95rem 1.2rem; font-size: 1.05rem; }

/* Order summary */
.order-summary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; position: sticky; top: 90px;
}
.order-summary h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.summary-items { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.1rem; }
/* Three columns (photo · details · line total) with the note input spanning the
   full width on a second row. */
.summary-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: .35rem .7rem; align-items: center;
}
.summary-item-info { display: flex; flex-direction: column; min-width: 0; }
.summary-item-name { font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.summary-item-qty { font-size: .8rem; color: var(--muted); }
/* Product photo, same contract as the cart drawer's thumbnail: absolutely
   positioned <img> so portrait shots aren't cropped. */
.summary-item-media {
  position: relative; overflow: hidden;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-secondary);
  display: grid; place-items: center;
}
.summary-item-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.summary-item-media .media-emoji { font-size: 1.4rem; }
.summary-totals { border-top: 1px solid var(--border); padding-top: 1rem; }
.summary-totals .summary-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .92rem; color: var(--muted); }
.summary-totals .summary-row.grand {
  color: var(--text); font-size: 1.1rem; margin-top: .5rem;
  padding-top: .8rem; border-top: 1px solid var(--border);
}
.summary-totals .grand strong { font-size: 1.4rem; }

/* Confirmation */
.confirmation { max-width: 560px; margin: 2rem auto; text-align: center; }
.confirm-check {
  width: 72px; height: 72px; margin: 0 auto 1.4rem; border-radius: 50%;
  background: #e8f6ee; border: 2px solid var(--success); color: var(--success);
  font-size: 2.2rem; display: grid; place-items: center;
}
.confirmation h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: .5rem; }
.confirm-sub { color: var(--muted); margin-bottom: 1.8rem; }
.confirm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; text-align: left; margin-bottom: 1.4rem;
}
.confirm-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.confirm-row:last-child { border-bottom: none; }
.confirm-row span { color: var(--muted); }
.confirm-row strong { text-align: right; }


@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; order: -1; }
  .checkout-steps { display: none; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}


/* ---- Product images (storefront) ----
 * Real uploaded photos come in any aspect ratio, so every media box pins its
 * image with `position: absolute; inset: 0`. That's the important bit: on a
 * centred grid item `height: 100%` resolves against an indefinite size and
 * degrades to `auto`, so a tall photo renders at full natural height, escapes
 * the box, and (because the box is positioned) paints straight over the card
 * text below it. Absolute positioning gives the image a definite height, which
 * is what makes object-fit actually do its job.
 * `contain` rather than `cover`: supplier images often have the product name,
 * badges or a logo inside the artwork, and cropping cuts them off. */
/* Edge to edge — no padding, so the photo uses the whole frame. `contain` keeps
   the entire artwork visible; switch this one word to `cover` if you'd rather
   crop to fill completely (that would cut the badges and model name out of
   supplier images like the Midea one). */
.card-media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.card-media .media-emoji { font-size: 3.4rem; }
.cart-item-media {
  position: relative; width: 48px; height: 48px; overflow: hidden;
  border-radius: var(--radius-sm); display: grid; place-items: center;
}
.cart-item-media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; border-radius: var(--radius-sm);
}
.cart-item-media .media-emoji { font-size: 1.8rem; }

/* Cart line item sale price */
.cart-item-sale { color: var(--primary); font-weight: 700; }
.cart-item-was { color: var(--text-secondary); text-decoration: line-through; font-size: .8rem; margin-left: .25rem; }

/* ---- Detail image gallery ---- */
.detail-gallery { display: flex; flex-direction: column; gap: .8rem; }
.detail-media > .detail-main-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: .5rem;
}
.detail-thumbs { display: flex; gap: .55rem; flex-wrap: wrap; }
.detail-thumb {
  width: 64px; height: 64px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-secondary); overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: border-color .15s ease;
}
.detail-thumb { position: relative; }
.detail-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-thumb .media-emoji { font-size: 1.6rem; }
.detail-thumb:hover { border-color: var(--primary); }
.detail-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

/* Checkout confirmation invoice actions */
.confirm-actions { display: flex; gap: .7rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }


/* ---- Live chat widget (storefront) ---- */
.chat-widget { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; }
.chat-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; transition: transform .15s ease, background .2s ease;
}
.chat-fab:hover { background: var(--primary-dark); transform: translateY(-2px); }
.chat-fab.active { background: var(--primary-dark); }
.chat-fab-icon { font-size: 1.5rem; line-height: 1; }

.chat-panel {
  position: absolute; right: 0; bottom: 70px;
  width: min(360px, calc(100vw - 2.8rem)); height: 460px; max-height: calc(100vh - 120px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; background: var(--primary); color: #fff;
}
.chat-head strong { display: block; font-size: .98rem; }
.chat-head-sub { font-size: .78rem; opacity: .85; }
.chat-close { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; opacity: .9; }
.chat-close:hover { opacity: 1; }

.chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-intro { padding: 1rem 1.1rem .3rem; color: var(--text-secondary); font-size: .9rem; }
.chat-start { display: flex; flex-direction: column; gap: .6rem; padding: .6rem 1.1rem 1.1rem; }
.chat-start input, .chat-start textarea {
  background: var(--surface-secondary); border: 1px solid var(--border); color: var(--text-primary);
  padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; resize: vertical;
}
.chat-start input:focus, .chat-start textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.chat-error { color: var(--danger); font-size: .8rem; }

.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-msg { max-width: 80%; }
.chat-msg-body { display: inline-block; padding: .5rem .75rem; border-radius: 12px; font-size: .9rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat-msg.me { align-self: flex-end; }
.chat-msg.me .chat-msg-body { background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.admin { align-self: flex-start; }
.chat-msg.admin .chat-msg-body { background: var(--surface-secondary); color: var(--text-primary); border: 1px solid var(--border); border-bottom-left-radius: 3px; }

.chat-compose { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border); }
.chat-compose input {
  flex: 1; background: var(--surface-secondary); border: 1px solid var(--border); color: var(--text-primary);
  padding: .55rem .7rem; border-radius: 999px; font-size: .9rem; font-family: inherit;
}
.chat-compose input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.chat-send {
  width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%; cursor: pointer;
  background: var(--primary); color: #fff; font-size: .95rem; transition: background .2s ease;
}
.chat-send:hover { background: var(--primary-dark); }

@media (max-width: 480px) {
  .chat-panel { height: calc(100vh - 100px); }
}


/* ---- Payment (Snap) status feedback on checkout ---- */
.pay-status { margin-top: .8rem; font-size: .9rem; padding: .7rem .9rem; border-radius: var(--radius-sm); }
.pay-status.info { background: var(--primary-light); color: var(--primary-dark); }
.pay-status.warn { background: #fff7e6; color: #b26a00; border: 1px solid #f5d99a; }
.pay-status.error { background: #fdecec; color: var(--danger); border: 1px solid #f7cccc; }
.link-btn { background: none; border: none; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font: inherit; }
.link-btn:hover { color: var(--primary-dark); }


/* ---- Reviews (storefront) ---- */
.card-rating.muted { color: var(--text-secondary); }
.card-rating-count { color: var(--text-secondary); font-weight: 400; }
.detail-rating-count { color: var(--text-secondary); font-size: .85rem; font-weight: 400; }

.detail-reviews { margin-top: 1.6rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.detail-reviews h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.reviews-list { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.4rem; }
.review-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.review-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .2rem; }
.review-author { font-weight: 600; color: var(--text-primary); font-size: .92rem; }
.review-date { color: var(--text-secondary); font-size: .78rem; }
.review-comment { color: var(--text-secondary); font-size: .9rem; margin-top: .35rem; line-height: 1.5; }
.stars { color: var(--primary); letter-spacing: 1px; font-size: .95rem; }
.stars-empty { color: var(--border); }

.review-form { background: var(--surface-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; }
.review-form h4 { font-size: .95rem; margin-bottom: .7rem; }
.review-form-row { display: flex; gap: .7rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.review-input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); padding: .55rem .7rem; border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; }
.review-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.review-form-row .review-input { flex: 1; width: auto; min-width: 160px; }
.star-input { display: inline-flex; gap: .1rem; }
.star-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--border); padding: 0 .05rem; transition: color .1s ease; }
.star-btn:hover, .star-btn.on { color: var(--primary); }
.review-error { color: var(--danger); font-size: .82rem; margin: .5rem 0; }
.review-form textarea.review-input { margin-bottom: .6rem; resize: vertical; }


/* ---- Fulfillment method (checkout) ---- */
.fulfillment-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fulfillment-opt {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fulfillment-opt:hover { border-color: var(--primary); }
.fulfillment-opt.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); background: var(--primary-light); }
.fulfillment-opt input { margin-top: .2rem; accent-color: var(--primary); }
.fulfillment-opt-icon { font-size: 1.4rem; line-height: 1; }
.fulfillment-opt-body { display: flex; flex-direction: column; gap: .15rem; }
.fulfillment-opt-title { font-weight: 700; color: var(--text-primary); font-size: .95rem; }
.fulfillment-opt-desc { font-size: .8rem; color: var(--text-secondary); }
.pickup-note {
  margin-top: .9rem; background: var(--surface-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem;
}
.pickup-note strong { font-size: .88rem; color: var(--text-primary); }
.pickup-note span { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }

@media (max-width: 480px) { .fulfillment-options { grid-template-columns: 1fr; } }


/* ---- Verified Purchase badge + review note ---- */
.verified-badge {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  color: var(--success); background: #e8f6ee; border: 1px solid #b8e0c8;
  padding: .08rem .4rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle;
}
.review-note { font-size: .8rem; color: var(--text-secondary); margin-bottom: .7rem; }


/* ---- Promo code (checkout) ---- */
.promo-box { margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.promo-entry { display: flex; gap: .5rem; }
.promo-input {
  flex: 1; background: var(--surface-secondary); border: 1px solid var(--border); color: var(--text-primary);
  padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit;
}
.promo-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.promo-applied {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: #e8f6ee; border: 1px solid #b8e0c8; border-radius: var(--radius-sm); padding: .6rem .8rem;
}
.promo-applied-text { font-size: .85rem; color: var(--text-primary); }
.promo-applied-text strong { color: var(--success); }
.promo-error { color: var(--danger); font-size: .82rem; margin-top: .5rem; }
.summary-row #sumDiscount, #sumDiscount { color: var(--success); }


/* ============================================================
 * Homepage redesign: header menu, banner carousel, category
 * navigation, deals section, and the category/brand listing pages.
 * ============================================================ */

/* `hidden` must win over the display rules below (empty carousel, no deals…). */
[hidden] { display: none !important; }

/* ---- Header: Categories mega-menu ---- */
.cat-menu { position: relative; flex-shrink: 0; }
.cat-menu-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: var(--radius-sm);
  background: var(--primary); border: 1px solid var(--primary); color: #fff;
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background .15s ease;
}
.cat-menu-btn:hover { background: var(--primary-dark); }
.cat-menu-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.cat-menu-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.cat-menu-bars span { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.cat-menu-chevron { width: 14px; height: 14px; transition: transform .18s ease; }
.cat-menu.open .cat-menu-chevron { transform: rotate(180deg); }

.mega-menu {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 60;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr);
  gap: 1.5rem; width: min(720px, 88vw); padding: 1.2rem 1.3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.mega-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); margin-bottom: .8rem;
}
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem; }
.mega-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.mega-item:hover, .mega-item.is-active { background: var(--primary-light); color: var(--primary); }
.mega-item-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--primary);
}
.mega-item:hover .mega-item-icon, .mega-item.is-active .mega-item-icon { background: #fff; }
.mega-item-text { display: flex; flex-direction: column; min-width: 0; }
.mega-item-name { font-weight: 600; font-size: .92rem; }
.mega-item-count { font-size: .75rem; color: var(--text-secondary); }
.mega-side { border-left: 1px solid var(--border); padding-left: 1.3rem; }
.mega-brands { display: flex; flex-wrap: wrap; gap: .4rem; }
.mega-brand {
  padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: .82rem; font-weight: 500; color: var(--text-secondary);
  transition: all .15s ease;
}
.mega-brand:hover, .mega-brand.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.cat-icon { width: 22px; height: 22px; }

/* Admin/account link in the header */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.header-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .9rem; font-weight: 600;
  border: 1px solid transparent; transition: all .15s ease;
}
.header-link svg { width: 18px; height: 18px; }
.header-link:hover { color: var(--primary); border-color: var(--border); }

/* ---- Header: slim secondary row ---- */
.header-sub { background: var(--surface-secondary); border-top: 1px solid var(--border); }
.header-sub-inner {
  display: flex; align-items: center; gap: .15rem;
  overflow-x: auto; scrollbar-width: none;
}
.header-sub-inner::-webkit-scrollbar { display: none; }
.sub-links { display: contents; }
.sub-link {
  padding: .55rem .7rem; font-size: .85rem; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.sub-link:hover { color: var(--primary); }
.sub-link.is-active { color: var(--text-primary); font-weight: 700; border-bottom-color: var(--primary); }
.sub-link-accent { margin-left: auto; color: var(--primary); font-weight: 700; }

/* ---- Homepage: banner carousel ---- */
.banner-carousel {
  position: relative; margin-top: 1.25rem;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-secondary);
}
.banner-viewport { position: relative; min-height: clamp(240px, 30vw, 360px); }
.banner-slide {
  position: absolute; inset: 0; display: grid; align-items: center;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease;
}
.banner-slide.is-active { opacity: 1; visibility: visible; }
/* Dark scrim so headline text stays readable over any photo. */
.banner-slide.has-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%);
}
.banner-slide-inner { position: relative; z-index: 1; color: #fff; padding: 2.5rem 0; }
/* Copy sits left-aligned inside the page gutter, not centred in the slide. */
.banner-slide-copy { max-width: 620px; }
.banner-headline {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.12; font-weight: 800;
  letter-spacing: -.02em; color: #fff;
}
.banner-subtext { margin-top: .7rem; font-size: clamp(.95rem, 1.4vw, 1.1rem); color: rgba(255,255,255,.9); max-width: 48ch; }
.banner-cta { margin-top: 1.4rem; }
.banner-cta-static { display: inline-block; margin-top: 1.4rem; font-weight: 700; }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: var(--primary-light); }

.banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--text-primary);
  transition: background .15s ease;
}
.banner-nav:hover { background: #fff; }
.banner-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.banner-nav svg { width: 20px; height: 20px; }
.banner-nav.prev { left: .8rem; }
.banner-nav.next { right: .8rem; }

.banner-dots {
  position: absolute; bottom: .9rem; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: .4rem;
}
.banner-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.55); transition: all .18s ease;
}
.banner-dot.is-active { background: #fff; width: 26px; }
.banner-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Service promises strip ---- */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none;
  margin-top: 1rem; padding: .9rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); font-size: .88rem; font-weight: 500;
}

/* ---- Homepage: quick category navigation ---- */
.cat-nav-section { margin-top: 2.2rem; }
.cat-nav-head, .deals-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.cat-nav-head h2, .deals-head h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.link-more { color: var(--primary); font-weight: 600; font-size: .9rem; }
.link-more:hover { text-decoration: underline; }
.cat-nav-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr);
  gap: .7rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin;
}
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  /* No side padding: the media runs edge to edge and the labels are padded
     individually. overflow:hidden lets the card's own radius round the top of
     the image, which is what makes it read as a rounded square, not a circle. */
  padding: 0 0 .85rem; text-align: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
/* Full-bleed square media. Was a 48px circle, which cropped uploaded photos into
   an awkward little disc; now it's the full width of the tile (~130–150px on
   desktop, so roughly triple) with a 1:1 ratio. min-height keeps it sensible if
   aspect-ratio isn't supported. */
.cat-tile-icon {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1; min-height: 96px;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
  border-bottom: 1px solid var(--border);
}
/* The whole photo is shown inside the square: `contain` rather than `cover`,
   because cover cropped hard into product shots and cut the product itself off.
   The padding keeps the image off the tile edges, and whatever space is left
   over is filled by the tile's neutral background below.
   Pinned with inset rather than sized with percentages: on a centred grid item
   `height: 100%` resolves to auto, which would let a tall image escape the box
   and object-fit would never apply at all. */
.cat-tile-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: .6rem;
}
/* Photos bring their own colours, so drop the red tint — and this very light
   grey (the same token the cart/detail media panels use) fills the leftover
   space around a photo whose ratio isn't square, instead of a stark white gap. */
.cat-tile-icon.has-photo { background: var(--surface-secondary); }
/* The generic icon scales with the bigger tile so a category without a photo
   yet doesn't look under-filled next to one that has one. */
.cat-tile-icon .cat-icon { width: 44px; height: 44px; }
/* Labels unchanged apart from the side padding the edge-to-edge media requires. */
.cat-tile-name { font-weight: 600; font-size: .9rem; padding: .5rem .5rem 0; }
.cat-tile-count { font-size: .74rem; color: var(--text-secondary); padding: 0 .5rem; }

/* ---- Homepage: shop by brand ---- */
/* Same responsive scroller pattern as the category row: tiles share the width on
   desktop and the row scrolls horizontally once they no longer fit. */
.brand-row-section { margin-top: 2.2rem; }
.brand-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr);
  gap: .7rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.brand-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.brand-tile-frame {
  display: grid; place-items: center; width: 100%; height: 66px; padding: .6rem .8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.brand-tile:hover .brand-tile-frame,
.brand-tile:focus-visible .brand-tile-frame {
  transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow);
}
/* Real logo when one exists in /assets/brands… */
.brand-tile-logo { max-height: 42px; max-width: 100%; object-fit: contain; }
/* …otherwise the brand name as clean text (never a broken-image icon). */
.brand-tile-name {
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--text-primary); overflow-wrap: anywhere;
}
.brand-tile:hover .brand-tile-name { color: var(--primary); }
.brand-tile-count { font-size: .74rem; color: var(--text-secondary); }

/* ---- Homepage: exclusive deals ---- */
.deals-section {
  margin-top: 2.5rem; padding: 1.4rem 1.4rem 1.6rem;
  background: var(--primary-light); border-radius: var(--radius);
}
.deals-sub { color: var(--text-secondary); font-size: .9rem; margin-top: .2rem; }

/* ---- Category / brand listing pages ---- */
.listing-page { padding: 1.4rem 0 4rem; }
.breadcrumb { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--text-secondary); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-current { color: var(--text-primary); font-weight: 600; }
.listing-head { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.6rem; flex-wrap: wrap; }
.listing-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary); flex-shrink: 0;
}
.listing-icon .cat-icon { width: 26px; height: 26px; }
.listing-head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.listing-count { color: var(--text-secondary); font-size: .9rem; margin-top: .15rem; }
.listing-back { margin-left: auto; }
.btn-sm { padding: .5rem .9rem; font-size: .85rem; }
.listing-controls { margin-bottom: 1.3rem; }

/* Clickable brand / category on the product detail view */
.detail-brand-link { color: var(--primary); font-weight: 700; }
.detail-brand-link:hover { text-decoration: underline; }

/* Footer category links (rendered into a span) */
.footer-links { display: flex; flex-direction: column; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .mega-menu { grid-template-columns: 1fr; width: min(420px, 92vw); }
  .mega-side { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 1rem; }
}
@media (max-width: 820px) {
  .cat-menu { order: 2; }
  .header-actions { order: 1; }
  .header-link span { display: none; }
  .banner-slide-inner { padding: 2rem 0; }
  .banner-nav { width: 34px; height: 34px; }
  .listing-back { margin-left: 0; width: auto; }
}
@media (max-width: 480px) {
  .trust-strip { gap: .6rem 1.2rem; font-size: .82rem; }
  .cat-nav-row { grid-auto-columns: minmax(112px, 1fr); }
  .cat-tile-icon { min-height: 84px; }
  .cat-tile-icon .cat-icon { width: 36px; height: 36px; }
  .brand-row { grid-auto-columns: minmax(116px, 1fr); }
  .brand-tile-frame { height: 58px; }
  .deals-section { padding: 1.1rem 1rem 1.3rem; }
  .banner-dots { bottom: .6rem; }
  /* Keep carousel arrows circular even though .btn goes full-width on mobile. */
  .banner-cta { width: auto; }
}


/* ============================================================
 * Aftersales: warranty claims, returns/exchanges, tracking
 * (aftersales.html + aftersales.js)
 * ============================================================ */
.as-page { padding: 1.4rem 0 4rem; max-width: 820px; }
.as-head { margin: 1rem 0 1.5rem; }
.as-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.as-sub { color: var(--text-secondary); margin-top: .5rem; max-width: 62ch; }

/* ---- Tabs ---- */
.as-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; }
.as-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: .7rem 1rem; font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--text-secondary); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.as-tab:hover { color: var(--primary); }
.as-tab.is-active { color: var(--text-primary); border-bottom-color: var(--primary); }

/* ---- Cards ---- */
.as-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--shadow-sm);
}
.as-card-title { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; }
.as-step-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: .85rem; font-weight: 700;
}
.as-card-hint { color: var(--text-secondary); font-size: .9rem; margin-top: .5rem; }

/* ---- Form controls (matched to the checkout form) ---- */
.as-form { margin-top: 1.1rem; }
.as-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.as-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.as-field-grow { margin-bottom: 0; }
.as-field > label, .as-fieldset > legend { font-size: .85rem; color: var(--muted); font-weight: 600; }
.as-field input[type="text"], .as-field input[type="email"], .as-field textarea, .as-field select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  padding: .7rem .85rem; border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit;
  width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.as-field textarea { resize: vertical; min-height: 110px; }
.as-field input:focus, .as-field textarea:focus, .as-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.as-field input[type="file"] {
  font-size: .9rem; padding: .5rem 0; color: var(--text-secondary);
}
.as-hint { color: var(--text-secondary); font-size: .78rem; }
.as-optional { color: var(--text-secondary); font-weight: 400; }
.as-error { color: var(--danger); font-size: .85rem; margin-bottom: .8rem; }
.as-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.as-track-btn { align-self: end; }

/* Radio cards for the request type */
.as-fieldset { border: none; padding: 0; }
.as-radio {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .8rem .9rem; margin-top: .5rem;
  transition: border-color .15s ease, background .15s ease;
}
.as-radio:hover { border-color: var(--primary); }
.as-radio input { margin-top: .25rem; accent-color: var(--primary); }
.as-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.as-radio span { display: flex; flex-direction: column; }
.as-radio small { color: var(--text-secondary); font-size: .8rem; }

/* ---- Verified order summary ---- */
.as-order-summary {
  background: var(--surface-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .9rem 1rem; margin-top: 1rem;
  display: flex; flex-direction: column; gap: .35rem; font-size: .9rem;
}
.as-order-line { display: flex; gap: .6rem; }
.as-order-label {
  color: var(--text-secondary); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; min-width: 92px; flex-shrink: 0;
  padding-top: .12rem;
}

/* ---- Photo previews before upload ---- */
.as-previews { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.as-preview {
  position: relative; width: 88px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-secondary);
}
.as-preview img { width: 100%; height: 64px; object-fit: contain; display: block; }
.as-preview figcaption { font-size: .68rem; color: var(--text-secondary); text-align: center; padding: .2rem; }
.as-preview-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: none; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(0,0,0,.6); color: #fff; font-size: .7rem;
}
.as-preview-remove:hover { background: var(--danger); }

/* ---- Success / tracking code ---- */
.as-success { border-color: var(--success); }
.as-code-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .8rem 0; }
.as-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
  background: var(--primary-light); color: var(--primary);
  padding: .5rem .8rem; border-radius: var(--radius-sm);
}

/* ---- Tracking result ---- */
.as-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.as-track-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.as-status-badge {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .3rem .65rem; border-radius: 999px; white-space: nowrap;
  background: #eef1f6; color: #55617a;
}
.as-status-badge.under_review { background: #fff7e6; color: #b26a00; }
.as-status-badge.approved     { background: #e8f6ee; color: var(--success); }
.as-status-badge.processing   { background: #e8f0fe; color: #1a56db; }
.as-status-badge.completed    { background: var(--success); color: #fff; }
.as-status-badge.rejected     { background: #fdecec; color: var(--danger); }

/* Vertical timeline: reads well on phones and fits the longer step hints. */
.as-timeline { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.as-step { position: relative; display: flex; gap: .8rem; padding-bottom: 1.1rem; }
/* Connector line between markers. */
.as-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--border);
}
.as-step.done:not(:last-child)::before { background: var(--success); }
.as-step-marker {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; font-size: .8rem; font-weight: 700; z-index: 1;
  background: var(--surface-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.as-step-text { display: flex; flex-direction: column; padding-top: .15rem; }
.as-step-text small { color: var(--text-secondary); font-size: .82rem; }
.as-step.done .as-step-marker { background: var(--success); color: #fff; border-color: var(--success); }
.as-step.current .as-step-marker { background: var(--primary); color: #fff; border-color: var(--primary); }
.as-step.current .as-step-text strong { color: var(--primary); }
.as-step.rejected .as-step-marker { background: var(--danger); color: #fff; border-color: var(--danger); }
.as-step.rejected .as-step-text strong { color: var(--danger); }
.as-step.upcoming .as-step-text, .as-step.skipped .as-step-text { opacity: .55; }
.as-step.skipped .as-step-marker { opacity: .45; }

/* Staff note shown to the customer */
.as-notes {
  margin-top: 1rem; padding: .9rem 1rem;
  background: var(--primary-light); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
}
.as-notes h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: .35rem; }
.as-notes p { white-space: pre-wrap; font-size: .92rem; }

.as-track-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .88rem;
}
.as-track-meta > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.as-detail-block { margin-top: 1.2rem; }
.as-detail-block h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: .4rem; }
.as-description { white-space: pre-wrap; font-size: .93rem; }

/* Evidence photos (thumbnails link to the full-size image) */
.as-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.as-photo {
  position: relative; display: block; width: 96px; height: 96px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-secondary);
  transition: border-color .15s ease, transform .15s ease;
}
.as-photo:hover { border-color: var(--primary); transform: translateY(-2px); }
.as-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Entry point on the order confirmation screen */
.as-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding: 1rem 1.1rem;
  background: var(--surface-secondary); border: 1px solid var(--border); border-radius: var(--radius);
  text-align: left;
}
.as-cta-text { display: flex; flex-direction: column; }
.as-cta-text strong { font-size: .95rem; }
.as-cta-text small { color: var(--text-secondary); font-size: .82rem; }

@media (max-width: 640px) {
  .as-field-row { grid-template-columns: 1fr; }
  .as-track-btn { width: 100%; }
  .as-tab { flex: 1; text-align: center; padding: .7rem .5rem; }
  .as-order-label { min-width: 78px; }
}



/* ============================================================================
 * Static policy pages (terms.html, privacy.html, returns.html)
 * Long-form reading layout. The typography rules are scoped to `.static-body`
 * so plain HTML — headings, paragraphs, lists, tables — can be pasted in and
 * comes out styled without any further layout work.
 * ========================================================================== */
/* Composed with .container, so the width is min(1180px, 92%) capped at 780px —
   a comfortable measure for prose, narrower than the 820px product pages. */
.static-page { padding: 1.4rem 0 4rem; max-width: 780px; }

.static-head { margin: 1rem 0 1.5rem; }
.static-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
/* Issuing entity, directly under the document title. */
.static-org { color: var(--text-primary); font-weight: 600; margin-top: .35rem; }
.static-meta { color: var(--muted); font-size: .85rem; margin-top: .6rem; }

/* Opening paragraph — slightly larger than body copy, no section rule above it. */
.static-lede { font-size: 1rem; color: var(--text-secondary); line-height: 1.75; max-width: 68ch; }

/* ---- Long-form body copy ---- */
.static-body { color: var(--text); }
.static-body > * + * { margin-top: 1rem; }

.static-body h2 {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.static-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.static-body h3 { font-size: 1.02rem; font-weight: 700; margin-top: 1.5rem; }

.static-body p,
.static-body li { line-height: 1.75; }
.static-body p { max-width: 68ch; }

.static-body ul,
.static-body ol { padding-left: 1.35rem; max-width: 68ch; }
.static-body li + li { margin-top: .4rem; }
.static-body ul { list-style: disc; }
.static-body ol { list-style: decimal; }
.static-body li::marker { color: var(--primary); }

.static-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.static-body a:hover { color: var(--primary-dark); }
.static-body strong { font-weight: 700; color: var(--text-primary); }

.static-body dl { max-width: 68ch; }
.static-body dt { font-weight: 700; margin-top: 1rem; }
.static-body dd { margin-left: 0; line-height: 1.75; color: var(--text-secondary); }

.static-body blockquote {
  border-left: 3px solid var(--primary); background: var(--surface-secondary);
  padding: .9rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
}

/* Tables (e.g. a returns-window matrix) stay readable on small screens. */
.static-body table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.static-body th,
.static-body td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); }
.static-body th { font-weight: 700; background: var(--surface-secondary); white-space: nowrap; }

/* Placeholder callout — remove once the real policy text is in place. */
.static-note {
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-secondary); padding: 1.1rem 1.2rem;
  color: var(--text-secondary); font-size: .92rem; line-height: 1.65;
}
.static-note strong { color: var(--text-primary); }

/* Contact block closing a policy page — boxed, so it reads as reference details
   rather than as another clause. Its <dl> overrides the body dl spacing. */
.static-contact {
  margin-top: 2.5rem; padding: 1.3rem 1.4rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-secondary);
}
.static-body .static-contact h2 {
  margin: 0 0 .9rem; padding: 0; border-top: none;
  font-size: 1.05rem; font-weight: 800;
}
.static-body .static-contact dl {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.1rem;
  margin: 0; max-width: none;
}
.static-body .static-contact dt {
  margin: 0; font-weight: 600; color: var(--text-secondary); font-size: .88rem; white-space: nowrap;
}
.static-body .static-contact dd {
  margin: 0; color: var(--text-primary); font-size: .92rem; line-height: 1.6;
}
@media (max-width: 560px) {
  .static-body .static-contact dl { grid-template-columns: 1fr; gap: .1rem; }
  .static-body .static-contact dt { margin-top: .7rem; }
}

/* Cross-links between the policy pages, shown under the content. */
.static-related { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.static-related h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.static-related-links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .7rem; }
.static-related-links a { color: var(--primary); font-size: .9rem; font-weight: 600; }
.static-related-links a:hover { text-decoration: underline; }

/* Compact policy link row for the reduced checkout footer. */
.footer-legal { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal a { color: var(--muted); font-size: .85rem; }
.footer-legal a:hover { color: var(--primary); }

@media (max-width: 640px) {
  .static-body h2 { margin-top: 1.8rem; }
}



/* ============================================================================
 * Per-item order notes (cart drawer + checkout order summary)
 * Optional free-text request per line item, e.g. a preferred colour or size.
 * ========================================================================== */
/* Visually hidden but available to screen readers — the note inputs are labelled
   with the product name, which would be redundant on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Spans every column so the field gets the row's full width. */
.item-note { grid-column: 1 / -1; display: block; }
.item-note input {
  width: 100%; font: inherit; font-size: .8rem; color: var(--text-primary);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: .4rem .55rem;
  transition: border-color .15s ease, box-shadow .15s ease, border-style .15s ease;
}
.item-note input::placeholder { color: var(--muted); }
/* Solid border once it has content, so a filled note reads as deliberate. */
.item-note input:not(:placeholder-shown) { border-style: solid; border-color: var(--primary); background: var(--primary-light); }
.item-note input:focus {
  outline: none; border-style: solid; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
/* The drawer's rows are a 3-column grid too, so the note spans them as well. */
.cart-item .item-note { margin-top: .1rem; }

/* A saved note, shown read-only on the confirmation screen. */
.item-note-shown {
  margin-top: .3rem; font-size: .8rem; line-height: 1.45;
  color: #7a4e00; background: #fff7e6; border: 1px solid #f5d99b;
  border-radius: var(--radius-sm); padding: .25rem .45rem;
  overflow-wrap: anywhere;
}

/* ---- Confirmation screen item list ---- */
.confirm-items-block { margin-bottom: 1.4rem; text-align: left; }
.confirm-items-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: .7rem;
}
.confirm-items {
  display: flex; flex-direction: column; gap: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem;
  background: var(--surface);
}
.confirm-item { display: grid; grid-template-columns: 40px 1fr auto; gap: .7rem; align-items: start; }
.confirm-item-media {
  position: relative; overflow: hidden;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-secondary);
  display: grid; place-items: center;
}
.confirm-item-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.confirm-item-media .media-emoji { font-size: 1.4rem; }
.confirm-item-info { display: flex; flex-direction: column; min-width: 0; }
.confirm-item-name { font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.confirm-item-qty { font-size: .8rem; color: var(--muted); }