/**
 * Minimalist Hardware Platform Stylesheet
 * Inspired by https://a4ginvento.com/cosmetics_/customer/index.html
 * 
 * Palette:
 * Primary:    #7a1f15 (Dark Wine)
 * Secondary:  #f5efed (Parchment)
 * Accent:     #297373 (Pine Blue)
 */

:root {
  --bg: #f5efed;               /* Parchment background */
  --surface: #ffffff;          /* Clean white card surface */
  --surface-2: #ebdcd7;        /* Soft parchment tint */
  --surface-subtle: #faf6f5;
  --border: #dfd2ce;           /* Subtle border */
  
  --ink: #2b232a;              /* High contrast text */
  --ink-soft: #6d6270;         /* Soft secondary text */
  --muted: #9a8f96;            /* Muted text */
  
  --primary: #7a1f15;          /* Dark Wine */
  --primary-dark: #5c160f;
  --primary-soft: #f4e4e2;     /* Very soft wine tint */

  --accent: #297373;           /* Pine Blue */
  --accent-dark: #1f5757;
  --accent-soft: #e2f0f0;      /* Soft pine tint */

  --ok: #2e9e6b;
  --ok-soft: #e5f5ec;
  --warn: #d98a2b;
  --warn-soft: #fbf0df;
  --danger: #d5453f;
  --danger-soft: #fbe6e5;
  --info: #297373;
  --info-soft: #e2f0f0;

  --shadow: 0 1px 3px rgba(43,35,42,.04), 0 4px 14px rgba(43,35,42,.05);
  --shadow-hover: 0 8px 24px rgba(122,31,21,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1560px;
  --font: "Segoe UI", Roboto, Helvetica, Arial, -apple-system, sans-serif;
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; color: var(--primary-dark); }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
small { color: var(--ink-soft); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mt0 { margin-top: 0; }

/* ---- Minimal Topbar (Reference Style) ----------------------------------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(43,35,42,.03);
}
.topbar .inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Minimal Text Brand Logo (Replacing JSW / logo graphic) */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
/* The wordmark is the brand now. Height-driven so the topbar keeps its rhythm
   whatever the artwork's aspect ratio is; width follows from the image. */
.brand-logo {
  height: 38px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.brand .brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.brand-tagline {
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 1px;
}


.topnav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.topnav a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 550;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
  text-decoration: none;
}
.topnav a:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.topnav a.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 650;
}

.cart-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-ico {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.cart-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Notification-style badge pinned to the cart icon's top-right corner */
.cart-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Sized to sit ON the icon's corner without covering it. The badge used to be
   29x21 against an 18x18 icon - nearly twice its area - which is why the cart
   looked missing on mobile. */
.cart-count-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  background: var(--primary);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface);
  box-sizing: content-box;
  pointer-events: none;
  letter-spacing: -.02em;
}
/* Hide the bubble entirely when the cart is empty */
.cart-count-badge.is-empty {
  display: none;
}

/* Topbar Admin link */
.admin-badge-btn {
  font-size: .8rem;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.admin-badge-btn:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

/* ---- Catalog Header Box & Search (Reference Style) --------------------- */
.catalog-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.catalog-header-box h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
}

/* Search + sort share one row. The search box is narrower than it was: it no
   longer has to hold "Search by name, grade, or SKU…", and the space it gives
   up goes to the sort dropdown beside it. */
.catalog-search-top {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-sort-inline {
  flex: 0 0 auto;
}
.catalog-sort-inline select {
  height: 38px;
  width: auto;
  min-width: 150px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.catalog-sort-inline select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Visible to a screen reader, not on screen. The sort control labels itself
   through its own options, so its <label> must not take up a line. */
.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;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.search-input-wrap .search-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.search-input-wrap input {
  width: 100%;
  padding: 8px 14px 8px 38px !important;
  font-size: .88rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .92rem;
  outline: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.search-input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.catalog-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  z-index: 5;
  transition: all .18s ease;
}
.catalog-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface-2);
}
.catalog-filter-btn:active,
.catalog-filter-btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(122, 31, 21, 0.25);
}

.catalog-sidebar-mobile-header {
  display: none;
}

:root {
  --catalog-gap: 18px;
}

/* ---- Catalog 2-Column Layout (Reference Style) ------------------------- */
.catalog-layout {
  display: grid;
  grid-template-columns: calc((100% - 3 * var(--catalog-gap)) / 4) minmax(0, 1fr);
  gap: var(--catalog-gap);
  align-items: start;
}

/* Sidebar (Unified Filter Box matching Product Card dimensions) */
.catalog-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 70px;
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 614px;
  min-height: 614px;
  max-height: 614px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.catalog-sidebar:hover {
  border-color: rgba(122, 31, 21, 0.25);
  box-shadow: var(--shadow-hover);
}

.category-box-header span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .85;
  color: var(--primary);
}
.category-box-header strong {
  display: block;
  margin-top: 2px;
  font-size: 1.05rem;
  color: var(--primary);
}

/* Category Box Header */
.category-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.category-box-header strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 1.02rem;
  line-height: 1.2;
}
.cat-selected-badge {
  font-size: .84rem;
  font-weight: 700;
  color: var(--primary);
}
.cat-reset-link {
  font-size: .75rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}
.cat-reset-link:hover {
  color: var(--primary-dark);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 235px;
  overflow-y: auto;
  padding-right: 2px;
}
.category-list::-webkit-scrollbar {
  width: 4px;
}
.category-list::-webkit-scrollbar-track {
  background: transparent;
}
.category-list::-webkit-scrollbar-thumb {
  background: #dfd2ce;
  border-radius: 4px;
}
.category-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.filter-box-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
  opacity: 0.7;
}

.filter-box-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-box-controls .field {
  margin-bottom: 0;
}
.filter-box-controls .field > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .74rem;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-box-controls select {
  height: 32px;
  padding: 4px 8px;
  font-size: .82rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--ink);
  width: 100%;
}
.category-filter-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.filter-reset-btn.is-block {
  flex: 1 1 auto;
  width: 100%;
}
.filter-reset-btn {
  flex: 0 0 auto;
  padding: 0 14px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.filter-reset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-reset-btn[disabled] {
  opacity: .45;
  cursor: default;
}

/* A brand outside the ticked categories is hidden; [hidden] must beat the
   display:flex !important below or the row would stay visible. */
label.category-choice.category-checkbox-row[hidden] {
  display: none !important;
}

/* Category Choice (Buttons & Checkbox Labels) */
.catalog-sidebar .category-choice,
.category-choice,
label.category-choice.category-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-radius: 6px;
  padding: 5px 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: .83rem;
  text-decoration: none;
  transition: all .15s ease;
  user-select: none;
  border: 1px solid transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  margin-bottom: 1px !important;
  font-weight: normal;
  min-height: 28px;
}
button.category-choice {
  font-family: inherit;
  border: 1px solid transparent;
}
.category-choice:hover {
  background: rgba(122, 31, 21, 0.04);
}
.category-choice.active,
label.category-choice.category-checkbox-row.active {
  background: rgba(122, 31, 21, 0.06) !important;
  border-color: rgba(122, 31, 21, 0.12);
}

/* Custom Vector Checkbox & Radio Indicators */
.category-indicator-wrap {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 2px;
}

/* Checkbox SVG Styling */
.category-check-svg {
  width: 18px;
  height: 18px;
  display: block;
}
.category-check-svg .check-box-base {
  fill: #ffffff;
  stroke: #94a3b8;
  stroke-width: 1.6;
  transition: all 0.15s ease;
}
.category-choice:hover .category-check-svg .check-box-base {
  stroke: var(--primary);
}
.category-check-svg .check-tick {
  opacity: 0;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: opacity 0.15s ease, stroke-dashoffset 0.18s ease;
}

/* Checkbox Checked State */
.category-checkbox-row.active .category-check-svg .check-box-base,
.brand-checkbox:checked ~ .category-indicator-wrap .category-check-svg .check-box-base,
.category-checkbox:checked ~ .category-indicator-wrap .category-check-svg .check-box-base {
  fill: var(--primary);
  stroke: var(--primary);
}
.category-checkbox-row.active .category-check-svg .check-tick,
.brand-checkbox:checked ~ .category-indicator-wrap .category-check-svg .check-tick,
.category-checkbox:checked ~ .category-indicator-wrap .category-check-svg .check-tick {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* Radio SVG Styling (All Categories) */
.category-radio-svg {
  width: 18px;
  height: 18px;
  display: block;
}
.category-radio-svg .radio-outer {
  fill: #ffffff;
  stroke: #94a3b8;
  stroke-width: 1.8;
  transition: stroke 0.15s ease;
}
.category-choice:hover .category-radio-svg .radio-outer {
  stroke: var(--primary);
}
.category-radio-svg .radio-inner {
  fill: transparent;
  transition: fill 0.15s ease;
}
.category-choice.all-choice.active .category-radio-svg .radio-outer {
  stroke: var(--primary);
}
.category-choice.all-choice.active .category-radio-svg .radio-inner {
  fill: var(--primary);
}

/* Hidden native checkbox input */
.category-checkbox-row input.category-checkbox,
.category-checkbox-row input.brand-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Category Label - Full Wrap, No Ellipsis Clipping */
.category-choice .category-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  word-break: normal;
}
.category-choice.active .category-label {
  font-weight: 600;
  color: var(--primary);
}

/* Item Count Badge */
.category-choice .category-count {
  flex-shrink: 0;
  font-size: .74rem;
  background: #f1f5f9;
  color: #64748b;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.category-choice.active .category-count {
  background: var(--primary);
  color: #ffffff;
}

/* Category Filter Actions & Apply Button */
.category-filter-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(122, 31, 21, 0.2);
}

/* Active Filter Chips Bar (Above Product Grid) */
.active-filters-chips-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.chips-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-soft);
  border: 1px solid rgba(122, 31, 21, 0.2);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: all .12s ease;
}
.filter-chip:hover {
  background: rgba(122, 31, 21, 0.15);
  border-color: var(--primary);
  color: var(--primary-dark);
  text-decoration: none;
}
.chip-remove {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 700;
  display: inline-block;
}
.filter-chip-clear {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  margin-left: auto;
  cursor: pointer;
}
.filter-chip-clear:hover {
  color: var(--danger, #dc2626);
}

.catalog-sidebar .field {
  margin-bottom: 14px;
}
.catalog-sidebar .field > label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ink);
}
.catalog-sidebar select,
.catalog-sidebar input[type="range"] {
  width: 100%;
}
.price-field label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-out {
  color: var(--accent);
  font-weight: 700;
}
input[type="range"] {
  accent-color: var(--accent);
}

.sidebar-quote-box {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--ink-soft);
}
.sidebar-quote-box strong {
  display: block;
  color: var(--primary);
  margin-bottom: 4px;
}

/* Results section */
.catalog-results {
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
}
.catalog-count {
  display: none !important;
}

/* Catalog Grid */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0;
}
@media (min-width: 1400px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 992px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 580px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ---- Product Card (Reference Minimal Style) ---------------------------- */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-soft);
}

.pcard-media {
  position: relative;
  height: 168px;
  background: #fdfdfd;
  overflow: hidden;
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.pcard-media img {
  width: 100%;
  height: 100%;
  /* cover + no padding so the photo fills the whole media box */
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .25s ease;
}
.product-card:hover .pcard-media img {
  transform: scale(1.04);
}
.pcard-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.product-body {
  padding: 10px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pcard-tagline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
/* text-overflow has no effect on the flex container itself - it has to sit on
   the text-bearing children, which also need min-width:0 so they can shrink
   instead of being clipped mid-word. */
.pcard-tagline > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard-tagline .pcard-cat {
  flex: 0 1 auto;
}
.pcard-tagline .pcard-dot {
  flex: 0 0 auto;
}
.pcard-tagline .pcard-dot {
  color: var(--muted);
}
.pcard-tagline .pcard-brand {
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: none;
  /* Brand keeps its space; the longer category truncates first */
  flex: 0 1 auto;
}

.product-title {
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
  text-decoration: none;
  margin: 1px 0 2px 0;
}
.product-title:hover {
  color: var(--primary);
  text-decoration: none;
}

.pcard-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: .74rem;
  margin-bottom: 2px;
}
.stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: .76rem;
  line-height: 1;
}
.pcard-stock-pill {
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
.pcard-stock-pill.in-stock {
  background: #ecfdf5;
  color: #065f46;
}
.pcard-stock-pill.out-stock {
  background: #fef2f2;
  color: #991b1b;
}

.pcard-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.pcard-price .price {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--primary);
}
.pcard-unit {
  font-size: .74rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.pcard-mrp {
  font-size: .76rem;
  color: var(--muted);
  text-decoration: line-through;
}

/* Card Actions */
.pcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft, #f1ece7);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.btn-pcard-add {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: .80rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-pcard-add:hover {
  background: var(--primary-dark);
}
.btn-pcard-view {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: .80rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-pcard-view:hover {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
  text-decoration: none;
}

/* Already in the cart: - qty + in place of "Add to cart", same slot and size.
   [hidden] must beat the display rules (some !important) on both. */
.btn-pcard-add[hidden],
.pcard-stepper[hidden] {
  display: none !important;
}
.pcard-stepper {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.pcard-stepper button {
  flex: 0 0 34%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 6px 0;
  transition: background .15s ease;
}
.pcard-stepper button:hover { background: var(--primary-dark); }
.pcard-stepper button[disabled] { opacity: .6; cursor: wait; }
.pcard-stepper [data-card-qty] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--primary);
  min-width: 0;
}
@media (max-width: 680px) {
  .pcard-stepper {
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
    min-height: 34px;
  }
}

/* ---- Buttons & Form Elements ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  transition: .15s;
  font-family: inherit;
  text-decoration: none;
}
.btn:hover { filter: brightness(.97); text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
/* Used by the admin tracking pages (Back to admin, Settings, Route history).
   It was referenced in markup but never defined, so those buttons fell back to
   the bare .btn rule: a parchment fill with a TRANSPARENT border, which on the
   parchment page background reads as flat text rather than something you can
   click. Giving it a visible edge is the whole fix. */
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-block { width: 100%; }

/* Form Controls */
.field { margin-bottom: 14px; }
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}
input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  min-width: auto;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---- Minimal Footer (Reference Style) ---------------------------------- */
.app-footer {
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 18px 20px;
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}
.app-footer .sep {
  margin: 0 10px;
  color: var(--border);
}
.app-footer a {
  color: var(--accent);
  font-weight: 600;
}
.app-footer a:hover {
  color: var(--accent-dark);
}

/* ---- Product Detail Page (Clean Minimal Layout) ------------------------ */
.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.4;
  word-break: break-word;
}
.product-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.product-breadcrumb a:hover {
  text-decoration: underline;
}
.product-breadcrumb .sep {
  color: var(--border-dark, #cbd5e1);
  font-size: .8rem;
}
.product-breadcrumb .current {
  color: var(--ink);
  font-weight: 600;
}

.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 30px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Gallery column must span the full track: the main image is absolutely
   positioned, so without this the column would shrink to the thumbnail row. */
.detail-gallery-col {
  width: 100%;
  min-width: 0;
}

/* Desktop: the specifications table makes the right column far taller than the
   gallery, so the gallery sticks in place and only the details scroll past it.
   Offset clears the sticky topbar. Single-column layouts (<=900px) keep the
   normal document flow. */
@media (min-width: 901px) {
  .detail-gallery-col {
    position: sticky;
    top: 68px;
    align-self: start;
  }
}

.detail-gallery-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* A fixed ratio rather than a min-height: every product gets the same frame,
     so the page does not jump as images of different shapes load. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  position: relative;
  box-sizing: border-box;
}
/* CONTAIN, not cover. A product photo is the thing being sold: cover cropped
   tall tins and blew up whatever was left, so the customer saw a corner of a
   label instead of the product. Contain shows the whole image at its own
   proportions, and the padding keeps it off the frame edge.

   White, not the page tint: most supplier images are cut-outs on transparency,
   and a tinted box made that transparency read as a grey checkerboard. */
.detail-gallery-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 22px;
  object-fit: contain;
  object-position: center;
  display: block;
  box-sizing: border-box;
  transition: transform .3s ease;
}
.detail-gallery-box:hover img {
  transform: scale(1.02);
}

/* Gallery prev/next arrows */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gallery-nav:hover {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.gallery-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 480px) {
  .gallery-nav {
    width: 32px;
    height: 32px;
    font-size: .85rem;
  }
  .gallery-prev { left: 6px; }
  .gallery-next { right: 6px; }
}

.detail-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.detail-thumb {
  width: 64px;
  height: 64px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.detail-thumb.is-active,
.detail-thumb:hover {
  border-color: var(--primary);
}
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.stock-status.out-of-stock {
  color: #991b1b;
  font-weight: 600;
}

.detail-info-col {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.detail-product-title {
  font-size: 1.5rem;
  line-height: 1.28;
  margin: 4px 0 10px 0;
  color: var(--ink);
  word-break: break-word;
}
.detail-sku-row {
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-sku-row .stock-status {
  color: var(--ok);
  font-weight: 600;
  white-space: nowrap;
}
/* Must come AFTER the rule above and match it for specificity, or the green
   "in stock" colour wins on source order and renders "Out of stock" in green -
   which reads as the opposite of what it says. */
.detail-sku-row .stock-status.out-of-stock {
  color: #991b1b;
}

.product-price-box {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
}
.product-price-main-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.product-price-active {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.product-base-amt {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.product-unit-tag {
  font-size: .88rem;
  color: var(--ink-soft);
  font-weight: 550;
  white-space: nowrap;
}
.product-unit-tag .base-rate-label {
  color: var(--muted);
  font-weight: 400;
}
.product-price-discount-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.product-mrp-val {
  text-decoration: line-through;
  color: var(--muted);
  font-size: .95rem;
  white-space: nowrap;
}
.product-gst-breakdown-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: .84rem;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.gst-calc-item {
  white-space: nowrap;
}
.gst-calc-total strong {
  color: var(--primary);
}
.gst-calc-total small {
  color: var(--muted);
}
.product-assurance-note {
  font-size: .76rem;
  color: var(--ok);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  line-height: 1.4;
}

.detail-short-desc {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
  word-break: break-word;
}
.detail-purchase-section {
  margin-bottom: 24px;
}
.detail-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.detail-qty-row label {
  font-size: .88rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.detail-cta-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.detail-add-cart-btn {
  width: 100%;
  min-height: 44px;
}

.detail-specs-section {
  width: 100%;
}
.detail-specs-heading {
  font-size: 1rem;
  margin-bottom: 8px;
  font-weight: 700;
}
.detail-meta-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: .88rem;
}
.detail-meta-table th {
  text-align: left;
  color: var(--ink-soft);
  font-weight: 550;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  width: 40%;
  word-break: break-word;
  vertical-align: top;
}
.detail-meta-table td {
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  width: 60%;
  word-break: break-word;
  vertical-align: top;
}

/* Stepper inside Product detail & Cart */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.qty-stepper button {
  background: none;
  border: none;
  width: 32px;
  height: 34px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper input {
  /* Beats the global "input { width: 100% }" form rule, which is more
     specific than this selector and would stretch the stepper. */
  width: 44px !important;
  flex: 0 0 auto;
  height: 34px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  outline: none;
  padding: 0;
}

/* ---- Cart & Checkout Layout -------------------------------------------- */
.cart-layout-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  width: 100%;
}
@media (min-width: 1100px) {
  .cart-layout-box {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
  }
}
.cart-left-col {
  min-width: 0;
  width: 100%;
}
.cart-right-col {
  min-width: 0;
  width: 100%;
}
.clean-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.cart-desktop-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cart-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  table-layout: fixed;
}
.cart-list-table th {
  text-align: left;
  padding: 10px 8px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}
.cart-list-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cart-col-product {
  width: 44%;
}
.cart-col-rate {
  width: 22%;
  white-space: nowrap;
}
.cart-col-qty {
  width: 16%;
  text-align: center;
}
.cart-col-total {
  width: 15%;
  text-align: right;
  white-space: nowrap;
}
.cart-col-action {
  width: 3%;
  text-align: right;
}
.cart-prod-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cart-prod-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.cart-prod-info {
  min-width: 0;
  flex: 1;
}
.cart-prod-link {
  font-weight: 600;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.cart-prod-link:hover {
  color: var(--primary);
  text-decoration: none;
}
.cart-prod-sku {
  font-size: .74rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
.cart-rate-amt {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.cart-rate-unit {
  font-size: .76rem;
  color: var(--ink-soft);
}
.cart-rate-gst {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}
.cart-total-amt {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.cart-total-gst {
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.cart-col-action .btn-remove-item {
  background: none;
  border: none;
  cursor: pointer;
  color: #dc2626;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
}
.cart-col-action .btn-remove-item:hover {
  opacity: 0.7;
}

/* ---- Modal & Toast ----------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,35,42,.5);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 540px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--muted);
}
.modal-close-btn:hover { color: var(--ink); }

.toast-msg {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 550;
  z-index: 9999;
  border-left: 4px solid var(--accent);
  opacity: 0;
  transform: translateY(15px);
  transition: all .25s ease;
  pointer-events: none;
}
.toast-msg.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive Header & Mobile Drawer --------------------------------- */
.mobile-actions {
  display: none;
}
.mobile-drawer-overlay,
.mobile-drawer {
  display: none;
}
.cart-desktop-table-wrap {
  display: block;
}
.cart-mobile-item-list {
  display: none;
}

/* ---- Responsive Breakpoints -------------------------------------------- */
@media (max-width: 900px) {
  .catalog-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .catalog-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .catalog-filter-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    min-height: 40px;
    min-width: 102px;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
  }
  .catalog-filter-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }
  .catalog-sidebar {
    display: none;
    position: static;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  .catalog-sidebar.open {
    display: block !important;
    animation: filterSlideIn 0.22s ease-out;
  }
  .catalog-sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .catalog-sidebar-mobile-header strong {
    font-size: .95rem;
    color: var(--ink);
  }
  .btn-sidebar-close {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    touch-action: manipulation;
  }
  .btn-sidebar-close:active {
    background: var(--border);
    color: var(--ink);
  }
  .category-choice {
    padding: 8px 10px;
    font-size: .88rem;
  }
  .category-list {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
  .detail-card {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 20px !important;
  }
  .detail-gallery-box {
    min-height: 280px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 380px !important;
  }
}

@media (max-width: 768px) {
  /* Topbar Navigation on Mobile */
  .desktop-nav {
    display: none !important;
  }
  .mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .mobile-cart-btn {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 6px;
  }
  .mobile-menu-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    transition: background .15s, border-color .15s;
  }
  .mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .2s ease;
  }
  .mobile-menu-btn:hover {
    background: var(--border);
  }

  /* Slide-in Mobile Drawer */
  .mobile-drawer-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(43, 35, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: var(--surface);
    z-index: 999;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }
  .mobile-drawer:not(.open) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .mobile-drawer.open {
    transform: translateX(0);
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
  }
  .drawer-brand-logo {
    height: 30px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
  }
  .drawer-brand {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .drawer-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 2px 8px;
  }
  .drawer-content {
    padding: 18px 16px;
    flex: 1;
  }
  .drawer-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
  }
  .drawer-avatar {
    font-size: 1.4rem;
  }
  .drawer-user-meta strong {
    display: block;
    font-size: .92rem;
    color: var(--ink);
  }
  .drawer-user-meta small {
    color: var(--ink-soft);
    font-size: .78rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }
  .drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* :not(.btn) so the Sign In / Create Account buttons keep their own
     colours - otherwise the dark ink here hides the white label on the
     brown primary button. */
  .drawer-links a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s;
  }
  .drawer-links a:not(.btn):hover, .drawer-links a:not(.btn).active {
    background: var(--primary-soft);
    color: var(--primary);
  }
  .drawer-auth-buttons .btn-primary {
    color: #fff !important;
    background: var(--primary);
  }
  .drawer-auth-buttons .btn-ghost {
    color: var(--primary) !important;
  }
  .drawer-icon {
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
  }
  .drawer-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
  }
  .drawer-logout {
    color: var(--danger) !important;
  }
  .drawer-logout:hover {
    background: var(--danger-soft) !important;
  }
  .drawer-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
}

@media (max-width: 680px) {
  /* Cart Mobile Card Transformations */
  .cart-desktop-table-wrap {
    display: none !important;
  }
  .cart-mobile-item-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  .cart-mobile-item-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--surface-subtle);
  }
  .cart-mobile-item-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    margin-bottom: 12px;
  }
  .cart-mobile-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .cart-mobile-item-meta {
    flex: 1;
    min-width: 0;
    padding-right: 28px;
  }
  .cart-mobile-title {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: block;
    line-height: 1.35;
    margin-bottom: 4px;
  }
  .cart-mobile-sku {
    font-size: .74rem;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }
  .cart-mobile-rate {
    font-size: .84rem;
    color: var(--primary);
    font-weight: 600;
  }
  .mobile-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
  }
  .cart-mobile-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
  }
  .cart-mobile-subtotal {
    text-align: right;
  }
  .cart-mobile-subtotal span {
    font-size: .74rem;
    color: var(--ink-soft);
    display: block;
  }
  .cart-mobile-subtotal strong {
    font-size: .96rem;
    color: var(--ink);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px !important;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .similar-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .pcard-media {
    height: 135px !important;
  }
  .product-body {
    padding: 10px 8px !important;
    gap: 4px !important;
  }
  .product-title {
    font-size: .82rem !important;
    line-height: 1.25 !important;
    min-height: 2.3em !important;
  }
  .pcard-rating {
    display: none !important;
  }
  .pcard-features {
    display: none !important;
  }
  .pcard-price {
    gap: 4px !important;
  }
  .pcard-price .price {
    font-size: .95rem !important;
    white-space: nowrap !important;
  }
  .pcard-unit {
    font-size: .7rem !important;
  }
  .pcard-mrp {
    font-size: .72rem !important;
    white-space: nowrap !important;
    display: block !important;
    width: 100% !important;
    margin-top: 1px !important;
  }
  /* Both actions stay on one line, each taking exactly half the card */
  .pcard-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  .btn-pcard-add,
  .btn-pcard-view {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    padding: 6px 2px !important;
    font-size: .70rem !important;
    min-height: 34px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .catalog-header-box {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .catalog-header-box h1 {
    font-size: 1.3rem !important;
    line-height: 1.25;
  }
  .catalog-filter-btn {
    padding: 7px 14px;
    font-size: .84rem;
  }
  .catalog-search-top {
    max-width: 100% !important;
    width: 100%;
    gap: 6px;
  }
  /* Keep both on one line - stacking them costs a whole row on a small screen.
     The sort shrinks first, since its selected option is short. */
  .catalog-sort-inline select {
    min-width: 0;
    max-width: 42vw;
    height: 36px;
    font-size: .8rem;
    padding-right: 26px;
  }
  .auth-card {
    padding: 24px 18px !important;
  }
  .detail-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 12px !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* No max-height here: it would fight aspect-ratio and leave the box wider
     than it is tall, which is what produced the empty strip beside the image. */
  .detail-gallery-box {
    min-height: 0 !important;
    height: auto !important;
    /* 4:3 on a phone, not the square used on desktop. Vertical space is the
       scarce thing here, and a square frame around a landscape photo wasted a
       third of the screen on white bands before the title was even reached. */
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
  }
  .detail-gallery-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    /* Matches desktop: show the whole product, never a crop of it. */
    padding: 14px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .detail-product-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  .product-price-box {
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .product-base-amt {
    font-size: 1.4rem !important;
    white-space: nowrap !important;
  }
  .product-unit-tag {
    font-size: .8rem !important;
  }
  .product-gst-breakdown-row {
    font-size: .76rem !important;
    gap: 4px 8px !important;
  }
  .gst-calc-item {
    white-space: nowrap !important;
  }
  .detail-meta-table {
    font-size: .8rem !important;
  }
  .detail-meta-table th, .detail-meta-table td {
    padding: 6px 6px !important;
  }
  .topbar .inner {
    padding: 8px 12px !important;
  }
}

@keyframes filterSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---- Customer Auth & Account Profile Styles --------------------------- */
.auth-page-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.74) 0%, rgba(122, 31, 21, 0.68) 100%), 
              url('../images/auth-bg.jpg') center center / cover no-repeat fixed;
  position: relative;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 30px 28px;
}

/* Wide Auth Card for Compact 2x2 Registration Form (No Scroll) */
.auth-card-wide {
  max-width: 660px;
  padding: 22px 28px;
}

.auth-card-wide .auth-header {
  margin-bottom: 14px;
}
.auth-card-wide .auth-header h2 {
  font-size: 1.25rem;
  margin-bottom: 3px;
}
.auth-card-wide .auth-sub {
  font-size: .82rem;
}

.auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 4px;
}
.auth-grid-2 .field {
  margin-bottom: 8px;
}
.auth-grid-2 label {
  font-size: .8rem;
  margin-bottom: 3px;
}
.auth-grid-2 input {
  padding: 8px 10px;
  font-size: .88rem;
}

@media (max-width: 640px) {
  .auth-grid-2 {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .auth-card-wide {
    padding: 20px 16px;
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 22px;
}
.brand-eyebrow {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand-eyebrow-logo {
  height: 40px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .brand-eyebrow-logo { height: 34px; max-width: 180px; }
}
.auth-header h2 {
  font-size: 1.4rem;
  margin: 0 0 6px 0;
  color: var(--ink);
}
.auth-sub {
  font-size: .86rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}

.auth-alert {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.auth-alert.error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(213,69,63,.25);
}
.auth-alert.success {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid rgba(46,158,107,.25);
}

.auth-form .field {
  margin-bottom: 14px;
}
.auth-form label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.auth-form input,
.auth-form select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .92rem;
  outline: none;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.phone-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.phone-prefix {
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.phone-input-group input {
  flex: 1;
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrap input {
  padding-right: 40px;
}
.pw-toggle-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--ink-soft);
  padding: 4px;
}

.field-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.geo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all .15s ease;
}
.geo-btn:hover {
  background: var(--primary-soft);
}
.geo-status {
  font-size: .75rem;
  color: var(--ink-soft);
  margin-top: 3px;
  min-height: 14px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

.auth-divider {
  text-align: center;
  margin: 18px 0 14px 0;
  position: relative;
}
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  position: relative;
  background: var(--surface);
  padding: 0 10px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
}

.auth-footer-link {
  text-align: center;
  margin-top: 16px;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* Profile Dashboard Layout */
.profile-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.profile-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.profile-card-sub {
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.badge-address {
  font-size: .72rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.order-mini-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-subtle);
}
.order-mini-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.order-mini-mid {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.order-mini-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  font-size: .78rem;
}
.btn-order-track {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.btn-order-track:hover {
  text-decoration: underline;
}

/* ---- OTP Input & Verification Styles --------------------------------- */
.otp-digit-field {
  text-align: center !important;
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 6px !important;
  padding: 12px 14px !important;
  color: var(--primary) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  transition: all .2s ease !important;
}
.otp-digit-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-soft) !important;
}
.btn-resend-otp {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-resend-otp:hover {
  text-decoration: underline;
}

/* ---- User Profile Dropdown in Navigation ------------------------------- */
.user-menu-container {
  position: relative;
  display: inline-block;
}
.user-profile-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
  user-select: none;
}
.user-profile-toggle:hover,
.user-profile-toggle.active {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
}
.user-profile-toggle .dropdown-caret {
  font-size: .75rem;
  transition: transform .2s ease;
  color: var(--muted);
}
.user-menu-container.open .user-profile-toggle .dropdown-caret {
  transform: rotate(180deg);
}
.user-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  padding: 10px;
  z-index: 1000;
  display: none;
  animation: filterSlideIn .2s ease-out;
}
.user-menu-container.open .user-dropdown-panel {
  display: block;
}
.user-dropdown-info {
  padding: 8px 10px;
}
.user-dropdown-info strong {
  display: block;
  font-size: .92rem;
  color: var(--ink);
}
.user-dropdown-info small {
  display: block;
  font-size: .78rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.user-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .12s ease;
}
.user-dropdown-link:hover {
  background: var(--surface-2);
  color: var(--primary);
  text-decoration: none;
}
.user-dropdown-link.logout-link {
  color: #dc2626;
  font-weight: 600;
}
.user-dropdown-link.logout-link:hover {
  background: #fee2e2;
}

/* Profile Page Logout Button */
.btn-logout-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fca5a5;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
}
.btn-logout-danger:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  text-decoration: none;
}
.link-card-logout {
  color: #dc2626;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .15s ease;
}
.link-card-logout:hover {
  background: #fee2e2;
  text-decoration: underline;
}

/* Similar Products 4-Column Grid */
.similar-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
}
@media (max-width: 960px) {
  .similar-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 520px) {
  .similar-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Cart Collapsible GST & Price Breakdown Dropdown */
.cart-price-details-dropdown {
  background: var(--surface-subtle);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.cart-price-details-dropdown[open] {
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(122, 31, 21, 0.08);
}
.cart-price-dropdown-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  transition: background .15s ease;
}
.cart-price-dropdown-summary::-webkit-details-marker {
  display: none;
}
.cart-price-dropdown-summary:hover {
  background: var(--surface-2);
}
.dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.summary-caret {
  display: inline-block;
  font-size: .8rem;
  color: var(--primary);
  transition: transform .2s ease;
}
.cart-price-details-dropdown[open] .summary-caret {
  transform: rotate(180deg);
}
.bold-price {
  font-weight: 700;
  color: var(--primary);
}
.cart-price-dropdown-body {
  padding: 10px 12px;
  background: var(--surface-subtle);
  border-top: 1px dashed var(--border);
  animation: filterSlideIn .2s ease-out;
}
.dropdown-split-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.dropdown-split-row.total-tax-row {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  margin-top: 6px;
  font-weight: 700;
  font-size: .86rem;
}
.dropdown-itc-note {
  font-size: .72rem;
  color: var(--accent);
  margin-top: 6px;
  margin-bottom: 8px;
}
.dropdown-formula-box {
  background: #faf8f7;
  border-left: 3px solid var(--primary);
  padding: 6px 10px;
  font-size: .74rem;
  color: var(--ink-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.45;
}

/* ==========================================================================
   Reference Cart Page Design (Exact Mockup Match & Zero Page Scroll)
   ========================================================================== */
/* ==========================================================================
   Reference Cart Page Design (Full Coverage Edition)
   ========================================================================== */

.cart-page-wrap {
  position: relative;
  overflow: visible;
  padding: 0 16px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* Height comes from .page-viewport-bg so Cart and My Orders match exactly */
  min-height: 0;
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}

.cart-header-hero {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 0 14px 0;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 14px;
}

.cart-breadcrumb {
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 3px;
  line-height: 1.25;
}
.cart-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.cart-breadcrumb a:hover {
  text-decoration: underline;
}
.cart-breadcrumb .sep {
  margin: 0 5px;
  color: var(--muted);
}

.cart-main-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0 0 2px 0;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.cart-sub-title {
  margin: 0;
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.25;
}

/* Top Right Trust Badges */

@media (max-width: 768px) {
}

/* Main Cards Grid */
.cart-layout-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  width: 100%;
  flex: 1 0 auto;
}
@media (min-width: 1200px) {
  .cart-layout-box {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
  }
}
.cart-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}
.cart-right-col {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Cart Items Card */
.cart-items-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-card-header-row {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cart-card-header-row h2 {
  font-size: 1.05rem;
  font-weight: 750;
  margin: 0;
  color: var(--ink);
}

/* Inside Scroll ("Insight Scroll") Mechanics */
.cart-desktop-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cart-items-scrollable {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 31, 21, 0.3) transparent;
}
.cart-items-scrollable::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.cart-items-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.cart-items-scrollable::-webkit-scrollbar-thumb {
  background: rgba(122, 31, 21, 0.3);
  border-radius: 4px;
}
.cart-items-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 31, 21, 0.5);
}
.cart-items-scrollable thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

/* Compact Cart Table */
.cart-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  table-layout: fixed;
}
.cart-list-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  background: var(--surface);
}
.cart-list-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cart-col-product { width: 44%; }
.cart-col-rate { width: 22%; white-space: nowrap; }
.cart-col-qty { width: 16%; text-align: center; }
.cart-col-total { width: 15%; text-align: right; white-space: nowrap; }
.cart-col-action { width: 3%; text-align: right; }

.cart-prod-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cart-prod-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.cart-prod-info {
  min-width: 0;
  flex: 1;
}
.cart-prod-link {
  font-weight: 650;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.cart-prod-link:hover {
  color: var(--primary);
  text-decoration: none;
}
.cart-prod-sku {
  font-size: .74rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
.cart-rate-amt {
  font-weight: 650;
  font-size: .9rem;
  color: var(--ink);
}
.cart-rate-unit {
  font-size: .76rem;
  color: var(--ink-soft);
}
.cart-rate-gst {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}
.cart-total-amt {
  font-weight: 750;
  font-size: .96rem;
  color: var(--ink);
}
.cart-total-gst {
  font-size: .72rem;
  color: var(--accent);
  margin-top: 2px;
}

/* Stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.btn-cart-qty {
  width: 24px;
  height: 26px;
  background: var(--surface-2);
  border: none;
  font-size: .88rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  transition: background .12s ease;
}
.btn-cart-qty:hover {
  background: var(--border);
}
.cart-qty-input {
  width: 30px !important;
  flex: 0 0 auto;
  height: 26px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: .82rem;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-remove-item {
  background: none;
  border: none;
  cursor: pointer;
  color: #dc2626;
  font-size: 1.35rem;
  line-height: 1;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
}
.btn-remove-item:hover {
  opacity: 0.7;
}

/* Bottom Actions Bar */
.cart-card-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.btn-continue-shopping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(43, 35, 42, .04);
  transition: all .15s ease;
}
.btn-continue-shopping:hover {
  background: var(--surface-2);
  border-color: #c4b5b0;
  color: var(--primary);
  text-decoration: none;
}
.btn-clear-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: #c53030;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(43, 35, 42, .03);
  transition: all .15s ease;
}
.btn-clear-cart:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #9b2c2c;
}

@media (max-width: 576px) {
  .cart-card-bottom-actions {
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .btn-continue-shopping,
  .btn-clear-cart {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    font-size: .78rem;
    gap: 5px;
    letter-spacing: -.01em;
  }
}

/* "You May Also Like" Recommendation Box */
.you-may-like-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.you-may-like-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.you-may-like-title {
  font-size: .95rem;
  font-weight: 750;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.you-may-like-sub {
  margin: 0;
  font-size: .76rem;
  color: var(--ink-soft);
  line-height: 1.2;
}
.view-all-link {
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.view-all-link:hover {
  text-decoration: underline;
}

.mini-recom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mini-recom-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 0;
  transition: border-color .15s ease;
}
.mini-recom-card:hover {
  border-color: var(--primary);
}
.mini-recom-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.mini-recom-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mini-recom-title {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.mini-recom-title:hover {
  color: var(--primary);
  text-decoration: none;
}
.mini-recom-price {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.mini-recom-add-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #fbf0ee;
  color: var(--primary);
  border: 1px solid #f1d2cd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
  padding: 0;
}
.mini-recom-add-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

@media (max-width: 860px) {
  .mini-recom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .mini-recom-grid {
    grid-template-columns: 1fr;
  }
}

/* Order Summary Card with Dark Wine Header */
.order-summary-card-modern {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.order-summary-wine-head {
  background: #7a1f15;
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.summary-bag-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.summary-head-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.2;
}
.summary-head-text small {
  display: block;
  font-size: .72rem;
  opacity: 0.9;
  margin-top: 2px;
}

.order-summary-wine-body {
  padding: 14px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.summary-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: .84rem;
  color: var(--ink-soft);
}
.summary-line-item strong {
  color: var(--ink);
  font-size: .92rem;
}
.summary-sub-note {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* GST Dropdown */
.cart-price-details-dropdown {
  background: #f7f4f3;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.cart-price-details-dropdown[open] {
  border-color: var(--primary);
  box-shadow: 0 1px 6px rgba(122, 31, 21, 0.08);
}
.cart-price-dropdown-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  background: #f7f4f3;
  transition: background .15s ease;
}
.cart-price-dropdown-summary::-webkit-details-marker {
  display: none;
}
.cart-price-dropdown-summary:hover {
  background: #eee8e6;
}
.cart-price-dropdown-body {
  padding: 8px 10px;
  background: var(--surface-subtle);
  border-top: 1px dashed var(--border);
}
.dropdown-split-row {
  display: flex;
  justify-content: space-between;
  font-size: .74rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.dropdown-split-row.total-tax-row {
  border-top: 1px dashed var(--border);
  padding-top: 4px;
  margin-top: 4px;
  font-weight: 700;
  font-size: .78rem;
}
.dropdown-itc-note {
  font-size: .7rem;
  color: var(--accent);
  margin-top: 4px;
  margin-bottom: 5px;
}
.dropdown-formula-box {
  background: #faf8f7;
  border-left: 2px solid var(--primary);
  padding: 6px 8px;
  font-size: .72rem;
  color: var(--ink-soft);
  border-radius: 0 3px 3px 0;
  line-height: 1.4;
}

.summary-delivery-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: .84rem;
  color: var(--ink-soft);
}
.summary-delivery-row .delivery-free {
  color: var(--ok);
  font-weight: 700;
}
.summary-delivery-note {
  font-size: .72rem;
  color: var(--ok);
  margin-bottom: 10px;
}

.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1.5px solid var(--border);
  padding-top: 10px;
  margin-bottom: 12px;
}
.summary-total-label {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--ink);
}
.summary-total-amt {
  font-size: 1.35rem;
  font-weight: 800;
  color: #7a1f15;
}

.btn-checkout-wine {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: #7a1f15;
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
  box-shadow: 0 2px 8px rgba(122, 31, 21, 0.25);
}
.btn-checkout-wine:hover {
  background: #601810;
  text-decoration: none;
}
.summary-secure-note {
  text-align: center;
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Bottom Full-Width Trust Banner */
.cart-bottom-trust-banner {
  background: #f5ede9;
  border: 1px solid #ebe0dc;
  border-radius: 10px;
  padding: 12px 20px;
  margin-top: 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bottom-trust-list {
  display: flex;
  align-items: center;
  flex: 1;
}
.bottom-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid #dfd2ce;
}
.bottom-trust-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.bottom-trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.bottom-trust-text strong {
  display: block;
  font-size: .78rem;
  color: var(--ink);
  line-height: 1.2;
}
.bottom-trust-text small {
  display: block;
  font-size: .68rem;
  color: var(--ink-soft);
}

.bottom-brand-motto {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #8a3328;
  line-height: 1.15;
  text-align: right;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bottom-brand-motto span {
  display: block;
}

/* Minimal App Footer.
   One centred row on a desktop; on a phone the three parts stack instead of
   being squeezed onto a line too narrow to hold them, and the "|" separator
   (which only makes sense between items on one line) is dropped. */
.app-footer {
  margin-top: auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: .78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.app-footer .sep {
  color: var(--muted);
}
.app-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}
.app-footer a:hover {
  text-decoration: underline;
  color: var(--primary);
}
.app-footer-brand {
  display: inline-flex;
  align-items: center;
}
.app-footer-brand img {
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
.app-footer-copy strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .app-footer {
    flex-direction: column;
    gap: 6px;
    /* The help-centre launcher is fixed to the bottom-right corner. Reserve its
       height here, or on a phone it sits on top of the last line of the footer. */
    padding: 18px 16px calc(78px + env(safe-area-inset-bottom, 0px));
    font-size: .74rem;
    line-height: 1.5;
  }
  .app-footer .sep {
    display: none;
  }
  .app-footer-brand img {
    height: 30px;
    max-width: 170px;
  }
  .app-footer-copy {
    /* Long enough to wrap on a narrow phone - let it, rather than overflowing */
    max-width: 100%;
    word-break: break-word;
  }
}

@media (max-width: 900px) {
  .cart-bottom-trust-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .bottom-trust-list {
    flex-wrap: wrap;
    gap: 10px;
  }
  .bottom-trust-item {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
  .bottom-brand-motto {
    text-align: left;
    margin-top: 4px;
  }
}

/* Mobile responsive cart */
@media (max-width: 820px) {
  .cart-page-wrap {
    min-height: auto !important;
    padding: 12px 14px 24px 14px !important;
  }
  .cart-layout-box {
    grid-template-columns: 1fr;
  }
  .cart-desktop-table-wrap {
    display: none;
  }
  .cart-mobile-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: none !important;
    overflow: visible !important;
  }
  .cart-mobile-item-card {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
  }
  .cart-mobile-item-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .cart-mobile-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #fff;
  }
  .cart-mobile-item-meta {
    flex: 1;
    min-width: 0;
  }
  .cart-mobile-title {
    font-weight: 600;
    font-size: .8rem;
    color: var(--ink);
  }
  .cart-mobile-sku {
    font-size: .68rem;
    color: var(--ink-soft);
  }
  .cart-mobile-rate {
    font-size: .78rem;
    font-weight: 600;
  }
  .cart-mobile-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
  }
  .cart-mobile-subtotal {
    text-align: right;
    font-size: .76rem;
  }
}
@media (min-width: 821px) {
  .cart-mobile-item-list {
    display: none;
  }
}

/* ---- Flipkart-Style Order History & Login Gate -------------------------- */
/* Shared page background - keeps Cart and My Orders visually identical.
   Uses the plain parchment surface from the Cart page: no gradients or
   dot texture, so both pages sit on the same flat site background. */
.orders-viewport-bg,
.page-viewport-bg {
  min-height: calc(100vh - 140px);
  background: var(--bg);
  padding: 18px 0 48px;
  position: relative;
}

.orders-page-container {
  /* Was 1080px, which left a wide empty gutter on a desktop screen while the
     order cards were cramped. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Plain breadcrumb, matching the Cart page (no frosted pill) */
.orders-breadcrumb {
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.orders-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.orders-breadcrumb a:hover {
  text-decoration: underline;
}
.orders-breadcrumb .active {
  color: var(--ink);
  font-weight: 700;
}

/* Auth Gate Card (When not logged in) */
.auth-track-gate-card {
  background: #ffffff;
  border: 1px solid #ebdcd3;
  border-radius: 20px;
  padding: 48px 36px;
  max-width: 640px;
  margin: 20px auto 40px;
  text-align: center;
  box-shadow: 0 16px 45px -10px rgba(55, 35, 25, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}
.auth-track-gate-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary) 0%, #a83226 50%, var(--accent) 100%);
}
.auth-gate-icon {
  font-size: 3rem;
  margin-bottom: 14px;
  display: inline-block;
  animation: pulseIco 2.5s infinite ease-in-out;
}
@keyframes pulseIco {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.auth-track-gate-card h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.auth-gate-text {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 26px;
}
.auth-gate-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.auth-gate-btn {
  min-width: 250px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(122, 31, 21, 0.25);
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.auth-gate-sub {
  font-size: .86rem;
  color: var(--ink-soft);
}
.auth-gate-sub a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.auth-gate-divider {
  position: relative;
  text-align: center;
  margin: 28px 0 24px;
}
.auth-gate-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.auth-gate-divider span {
  position: relative;
  background: var(--surface);
  padding: 0 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

.guest-track-form-wrap {
  text-align: left;
  background: #fbf9f6;
  border: 1px solid #ebdcd5;
  border-radius: 12px;
  padding: 18px 20px;
}
.guest-track-hint {
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.guest-track-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.guest-track-form input {
  flex: 1;
  min-width: 220px;
  height: 42px;
  padding: 0 14px;
  font-size: .9rem;
  border: 1px solid #ddd5cc;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.guest-track-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}
.guest-track-form button {
  padding: 0 22px;
  height: 42px;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 8px;
}

/* Flipkart-Style Orders Header */
.flipkart-orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #ffffff 0%, #fdfbf9 60%, #f7f3ee 100%);
  border: 1px solid #ebdcd5;
  border-left: 5px solid var(--primary);
  border-radius: 16px;
  padding: 22px 28px;
  box-shadow: 0 6px 24px -4px rgba(60, 40, 30, 0.05);
  position: relative;
  overflow: hidden;
}
.flipkart-orders-header::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(122, 31, 21, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.orders-main-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.orders-subtitle {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: 0;
}
.orders-subtitle strong {
  color: var(--ink);
  font-weight: 700;
}
#ordersCountBadge {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .82rem;
}
.orders-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.orders-search-wrap {
  position: relative;
  min-width: 280px;
}
.orders-search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 14px;
  font-size: .86rem;
  border: 1px solid #ddd5cc;
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: border-color .15s, box-shadow .15s;
}
.orders-search-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}
.orders-search-wrap .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .84rem;
  color: var(--muted);
  pointer-events: none;
}

.quick-track-collapse {
  background: #ffffff;
  border: 1px solid #ebdcd5;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.quick-track-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.quick-track-form input {
  flex: 1;
  min-width: 220px;
  height: 40px;
  padding: 0 14px;
  font-size: .88rem;
  border: 1px solid #ddd5cc;
  border-radius: 8px;
}

/* Empty State */
.flipkart-orders-empty {
  background: #ffffff;
  border: 1px solid #ebdcd5;
  border-radius: 18px;
  padding: 56px 24px;
  text-align: center;
  max-width: 540px;
  margin: 30px auto;
  box-shadow: 0 10px 30px -5px rgba(50, 35, 25, 0.05);
}
.flipkart-orders-empty .empty-icon {
  font-size: 3.2rem;
  margin-bottom: 14px;
}
.flipkart-orders-empty h3 {
  font-size: 1.35rem;
  font-weight: 750;
  margin: 0 0 8px;
  color: var(--ink);
}
.flipkart-orders-empty p {
  font-size: .92rem;
  color: var(--ink-soft);
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* Flipkart Order Cards */
.flipkart-orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flipkart-order-card {
  background: #ffffff;
  border: 1px solid #e5ddd5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px -3px rgba(45, 30, 25, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.flipkart-order-card:hover {
  border-color: rgba(122, 31, 21, 0.35);
  box-shadow: 0 10px 32px -4px rgba(122, 31, 21, 0.11);
  transform: translateY(-2px);
}

.flipkart-card-header {
  background: linear-gradient(180deg, #fdfcfb 0%, #f7f4f0 100%);
  border-bottom: 1px solid #ece5df;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .84rem;
  flex-wrap: wrap;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.order-id-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
}
.order-id-val {
  color: var(--primary);
  font-weight: 800;
}
.order-sep {
  color: var(--border);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.order-total-label {
  color: var(--ink-soft);
}
.order-total-val {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.btn-order-invoice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s ease;
}
.btn-order-invoice:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(122, 31, 21, 0.04);
}

/* Items List inside card */
.flipkart-card-body {
  padding: 6px 18px;
}
.flipkart-item-row {
  display: grid;
  grid-template-columns: 76px 1fr 120px 220px;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.flipkart-item-row:last-child {
  border-bottom: none;
}
.flipkart-item-thumb {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flipkart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flipkart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flipkart-item-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flipkart-item-title:hover {
  color: var(--primary);
}
.flipkart-item-meta {
  font-size: .8rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.flipkart-item-dest {
  font-size: .78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.dest-badge {
  font-size: .7rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.badge-cod {
  background: #fef3c7;
  color: #92400e;
}
.badge-paid {
  background: #e0f2fe;
  color: #0369a1;
}

.flipkart-item-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.flipkart-item-status-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flipkart-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-subtext {
  font-size: .74rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.3;
}
.btn-flipkart-track {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
.btn-flipkart-track:hover {
  background: rgba(122, 31, 21, 0.05);
  border-color: var(--primary);
}
.btn-flipkart-track .truck-icon {
  font-size: .85rem;
}
.btn-flipkart-track .caret-icon {
  font-size: .75rem;
  transition: transform .2s ease;
}
.btn-flipkart-track.active .caret-icon {
  transform: rotate(180deg);
}

/* Collapsible Timeline Wrapper */
.flipkart-timeline-wrapper {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  padding: 18px 22px;
  animation: slideDown .2s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.timeline-inner-card {
  max-width: 820px;
  margin: 0 auto;
}
.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
/* 5-Stage Stepper Timeline */
.timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin: 30px 10px 25px;
  padding: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: #e2dcd5;
  z-index: 1;
}
.tl-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.tl-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #d4ccc4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.tl-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s ease;
}
.tl-label {
  font-size: .80rem;
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 110px;
  line-height: 1.25;
}
/* Done state */
.tl-step.done .tl-dot {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.tl-step.done .tl-dot::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
  width: auto;
  height: auto;
  line-height: 1;
}
.tl-step.done .tl-label {
  color: var(--ink);
  font-weight: 700;
}
/* Active state */
.tl-step.active .tl-dot {
  background: #ffffff;
  border-color: var(--primary, #7a1f15);
  box-shadow: 0 0 0 4px rgba(122, 31, 21, 0.16);
}
.tl-step.active .tl-dot::after {
  background: var(--primary, #7a1f15);
}
.tl-step.active .tl-label {
  color: var(--primary, #7a1f15);
  font-weight: 800;
}

.orders-page-container .clean-card {
  background: #ffffff;
  border: 1px solid #ebdcd3;
  border-radius: 16px;
  box-shadow: 0 8px 30px -4px rgba(45, 30, 25, 0.06);
  padding: 24px 28px;
}

.stockyard-dispatch-note {
  background: linear-gradient(135deg, #f3f9f9 0%, #e8f4f4 100%);
  border-left: 4px solid var(--accent, #297373);
  border-radius: 0 10px 10px 0;
  padding: 12px 18px;
  font-size: .85rem;
  color: #1b4b4b;
  margin: 18px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stockyard-dispatch-note strong {
  color: #133838;
}
.timeline-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 10px;
}

/* Mobile Responsiveness for Orders */
@media (max-width: 860px) {
  .flipkart-item-row {
    grid-template-columns: 68px 1fr;
    gap: 12px;
    align-items: start;
  }
  .flipkart-item-price {
    grid-column: 2;
    text-align: left;
    margin-top: -2px;
  }
  .flipkart-item-status-col {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
  }
  .btn-flipkart-track {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 8px 14px;
  }
  .flipkart-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Checkout Payment Method Cards
   ========================================================================== */
.checkout-payment-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-payment-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  user-select: none;
}

.checkout-payment-card:hover {
  border-color: #c4b5b0;
  background: #fdfbfb;
}

.checkout-payment-card.active,
.checkout-payment-card:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: #fdf8f7;
  box-shadow: 0 2px 10px rgba(122, 31, 21, 0.06);
}

.checkout-payment-radio {
  margin: 3px 0 0 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0 !important;
}

.checkout-payment-body {
  flex: 1;
  min-width: 0;
}

.checkout-payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.checkout-payment-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-payment-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.checkout-payment-badge.instant {
  background: var(--ok-soft);
  color: var(--ok);
}

.checkout-payment-badge.direct {
  background: var(--accent-soft);
  color: var(--accent);
}

.checkout-payment-badge.popular {
  background: var(--primary-soft);
  color: var(--primary);
}

.checkout-payment-desc {
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 4px 0 0 0;
  line-height: 1.45;
}

/* Collapsible Bank Details Preview Box */
.checkout-bank-details {
  margin-top: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

.checkout-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 14px;
  margin-top: 8px;
}

.checkout-bank-item {
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.5;
}

.checkout-bank-item strong {
  color: var(--ink);
}

/* Narrowest phones: shrink the action labels just enough to fit both in full */
@media (max-width: 374px) {
  .pcard-actions {
    gap: 4px !important;
  }
  .btn-pcard-add,
  .btn-pcard-view {
    font-size: .64rem !important;
    padding: 6px 1px !important;
    letter-spacing: -.01em !important;
  }
}

/* ---- Catalogue empty / no-results state -------------------------------- */
.catalog-empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.catalog-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: .65;
}
.catalog-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  word-break: break-word;
}
.catalog-empty-text {
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* ---- Back link (replaces the breadcrumb trail) ------------------------- */
.product-breadcrumb .back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 15px 6px 12px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.product-breadcrumb .back-link:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
  text-decoration: none;
}
.product-breadcrumb .back-arrow {
  font-size: 1.05rem;
  line-height: 1;
}

/* ---- Delivery estimate (extends when ordering beyond stock) ------------ */
.delivery-estimate {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  line-height: 1.5;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-top: 10px;
}
.delivery-estimate.is-extended {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}
.delivery-icon { flex: 0 0 auto; }

/* Cart line shortage note */
.cart-shortage-note {
  font-size: .75rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 3px 7px;
  margin-top: 4px;
  display: inline-block;
}

/* Cart summary delivery estimate */
.summary-eta-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .78rem;
  line-height: 1.5;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-top: 8px;
}
.summary-eta-row.is-extended {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

/* ---- Compact quantity stepper inside the mobile cart card -------------- */
@media (max-width: 768px) {
  .cart-mobile-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  /* Stepper keeps its natural (smaller) size so the price is not pushed
     hard into the opposite corner. */
  .cart-mobile-item-bottom .qty-stepper {
    flex: 0 0 auto;
  }
  .cart-mobile-item-bottom .qty-stepper button {
    width: 26px;
    height: 28px;
    font-size: .9rem;
  }
  .cart-mobile-item-bottom .qty-stepper input {
    width: 34px !important;
    flex: 0 0 auto;
    height: 28px;
    font-size: .82rem;
  }
  .cart-mobile-item-bottom .cart-mobile-subtotal {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
  }
  .cart-mobile-item-bottom .cart-mobile-subtotal span {
    font-size: .7rem;
    color: var(--ink-soft);
  }
  .cart-mobile-item-bottom .cart-mobile-subtotal strong {
    font-size: .9rem;
    white-space: nowrap;
  }
}

/* ---- Inline field validation ------------------------------------------- */
.field-error {
  display: none;
  font-size: .78rem;
  line-height: 1.4;
  color: #b91c1c;
  margin-top: 5px;
}
.field input.is-invalid,
input.is-invalid {
  border-color: #dc2626 !important;
  background: #fef2f2;
}
.field input.is-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* ---- PWA install prompt ------------------------------------------------ */
/* [hidden] must win over display:flex or the bar would always be visible */
.pwa-install-bar[hidden] {
  display: none !important;
}
.pwa-install-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 24px);
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 6px 24px rgba(43, 35, 42, .16);
  box-sizing: border-box;
}
.pwa-install-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: 0 0 auto;
}
.pwa-install-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.pwa-install-copy strong {
  font-size: .88rem;
  color: var(--ink);
}
.pwa-install-copy span {
  font-size: .74rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-install-btn {
  flex: 0 0 auto;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.pwa-install-btn:hover { background: var(--primary-dark); }
.pwa-install-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
@media (max-width: 380px) {
  .pwa-install-copy span { display: none; }
}

/* ---- Product specifications (full-width, horizontal grid) --------------- */
/* Lives inside .detail-card (right column, under the buy section) so there is
   no gap between the product card and the specifications, and the sticky
   gallery stays in view while these scroll past. */
.product-specs {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
  min-width: 0;
}
.product-specs-heading {
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* 4 across on desktop, auto-reducing with width; each cell is label + value */
.product-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
}
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft, #f1ece7);
}
.spec-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.spec-value {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}

/* Wide desktops give the right column enough room for three across */
@media (min-width: 1400px) {
  .product-specs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Single-column card (<=900px): specs span the full width again */
@media (max-width: 900px) {
  .product-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
}
@media (max-width: 480px) {
  .product-specs {
    margin-top: 14px;
    padding-top: 14px;
  }
  /* Two readable columns on phones - never one long vertical list, never
     a forced single row that would overflow. */
  .product-specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
  }
  .spec-item { padding: 8px 0; }
  .spec-label { font-size: .64rem; }
  .spec-value { font-size: .82rem; }
}

/* ---- Cart table: never scroll horizontally ----------------------------- */
/* The unit-price cell gained a secondary "incl. X% GST · base ..." line. With
   white-space:nowrap that line set a minimum width wider than its column and
   pushed the table into horizontal scroll. Let the small print wrap instead. */
.cart-desktop-table-wrap {
  overflow-x: visible;
}
.cart-list-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
.cart-col-product { width: 38%; }
.cart-col-rate    { width: 21%; white-space: normal; }
.cart-col-qty     { width: 17%; text-align: center; }
.cart-col-total   { width: 18%; text-align: right; white-space: normal; }
.cart-col-action  { width: 6%;  text-align: right; }

.cart-rate-amt,
.cart-total-amt {
  white-space: nowrap;      /* keep the money on one line */
}
.cart-rate-gst,
.cart-total-gst {
  white-space: normal;      /* the small print may wrap */
  line-height: 1.35;
  word-break: break-word;
}
.cart-col-product .cart-prod-info { min-width: 0; }
.cart-prod-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Product page: fixed image left, scrolling card stack right --------- */
/* Mirrors the reference layout: two equal columns, the media column pinned
   while the right-hand cards scroll past it. */
@media (min-width: 901px) {
  .detail-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    /* the outer wrapper is just a grid now - each side carries its own card */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .detail-gallery-col {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}

.detail-right-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Each side is its own bordered card */
@media (min-width: 901px) {
  .detail-info-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-sizing: border-box;
  }
  .product-specs {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }
  .product-specs-heading {
    margin-top: 0;
  }
  /* Two columns of specs sit comfortably in the right-hand card */
  .product-specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Below 901px the card stacks; keep the single-card look it had before */
@media (max-width: 900px) {
  .detail-right-col { gap: 0; }
  .product-specs {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
}

/* ---- Help Center chat widget ------------------------------------------- */
.hc-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 18px 11px 15px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(43, 35, 42, .22);
  transition: background .15s ease, transform .15s ease;
}
.hc-launcher:hover { background: var(--primary-dark); transform: translateY(-1px); }
.hc-launcher.is-open { transform: scale(.94); opacity: .9; }
.hc-launcher-icon { font-size: 1.05rem; line-height: 1; }
.hc-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-sizing: content-box;
}
.hc-badge[hidden] { display: none !important; }

.hc-panel {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 301;
  width: 370px;
  max-width: calc(100vw - 24px);
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(43, 35, 42, .26);
  overflow: hidden;
  box-sizing: border-box;
  /* Keep the wheel inside the panel: without this, reaching the top or bottom
     of the transcript starts scrolling the page behind it. */
  overscroll-behavior: contain;
}
.hc-panel[hidden] { display: none !important; }

.hc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.hc-back {
  display: none;                 /* phones only - see the media query */
  background: none;
  border: none;
  color: #fff;
  padding: 2px;
  margin-right: -2px;
  cursor: pointer;
  align-items: center;
}
.hc-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
}
/* Green "we're online" dot, the cue every delivery app uses */
.hc-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--primary);
}
.hc-head-id { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1 1 auto; }
.hc-head-id strong { font-size: .95rem; letter-spacing: .01em; }
/* Explicit colour, not opacity: at .85 on the maroon header this line was
   barely legible. */
.hc-status {
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  opacity: .9;
  transition: background .15s ease, opacity .15s ease;
}
.hc-close:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

.hc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;      /* never hand the scroll to the page */
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 35, 42, .25) transparent;
}
.hc-body::-webkit-scrollbar { width: 8px; }
.hc-body::-webkit-scrollbar-track { background: transparent; }
.hc-body::-webkit-scrollbar-thumb {
  background: rgba(43, 35, 42, .22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.hc-msg { display: flex; flex-direction: column; max-width: 86%; }
.hc-msg-me { align-self: flex-end; align-items: flex-end; }
.hc-msg-agent, .hc-msg-bot { align-self: flex-start; align-items: flex-start; }
.hc-msg-system { align-self: center; max-width: 100%; }

.hc-from {
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 3px 2px;
  letter-spacing: .02em;
}
.hc-bubble {
  display: inline-block;       /* hug the text - a short "Hi" was a wide box */
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(43, 35, 42, .06);
}
.hc-msg-me .hc-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.hc-msg-agent .hc-bubble,
.hc-msg-bot .hc-bubble {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.hc-msg.is-repeat { margin-top: -5px; }
.hc-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  color: var(--muted);
  margin-top: 4px;
  padding: 0 2px;
}
.hc-tick { letter-spacing: -2px; }
.hc-tick.is-sent { color: #2563eb; }      /* delivered, like the blue ticks */

/* Day separator */
.hc-day {
  align-self: center;
  margin: 4px 0 2px;
}
.hc-day span {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Typing indicator */
.hc-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.hc-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: hcBlink 1.2s infinite ease-in-out;
}
.hc-typing i:nth-child(2) { animation-delay: .18s; }
.hc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes hcBlink {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* Each message eases in instead of snapping */
.hc-msg { animation: hcPop .18s ease-out; }
@keyframes hcPop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-msg { animation: none; }
  .hc-typing i { animation: none; opacity: .5; }
}
.hc-system {
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 7px 14px;
  text-align: center;
  max-width: 100%;
}

/* End chat button in the header */
.hc-end {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.hc-end:hover { background: rgba(255, 255, 255, .28); }
.hc-end[hidden] { display: none !important; }

/* Shared button style for the cards below the transcript */
.hc-btn {
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hc-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.hc-btn-solid {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.hc-btn-solid:hover:not(:disabled) { background: var(--primary-dark, var(--primary)); }
.hc-btn:disabled { opacity: .5; cursor: default; }

/* "End this chat?" confirmation */
.hc-confirm {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
}
.hc-confirm p { margin: 0 0 10px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.hc-confirm-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Rating card */
.hc-rate {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.hc-rate-title { margin: 0 0 10px; font-size: .88rem; font-weight: 700; color: var(--ink); }
.hc-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.hc-star {
  background: none;
  border: none;
  padding: 2px 3px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.hc-star.is-on { color: #f5a524; }
.hc-star:hover { transform: scale(1.12); }
.hc-rate-note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 16px;               /* stops iOS zooming on focus */
  color: var(--ink);
  outline: none;
}
.hc-rate-note:focus { border-color: var(--primary); }
.hc-rate-send { width: 100%; }
.hc-rate-done { margin: 0; font-size: 1.5rem; color: #f5a524; letter-spacing: 2px; }

/* Question prompt card: the question lives here, not in the transcript */
.hc-qcard {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.hc-qstep {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.hc-qtext {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 10px;
}
.hc-qhint { font-size: .76rem; color: var(--muted); }
.hc-qoptions { display: flex; flex-wrap: wrap; gap: 7px; }

/* Tap-to-answer chips */
.hc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px 2px;
  flex: 0 0 auto;
  background: var(--bg);
}
.hc-chips[hidden] { display: none !important; }
.hc-chip {
  background: var(--surface);
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease;
}
.hc-chip:hover, .hc-chip:active { background: var(--primary); color: #fff; }

.hc-topics { padding: 10px 14px 4px; flex: 0 0 auto; }
.hc-topics[hidden] { display: none !important; }

.hc-panel.is-guest .hc-body { display: none; }
.hc-panel.is-guest .hc-topics { margin: auto 0; }
.hc-auth { padding: 6px 0 10px; text-align: center; }
.hc-auth-text {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.hc-auth-btn {
  display: block;
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hc-auth-btn:hover { border-color: var(--primary); color: var(--primary); }
.hc-auth-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.hc-auth-primary:hover { background: var(--primary-dark, var(--primary)); color: #fff; }

.hc-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}
.hc-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 15px;
  font-family: inherit;
  /* 16px stops iOS Safari zooming the page when the field is focused */
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hc-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(122, 30, 46, .12);
}
.hc-send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.hc-send:active:not(:disabled) { transform: scale(.94); }
.hc-send:hover:not(:disabled) { background: var(--primary-dark, var(--primary)); }
.hc-send:disabled { opacity: .55; cursor: default; }

/* While the panel is a full-screen sheet, the page behind it must not scroll.
   Both html and body are pinned: which of the two actually scrolls varies by
   browser, and locking only one lets the page move under the sheet. */
html.hc-modal-open,
body.hc-modal-open {
  overflow: hidden;
  touch-action: none;
}

/* ---- phones: full-height sheet ---- */
@media (max-width: 560px) {
  .hc-launcher {
    right: 12px;
    bottom: 12px;
    padding: 10px 15px 10px 13px;
    font-size: .82rem;
  }
  .hc-launcher.is-open { opacity: 0; pointer-events: none; }   /* sheet covers it */

  .hc-panel {
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: auto;
    max-width: none;
    height: 100dvh;                 /* dodges the mobile browser chrome */
    max-height: none;
    border: none;
    border-radius: 0;
  }
  .hc-head {
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .hc-head-id strong { font-size: 1rem; }
  /* Phones get a back arrow like any in-app chat; the close cross stays on the
     desktop panel, which floats over the page rather than replacing it. */
  .hc-back { display: inline-flex; }
  .hc-close { display: none; }
  .hc-end { font-size: .72rem; padding: 6px 12px; }
  .hc-body { padding: 14px 12px; gap: 9px; }
  .hc-msg { max-width: 90%; }
  .hc-chips { padding: 10px 12px 2px; }
  .hc-chip { font-size: .82rem; padding: 8px 15px; }
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
  @media (max-width: 560px) {
    .hc-panel { height: 100vh; }
  }
}

/* ---- very small phones ---- */
@media (max-width: 360px) {
  .hc-launcher-text { display: none; }               /* icon-only bubble */
  .hc-launcher { padding: 12px; border-radius: 50%; }
  .hc-send { width: 38px; height: 38px; }
  .hc-chip { font-size: .78rem; padding: 7px 12px; }
}

/* ---- short/landscape screens ---- */
@media (max-height: 520px) and (min-width: 561px) {
  .hc-panel { height: calc(100vh - 96px); bottom: 70px; }
}

/* ---- Print: the invoice only -------------------------------------------- *
 * order-success.php doubles as the tax invoice, so printing it must drop the
 * surrounding app: the success banner and its buttons, the site header and
 * footer, the PWA install prompt and the support chat launcher. Anything
 * marked .no-print is screen furniture.
 */
/* ---- Tax invoice (order-success.php) ------------------------------------ *
 * Laid out to match the R. K. Hardware estimate/invoice format: seller block,
 * buyer + invoice meta, a bordered item grid, then bank details beside the
 * totals, the amount in words, terms and the signature line.
 */
.invoice-sheet {
  --inv-green: #2ECC71;          /* sampled from the R. K. Hardware template */
  --inv-navy:  #2C3F51;
  --inv-rule:  #D9DEE3;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--inv-rule);
  border-radius: 6px;
  padding: 0 0 0;
  color: #1f2933;
  font-size: .84rem;
  overflow: hidden;
}

/* ---- Banner: navy panel with a green strip curving away from the logo ---- */
.inv-banner {
  position: relative;
  background: var(--inv-navy);
  padding-bottom: 14px;
}
.inv-banner-strip {
  background: var(--inv-green);
  margin-left: 190px;
  border-bottom-left-radius: 72px;
  min-height: 74px;
  padding: 12px 20px 12px 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  color: #fff;
  font-size: .76rem;
  line-height: 1.4;
}
.inv-contact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 280px;
  border-left: 1px solid rgba(255, 255, 255, .55);
  padding-left: 10px;
}
.inv-ico { font-size: .9rem; line-height: 1.2; opacity: .95; }

.inv-logo {
  position: absolute;
  top: 12px;
  left: 20px;
  width: 92px;
  height: 66px;
  background: #fff;
  border-radius: 4px;
  display: grid;
  place-items: center;
  padding: 4px;
}
.inv-logo img { max-width: 100%; max-height: 100%; }

.inv-banner-body { padding: 4px 20px 0; color: #fff; }
.inv-seller-name {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #fff;
}
.inv-banner-line { font-size: .72rem; color: var(--inv-green); line-height: 1.5; }

.inv-title {
  padding: 16px 20px 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--inv-navy);
}

.inv-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 10px 20px 16px;
}
.inv-meta-right { text-align: right; line-height: 1.8; }
.inv-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--inv-green);
  letter-spacing: .01em;
}
.inv-buyer-name { font-size: .98rem; font-weight: 700; margin: 2px 0 3px; }
.inv-meta-line { font-size: .8rem; color: #33475b; line-height: 1.7; }
.inv-strong { font-weight: 700; color: #1f2933; }

.inv-table {
  width: calc(100% - 40px);
  margin: 0 20px;
  border-collapse: collapse;
}
.inv-table th {
  background: var(--inv-navy);
  border: 1px solid var(--inv-navy);
  padding: 8px;
  font-size: .74rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
}
.inv-table td {
  border: 1px solid var(--inv-rule);
  padding: 7px 8px;
  font-size: .8rem;
  vertical-align: top;
}
.inv-table .c { text-align: center; }
.inv-table .r { text-align: right; }
.inv-item { font-weight: 600; color: var(--ink); }

.inv-lower {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 320px);
  gap: 24px;
  margin-top: 18px;
  padding: 0 20px;
}
.inv-bank { font-size: .8rem; }
.inv-bank .inv-label { margin-bottom: 4px; }

.inv-totals { align-self: start; }
.inv-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  border: 1px solid var(--inv-rule);
  border-top: none;
  font-size: .84rem;
}
.inv-total-row:first-child { border-top: 1px solid var(--inv-rule); }
.inv-total-row span:first-child { color: #33475b; }
.inv-grand {
  background: var(--inv-green);
  border-color: var(--inv-green);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}
.inv-grand span:first-child { color: #fff; }

.inv-words { margin-top: 20px; padding: 0 20px; }
.inv-words-value { font-size: .86rem; font-weight: 600; margin-top: 3px; }

.inv-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin-top: 18px;
  padding: 0 20px 18px;
}
.inv-sign { text-align: left; }
.inv-sign-img { display: block; width: 150px; margin: 6px 0 2px; }
.inv-sign-label {
  font-size: .82rem;
  font-weight: 700;
  color: #1f2933;
  border-top: 1px solid #1f2933;
  padding-top: 5px;
  display: inline-block;
  min-width: 170px;
}

/* ---- Footer bars: green strip with the navy shape curving over it ------- */
.inv-footbar { display: flex; height: 34px; margin-top: 10px; }
.inv-footbar-green { flex: 0 0 42%; background: var(--inv-green); }
.inv-footbar-navy {
  flex: 1 1 auto;
  background: var(--inv-navy);
  border-top-left-radius: 34px;
  margin-right: 8%;
}

@media (max-width: 640px) {
  .inv-banner-strip {
    margin-left: 0;
    border-bottom-left-radius: 0;
    padding: 10px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .inv-contact { border-left: none; padding-left: 0; max-width: none; }
  .inv-logo { position: static; margin: 12px 0 0 14px; }
  .inv-banner-body, .inv-title, .inv-meta, .inv-lower, .inv-words, .inv-foot { padding-left: 14px; padding-right: 14px; }
  .inv-table { width: calc(100% - 28px); margin: 0 14px; }
  .inv-head, .inv-meta, .inv-lower, .inv-foot { grid-template-columns: 1fr; display: block; }
  .inv-meta-right, .inv-sign { text-align: left; margin-top: 12px; }
  .inv-totals { margin-top: 14px; }
  /* The grid scrolls rather than crushing eight columns onto a phone */
  .inv-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@page { margin: 12mm; }      /* don't depend on the browser's default margin */

@media print {
  .no-print,
  .topbar,
  .app-footer,
  .pwa-install-bar,
  .hc-launcher,
  .hc-panel {
    display: none !important;
  }

  /* Let the invoice use the whole sheet instead of the on-screen card */
  body {
    background: #fff;
    margin: 0;
  }
  main.container {
    padding: 0 !important;
    max-width: none !important;
    width: 100%;
  }
  #invoiceArea, .invoice-sheet {
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The banner and footer bars are the letterhead - they must print */
  .inv-banner, .inv-table th, .inv-grand,
  .inv-footbar-green, .inv-footbar-navy { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Keep the grid readable on paper - no phone scroll behaviour */
  .inv-table { display: table !important; white-space: normal !important; }
  .inv-table tr { page-break-inside: avoid; }
  .inv-lower, .inv-foot { page-break-inside: avoid; }

  /* Keep the item table from splitting a row across two pages */
  .cart-list-table tr { page-break-inside: avoid; }

  /* Print the real colours rather than the browser's washed-out defaults */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---- My Orders: five-stage progress ------------------------------------- *
 * A stage turns green only once its real event has happened (approved,
 * assigned, started, delivered), so the colour is information rather than
 * decoration.
 */
.order-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.order-stage {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--surface);
}
.order-stage-top { display: flex; align-items: center; gap: 7px; }
.order-stage-tick {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2, #eee);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}
.order-stage-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.order-stage-note  { font-size: .72rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.order-stage-at    { font-size: .68rem; color: var(--muted); margin-top: 3px; }

.order-stage.is-done {
  border-color: #16a34a;
  background: #f0fdf4;
}
.order-stage.is-done .order-stage-tick { background: #16a34a; color: #fff; }
.order-stage.is-done .order-stage-label,
.order-stage.is-done .order-stage-note  { color: #166534; }
.order-stage.is-current { box-shadow: 0 0 0 2px rgba(22, 163, 74, .22); }

/* Partially delivered: some items handed over, the rest on another trip. */
.order-stage.is-partial {
  border-color: #eab308;
  background: #fefce8;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, .22);
}
.order-stage.is-partial .order-stage-tick { background: #eab308; color: #fff; }
.order-stage.is-partial .order-stage-label,
.order-stage.is-partial .order-stage-note  { color: #854d0e; }

/* Unpaid online order: the second step is the customer's payment. */
.order-stage.is-payment-pending {
  border-color: var(--warn, #d98a2b);
  background: #fff8ec;
  box-shadow: 0 0 0 2px rgba(217, 138, 43, .18);
}
.order-stage.is-payment-pending .order-stage-tick { background: var(--warn, #d98a2b); color: #fff; }
.order-stage.is-payment-pending .order-stage-label { color: #9a5b12; }
.order-stage.is-payment-pending .order-stage-note  { color: #8a5a1c; }

.order-driver-card {
  border: 1px solid var(--border);
  border-left: 3px solid #16a34a;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: .82rem;
  line-height: 1.6;
  background: var(--surface);
}
.order-driver-card strong { display: block; font-size: .74rem; text-transform: uppercase;
                            letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 3px; }

@media (max-width: 760px) {
  .order-stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .order-stages { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   ACCOUNT (Edit Details) + ADDRESS BOOK + MY ORDERS
   Rebuilt 2026-09-19: dense layout, no dead space, cards at every width.
   ========================================================================== */

/* ---------- Shared page shell ---------- */
.account-page {
  padding: 22px 0 56px;
  flex: 1;
}
.account-page .container { width: 100%; }

.account-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.account-crumb {
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.account-crumb a { color: var(--accent); text-decoration: none; }
.account-crumb span { margin: 0 6px; }
.account-head h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  letter-spacing: -.02em;
}
.account-head p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.account-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.account-alert { margin-bottom: 16px; }

/* Two columns on desktop: identity rail + the address book that needs the room */
.account-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.account-side { display: grid; gap: 18px; align-content: start; }
.account-main { min-width: 0; }

.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.account-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.account-card-title { margin: 0; font-size: 1.05rem; }
.account-card-sub { margin: 3px 0 0; font-size: .82rem; color: var(--ink-soft); }

/* ---------- Identity panel ---------- */
.account-identity-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.account-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  flex: 0 0 48px;
}
.account-identity-top h2 { margin: 0; font-size: 1.05rem; }
.account-verified {
  font-size: .74rem;
  font-weight: 700;
  color: var(--ok);
}

.account-facts { margin: 0; display: grid; gap: 12px; }
.account-facts > div { display: grid; gap: 2px; }
.account-facts dt {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
}
.account-facts dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.account-fact-wrap { overflow-wrap: anywhere; }

.account-locked-note {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border-left: 3px solid var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.account-form { display: grid; gap: 12px; }
.account-form .field { margin: 0; }

.account-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--ink-soft);
}
.account-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.account-empty strong { display: block; color: var(--ink); margin-bottom: 4px; }
.account-empty p { margin: 0 0 16px; font-size: .86rem; }

/* ---------- Address cards ---------- */
.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.address-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.address-card.is-default {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.address-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.address-tag {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.address-default-badge {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
}
.address-name { font-size: .95rem; color: var(--ink); }
.address-lines {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.address-landmark { font-style: italic; }
.address-phone { margin: 0; font-size: .82rem; color: var(--ink-soft); }

.address-card-actions {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.address-inline-form { display: inline; margin: 0; }
.address-action {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
}
.address-action:hover { background: rgba(41,115,115,.1); }
.address-action.is-danger { color: var(--danger); }
.address-action.is-danger:hover { background: var(--danger-soft); }

/* ---------- Add / edit address form ---------- */
.address-form-wrap {
  display: none;
  margin-bottom: 18px;
}
.address-form-wrap.is-open { display: block; }
.address-form {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.address-form .field { margin: 0; }
.address-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.address-form-close {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
}

.address-label-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.address-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.address-chip.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.address-default-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: var(--ink);
  cursor: pointer;
}
.address-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Checkout address picker ---------- */
.checkout-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.checkout-card-eyebrow {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.checkout-card-title { margin: 2px 0 0; font-size: 1.12rem; }
.checkout-card-link {
  font-size: .84rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  /* Also used on a <button>, which brings its own background, border and font */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.checkout-card-link:hover {
  text-decoration: underline;
}

.checkout-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.checkout-address-option {
  position: relative;
  display: flex;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.checkout-address-option:hover { border-color: var(--accent); }
.checkout-address-option.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.checkout-address-option input[type="radio"] {
  margin: 3px 0 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.checkout-address-body { display: grid; gap: 4px; min-width: 0; }
.checkout-address-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.checkout-address-name { font-size: .92rem; }
.checkout-address-lines { font-size: .83rem; line-height: 1.45; color: var(--ink-soft); }
.checkout-address-phone { font-size: .8rem; color: var(--ink-soft); }
.checkout-address-edit {
  position: absolute;
  top: 10px; right: 12px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.checkout-billed-to {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: .82rem;
  color: var(--ink-soft);
}
.checkout-no-address {
  text-align: center;
  padding: 28px 16px;
  color: var(--ink-soft);
}
.checkout-no-address strong { display: block; color: var(--ink); margin-bottom: 4px; }
.checkout-no-address p { margin: 0 0 14px; font-size: .86rem; }

/* ==========================================================================
   MY ORDERS
   ========================================================================== */

.orders-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.orders-head h1 { margin: 0 0 2px; font-size: 1.6rem; letter-spacing: -.02em; }
.orders-head p { margin: 0; font-size: .88rem; color: var(--ink-soft); }

/* Totals strip: fills the space the old header left blank */
.orders-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, auto));
  gap: 8px;
}
.orders-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  text-align: center;
  min-width: 92px;
}
.orders-stat-value {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.orders-stat-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- Filter bar ---------- */
.orders-filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.orders-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.orders-search-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.orders-search-wrap .search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  pointer-events: none;
  opacity: .6;
}
.orders-search-wrap input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
}
.orders-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.orders-filter-selects {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.orders-select { display: grid; gap: 3px; }
.orders-select > span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
}
.orders-select select,
.orders-select input[type="date"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 8px 10px;
  font: inherit;
  font-size: .86rem;
  color: var(--ink);
  min-width: 140px;
}
.orders-select select:focus,
.orders-select input[type="date"]:focus { outline: none; border-color: var(--accent); }
.orders-reset-btn { align-self: flex-end; }

.orders-custom-range {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.orders-filter-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--ink-soft);
}
.orders-track-ref-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.orders-no-match {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.orders-no-match strong { display: block; color: var(--ink); margin: 6px 0 4px; }
.orders-no-match p { margin: 0 0 14px; font-size: .86rem; }

/* ---------- Order cards ---------- */
.orders-list { display: grid; gap: 14px; }

.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.order-card-ref {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.order-card-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--muted);
}
.order-card-ref strong { font-size: .95rem; color: var(--primary); overflow-wrap: anywhere; }
.order-card-date { font-size: .8rem; color: var(--ink-soft); }

.order-card-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.order-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--status-color, var(--ink));
}
.order-card-status .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-color, var(--ink-soft));
}
.order-card-total { font-size: 1rem; font-weight: 800; color: var(--ink); }

/* Items */
.order-card-items { padding: 4px 16px; }
.order-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.order-item:last-of-type { border-bottom: 0; }
/* Long orders show two lines until the customer asks for the rest */
.order-item.is-extra { display: none; }
.order-card.show-all-items .order-item.is-extra { display: grid; }

.order-item-thumb {
  width: 52px; height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  overflow: hidden;
}
.order-item-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.order-item-info { display: grid; gap: 2px; min-width: 0; }
.order-item-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.order-item-meta { font-size: .8rem; color: var(--ink-soft); }
.order-item-price { font-size: .92rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

.order-items-more {
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px dashed var(--border);
  padding: 9px 0;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

/* Footer */
.order-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
}
.order-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.order-meta-chip {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.order-meta-chip.is-cod { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.order-meta-chip.is-paid { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }

.order-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.order-track-btn .caret-icon { margin-left: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .account-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .account-page { padding: 16px 0 40px; }
  .account-head { align-items: flex-start; }
  .account-head h1, .orders-head h1 { font-size: 1.32rem; }
  .account-head-actions { width: 100%; }
  .account-head-actions > * { flex: 1 1 auto; text-align: center; }

  .account-card { padding: 15px 14px; }
  .address-grid,
  .checkout-address-list { grid-template-columns: 1fr; }

  /* Totals wrap into a 2x2 block instead of squeezing into one row */
  .orders-stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .orders-head { gap: 12px; }

  .orders-filter-bar { padding: 12px; }
  .orders-filter-selects { width: 100%; }
  .orders-select { flex: 1 1 140px; }
  .orders-select select,
  .orders-select input[type="date"] { width: 100%; min-width: 0; }
  .orders-reset-btn { flex: 1 1 100%; }

  /* Every row becomes a card block: label above value, nothing clipped */
  .order-card-head,
  .order-card-foot { padding: 11px 13px; }
  .order-card-head-right { width: 100%; justify-content: space-between; }
  .order-card-items { padding: 2px 13px; }

  .order-item {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "price price";
    row-gap: 6px;
  }
  .order-item-thumb { grid-area: thumb; width: 46px; height: 46px; }
  .order-item-info  { grid-area: info; }
  .order-item-price {
    grid-area: price;
    text-align: right;
    font-size: .88rem;
    padding-top: 2px;
    border-top: 1px dashed var(--border);
  }

  .order-card-foot { flex-direction: column; align-items: stretch; }
  .order-card-actions { width: 100%; }
  .order-card-actions > * { flex: 1 1 0; text-align: center; justify-content: center; }

  .address-form { padding: 14px 12px; }
  .address-form-actions > * { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .orders-stat { padding: 8px 10px; min-width: 0; }
  .orders-stat-value { font-size: .98rem; }
  .order-card-ref strong { font-size: .88rem; }
  .address-card-actions { gap: 2px; }
}

/* Overrides for the rebuilt My Orders filter bar.
   The global form reset up top is `input:not([type=...]) ...` with seven
   :not() pseudo-classes, which outranks any plain two-class selector - so
   these have to be anchored on an id to take effect at all. */
.orders-filter-meta #ordersCountBadge {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  font-size: inherit;
}

/* The icon sits on the LEFT here; `right` must be cleared or the old rule
   leaves the element stretched across the whole field. */
.orders-filter-bar .orders-search-wrap .search-icon {
  left: 13px;
  right: auto;
}
.orders-filter-bar input#orderSearchInput {
  padding: 10px 12px 10px 40px;
  height: 42px;
}
.orders-filter-bar select#orderStatusFilter,
.orders-filter-bar select#orderRangeFilter,
.orders-filter-bar input#orderDateFrom,
.orders-filter-bar input#orderDateTo {
  padding: 9px 10px;
  height: 42px;
}

/* Checkout/cart grid: a `1fr` track still has min-width:auto, so a wide child
   (the address picker) pushed the column past the viewport and the whole page
   scrolled sideways on a phone. minmax(0,…) plus min-width:0 on the children
   lets the column actually shrink. */
.cart-layout-box > * { min-width: 0; }
@media (max-width: 900px) {
  .cart-layout-box { grid-template-columns: minmax(0, 1fr); }
}

/* "Showing N of M orders" is one sentence; only it and the Track link are
   spaced apart. Without the wrapper the three words were flex children of a
   space-between row and drifted to opposite ends. */
.orders-filter-count { display: inline; }
.orders-filter-count strong { color: var(--primary); }

/* Totals that double as filters */
button.orders-stat {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
button.orders-stat:hover { border-color: var(--primary); background: var(--primary-soft); }
button.orders-stat:active { transform: translateY(1px); }
button.orders-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orders-stat.is-active {
  border-color: var(--primary);
  background: var(--primary);
}
.orders-stat.is-active .orders-stat-value,
.orders-stat.is-active .orders-stat-label { color: #fff; }

/* ---- OTP screen: correct the email without re-registering ---- */
.otp-change-email {
  display: none;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}
.otp-change-email.is-open { display: block; }
.otp-change-email .field { margin-bottom: 12px; }
.otp-change-hint {
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.otp-change-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.otp-change-actions > * { flex: 1 1 auto; }

/* ---- Account modal (company / GST) ---- */
.acc-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.acc-modal[hidden] { display: none; }
.acc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 35, 42, .5);
}
.acc-modal-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(43, 35, 42, .28);
}
.acc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}
.acc-modal-head h2 { margin: 0; font-size: 1.1rem; }
.acc-modal-x {
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
}
.acc-modal-body { padding: 18px; display: grid; gap: 14px; }
.acc-modal-body .field { margin: 0; }
.acc-modal-sub { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }
.acc-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-modal-actions > * { flex: 1 1 auto; }

.account-company-btn { margin-top: 14px; }
.account-company-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 560px) {
  /* A sheet from the bottom is easier to reach one-handed than a centred box */
  .acc-modal { padding: 0; place-items: end center; }
  .acc-modal-panel {
    max-width: none;
    max-height: 88dvh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .acc-modal-actions { flex-direction: column-reverse; }
  .acc-modal-actions > * { width: 100%; }
}

/* ---- Order placed confirmation (shown on the catalogue after checkout) ---- */
.order-placed-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.order-placed-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 35, 42, .55);
  animation: opFade .2s ease;
}
.order-placed-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(43, 35, 42, .3);
  padding: 28px 24px 22px;
  text-align: center;
  animation: opRise .25s cubic-bezier(.2, .8, .3, 1);
}
@keyframes opFade { from { opacity: 0; } }
@keyframes opRise { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.order-placed-tick { width: 68px; height: 68px; margin: 0 auto 14px; }
.order-placed-tick svg { width: 100%; height: 100%; }
.order-placed-tick circle {
  fill: var(--ok-soft);
  stroke: var(--ok);
  stroke-width: 2;
}
.order-placed-tick path {
  fill: none;
  stroke: var(--ok);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: opTick .4s .2s ease forwards;
}
@keyframes opTick { to { stroke-dashoffset: 0; } }

.order-placed-panel h2 { margin: 0 0 6px; font-size: 1.25rem; }
.order-placed-sub {
  margin: 0 0 18px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.order-placed-facts {
  margin: 0 0 20px;
  display: grid;
  gap: 0;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  overflow: hidden;
}
.order-placed-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
}
.order-placed-facts > div:last-child { border-bottom: 0; }
.order-placed-facts dt { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.order-placed-facts dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.order-placed-actions { display: grid; gap: 8px; }
.order-placed-actions .btn { width: 100%; }

@media (max-width: 560px) {
  /* Bottom sheet, reachable with a thumb */
  .order-placed-modal { padding: 0; place-items: end center; }
  .order-placed-panel {
    max-width: none;
    max-height: 90dvh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .order-placed-tick { width: 58px; height: 58px; }
  .order-placed-panel h2 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .order-placed-panel,
  .order-placed-backdrop,
  .order-placed-tick path { animation: none; }
  .order-placed-tick path { stroke-dashoffset: 0; }
}


/* ---- Brand wordmark on small screens ----------------------------------- */
@media (max-width: 640px) {
  .brand-logo {
    height: 30px;
    max-width: 158px;
  }
}
@media (max-width: 380px) {
  .brand-logo {
    height: 26px;
    max-width: 132px;
  }
}


/* ---- Add-a-delivery-address sheet (checkout) ---------------------------
   A centred dialog on a desktop; on a phone it becomes a sheet that rises from
   the bottom edge, which is where a thumb already is and what every delivery
   app has trained people to expect. */
.checkout-add-address-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.checkout-add-address-btn:hover {
  background: var(--primary-soft);
}

.addr-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.addr-sheet.is-open { display: block; }

.addr-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 16, .55);
}
.addr-sheet-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  padding: 20px;
}
.addr-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.addr-sheet-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.addr-sheet-close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
}
.addr-sheet-form {
  display: grid;
  gap: 12px;
}
.addr-sheet-form .field { margin: 0; }

.addr-geo-btn {
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  font-size: .86rem;
  border-radius: var(--radius-sm);
  border-style: dashed;
}
.addr-geo-btn:disabled {
  opacity: .6;
  cursor: progress;
}
.addr-geo-status {
  font-size: .76rem;
  color: var(--ink-soft);
  line-height: 1.45;
  min-height: 1em;
}
.addr-geo-status.is-error { color: var(--danger, #b3261e); }

.addr-sheet-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .addr-sheet-panel {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* Three columns is unreadable on a phone; city / state / pincode stack */
  .addr-sheet-form .form-grid-2,
  .addr-sheet-form .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   Catalogue image: hover zoom + quick-view affordance
   ====================================================================== */
.pcard-media img {
  /* Slower and further than the old 1.04 nudge, so it reads as a zoom rather
     than a wobble. transform only - it never reflows the grid. */
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.product-card:hover .pcard-media img,
.product-card:focus-within .pcard-media img {
  transform: scale(1.14);
}
.pcard-media { cursor: zoom-in; }

/* Says what the click will do. Hidden until hover, and never on touch, where
   there is no hover state to reveal it and the tap opens the dialog anyway. */
.pcard-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 6px);
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 12, 16, .82);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.product-card:hover .pcard-zoom-hint,
.product-card:focus-within .pcard-zoom-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (hover: none) {
  .pcard-zoom-hint { display: none; }
  .product-card:hover .pcard-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard-media img,
  .pcard-zoom-hint { transition: none; }
  .product-card:hover .pcard-media img { transform: none; }
}

/* ======================================================================
   Quick view dialog
   ====================================================================== */
.qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.qv-overlay[hidden] { display: none; }
.qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 16, .58);
}
.qv-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
.qv-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.qv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  padding: 22px;
}
.qv-media {
  background: #fdfdfd;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.qv-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qv-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
}
.qv-info h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.qv-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .78rem; }
.qv-sku { color: var(--ink-soft); font-family: var(--font-mono, monospace); }
.qv-stock { padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.qv-stock.in  { background: #dcfce7; color: #166534; }
.qv-stock.out { background: #fee2e2; color: #991b1b; }

.qv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.qv-price strong { font-size: 1.5rem; color: var(--primary); font-weight: 800; }
.qv-unit { font-size: .82rem; color: var(--ink-soft); }
.qv-mrp  { font-size: .88rem; color: var(--muted); text-decoration: line-through; }
.qv-off  { font-size: .74rem; font-weight: 800; color: #166534; background: #dcfce7; padding: 2px 8px; border-radius: 999px; }
.qv-incl { font-size: .72rem; color: var(--muted); margin-top: -4px; }

.qv-desc { font-size: .86rem; line-height: 1.55; color: var(--ink-soft); margin: 4px 0 0; }
.qv-desc-long { font-size: .82rem; }

.qv-specs {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: .8rem;
}
.qv-specs > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qv-specs dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.qv-specs dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.qv-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.qv-actions .btn { flex: 1 1 150px; text-align: center; }

.qv-loading { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--ink-soft); }
.qv-spinner {
  width: 30px; height: 30px; margin: 0 auto 12px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: qv-spin .7s linear infinite;
}
@keyframes qv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qv-spinner { animation-duration: 2s; } }

@media (max-width: 720px) {
  .qv-panel {
    top: auto; bottom: 0; left: 0;
    transform: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .qv-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* A square hero eats the whole screen before any text is reached */
  .qv-media { aspect-ratio: 16 / 10; }
  .qv-specs { grid-template-columns: 1fr; }
}

/* ======================================================================
   Product detail: thumbnails as a vertical rail to the LEFT of the image
   ====================================================================== */
@media (min-width: 861px) {
  .detail-gallery-col {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "thumbs main";
    gap: 12px;
    align-items: start;
  }
  .detail-gallery-box   { grid-area: main; }
  /* Without this the caption is auto-placed into the 72px thumbnail column and
     wraps to three cramped lines beside the rail. */
  .detail-fullview-link { grid-column: 2; }
  .detail-gallery-thumbs {
    grid-area: thumbs;
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    /* Many images must not stretch the column past the main photo */
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .detail-thumb { width: 64px; height: 64px; }
}

/* ======================================================================
   Product detail: "Click to see full view" + full-view lightbox
   ====================================================================== */

/* A transparent layer over the whole photo, so the click lands anywhere on the
   image. z-index 1 keeps it UNDER .gallery-nav (z-index 3), or the prev/next
   arrows would be swallowed by it. */
.detail-fullview-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.detail-fullview-link {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  cursor: zoom-in;
}
.detail-fullview-link:hover { text-decoration: underline; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 16, .72);
}
.lightbox-panel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(1180px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  display: grid;
  /* Image gets the room; the rail beside it is for choosing, not reading. */
  grid-template-columns: minmax(0, 1fr) 300px;
  overflow: hidden;
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .2);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.lightbox-stage {
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 24px;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  /* contain, never cover: a full view that crops the product defeats itself. */
  object-fit: contain;
  display: block;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox-nav:hover { background: #fff; border-color: var(--primary); color: var(--primary); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

.lightbox-side {
  border-left: 1px solid var(--border);
  background: var(--surface-subtle);
  padding: 54px 20px 20px;
  overflow-y: auto;
  min-width: 0;
}
.lightbox-title {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
}
.lightbox-sub {
  margin: 0 0 14px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.lightbox-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.lightbox-thumb {
  aspect-ratio: 1 / 1;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lightbox-thumb:hover { border-color: var(--primary); }
.lightbox-thumb.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.lightbox-count {
  margin: 14px 0 0;
  font-size: .76rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .lightbox-panel {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    /* The rail moves under the image: side by side leaves neither usable. */
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .lightbox-stage { padding: 44px 12px 12px; }
  .lightbox-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 38vh;
  }
  .lightbox-title { font-size: .9rem; }
  .lightbox-thumbs { grid-template-columns: repeat(5, 1fr); }
  .lightbox-nav { width: 36px; height: 36px; }
}

/* ======================================================================
   Product detail: hover magnifier
   ====================================================================== */
.zoom-lens {
  position: absolute;
  z-index: 2;              /* over the photo, under .gallery-nav (3) */
  border: 1px solid var(--primary);
  background: rgba(122, 31, 21, .12);
  pointer-events: none;    /* never steal the mousemove that positions it */
  border-radius: 2px;
}
.zoom-lens[hidden] { display: none; }

.zoom-panel {
  position: absolute;
  top: 0;
  left: calc(100% + 18px);
  z-index: 60;
  width: 460px;
  /* Square, to match the 1:1 gallery frame it magnifies */
  aspect-ratio: 1 / 1;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.zoom-panel[hidden] { display: none; }

/* The idle 1.02 nudge fights the magnifier: it rescales the photo underneath
   the lens, so the region sampled stops matching the region outlined. */
.detail-gallery-box.is-zooming img { transform: none; }
.detail-gallery-box.is-zooming { cursor: crosshair; }

/* Not enough room to park a 460px panel beside the image without covering the
   price and Add to Cart, so the magnifier stays off and the click-to-full-view
   does the job instead. */
@media (max-width: 1100px) {
  .zoom-panel, .zoom-lens { display: none !important; }
}

/* ======================================================================
   Price range filter: two handles, dragged from either end
   ====================================================================== */
.price-range {
  position: relative;
  height: 30px;
  margin: 10px 2px 2px;
}
.price-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--border);
  border-radius: 999px;
}
.price-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--primary);
  border-radius: 999px;
}

/* Scale markers under the track, as on the reference. Evenly spaced dots drawn
   with a repeating gradient rather than elements, so the count adapts to the
   width and there is nothing extra for a screen reader to read out. */
.price-range-track::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 3px;
  right: 3px;
  height: 3px;
  background-image: radial-gradient(circle, var(--muted) 1.5px, transparent 1.6px);
  background-size: 16.6% 3px;
  background-repeat: repeat-x;
  opacity: .55;
  pointer-events: none;
}

/* Two sliders stacked on top of each other. The track of each is transparent
   and ignores the pointer, so a click always reaches whichever THUMB is
   nearest rather than the upper input swallowing every drag. */
.price-range-input {
  position: absolute;
  /* Centred on the track, and the same height as the thumb, so the thumb's
     own vertical centring inside the input lands exactly on the line. */
  top: 50%;
  left: 0;
  width: 100%;
  height: 18px !important;
  margin: 0 !important;
  transform: translateY(-50%);
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.price-range-input:focus { outline: none; }

.price-range-input::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: grab;
}
.price-range-input::-webkit-slider-thumb:active { cursor: grabbing; }
.price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: grab;
}
.price-range-input::-moz-range-track { background: none; border: 0; }
.price-range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--primary-soft); }
.price-range-input:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var(--primary-soft); }

.price-select-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.price-select-row select {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 2px 4px 2px 8px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.price-select-sep {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--ink-soft);
}

/* Filters apply a moment after the last change. A thin progress line across
   the top of the sidebar shows that the tick registered and something is
   coming - without moving any of the controls under the cursor. */
/* No position:relative here. The sidebar is position:sticky, which is already
   a positioned ancestor for this ::before - and overriding it to relative made
   the sticky rule's `top: 70px` act as a literal 70px nudge, dropping the whole
   filter box out of line with the product grid. */
.catalog-sidebar.is-applying::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% 100%;
  animation: filter-applying 1.1s linear infinite;
  z-index: 5;
}
@keyframes filter-applying {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-sidebar.is-applying::before { animation: none; }
}

/* ======================================================================
   Captured-location readout (address forms)
   ====================================================================== */
.geo-pin-readout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
  margin: 8px 0 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  font-size: .8rem;
}
.geo-pin-readout[hidden] { display: none; }

.geo-pin-coords {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.geo-pin-acc {
  justify-self: end;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.geo-pin-note {
  grid-column: 1 / -1;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Precise enough to route a driver to. */
.geo-pin-readout.is-precise {
  border-color: #86efac;
  background: #f0fdf4;
}
.geo-pin-readout.is-precise .geo-pin-acc { background: #dcfce7; color: #166534; }

/* Captured and kept, but too coarse to navigate by - said plainly rather than
   dressed up as an error, because the coordinates WERE saved. */
.geo-pin-readout.is-coarse {
  border-color: #fde68a;
  background: #fffbeb;
}
.geo-pin-readout.is-coarse .geo-pin-acc { background: #fef3c7; color: #92400e; }

/* ======================================================================
   Cart: an online order still awaiting payment
   ====================================================================== */
.cart-pending-order {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  background: #fffbeb;
}
.cart-pending-icon { font-size: 1.3rem; line-height: 1.2; }
.cart-pending-body { flex: 1 1 320px; min-width: 0; }
.cart-pending-body strong {
  display: block;
  font-size: .92rem;
  color: #92400e;
  margin-bottom: 4px;
}
.cart-pending-body p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cart-pending-actions { flex: 0 0 auto; align-self: center; }

@media (max-width: 640px) {
  .cart-pending-actions { flex: 1 1 100%; }
  .cart-pending-actions .btn { width: 100%; }
}