/* ==========================================================================
   AVE Trade — UI revamp design system
   Loaded after style.css and Bootstrap; overrides both.
   Tokens taken from "AVE Trade Site.dc.html" (design system reference frame).
   Purely presentational — no behaviour, no markup contracts.
   ========================================================================== */

:root {
  /* Colour — Option B palette ------------------------------------------ */
  --ave-ink: #17181a;         /* headings, primary text           */
  --ave-ink-2: #57544d;       /* body copy                        */
  --ave-sub: #7a766e;         /* secondary text                   */
  --ave-faint: #a3a09a;       /* captions, meta                   */
  --ave-paper: #fbfaf8;       /* page background                  */
  --ave-card: #ffffff;        /* surfaces                         */
  --ave-line: #e6e2db;        /* hairlines, borders               */
  --ave-line-2: #efece6;      /* lighter rule                     */
  --ave-line-strong: #a3a09a; /* input borders                    */
  --ave-action: #ef2b07;      /* CTAs, links                      */
  --ave-action-hover: #ff6833;
  --ave-orange: #ff6833;      /* brand highlight                  */
  --ave-orange-soft: #ff8a5e; /* accent link on dark              */
  --ave-ok: #1a7a43;
  --ave-warn: #8a5a00;
  --ave-err: #b3261e;

  /* Dark surfaces ------------------------------------------------------ */
  --ave-ink-line: #2b2d31;
  --ave-ink-panel: #212327;
  --ave-on-ink: #fbfaf8;
  --ave-on-ink-dim: #b0aba0;
  --ave-on-ink-meta: #c6c1b6;

  /* Tint surfaces ------------------------------------------------------ */
  --ave-shade: #f4f2ee;
  --ave-warn-bg: #fdf4e3;
  --ave-warn-line: #ecd9b0;
  --ave-warn-ink: #6b4a00;

  /* Type — Host Grotesk throughout, per Option B ----------------------- */
  --ave-font-head: 'Host Grotesk', 'Inter', system-ui, sans-serif;
  --ave-font-body: 'Host Grotesk', 'Inter', system-ui, sans-serif;

  /* Geometry — Option B runs near-square ------------------------------- */
  --ave-r-control: 2px;
  --ave-r-card: 2px;
  --ave-elev-1: 0 8px 24px rgba(23, 24, 26, .10);
  --ave-elev-2: 0 16px 40px rgba(23, 24, 26, .12);
  --ave-control-h: 48px;
  --ave-touch-h: 44px;
  --ave-gutter: 48px;
}


/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--ave-font-body);
  background: var(--ave-paper);
  color: var(--ave-ink-2);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--ave-action); text-decoration: none; }
a:hover, a:focus { color: var(--ave-action-hover); }

h1, h2, h3, h4, h5, h6,
.ave-h1, .ave-h2, .ave-h3 {
  font-family: var(--ave-font-head);
  color: var(--ave-ink);
  margin: 0;
}

h1, .ave-h1 { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
h2, .ave-h2 { font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
h3, .ave-h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 18px; font-weight: 600; }

@media (max-width: 991.98px) {
  h1, .ave-h1 { font-size: 30px; }
  h2, .ave-h2 { font-size: 22px; }
  h3, .ave-h3 { font-size: 19px; }
}

p { line-height: 1.5; }

.ave-sub    { color: var(--ave-sub); }
.ave-meta   { font-size: 13px; color: var(--ave-sub); }
.ave-caption{ font-size: 12px; color: var(--ave-faint); }

/* Lining tabular figures for every price, dimension and quantity. */
.ave-num, .ave-price, .ave-qty, td.ave-num, .table td.ave-num {
  font-variant-numeric: tabular-nums;
}

/* Focus — visible on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ave-action);
  outline-offset: 2px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.ave-shell   { max-width: 1440px; margin: 0 auto; }
.ave-gutter  { padding-left: var(--ave-gutter); padding-right: var(--ave-gutter); }
.ave-stack   { display: flex; flex-direction: column; }
.ave-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.ave-stack-12{ display: flex; flex-direction: column; gap: 12px; }
.ave-stack-16{ display: flex; flex-direction: column; gap: 16px; }
.ave-row     { display: flex; align-items: center; }
.ave-row-gap { display: flex; align-items: center; gap: 12px; }

@media (max-width: 991.98px) {
  :root { --ave-gutter: 16px; }
}

/* ==========================================================================
   Buttons — 44px+ targets
   ========================================================================== */

.ave-btn,
.btn {
  font-family: var(--ave-font-body);
  border-radius: var(--ave-r-control);
  min-height: var(--ave-control-h);
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}

.ave-btn-primary,
.btn-primary,
.btn-danger {
  background: var(--ave-action);
  color: #fff;
  border: 0;
}
.ave-btn-primary:hover, .ave-btn-primary:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-danger:hover, .btn-danger:focus {
  background: var(--ave-action-hover);
  color: #fff;
}
.ave-btn-primary:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--ave-ink);
  outline-offset: 2px;
}

.ave-btn-secondary,
.btn-outline-dark,
.btn-outline-primary {
  background: transparent;
  color: var(--ave-ink);
  border: 1px solid var(--ave-ink);
}
.ave-btn-secondary:hover, .ave-btn-secondary:focus,
.btn-outline-dark:hover, .btn-outline-primary:hover {
  background: var(--ave-ink);
  color: #fff;
  border-color: var(--ave-ink);
}

.ave-btn-ink,
.btn-dark {
  background: var(--ave-ink);
  color: #fff;
  border: 0;
}
.ave-btn-ink:hover, .btn-dark:hover { background: #2a2d31; color: #fff; }

.ave-btn:disabled,
.ave-btn.disabled,
.btn:disabled,
.btn.disabled {
  background: var(--ave-line);
  color: #a8a59e;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 1;
}

.ave-btn-block { width: 100%; }
.ave-btn-sm { min-height: var(--ave-touch-h); font-size: 14px; padding: 11px 18px; }

/* Quiet text button (e.g. "Remove", "Change") */
.ave-btn-quiet {
  background: none;
  border: 0;
  color: var(--ave-action);
  font-weight: 600;
  font-size: 14px;
  height: var(--ave-touch-h);
  padding: 0 8px;
  cursor: pointer;
}
.ave-btn-quiet:hover { color: var(--ave-action-hover); text-decoration: underline; }

/* ==========================================================================
   Forms
   ========================================================================== */

.ave-field { display: flex; flex-direction: column; gap: 6px; }

.ave-label,
.form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ave-ink-2);
  margin: 0 0 2px;
}

.ave-input,
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--ave-font-body);
  height: var(--ave-control-h);
  border: 1px solid var(--ave-line-strong);
  border-radius: var(--ave-r-control);
  font-size: 15px;
  padding: 0 14px;
  color: var(--ave-ink);
  background: #fff;
  width: 100%;
  outline: none;
  box-shadow: none;
}

textarea, textarea.form-control { height: auto; padding: 12px 14px; line-height: 1.5; }

.ave-input:focus,
.form-control:focus,
.form-select:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--ave-ink);
  outline: 2px solid var(--ave-action);
  outline-offset: -1px;
  box-shadow: none;
}

.ave-input::placeholder,
.form-control::placeholder { color: var(--ave-faint); }

/* Error state */
.ave-input.is-invalid,
.form-control.is-invalid,
.is-invalid {
  border-color: var(--ave-err);
}
.ave-error,
.invalid-feedback,
.text-danger {
  font-size: 13.5px;
  color: var(--ave-err);
  font-weight: 600;
}

/* Checkbox / radio sizing for touch */
.form-check-input { width: 18px; height: 18px; margin-top: .18em; }
.form-check-input:checked { background-color: var(--ave-action); border-color: var(--ave-action); }
.form-check-label { font-size: 14.5px; color: var(--ave-ink-2); }

/* ==========================================================================
   Cards & surfaces — flat + 1px border. Shadow is reserved for overlays.
   ========================================================================== */

.ave-card {
  background: var(--ave-card);
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
}
.ave-card-pad { padding: 20px 24px; }
.ave-card-flush { overflow: hidden; }

.card {
  background: var(--ave-card);
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  box-shadow: none;
}

.ave-panel-ink {
  background: var(--ave-ink);
  color: var(--ave-on-ink);
  border-radius: var(--ave-r-card);
}

.ave-overlay { box-shadow: var(--ave-elev-1); }

/* ==========================================================================
   Header
   ========================================================================== */

.ave-topbar {
  background: var(--ave-ink);
  color: var(--ave-on-ink-meta);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 8px var(--ave-gutter);
  flex-wrap: wrap;
}
.ave-topbar a { color: var(--ave-on-ink-meta); }
.ave-topbar a:hover { color: #fff; }
.ave-topbar .ave-topbar-cta { color: var(--ave-orange-soft); font-weight: 600; }
.ave-topbar-links { display: flex; gap: 24px; }

.ave-header {
  background: #fff;
  font-family: var(--ave-font-body);
}

.ave-header-main {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--ave-gutter);
  border-bottom: 1px solid var(--ave-line);
}

.ave-logo { height: 26px; width: auto; display: block; flex-shrink: 0; }

/* Search */
.ave-search {
  flex: 1;
  display: flex;
  max-width: 480px;
  border: 1.5px solid var(--ave-ink);
  border-radius: var(--ave-r-control);
  overflow: hidden;
  background: #fff;
}
.ave-search input,
.ave-search .form-control {
  flex: 1;
  border: 0;
  font-size: 15px;
  padding: 0 14px;
  height: var(--ave-touch-h);
  outline: none;
  border-radius: 0;
}
.ave-search input:focus { outline: 2px solid var(--ave-action); outline-offset: -2px; border: 0; }
.ave-search button {
  background: var(--ave-ink);
  color: #fff;
  border: 0;
  padding: 0 20px;
  height: var(--ave-touch-h);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.ave-search button:hover { background: #2a2d31; }

/* Branch switcher */
.ave-branch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--ave-r-control);
  text-align: left;
}
.ave-branch:hover { background: var(--ave-paper); }
.ave-branch-label { font-size: 12px; color: var(--ave-sub); }
.ave-branch-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ave-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ave-ink);
}
.ave-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ave-orange); display: block; flex-shrink: 0;
}

.ave-header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ave-header-link {
  color: var(--ave-ink-2);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 12px;
  border-radius: var(--ave-r-control);
}
.ave-header-link:hover { background: var(--ave-paper); color: var(--ave-ink); }

.ave-cart-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ave-action);
  color: #fff;
  border: 0;
  border-radius: var(--ave-r-control);
  padding: 0 18px;
  height: var(--ave-touch-h);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ave-cart-btn:hover { background: var(--ave-action-hover); color: #fff; }
.ave-cart-count {
  background: #fff;
  color: var(--ave-action);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
/* Two badges exist because the inline cart JS writes to both #cart_count and
   #cart_count_m by id; only one is ever on screen. Bootstrap's d-* helpers are
   avoided here so the :empty rule below can win. */
.ave-cart-count--mobile { display: none; }
@media (max-width: 991.98px) {
  .ave-cart-count--desktop { display: none; }
  .ave-cart-count--mobile { display: inline; }
}
/* Rendered empty at zero — hide until it has a count so it isn't a blank pill. */
.ave-cart-count:empty { display: none !important; }

/* Primary nav */
.ave-nav {
  display: flex;
  align-items: center;
  padding: 0 var(--ave-gutter);
  border-bottom: 1px solid var(--ave-line);
  gap: 4px;
}
.ave-nav-link {
  display: block;
  font-family: var(--ave-font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ave-ink);
  padding: 14px 14px 11px;
  border-bottom: 3px solid transparent;
}
.ave-nav-link:hover { border-bottom-color: var(--ave-orange); color: var(--ave-ink); }
.ave-nav-link.is-active { border-bottom-color: var(--ave-action); }
.ave-nav-secondary { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ave-nav-secondary a { color: var(--ave-sub); padding: 10px; }
.ave-nav-secondary a:hover { color: var(--ave-ink); }
.ave-nav-secondary a.is-strong { color: var(--ave-ink); font-weight: 600; }

/* Mobile header */
.ave-header-mobile { display: none; border-bottom: 1px solid var(--ave-line); background: #fff; }
.ave-header-mobile-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
}
.ave-icon-btn {
  width: var(--ave-touch-h); height: var(--ave-touch-h);
  border: 0; background: none; font-size: 20px; color: var(--ave-ink);
  cursor: pointer; border-radius: var(--ave-r-control);
  display: inline-flex; align-items: center; justify-content: center;
}
.ave-icon-btn:hover { background: var(--ave-paper); }
.ave-header-mobile-lower { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.ave-header-mobile .ave-logo { height: 20px; }
.ave-branch-strip {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; min-height: 28px;
}
.ave-branch-strip-name {
  display: flex; align-items: center; gap: 7px;
  color: var(--ave-ink); font-weight: 600;
}

@media (max-width: 991.98px) {
  .ave-header-desktop { display: none; }
  .ave-header-mobile { display: block; }
  .ave-search input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ave-footer {
  background: var(--ave-ink);
  color: var(--ave-on-ink-dim);
  font-family: var(--ave-font-body);
}
.ave-footer a { color: var(--ave-on-ink-dim); }
.ave-footer a:hover { color: #fff; }
.ave-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 48px var(--ave-gutter) 40px;
  border-bottom: 1px solid var(--ave-ink-line);
}
.ave-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ave-footer-head {
  font-family: var(--ave-font-head);
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  margin-bottom: 4px;
}
.ave-footer-blurb { margin: 0; font-size: 15px; line-height: 1.6; max-width: 42ch; }
.ave-footer-branches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px var(--ave-gutter);
  border-bottom: 1px solid var(--ave-ink-line);
}
.ave-footer-branch { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.5; }
.ave-footer-branch a[href^="tel:"] { color: var(--ave-orange-soft); font-weight: 600; }
.ave-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 18px var(--ave-gutter);
  font-size: 13px;
  flex-wrap: wrap;
}
.ave-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .ave-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 16px 28px; }
  .ave-footer-branches { grid-template-columns: 1fr 1fr; padding: 24px 16px; }
  .ave-footer-bottom { flex-direction: column; gap: 10px; padding: 20px 16px; }
}
@media (max-width: 575.98px) {
  .ave-footer-top { grid-template-columns: 1fr; }
  .ave-footer-branches { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Service commitments / facts strips
   ========================================================================== */

.ave-signals {
  background: var(--ave-ink);
  color: var(--ave-on-ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.ave-signal { background: var(--ave-ink); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.ave-signal-t { font-family: var(--ave-font-head); font-size: 16px; font-weight: 700; color: #fff; }
.ave-signal-b { font-size: 14px; line-height: 1.5; color: var(--ave-on-ink-dim); }

.ave-facts {
  background: #fff;
  border-bottom: 1px solid var(--ave-line);
  padding: 16px var(--ave-gutter);
  display: flex;
  gap: 8px 36px;
  align-items: center;
  font-size: 15px;
  color: var(--ave-ink-2);
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .ave-signals { grid-template-columns: 1fr 1fr; }
  .ave-signal { padding: 16px; }
}

/* ==========================================================================
   Product card
   ========================================================================== */

/* Option B: tiles are open — no border or fill, separated by whitespace and
   a hairline under the image block. */
.ave-product-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ave-product-card .ave-product-media { border-radius: var(--ave-r-card); }
.ave-product-card:hover .ave-product-title { color: var(--ave-action); }

.ave-product-media {
  position: relative;
  height: 170px;
  background: repeating-linear-gradient(135deg, #efece6 0 10px, #e7e3db 10px 20px);
  overflow: hidden;
  display: block;
}
.ave-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ave-product-card--compact .ave-product-media { height: 120px; }

/* Option B shows the category as a quiet uppercase label, not an overlay. */
.ave-badge-cat {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(251, 250, 248, .92);
  color: var(--ave-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--ave-r-control);
}

.ave-product-body { padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ave-product-title {
  font-family: var(--ave-font-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--ave-ink);
  min-height: 42px;
}
a.ave-product-title:hover { color: var(--ave-action); }
.ave-product-sku { font-size: 13px; color: var(--ave-sub); }
.ave-product-price-row { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.ave-product-price {
  font-family: var(--ave-font-head);
  font-size: 24px;
  font-weight: 600;
  color: var(--ave-ink);
}
.ave-product-price-suffix { font-size: 13px; color: var(--ave-sub); }
.ave-product-unit { font-size: 13px; color: var(--ave-sub); font-variant-numeric: tabular-nums; }
.ave-product-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 6px; }
.ave-product-actions .ave-btn-primary { flex: 1; height: var(--ave-touch-h); font-size: 14px; }

/* Quantity stepper */
.ave-stepper {
  display: flex;
  border: 1px solid var(--ave-ink);
  border-radius: var(--ave-r-control);
  overflow: hidden;
  flex-shrink: 0;
}
.ave-stepper button {
  width: 40px; height: var(--ave-touch-h);
  border: 0; background: #fff;
  font-size: 17px; cursor: pointer; color: var(--ave-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.ave-stepper button:hover { background: var(--ave-paper); }
.ave-stepper input,
.ave-stepper .ave-stepper-val {
  width: 44px; height: var(--ave-touch-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  border: 0;
  border-left: 1px solid var(--ave-ink);
  border-right: 1px solid var(--ave-ink);
  border-radius: 0;
  text-align: center;
  padding: 0;
  font-variant-numeric: tabular-nums;
  background: #fff;
  -moz-appearance: textfield;
}
.ave-stepper input::-webkit-outer-spin-button,
.ave-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ave-stepper input:focus { outline: 2px solid var(--ave-action); outline-offset: -2px; }

/* Product grid */
.ave-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ave-product-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1199.98px) { .ave-product-grid, .ave-product-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .ave-product-grid, .ave-product-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 575.98px)  { .ave-product-grid, .ave-product-grid--3 { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ==========================================================================
   Stock & status
   ========================================================================== */

.ave-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
}
.ave-stock::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  display: block;
  flex-shrink: 0;
}
.ave-stock--in  { color: var(--ave-ok); }
.ave-stock--low { color: var(--ave-warn); }
.ave-stock--out { color: var(--ave-err); }

.ave-warnstrip {
  background: var(--ave-warn-bg);
  border: 1px solid var(--ave-warn-line);
  border-radius: var(--ave-r-control);
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ave-warn-ink);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.ave-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ave-sub);
  padding: 16px 0;
  margin: 0;
  list-style: none;
}
.ave-breadcrumb a { color: var(--ave-sub); }
.ave-breadcrumb a:hover { color: var(--ave-action); }
.ave-breadcrumb li + li::before { content: "›"; padding-right: 8px; color: var(--ave-line-strong); }
.ave-breadcrumb li { display: flex; align-items: center; }
.ave-breadcrumb [aria-current="page"] { color: var(--ave-ink-2); }

/* ==========================================================================
   Tables — 14–14.5px, tabular figures
   ========================================================================== */

.ave-table,
.table {
  width: 100%;
  font-size: 14.5px;
  color: var(--ave-ink-2);
  border-collapse: collapse;
  margin: 0;
}
.ave-table th,
.table th {
  font-family: var(--ave-font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ave-ink);
  text-align: left;
  padding: 12px 16px;
  background: var(--ave-shade);
  border-bottom: 1px solid var(--ave-line);
  white-space: nowrap;
}
.ave-table td,
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ave-line);
  vertical-align: middle;
}
.ave-table tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: 0; }
.ave-table .ave-t-right, .ave-table th.ave-t-right, .ave-table td.ave-t-right { text-align: right; }

.ave-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Account nav
   ========================================================================== */

.ave-account-nav {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
}
.ave-account-nav a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--ave-r-control);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ave-ink-2);
}
.ave-account-nav a:hover { background: var(--ave-paper); color: var(--ave-ink); }
.ave-account-nav a.is-active { background: var(--ave-shade); font-weight: 700; color: var(--ave-ink); }

.ave-account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 991.98px) {
  .ave-account-layout { grid-template-columns: 1fr; }
  .ave-account-nav { position: static; }
}

/* ==========================================================================
   Auth (sign in / register) — split panel
   ========================================================================== */

.ave-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.ave-auth-form { background: #fff; padding: 56px var(--ave-gutter); display: flex; flex-direction: column; justify-content: center; }
.ave-auth-form-inner { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 16px; }
.ave-auth-aside {
  background: var(--ave-ink);
  color: var(--ave-on-ink);
  padding: 56px var(--ave-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.ave-auth-aside h2, .ave-auth-aside .ave-h2 { color: #fff; }
@media (max-width: 991.98px) {
  .ave-auth { grid-template-columns: 1fr; min-height: 0; }
  .ave-auth-aside { display: none; }
  .ave-auth-form { padding: 28px 16px; }
}

/* ==========================================================================
   Section headings & content pages
   ========================================================================== */

.ave-section { padding: 52px var(--ave-gutter) 0; }
.ave-section-last { padding-bottom: 56px; }
.ave-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ave-prose { max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--ave-ink-2); }
.ave-prose h2 { margin: 32px 0 12px; }
.ave-prose h3 { margin: 24px 0 8px; }
.ave-prose p, .ave-prose li { line-height: 1.6; }
.ave-prose ul, .ave-prose ol { padding-left: 20px; }

@media (max-width: 991.98px) {
  .ave-section { padding: 26px 16px 0; }
  .ave-section-last { padding-bottom: 32px; }
}

/* ==========================================================================
   Empty / error states
   ========================================================================== */

.ave-empty {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ==========================================================================
   Off-canvas mobile menu + bottom sheet
   ========================================================================== */

.ave-scrim {
  position: fixed;
  inset: 0;
  background: rgba(23, 25, 28, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 1040;
}
.ave-scrim.is-open { opacity: 1; visibility: visible; }

.ave-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #fff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: var(--ave-elev-2);
}
.ave-drawer.is-open { transform: translateX(0); }
.ave-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ave-line);
}
.ave-drawer-nav { display: flex; flex-direction: column; padding: 8px; }
.ave-drawer-nav a {
  font-family: var(--ave-font-head);
  font-size: 16px; font-weight: 600; color: var(--ave-ink);
  padding: 13px 12px; border-radius: var(--ave-r-control);
}
.ave-drawer-nav a:hover { background: var(--ave-paper); }
.ave-drawer-sub a { font-family: var(--ave-font-body); font-weight: 500; font-size: 15px; color: var(--ave-ink-2); }

.ave-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: var(--ave-r-card) var(--ave-r-card) 0 0;
  z-index: 1050;
  transform: translateY(100%);
  transition: transform .2s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ave-elev-2);
}
.ave-sheet.is-open { transform: translateY(0); }
.ave-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--ave-line);
}
.ave-sheet-body { overflow-y: auto; padding: 8px 16px 16px; }
.ave-sheet-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--ave-line);
  display: flex; gap: 10px;
}

body.ave-no-scroll { overflow: hidden; }

/* Sticky mobile filter bar */
.ave-filter-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--ave-line);
  padding: 10px 16px;
  gap: 10px;
}
@media (max-width: 991.98px) { .ave-filter-bar { display: flex; } }

/* ==========================================================================
   Misc
   ========================================================================== */

.ave-gst-toggle {
  display: inline-flex;
  border: 1.5px solid var(--ave-ink);
  border-radius: var(--ave-r-control);
  overflow: hidden;
}
.ave-gst-toggle button,
.ave-gst-toggle a {
  border: 0;
  background: #fff;
  color: var(--ave-ink);
  height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.ave-gst-toggle .is-active { background: var(--ave-ink); color: #fff; }

.ave-divider { height: 1px; background: var(--ave-line); border: 0; margin: 0; }

.ave-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ave-shade);
  border: 1px solid var(--ave-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--ave-ink-2);
}

/* ==========================================================================
   Header form — holds the search box and the branch switcher in one <form>
   so the search GET keeps carrying `location`.
   ========================================================================== */

.ave-header-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  flex-wrap: wrap;
}

.ave-logo-link { display: flex; align-items: center; flex-shrink: 0; }

/* The branch <select> is drawn as the design's branch button. */
.ave-branch-select {
  border: 0;
  background: none;
  padding: 0 18px 0 0;
  height: auto;
  width: auto;
  font-family: var(--ave-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ave-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317191c'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}
.ave-branch-select:focus {
  outline: 2px solid var(--ave-action);
  outline-offset: 2px;
  border: 0;
}
.ave-branch:hover { background: var(--ave-paper); }
.ave-branch { padding: 4px 8px; border-radius: var(--ave-r-control); }

/* Mobile: the search form drops to its own full-width row. */
@media (max-width: 991.98px) {
  .ave-header-main { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .ave-header-form { order: 3; flex-basis: 100%; gap: 8px; }
  .ave-header-form .ave-search { max-width: none; }
  .ave-header-actions { margin-left: auto; gap: 4px; }
  .ave-logo { height: 20px; }
  .ave-cart-btn { padding: 0 12px; }
}

/* Header account dropdown */
.user-account-drop .dropdown-menu {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  box-shadow: var(--ave-elev-1);
  padding: 6px;
  min-width: 220px;
}
.user-account-drop .dropdown-item {
  border-radius: var(--ave-r-control);
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--ave-ink-2);
}
.user-account-drop .dropdown-item:hover { background: var(--ave-paper); color: var(--ave-ink); }
.user-account-drop .account-name {
  font-family: var(--ave-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ave-ink);
  padding: 8px 12px 6px;
}

/* ==========================================================================
   Mobile side navigation — keeps the existing openNav()/closeNav() width
   mechanism from script.js; only the skin changes.
   ========================================================================== */

.sidenav {
  background: #fff;
  padding-top: 0;
  box-shadow: none;
  border-right: 1px solid var(--ave-line);
}
.sidenav a:not(.closebtn) {
  font-family: var(--ave-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--ave-ink);
  padding: 13px 20px;
  display: flex;
  align-items: center;
}
.sidenav a:not(.closebtn):hover { background: var(--ave-paper); color: var(--ave-ink); }
.sidenav .dropdown-btn {
  font-family: var(--ave-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--ave-ink);
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  cursor: pointer;
}
.sidenav .dropdown-btn:hover { background: var(--ave-paper); }
.sidenav .dropdown-container { background: var(--ave-paper); }
.sidenav .dropdown-container a {
  font-family: var(--ave-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ave-ink-2);
  padding: 11px 20px 11px 32px;
}
.sidenav a.closebtn {
  padding: 12px 16px;
  display: inline-flex;
  color: var(--ave-ink);
}
.sidenav hr { border-color: var(--ave-line); opacity: 1; margin: 8px 0; }

/* ==========================================================================
   Content pages — page intro, card grids, flash messages, auth aside and
   contact layout. Added for the sign in / register / about / contact restyle.
   ========================================================================== */

.ave-page-intro { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.ave-lede { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ave-ink-2); }

/* Generic card grids */
.ave-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ave-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.ave-tile {
  background: var(--ave-card);
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.ave-tile h2, .ave-tile h3, .ave-tile h4 { margin: 0; }
.ave-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ave-ink-2); }

@media (max-width: 1199.98px) { .ave-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px)  { .ave-grid-2, .ave-grid-3 { grid-template-columns: 1fr; gap: 14px; } }

/* Flash messages */
.ave-alert {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-control);
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.5;
}
.ave-alert-ok  { background: #eef6f0; border-color: #c3e0ce; color: #146034; }
.ave-alert-err { background: #fdeeed; border-color: #f0c7c3; color: var(--ave-err); }

/* Auth — dark aside content */
.ave-auth-title { font-size: 36px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.ave-auth-aside h1, .ave-auth-aside .ave-auth-title { color: #fff; }
.ave-auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ave-auth-point;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ave-on-ink);
}
.ave-auth-points li { display: flex; gap: 12px; }
.ave-auth-points li::before {
  counter-increment: ave-auth-point;
  content: counter(ave-auth-point, decimal-leading-zero);
  color: var(--ave-orange);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ave-auth-note { font-size: 14px; color: var(--ave-on-ink-dim); }
.ave-auth-form-inner p { margin: 0; }
.ave-auth-foot { font-size: 14.5px; color: var(--ave-ink-2); line-height: 1.5; }
.ave-auth-foot a { font-weight: 600; }
.ave-auth-form-wide .ave-auth-form-inner { max-width: 520px; }

.ave-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}
.ave-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
textarea.ave-input { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ave-hint { font-size: 13px; color: var(--ave-sub); line-height: 1.45; }
.ave-req { color: var(--ave-err); }

@media (max-width: 575.98px) { .ave-field-row { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .ave-auth-title { font-size: 27px; } }

/* Contact — form beside the branch column */
.ave-contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: start; }
/* Branch cards — orange pin badge, name, address, hairline, then the contact
   row. Text stays ink with only the icons in brand orange, which keeps the
   details readable; card corners follow the 2px system radius. */
.ave-branches { display: flex; flex-direction: column; gap: 16px; }
.ave-branch-card {
  background: var(--ave-card);
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 22px 24px;
}
.ave-branch-head { display: flex; align-items: center; gap: 14px; }
.ave-branch-pin {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ave-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ave-branch-pin .material-icons-round { font-size: 20px; }
.ave-branch-name {
  font-family: var(--ave-font-head);
  font-size: 18px; font-weight: 700; color: var(--ave-ink); margin: 0;
}
.ave-branch-address {
  margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ave-sub);
}
.ave-branch-card .ave-divider { margin: 16px 0; }
.ave-branch-contacts { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.ave-branch-contacts a {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ave-ink); overflow-wrap: anywhere;
}
.ave-branch-contacts a:hover { color: var(--ave-orange); }
.ave-branch-contacts .material-icons-round {
  font-size: 18px; color: var(--ave-orange); flex-shrink: 0;
}

@media (max-width: 991.98px) { .ave-contact-layout { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home page
   ========================================================================== */

.ave-hero-slider { background: var(--ave-ink); }
.ave-hero-slider .ribs-slide-main {
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.ave-hero-slider .ribs-slide-main h1 { color: #fff; max-width: 20ch; text-wrap: balance; }
.ave-hero-slider .ribs-slide-main p { color: var(--ave-on-ink-dim); max-width: 52ch; }
@media (max-width: 991.98px) {
  .ave-hero-slider .ribs-slide-main { min-height: 260px; }
  .ave-hero-slider .ribs-slide-main h1 { font-size: 28px; }
}

/* Material / range cards */
.ave-material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ave-material-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) {
  .ave-material-grid, .ave-material-grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 575.98px) { .ave-material-grid { grid-template-columns: 1fr; } }

.ave-material-card {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ave-ink);
  transition: border-color .12s ease;
}
.ave-material-card:hover { border-color: var(--ave-ink); color: var(--ave-ink); }
.ave-material-media {
  display: block;
  height: 180px;
  background: repeating-linear-gradient(135deg, #efece6 0 10px, #e7e3db 10px 20px);
}
.ave-material-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ave-material-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; }
.ave-material-name { font-family: var(--ave-font-head); font-size: 21px; font-weight: 700; }
@media (max-width: 991.98px) {
  .ave-material-media { height: 120px; }
  .ave-material-name { font-size: 17px; }
}

/* Advertisement / offer tiles */
.ave-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ave-offer-grid:empty { display: none; }
.ave-offer { display: block; border-radius: var(--ave-r-card); overflow: hidden; }
.ave-offer img { width: 100%; height: auto; display: block; }
@media (max-width: 767.98px) { .ave-offer-grid { grid-template-columns: 1fr; gap: 12px; } }


/* Slick: give slides breathing room and equal height */
.ave-card-slider .slick-track { display: flex; align-items: stretch; }
.ave-card-slider .slick-slide { height: auto; padding: 0 10px; }
.ave-card-slider .slick-slide > div { height: 100%; }
.ave-card-slider .product-item { height: 100%; }
.ave-card-slider { margin: 0 -10px; }

/* Location modal */
#locationModal .modal-content {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  box-shadow: var(--ave-elev-2);
}

/* Skip link for keyboard users */
.ave-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ave-ink);
  color: #fff;
  padding: 12px 16px;
  z-index: 1100;
  border-radius: 0 0 var(--ave-r-control) 0;
}
.ave-skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   Cart, account, orders & addresses
   Appended for the cart / account-section restyle. Presentational only.
   ========================================================================== */

/* Page title — 32px desktop, matches the cart & account screens. */
.ave-page-title {
  font-family: var(--ave-font-head);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 20px;
}
@media (max-width: 991.98px) { .ave-page-title { font-size: 24px; margin-bottom: 14px; } }

.ave-card-title {
  font-family: var(--ave-font-head);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* Inline notices (kept inside a Bootstrap .alert so the dismiss button works) */
.ave-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--ave-r-control);
  padding: 12px 16px;
  font-size: 14.5px;
  margin-bottom: 16px;
}
.ave-note-ok  { background: #eaf5ee; border: 1px solid #bfe0cb; color: var(--ave-ok); }
.ave-note-err { background: #fbeae8; border: 1px solid #e5b5b0; color: var(--ave-err); }

/* --------------------------------------------------------------------------
   Cart
   -------------------------------------------------------------------------- */

.ave-cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 991.98px) { .ave-cart-grid { grid-template-columns: 1fr; gap: 16px; } }

.ave-cart-lines { display: flex; flex-direction: column; gap: 14px; }

.ave-cart-line { overflow: hidden; }
.ave-cart-line-body {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  align-items: center;
  flex-wrap: wrap;
}

.ave-cart-thumb {
  width: 72px;
  height: 56px;
  border-radius: var(--ave-r-control);
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: repeating-linear-gradient(135deg, #efece6 0 8px, #e7e3db 8px 16px);
}
.ave-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ave-cart-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.ave-cart-name {
  font-family: var(--ave-font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ave-ink);
  margin: 0;
}
a:hover .ave-cart-name { color: var(--ave-action); }
.ave-cart-unit { font-size: 13px; color: var(--ave-sub); font-variant-numeric: tabular-nums; }
.ave-cart-unit del { color: var(--ave-line-strong); margin-right: 4px; }

.ave-cart-qty { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.ave-cart-qty .text-danger { font-size: 13px; max-width: 180px; }

.ave-cart-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 110px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.ave-cart-amount-now {
  font-family: var(--ave-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ave-ink);
}
.ave-cart-amount-was { font-size: 13px; color: var(--ave-sub); text-decoration: line-through; }
.ave-cart-amount-was del { text-decoration: none; }

.ave-cart-remove {
  width: var(--ave-touch-h);
  height: var(--ave-touch-h);
  border: 0;
  background: none;
  color: var(--ave-sub);
  cursor: pointer;
  border-radius: var(--ave-r-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.ave-cart-remove:hover { background: var(--ave-paper); color: var(--ave-err); }

.ave-cart-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 991.98px) { .ave-cart-aside { position: static; } }

.ave-sum-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ave-sum-row { display: flex; justify-content: space-between; gap: 12px; }
.ave-sum-row > span:first-child { color: var(--ave-sub); }
.ave-sum-row > span:last-child { font-weight: 600; color: var(--ave-ink-2); }
.ave-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--ave-line);
  padding-top: 12px;
  font-family: var(--ave-font-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--ave-ink);
  font-variant-numeric: tabular-nums;
}
.ave-sum-total-label { display: flex; flex-direction: column; gap: 1px; }
.ave-sum-total-label small {
  font-family: var(--ave-font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ave-sub);
}

/* Decorative placeholder box — it reads as a rendering glitch rather than an
   icon, and Option B's empty states are cleaner without it. Kept in the markup
   (aria-hidden) so it can be restored with real artwork later. */
.ave-empty-icon { display: none; }

/* --------------------------------------------------------------------------
   Toolbars (search + sort)
   -------------------------------------------------------------------------- */

.ave-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.ave-toolbar form { margin: 0; }
.ave-toolbar-search { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; }
.ave-toolbar-search .ave-input { flex: 1; min-width: 0; }
.ave-toolbar-sort { width: 220px; max-width: 100%; }
.ave-icon-only { padding: 0 14px; }

/* --------------------------------------------------------------------------
   Orders
   -------------------------------------------------------------------------- */

.ave-order-card { overflow: hidden; margin-bottom: 16px; }
.ave-order-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 20px;
  background: var(--ave-shade);
  border-bottom: 1px solid var(--ave-line);
}
@media (max-width: 767.98px) { .ave-order-head { grid-template-columns: 1fr 1fr; gap: 12px; } }

.ave-meta-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ave-meta-label { font-size: 12.5px; color: var(--ave-sub); }
.ave-meta-value {
  font-family: var(--ave-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ave-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.ave-order-line {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ave-line);
  flex-wrap: wrap;
}
.ave-order-line:last-child { border-bottom: 0; }
.ave-order-thumb {
  width: 64px;
  height: 52px;
  border-radius: var(--ave-r-control);
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: repeating-linear-gradient(135deg, #efece6 0 8px, #e7e3db 8px 16px);
}
.ave-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ave-order-line-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.ave-order-line-col { display: flex; flex-direction: column; gap: 2px; min-width: 120px; flex: 0 1 auto; }
.ave-order-line-col--end { align-items: flex-end; text-align: right; }
.ave-order-addr { font-size: 13px; color: var(--ave-sub); line-height: 1.45; max-width: 24ch; }
.ave-order-amount {
  font-family: var(--ave-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ave-ink);
  font-variant-numeric: tabular-nums;
}

.ave-pager { display: flex; justify-content: center; padding-top: 8px; }
.ave-pager .pagination { margin: 0; gap: 4px; }
.ave-pager .page-link {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-control);
  color: var(--ave-ink-2);
  font-size: 14px;
  min-width: 40px;
  text-align: center;
}
.ave-pager .page-item.active .page-link {
  background: var(--ave-ink);
  border-color: var(--ave-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Addresses
   -------------------------------------------------------------------------- */

.ave-address-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1399.98px) { .ave-address-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .ave-address-grid { grid-template-columns: 1fr; } }

.ave-address-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; height: 100%; }
.ave-address-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14.5px;
  color: var(--ave-ink-2);
  line-height: 1.5;
}
.ave-address-name { font-weight: 600; color: var(--ave-ink); }
.ave-address-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--ave-line);
}

/* --------------------------------------------------------------------------
   Forms & modals
   -------------------------------------------------------------------------- */

.ave-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ave-form-grid .ave-span-2 { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .ave-form-grid { grid-template-columns: 1fr; } }

.modal-content {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  box-shadow: var(--ave-elev-2);
}
.modal-header, .modal-footer { border-color: var(--ave-line); padding: 16px 24px; }
.modal-body { padding: 20px 24px; }
.modal-title { font-family: var(--ave-font-head); font-size: 19px; font-weight: 700; }

/* ==========================================================================
   Category / product listing
   ========================================================================== */

.ave-listing-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}
.ave-listing-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ave-ink-2); max-width: 70ch; }
.ave-listing-branch { display: flex; flex-direction: column; gap: 2px; text-align: right; flex-shrink: 0; }
.ave-listing-branch-name {
  display: flex; align-items: center; gap: 7px; justify-content: flex-end;
  font-family: var(--ave-font-head); font-size: 19px; font-weight: 700;
}

.ave-listing-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 24px;
  align-items: start;
}

/* Filter rail */
.ave-filter-rail {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 16px;
}
.ave-filter-rail-head { display: flex; justify-content: space-between; align-items: center; }
.ave-filter-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ave-filter-legend {
  font-family: var(--ave-font-head);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--ave-line);
  padding-bottom: 7px;
}
.ave-filter-actions { display: flex; flex-direction: column; gap: 8px; }

.ave-range { display: flex; align-items: center; gap: 12px; }
.ave-range .form-range { flex: 1; height: auto; border: 0; padding: 0; background: none; }
.ave-range-val { font-size: 14px; font-weight: 600; color: var(--ave-ink); min-width: 3ch; text-align: right; }
.ave-range-label { font-size: 13.5px; color: var(--ave-sub); margin: 0; }

/* Range thumb/track in brand colours */
.form-range::-webkit-slider-thumb { background: var(--ave-action); }
.form-range::-moz-range-thumb { background: var(--ave-action); border: 0; }

.ave-listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ave-sort-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.ave-sort-form .ave-input { width: auto; min-width: 200px; height: var(--ave-touch-h); }

.ave-pagination { margin-top: 32px; }
.ave-pagination .pagination { margin: 0; gap: 6px; }
.ave-pagination .page-link {
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-control);
  color: var(--ave-ink-2);
  font-size: 14px;
  font-weight: 600;
  min-width: var(--ave-touch-h);
  height: var(--ave-touch-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ave-pagination .page-item.active .page-link { background: var(--ave-ink); border-color: var(--ave-ink); color: #fff; }
.ave-pagination .page-item.disabled .page-link { color: var(--ave-line-strong); background: #fff; }

/* On mobile the rail becomes the existing #mobileFilter sheet, whose height is
   animated by openFilter()/closeFilter() in filter.js — leave that mechanism
   alone and only restyle the surface. */
@media (max-width: 991.98px) {
  .ave-listing-layout { grid-template-columns: 1fr; }
  .ave-filter-rail { position: static; border: 0; border-radius: 0; padding: 16px; }
  .ave-listing-head { align-items: flex-start; }
  .ave-listing-branch { text-align: left; }
  .ave-listing-branch-name { justify-content: flex-start; }
  .ave-sort-form .ave-input { min-width: 0; }
}

/* ==========================================================================
   Product detail
   ========================================================================== */

.ave-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
}

.ave-gallery {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  overflow: hidden;
  padding: 16px;
}
.ave-gallery .item-image-slider img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ave-r-control);
}
/* Slick dots inside the gallery card */
.ave-gallery .slick-dots { position: static; margin-top: 12px; }
.ave-gallery .slick-dots li button:before { font-size: 9px; color: var(--ave-line-strong); opacity: 1; }
.ave-gallery .slick-dots li.slick-active button:before { color: var(--ave-action); }

.ave-buybox { display: flex; flex-direction: column; gap: 16px; }
.ave-product-h1 { font-size: 34px; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.ave-buybox-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ave-buybox-summary { font-size: 15px; line-height: 1.6; color: var(--ave-ink-2); }
.ave-buybox-summary p:last-child { margin-bottom: 0; }

.ave-price-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ave-price-now {
  font-family: var(--ave-font-head);
  font-size: 34px;
  font-weight: 700;
  color: var(--ave-ink);
  font-variant-numeric: tabular-nums;
}
.ave-price-was {
  font-size: 15px;
  color: var(--ave-sub);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.ave-price-badge {
  background: var(--ave-shade);
  border: 1px solid var(--ave-line);
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ave-ink-2);
}

.ave-buybox-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card);
  padding: 20px 22px;
}
.ave-buy-row { display: flex; align-items: center; gap: 16px; }
.ave-inline-field { display: flex; gap: 8px; }
.ave-inline-field .ave-input { flex: 1; }
.ave-buybox-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ave-buybox-actions .ave-btn { flex: 1; min-width: 160px; }
.ave-buybox-form .ave-error:empty { display: none; }

.ave-buybox-assurances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  color: var(--ave-sub);
}
.ave-buybox-assurances li { display: flex; gap: 9px; align-items: flex-start; }
.ave-buybox-assurances li::before { content: "✓"; color: var(--ave-ok); font-weight: 700; flex-shrink: 0; }

/* Accordion — full width, but prose inside stays readable */
.ave-product-detail .accordion-body > * { max-width: 80ch; }
.ave-product-detail .accordion { --bs-accordion-border-color: var(--ave-line); }
.ave-product-detail .accordion-item {
  background: #fff;
  border: 1px solid var(--ave-line);
  border-radius: var(--ave-r-card) !important;
  margin-bottom: 12px;
  overflow: hidden;
}
.ave-product-detail .accordion-button {
  font-family: var(--ave-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ave-ink);
  background: #fff;
  box-shadow: none;
  padding: 18px 22px;
  height: auto;
}
.ave-product-detail .accordion-button:not(.collapsed) { background: var(--ave-shade); color: var(--ave-ink); }
.ave-product-detail .accordion-button:focus { box-shadow: none; outline: 2px solid var(--ave-action); outline-offset: -2px; }
.ave-product-detail .accordion-body { padding: 20px 22px; font-size: 15px; line-height: 1.6; color: var(--ave-ink-2); }
.ave-product-detail .accordion-body h6 {
  font-family: var(--ave-font-head); font-size: 15px; font-weight: 700; color: var(--ave-ink); margin: 18px 0 6px;
}
.ave-product-detail .accordion-body h6:first-child { margin-top: 0; }

/* Toast */
#liveToast.toast { background: var(--ave-ink) !important; color: #fff; border-radius: var(--ave-r-card); border: 0; }

@media (max-width: 991.98px) {
  .ave-product-layout { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
  .ave-product-h1 { font-size: 26px; }
  .ave-price-now { font-size: 28px; }
  .ave-buybox-actions .ave-btn { min-width: 0; }
}

/* ==========================================================================
   Neutralise legacy banded sections from style.css
   These class names are kept on the markup (other pages/JS may reference them)
   but the revamp draws those areas as plain page background / cards.
   ========================================================================== */

.product-item-breadcrumb,
.product-listing-header {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

.product-category-details {
  background: var(--ave-card);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* The header is no longer position-fixed, so the offset style.css applied to
   <main> at mobile widths (margin-top: 118px) is now dead space. */
#ave-main { margin-top: 0; }

/* ==========================================================================
   Option B alignment — refinements applied when the shared components sit in
   the Host Grotesk shell.
   ========================================================================== */

/* Product tiles: hairline above the action so the column has a base line,
   matching the concept's open tile treatment. */
.ave-product-actions {
  padding-top: 12px;
  border-top: 1px solid var(--ave-line);
}
.ave-product-card .ave-product-sku { color: var(--ave-faint); }

/* Filter rail and cards read as hairline surfaces rather than raised boxes. */
.ave-filter-rail,
.ave-card,
.card { box-shadow: none; }

/* Uppercase location read-outs look shouty in this shell. */
.ave-listing-branch-name { text-transform: capitalize; }

/* Breadcrumb chevron matches the concept's lighter separator. */
.ave-breadcrumb li + li::before { content: "/"; color: var(--ave-faint); }

/* Tables: hairline rules, no filled header block. */
.ave-table th,
.table th {
  background: transparent;
  border-bottom: 1px solid var(--ave-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  color: var(--ave-sub);
}

/* Account nav: flat list with an orange active marker. */
.ave-account-nav a.is-active {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--ave-orange);
  border-radius: 0;
}

/* Auth split panel picks up the concept's dark aside. */
.ave-auth-aside { background: var(--ave-ink); }