: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); }
.checkout-msg { color: var(--success); font-size: .9rem; margin-top: .8rem; text-align: center; }
.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;
}
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.field input.invalid { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .78rem; min-height: .9rem; }

.payment-mount { min-height: 40px; }
.payment-demo {
  display: flex; align-items: flex-start; gap: .8rem;
  background: var(--surface-secondary); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 1rem;
}
.payment-demo-badge {
  background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .55rem; border-radius: 999px; flex-shrink: 0;
}
.payment-demo p { color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }

.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: .9rem; margin-bottom: 1.1rem; }
.summary-item { display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center; }
.summary-item-emoji { font-size: 1.5rem; text-align: center; }
.summary-item-info { display: flex; flex-direction: column; }
.summary-item-name { font-size: .92rem; font-weight: 600; }
.summary-item-qty { font-size: .8rem; color: var(--muted); }
.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; }
.confirm-note { color: var(--muted); font-size: .84rem; margin-bottom: 1.4rem; }

@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; }
}