/* Fignoc — visual overrides layered after styles.css. Uses tokens.css variables only. */

/* ── SECTION 1 — GLOBAL RESET ── */
/* Overrides: base body and paragraph defaults */
body {
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

p {
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

/* ── SECTION 2 — PROMO BANNER ── */
/* Overrides: .promo-banner */
.promo-banner {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.promo-banner a {
  color: var(--color-text-inverse);
  text-decoration: underline;
  font-weight: var(--weight-semibold);
}

/* ── SECTION 4 — TRUST BAR ── */
/* Overrides: .trust-bar and .trust-item */
.trust-bar {
  padding: var(--space-xl) 0;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface-card);
  border: calc(var(--space-xs) / 4) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.trust-item:hover {
  box-shadow: var(--shadow-md);
}

.trust-item-icon {
  width: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.trust-item-text strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.trust-item-text span {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ── SECTION 5 — CATEGORY CARDS ── */
/* Overrides: .categories-row and .category-card */
.categories-row {
  padding: var(--space-2xl) 0;
}

.category-cards {
  gap: var(--space-md);
}

.category-card {
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  border: calc(var(--space-xs) / 4) solid var(--color-border);
  background: var(--color-surface-card);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-xs) / -2));
}

.category-card-icon {
  width: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm));
  height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.category-card span {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* ── SECTION 6 — PRODUCT CARDS ── */
/* Overrides: .product-card and children */
.product-card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: calc(var(--space-xs) / 4) solid var(--color-border);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.product-card:hover {
  transform: translateY(calc(var(--space-xs) / -1 + var(--space-xs) / 4));
  box-shadow: var(--shadow-md);
}

.product-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background: var(--color-surface);
}

.product-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.retail-price {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.product-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ── SECTION 7 — BUTTONS ── */
/* Overrides: all button variants */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: calc(var(--space-xs) / 2) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-xs) / -4));
}

.btn-primary:focus-visible {
  outline: calc(var(--space-xs) - var(--space-xs) / 4) solid var(--color-accent);
  outline-offset: calc(var(--space-xs) / 2);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: transparent;
  color: var(--color-primary);
  border: calc(var(--space-xs) / 2) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-secondary:focus-visible {
  outline: calc(var(--space-xs) - var(--space-xs) / 4) solid var(--color-accent);
  outline-offset: calc(var(--space-xs) / 2);
}

.btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex: 1;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  min-height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-add-to-cart:hover {
  background: var(--color-accent);
}

.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-primary);
  border: calc(var(--space-xs) / 4) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  min-height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.btn-view:hover {
  border-color: var(--color-primary);
  background: var(--color-border);
}

/* ── SECTION 8 — SECTION PANELS & LAYOUT ── */
/* Overrides: .section-panel, .homepage-grid, spacing */
.section-panel {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  border: calc(var(--space-xs) / 4) solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.section-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: calc(var(--space-xs) / 4) solid var(--color-border);
}

.section-title-bar h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.see-all-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.see-all-link:hover {
  color: var(--color-accent);
}

/* ── SECTION 9 — DEAL STRIP & UPSELL ── */
/* Overrides: .deal-strip and .upsell-band */
.deal-strip {
  padding: var(--space-sm) 0;
}

.deal-badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.deal-item-price {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.upsell-band {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}

.upsell-band a {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.upsell-band a:hover {
  text-decoration: underline;
}

/* ── SECTION 10 — FOOTER ── */
/* Overrides: footer */
.footer-grid {
  gap: var(--space-xl);
  padding: var(--space-2xl) 0;
}

.footer-column h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: calc(var(--space-xs) / 4) solid
    color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: var(--space-sm);
}

.footer-column ul li a {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
  text-decoration: none;
  line-height: var(--leading-normal);
  transition: color var(--transition-fast);
}

.footer-column ul li a:hover {
  color: var(--color-text-inverse);
}

.footer-column p {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  line-height: var(--leading-relaxed);
}

/* ── SECTION 11 — MOBILE IMPROVEMENTS ── */
/* Overrides: responsive layout and tap targets */
@media (max-width: 768px) {
  .trust-item {
    flex-direction: row;
    align-items: center;
    padding: var(--space-md);
  }

  .trust-item-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .section-panel {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
  }

  .footer-grid {
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  body {
    font-size: var(--text-base);
  }

  .section-panel {
    padding: var(--space-md);
  }

  .product-actions {
    flex-direction: column;
  }

  .btn-add-to-cart,
  .btn-view {
    width: 100%;
    justify-content: center;
  }

  .upsell-band {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
  }
}

/* Ensure tap targets meet minimum (aligned to spacing scale) */
.mobile-link {
  min-height: calc(var(--space-xl) + var(--space-sm) + var(--space-xs));
  padding: var(--space-sm) var(--space-md);
}

.header-bottom-link {
  min-height: calc(var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-xs));
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — Premium / motion / depth (overrides earlier sections where noted)
   Colors: only var(--*) + color-mix(..., var(--*), …). No raw hex.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SECTION A — STICKY HEADER WITH SCROLL BEHAVIOUR ── */
/* Overrides: header position / elevation; .header-top compact state via .scrolled */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition:
    box-shadow var(--transition-normal),
    background var(--transition-normal);
}

header.scrolled {
  box-shadow: var(--shadow-lg);
}

header.scrolled .header-top {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

/* ── SECTION C — ANIMATED DEAL STRIP (TICKER) ── */
/* Overrides: .deal-strip, .deal-strip-inner, .deal-badge, .deal-item* */
/* Template note: duplicate .deal-strip-inner children for seamless -50% loop */
.deal-strip {
  background: var(--color-primary);
  overflow: hidden;
  padding: var(--space-sm) 0;
  margin-top: 0;
  border-top: none;
  border-bottom: calc(var(--space-xs) / 4) solid
    color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}

.deal-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  white-space: nowrap;
  animation: tickerScroll 28s linear infinite;
  width: max-content;
}

.deal-strip-inner:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.deal-strip .deal-badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.deal-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: color-mix(in srgb, var(--color-text-inverse) 88%, transparent);
  font-size: var(--text-sm);
}

.deal-item-name {
  font-weight: var(--weight-medium);
}

.deal-strip .deal-item-price {
  font-weight: var(--weight-bold);
}

.deal-item::after {
  content: "\00B7";
  color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
  margin-left: var(--space-sm);
}

/* ── SECTION D — TRUST BAR — EDITORIAL STYLE ── */
/* Overrides: .trust-bar, .trust-bar-inner, .trust-item* */
.trust-bar {
  padding: var(--space-2xl) 0;
  background: var(--color-surface);
}

.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.trust-bar-inner .trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.trust-bar-inner .trust-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--space-xs) - var(--space-xs) / 4);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.trust-bar-inner .trust-item:hover {
  transform: translateY(calc(var(--space-xs) * -1));
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.trust-bar-inner .trust-item:hover::before {
  transform: scaleX(1);
}

.trust-bar-inner .trust-item-icon {
  width: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm)
  );
  height: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.trust-bar-inner .trust-item-text strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}

.trust-bar-inner .trust-item-text span {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@media (max-width: 768px) {
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--space-md);
  }

  .trust-bar-inner .trust-item {
    flex-direction: row;
    align-items: center;
  }

  .trust-bar-inner .trust-item-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .trust-bar-inner {
    grid-template-columns: 1fr;
  }
}

/* ── SECTION E — PRODUCT CARDS — EDITORIAL COMMERCE ── */
/* Overrides: .product-grid--home, .product-card, .product-image, .product-info */
.product-grid--home {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--space-xl) * 5 + var(--space-xs)), 1fr)
  );
  gap: var(--space-lg);
}

.product-grid--home .product-card,
.homepage-grid .product-grid--home .product-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 250ms ease;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* A 6px jump with a heavy shadow made the whole grid feel unstable on
   mouse-over. Two pixels and a soft shadow are enough of a signal. */
.product-grid--home .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 27, 74, 0.10);
  border-color: rgba(8, 27, 74, 0.18);
}

.product-grid--home .product-image,
.homepage-grid .product-grid--home .product-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-border) 100%
  );
  position: relative;
  margin-bottom: 0;
  border-radius: 0;
}

.product-grid--home .product-image img,
.homepage-grid .product-grid--home .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--space-sm);
  transition: transform 300ms ease;
}

.product-grid--home .product-card:hover .product-image img {
  transform: scale(1.03);
}

.product-grid--home .product-info {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

.product-grid--home .product-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.product-grid--home .product-price {
  margin-top: auto;
  padding-top: var(--space-sm);
}

.product-grid--home .retail-price {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.product-grid--home .product-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ── SECTION F — CATEGORY CARDS — VISUAL TILES ── */
/* Overrides: .category-cards grid, .category-card, icon, label */
.category-cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--space-xl) * 3 + var(--space-md) + var(--space-xs)), 1fr)
  );
  gap: var(--space-md);
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface-card);
  border: calc(var(--space-xs) / 4) solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms ease,
    border-color 200ms ease;
  box-shadow: var(--shadow-sm);
}

.category-card:hover {
  transform: translateY(calc(var(--space-xs) * -1 - var(--space-xs) / 4))
    scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.category-card-icon {
  width: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm) + var(--space-xs)
  );
  height: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm) + var(--space-xs)
  );
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--color-border) 0%,
    color-mix(in srgb, var(--color-border-strong) 55%, var(--color-border) 45%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  transition: background var(--transition-normal);
}

.category-card:hover .category-card-icon {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
  color: var(--color-text-inverse);
}

.category-card span {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

/* ── SECTION G — SECTION TITLES — EDITORIAL WEIGHT ── */
/* Overrides: .section-title-bar, .see-all-link */
.section-title-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: calc(var(--space-xs) / 2) solid var(--color-border);
  position: relative;
}

.section-title-bar::after {
  content: "";
  position: absolute;
  bottom: calc(var(--space-xs) / -2);
  left: 0;
  width: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm)
  );
  height: calc(var(--space-xs) / 2);
  background: var(--color-accent);
}

.section-title-bar h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.see-all-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition:
    color var(--transition-fast),
    gap var(--transition-fast);
}

.see-all-link:hover {
  color: var(--color-accent);
  gap: var(--space-sm);
}

/* ── SECTION H — SOCIAL PROOF PANEL ── */
.social-proof-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 280px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.social-proof-text {
  background: var(--color-primary);
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.social-proof-image {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.social-proof-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 6000ms ease;
}

.social-proof-panel:hover .social-proof-image img {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .social-proof-panel {
    grid-template-columns: 1fr;
  }

  .social-proof-image {
    min-height: calc(var(--space-3xl) + var(--space-2xl) + var(--space-xl) + var(--space-lg) + var(--space-md));
  }
}

/* ── SECTION I — REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(var(--text-xl));
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.trust-bar-inner .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.trust-bar-inner .reveal:nth-child(2) {
  transition-delay: 80ms;
}
.trust-bar-inner .reveal:nth-child(3) {
  transition-delay: 160ms;
}
.trust-bar-inner .reveal:nth-child(4) {
  transition-delay: 240ms;
}

.category-cards .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.category-cards .reveal:nth-child(2) {
  transition-delay: 60ms;
}
.category-cards .reveal:nth-child(3) {
  transition-delay: 120ms;
}
.category-cards .reveal:nth-child(4) {
  transition-delay: 180ms;
}
.category-cards .reveal:nth-child(5) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .deal-strip-inner {
    animation: none;
  }

  .whatsapp-float {
    animation: none;
  }
}

/* ── SECTION J — UPSELL BAND — BOLD CTA STRIP ── */
/* Overrides: .upsell-band */
.upsell-band {
  background: linear-gradient(
    105deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.upsell-band::before {
  content: "";
  position: absolute;
  top: calc(var(--space-xl) * -1);
  right: calc(var(--space-xl) * -1);
  width: calc(var(--space-xl) * 5);
  height: calc(var(--space-xl) * 5);
  background: color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
  border-radius: 50%;
}

.upsell-band i {
  font-size: var(--text-2xl);
  color: color-mix(in srgb, var(--color-text-inverse) 82%, var(--color-accent) 18%);
  flex-shrink: 0;
}

.upsell-band span {
  color: color-mix(in srgb, var(--color-text-inverse) 88%, transparent);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.upsell-band strong {
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

.upsell-band a {
  color: color-mix(in srgb, var(--color-text-inverse) 82%, var(--color-accent) 18%);
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.upsell-band a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* ── SECTION K — FOOTER — PREMIUM DARK ── */
/* Overrides: footer, .footer-grid, columns, social, bottom */
footer {
  background: linear-gradient(
    170deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  );
  padding-top: var(--space-2xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-2xl);
}

.footer-column h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: calc(var(--space-xs) / 4) solid
    color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
}

.footer-column p {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-text-inverse) 58%, transparent);
  line-height: var(--leading-relaxed);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-column ul li {
  margin-bottom: 0;
}

.footer-column ul li a {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.footer-column ul li a:hover {
  color: var(--color-text-inverse);
}

.social-links {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.social-links a {
  width: calc(var(--space-md) + var(--space-md) + var(--space-sm));
  height: calc(var(--space-md) + var(--space-md) + var(--space-sm));
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  border: calc(var(--space-xs) / 4) solid
    color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
  font-size: var(--text-base);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  text-decoration: none;
}

.social-links a:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.footer-divider {
  border: none;
  border-top: calc(var(--space-xs) / 4) solid
    color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  margin: 0 auto;
  max-width: 75rem;
}

.footer-bottom {
  text-align: center;
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-text-inverse) 35%, transparent);
}

.footer-bottom-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  max-width: 75rem;
  margin: 0 auto;
}

.footer-bottom-links a {
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
  color: color-mix(in srgb, var(--color-text-inverse) 85%, transparent);
}

@media (max-width: 56.25rem) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--space-md) var(--space-xl);
  }
}

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

  .product-grid--home .product-actions {
    grid-template-columns: 1fr;
  }
}

/* ── SECTION L — WHATSAPP FLOAT — POLISHED ── */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 999;
  width: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm) + var(--space-xs)
  );
  height: calc(
    var(--space-md) + var(--space-md) + var(--space-sm) + var(--space-sm) + var(--space-xs)
  );
  background: var(--color-whatsapp);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  box-shadow: 0 var(--space-xs) var(--space-lg)
    color-mix(in srgb, var(--color-whatsapp) 45%, transparent);
  text-decoration: none;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  animation: waPulse 3s ease infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(calc(var(--space-xs) / -2));
  box-shadow: 0 var(--space-sm) calc(var(--space-xl) - var(--space-xs))
    color-mix(in srgb, var(--color-whatsapp) 55%, transparent);
  animation: none;
}

@keyframes waPulse {
  0%,
  100% {
    box-shadow: 0 var(--space-xs) var(--space-lg)
      color-mix(in srgb, var(--color-whatsapp) 45%, transparent);
  }
  50% {
    box-shadow: 0 var(--space-xs) calc(var(--space-xl) + var(--space-sm))
      color-mix(in srgb, var(--color-whatsapp) 70%, transparent);
  }
}

/* ── PHASE 4 — Global image polish & SEO-related helpers ── */
/* Overrides: hero BG img, product tiles, dual panel, logo; pairs with template alt/lazy fixes */

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

.logo-mark {
  height: calc(var(--space-md) + var(--space-md) + var(--space-sm));
  width: auto;
  max-height: none;
  object-fit: contain;
}

/* Product cards (site-wide listing grids) */
.product-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--space-sm);
  transition: transform 300ms ease;
}

.product-card:hover .product-image img {
  transform: scale(1.06);
}

.dual-panel img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: center;
  display: block;
}

.social-proof-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

/* Product page hero: single page h1 lives in buy card; this mirrors hero weight */
.product-page-hero-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
}

/* Cart: order summary title was promoted to h2 for outline */
.cart-page .order-summary h2.order-summary-heading {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fusertech Zimbabwe — colour system (single source for storefront hues)
   ═══════════════════════════════════════════════════════════════════════════ */

/* HEADER — white background, charcoal text */
.header-top { background: var(--color-header-bg); border-bottom: 1px solid var(--color-header-border); box-shadow: var(--shadow-sm); }
.logo-text { color: var(--color-text-secondary); font-weight: var(--weight-bold); }
.logo-text span { color: var(--color-accent); }
.header-deliver span { color: var(--color-text-muted); font-size: var(--text-xs); }
.header-deliver strong { color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
.header-nav-item span { color: var(--color-text-muted); font-size: var(--text-xs); }
.header-nav-item strong { color: var(--color-text-secondary); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.header-nav-item:hover strong { color: var(--color-accent); }
.header-cart-link strong, .header-cart-link span { color: var(--color-text-secondary); }
.cart-count { background: var(--color-accent); color: var(--color-text-inverse); font-weight: var(--weight-bold); }
.header-search { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.header-search:focus-within { border-color: var(--color-primary); }
.header-search-input { background: transparent; color: var(--color-text-secondary); }
.header-search-input::placeholder { color: var(--color-text-muted); }
.search-category-select { background: transparent; color: var(--color-text-secondary); border-right: 1px solid var(--color-border); border: none; }
.header-search-btn { background: var(--color-accent); color: var(--color-text-inverse); border: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 0 var(--space-md); transition: background var(--transition-fast); }
.header-search-btn:hover { background: var(--color-accent-hover); }

/* HEADER ALIGNMENT - both bands share the .container content line.
   The bands are full-bleed, so the 1rem gutter belongs on the inner wrapper
   exactly as .container does, not on the band itself. Negative margins cancel
   each first item's own padding so its text - not its hover box - lines up
   with the page content below. */
.header-top,
.header-bottom { padding-left: 0; padding-right: 0; }

.header-top-inner,
.header-bottom-inner { padding: 0 1rem; }

/* Offsets cancel each item's own border + padding (both carry a 2px
   transparent border for their hover state) so the logo mark and the first
   nav label start on the same 1rem line as .container content. */
.header-top-inner > .logo { margin-left: -10px; }
.header-bottom-inner > .header-bottom-link:first-child { margin-left: -18px; }

/* NAV BOTTOM BAR — deep blue */
.header-bottom { background: var(--color-nav-bar); border-bottom: none; }
.header-bottom-link { color: rgba(255,255,255,0.88); font-size: var(--text-sm); font-weight: 600; transition: color var(--transition-fast); }
.header-bottom-link:hover { color: var(--color-text-inverse); }
.header-bottom-link.bold-link { color: var(--color-text-inverse); font-weight: var(--weight-bold); }

/* PROMO BANNER — red */
.promo-banner { background: var(--color-accent); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: center; padding: var(--space-sm) var(--space-lg); }
.promo-banner a { color: var(--color-text-inverse); font-weight: var(--weight-bold); text-decoration: underline; }

/* TRUST BAR */
.trust-bar { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-item { background: var(--color-surface-card); border: 1px solid var(--color-border); }
.trust-item::before { background: var(--color-accent); }
.trust-item-icon { background: var(--color-accent-soft); color: var(--color-accent); }
.trust-item-text strong { color: var(--color-text-secondary); }
.trust-item-text span { color: var(--color-text-body); }

/* CATEGORIES */
.categories-row { background: var(--color-surface); }
.categories-row .section-title-bar h2 { color: var(--color-text-secondary); }
.categories-row .see-all-link { color: var(--color-primary); }
.categories-row .see-all-link:hover { color: var(--color-accent); }
.category-card { background: var(--color-surface-card); border: 1px solid var(--color-border); }
.category-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.category-card-icon { background: var(--color-accent-soft); color: var(--color-accent); }
.category-card:hover .category-card-icon { background: var(--color-accent); color: var(--color-text-inverse); }
.category-card span { color: var(--color-text-secondary); }

/* PRODUCT CARDS */
.product-card { background: var(--color-surface-card); border: 1px solid var(--color-border); }
.product-title { color: var(--color-text-primary); }
.retail-price { color: var(--color-price); font-size: var(--text-xl); font-weight: var(--weight-bold); }

/* BUTTONS */
.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); border: 2px solid transparent; }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 4px 16px rgba(254,40,40,0.35); transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.btn-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-add-to-cart { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-add-to-cart:hover { background: var(--color-accent); }
.btn-view { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }
.btn-view:hover { border-color: var(--color-primary); background: var(--color-border); }

/* SECTION TITLES */
.section-title-bar::after { background: var(--color-accent); }
.section-title-bar h2 { color: var(--color-text-secondary); }
.see-all-link { color: var(--color-primary); }
.see-all-link:hover { color: var(--color-accent); }

/* DEAL STRIP */
.deal-strip { background: var(--color-primary); }
.deal-badge { background: var(--color-accent); color: var(--color-text-inverse); }
.deal-item-name { color: rgba(255,255,255,0.88); }
.deal-item-price { color: #FFD6D9; font-weight: var(--weight-bold); }

/* UPSELL BAND */
.upsell-band { background: linear-gradient(105deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-text-on-dark); }
.upsell-band strong { color: var(--color-text-inverse); }
.upsell-band a { color: #FFD6D9; font-weight: var(--weight-bold); }
.upsell-band a:hover { color: var(--color-text-inverse); text-decoration: underline; }

/* FOOTER */
/* The footer sat at near-black, which read as a different site from the pages
   above it. It now uses the same light surface as the cart, with ink text. */
footer { background: #f4f5f8; border-top: 1px solid #e2e7f0; }
.footer-column h4 { color: #131a2b; }
.footer-column p { color: #62708a; }
.footer-column ul li a { color: #46536b; }
.footer-column ul li a:hover { color: var(--color-primary); }
.footer-bottom p, .footer-bottom-links a { color: #7a86a0; }
.footer-bottom-links a:hover { color: var(--color-primary); }
.social-links a { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); }
.social-links a:hover { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }

/* MOBILE DRAWER */
.mobile-drawer { background: var(--color-surface-card); }
.mobile-link { color: var(--color-text-secondary); background: var(--color-surface); border-color: var(--color-border); }
.mobile-link:hover { border-color: var(--color-primary); background: var(--color-border); }
.mobile-link .mobile-ico { background: var(--color-accent-soft); color: var(--color-accent); }

/* WHATSAPP FLOAT */
.whatsapp-float { background: var(--color-whatsapp); box-shadow: 0 4px 20px rgba(37,211,102,0.40); }

/* INNER PAGE HEROES (shop, about, etc) — shorter */
.page-title,
.page-hero-sm {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    105deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%
  );
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.page-hero-content h1,
.page-hero-content h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}
.page-hero-content p {
  color: rgba(255,255,255,0.75);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 580px;
}


/* ============================================
   SH HERO — 3 COLUMN
   Left sidebar | Center slider | Right banners
============================================ */

.sh-hero {
  width: 100%;
  background: #fff;
  padding: 0 1.5rem;
  margin: 0;
  display: block;
}
.sh-layout {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  grid-template-rows: 460px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.sh-cats {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-right: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sh-cats__head {
  background: #0D2A6E;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sh-cats__head i { font-size: 16px; }
.sh-cats__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}
.sh-cats__list li { border-bottom: 1px solid #f0f0f0; }
.sh-cats__list li:last-child { border-bottom: none; }
.sh-cats__list li a {
  display: block;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #333e48;
  text-decoration: none;
  transition: background 140ms, color 140ms, padding-left 140ms;
  border-left: 3px solid transparent;
}
.sh-cats__list li a:hover {
  background: #f4f7ff;
  color: #0D2A6E;
  padding-left: 24px;
  border-left-color: #E42837;
}

.sh-slider {
  position: relative;
  overflow: hidden;
  background: #111;
  height: 100%;
}
.sh-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.sh-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.sh-slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.sh-slide a { display: block; width: 100%; height: 100%; }
.sh-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sh-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(7,26,94,.45) 0%, rgba(7,26,94,.1) 45%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.sh-slide--placeholder a {
  background: linear-gradient(135deg, #0D2A6E 0%, #1a45b0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-slide__empty { text-align: center; color: rgba(255,255,255,0.70); }
.sh-slide__empty i { font-size: 48px; margin-bottom: 16px; display: block; opacity: 0.40; }
.sh-slide__empty p { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.sh-slide__empty span { font-size: 13px; color: rgba(255,255,255,0.55); }

.sh-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, background 150ms;
}
.sh-slider:hover .sh-slider__arrow { opacity: 1; }
.sh-slider__arrow:hover { background: #E42837; border-color: #E42837; }
.sh-slider__arrow--prev { left: 12px; }
.sh-slider__arrow--next { right: 12px; }

.sh-slider__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
}
.sh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 150ms, width 200ms;
  border: none;
  display: block;
}
.sh-dot--active { background: #E42837; width: 22px; border-radius: 4px; }

.sh-banners {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sh-banner {
  flex: 1;
  display: block;
  text-decoration: none;
  background: linear-gradient(150deg, #071A5E 0%, #0D2A6E 60%, #1a3daa 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
  overflow: hidden;
  position: relative;
  transition: filter 150ms;
}
.sh-banner:last-child { background: linear-gradient(150deg, #010d3d 0%, #071A5E 55%, #0d2a7a 100%); }
.sh-banner:first-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.sh-banner:hover { filter: brightness(1.10); }

.sh-banner__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #fe2828;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 1.2;
}
.sh-banner__badge span:first-child { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.80); text-transform: uppercase; letter-spacing: 0.05em; }
.sh-banner__badge span:last-child { font-size: 11px; font-weight: 900; color: #ffffff; text-transform: uppercase; letter-spacing: 0.02em; }

.sh-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 16px 12px 16px 60px;
}
.sh-banner__text { flex: 1; min-width: 0; padding-right: 8px; }
.sh-banner__cat { font-size: 11px; color: rgba(255,255,255,0.60); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; }
.sh-banner__title { font-size: 16px; font-weight: 800; color: #ffffff; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 4px; }
.sh-banner__sub { font-size: 11px; color: rgba(255,255,255,0.65); line-height: 1.4; margin-bottom: 10px; }
.sh-banner__cta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.06em; }
.sh-banner__cta i { color: rgba(255,255,255,0.75); font-size: 14px; transition: transform 150ms; }
.sh-banner:hover .sh-banner__cta i { transform: translateX(3px); }

.sh-banner__img { width: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.sh-banner__img img { width: 100%; height: 100px; object-fit: contain; object-position: right center; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.50)); transition: transform 200ms ease; }
.sh-banner:hover .sh-banner__img img { transform: scale(1.06) translateY(-4px); }

@media (max-width: 1100px) {
  .sh-layout { grid-template-columns: 200px 1fr 260px; grid-template-rows: 440px; }
  .sh-banner__content { padding-left: 52px; }
  .sh-banner__img { width: 90px; }
  .sh-banner__img img { height: 80px; }
}
@media (max-width: 900px) {
  .sh-layout { grid-template-columns: 1fr 260px; grid-template-rows: 400px; }
  .sh-cats { display: none; }
}
@media (max-width: 680px) {
  .sh-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .sh-slider { height: 260px; }
  .sh-banners { flex-direction: row; height: 160px; }
  .sh-banner:first-child { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.10); }
  .sh-banner__content { padding: 12px 8px 12px 40px; }
  .sh-banner__title { font-size: 13px; }
  .sh-banner__sub { display: none; }
  .sh-banner__img { width: 70px; }
  .sh-banner__img img { height: 60px; }
}
@media (max-width: 480px) {
  .sh-slider { height: 220px; }
  .sh-banners { height: 130px; }
  .sh-banner__cat { display: none; }
  .sh-banner__cta { display: none; }
}

/* ─── FOOTER WRAPPER — one surface colour end-to-end (overrides styles.css grid/bottom blues) ─── */

footer {
  background: var(--color-footer-bg);
  color: #46536b;
  font-size: var(--text-sm);
}

footer .footer-newsletter,
footer .footer-grid,
footer .footer-trust-strip,
footer .footer-bottom-links,
footer .footer-bottom {
  background: transparent;
}

/* ─── NEWSLETTER STRIP (top of footer) ─── */

.footer-newsletter {
  background: transparent;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid #e2e7f0;
}
.footer-newsletter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.footer-newsletter-text h3 {
  color: var(--color-text-inverse);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}
.footer-newsletter-text p {
  color: #46536b;
  font-size: var(--text-sm);
  margin: 0;
}
.footer-newsletter-form {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
  max-width: 480px;
}
.footer-newsletter-form input[type="email"] {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  min-height: 44px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.footer-newsletter-form input[type="email"]:focus {
  border-color: #62708a;
}
.footer-newsletter-form input::placeholder {
  color: #8b95b0;
}
.footer-newsletter-form button {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.footer-newsletter-form button:hover {
  background: var(--color-accent-hover);
}

/* ─── FOOTER MAIN GRID ─── */

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
}

/* Brand column */
.footer-column:first-child .footer-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-md);
}
.footer-column:first-child p {
  color: #62708a;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
  max-width: 280px;
}

/* Column headings */
.footer-column h4 {
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

/* Column links */
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-column ul li a {
  color: #62708a;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: color var(--transition-fast), gap var(--transition-fast);
  position: relative;
  padding-left: 0;
}
.footer-column ul li a::before {
  content: '';
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-fast);
  flex-shrink: 0;
}
.footer-column ul li a:hover {
  color: var(--color-text-inverse);
  gap: var(--space-md);
}
.footer-column ul li a:hover::before {
  width: 12px;
}

/* Contact items */
.footer-column .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: #62708a;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-column .footer-contact-item i {
  color: var(--color-accent);
  font-size: var(--text-base);
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
}
.footer-column .footer-contact-item:hover {
  color: var(--color-text-inverse);
}

/* Social icons — 2026 style: pill shape, coloured on hover */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.social-links a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.social-links a:hover {
  transform: translateY(-3px);
  color: var(--color-text-inverse);
}
.social-links a[aria-label*="Facebook"]:hover,
.social-links a[href*="facebook"]:hover { background: #1877f2; border-color: #1877f2; }
.social-links a[aria-label*="Instagram"]:hover,
.social-links a[href*="instagram"]:hover { background: linear-gradient(45deg,#f58529,#dd2a7b,#515bd4); border-color: #dd2a7b; }
.social-links a[aria-label*="WhatsApp"]:hover,
.social-links a[href*="whatsapp"]:hover { background: var(--color-whatsapp); border-color: var(--color-whatsapp); }
.social-links a[aria-label*="Twitter"]:hover,
.social-links a[href*="twitter"]:hover { background: #000000; border-color: #000000; }

/* ─── FOOTER DIVIDER ─── */

.footer-divider {
  border: none;
  border-top: 1px solid #e2e7f0;
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── TRUST STRIP (payment/security badges row) ─── */

.footer-trust-strip {
  border-top: 1px solid #e2e7f0;
  border-bottom: 1px solid #e2e7f0;
  padding: var(--space-md) 0;
}
.footer-trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.footer-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: #8b95b0;
  font-size: var(--text-xs);
}
.footer-trust-item i {
  color: #8b95b0;
  font-size: var(--text-base);
}

/* ─── FOOTER BOTTOM BAR ─── */

.footer-bottom-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}
.footer-bottom-links a {
  font-size: var(--text-xs);
  color: #8b95b0;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-bottom-links a:hover {
  color: #46536b;
}
.footer-bottom {
  text-align: center;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid #e2e7f0;
}
.footer-bottom p {
  font-size: var(--text-xs);
  color: #8b95b0;
  margin: 0;
}

/* ─── FOOTER MOBILE ─── */

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-lg);
  }
  .footer-column:first-child {
    grid-column: 1 / -1;
  }
  .footer-newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 var(--space-md);
  }
  .footer-newsletter-form {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-trust-strip-inner {
    justify-content: center;
    padding: 0 var(--space-md);
  }
  .footer-bottom-links {
    gap: var(--space-md);
    padding: var(--space-md);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shop page hero — center headline + body; readable “Shop office range” CTA.
   Loaded last; #main-content.shop-page + !important beats styles.css grid +
   global .btn-secondary from this file’s Fusertech block.
   ═══════════════════════════════════════════════════════════════════════════ */

#main-content.shop-page .shop-page-hero.shop-page-hero--bg .shop-page-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-template-columns: none !important;
  gap: var(--space-md) !important;
  max-width: 56rem;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem var(--space-xl) !important;
}

#main-content.shop-page .shop-page-hero--bg .shop-page-hero-content {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center !important;
}

#main-content.shop-page .shop-page-hero--bg .shop-page-hero-content h1 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#main-content.shop-page .shop-page-hero--bg .shop-page-hero-content p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  max-width: 38em;
  margin-left: auto !important;
  margin-right: auto !important;
}

#main-content.shop-page .shop-page-hero--bg .hero-breadcrumb {
  justify-content: center !important;
  width: 100%;
}

#main-content.shop-page .shop-page-hero--bg .hero-cta-row {
  justify-content: center !important;
  width: 100%;
}

#main-content.shop-page .shop-page-hero--bg .hero-cta-row .btn.btn-secondary {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #111827 !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  font-weight: var(--weight-bold) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
}

#main-content.shop-page .shop-page-hero--bg .hero-cta-row .btn.btn-secondary:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
}

/* ── FEATURED BRANDS SLIDER ── */
.brands-bar {
  width: 100%;
  background: var(--color-surface-card);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.brands-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: brandScroll 30s linear infinite;
  animation: brandScroll 30s linear infinite;
  will-change: transform;
}

.brands-track:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes brandScroll {
  0%   { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes brandScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brand-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.brand-item .brand-icon {
  font-size: 0.8rem;
  color: var(--color-accent);
}

.brand-item span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
}

.brand-logo {
  height: 70px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) opacity(0.65);
  transition: filter 200ms ease;
}

.brand-item:hover .brand-logo {
  filter: grayscale(0) opacity(1);
}

@media (prefers-reduced-motion: reduce) {
  .brands-track { -webkit-animation: none; animation: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   <NOT FOR BROWSER> — Inject via base.html (after styles + tokens + improvements):

   <script>
   // Sticky header scroll class
   (function() {
     const header = document.querySelector('header');
     if (!header) return;
     const onScroll = () => {
       header.classList.toggle('scrolled', window.scrollY > 40);
     };
     onScroll();
     window.addEventListener('scroll', onScroll, { passive: true });
   })();
   </script>

   Deal strip: duplicate the inner strip content in HTML for seamless ticker loop.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* The hamburger was styled white-on-dark for the original blue header.
   This file later turned .header-top white, leaving a white button on a
   white bar - present and clickable, but invisible. */
.mobile-menu-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Grid and flex children default to min-width:auto, so .sh-banners was
   forced to its 386px min-content width inside a 327px column and spilled
   past the right edge of the phone. */
.sh-layout { max-width: 100%; }
.sh-slider,
.sh-banners,
.sh-banner,
.sh-banner__content { min-width: 0; }
/* Do not use overflow-wrap:anywhere here - it shreds SCHOOL PACK into
   SCH/OOL/PACK. The banners simply need more width, see below. */
.sh-banner__title { overflow-wrap: normal; }

@media (max-width: 480px) {
  /* Two banners side by side leave ~53px for text once the badge and
     thumbnail take their share, so stack them at phone widths. */
  .sh-banners { flex-direction: column; height: auto; }
  .sh-banner { min-height: 88px; }
  .sh-banner:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .sh-banner__title { font-size: 14px; }
  /* Badge occupies x=12..56 inside the banner, so the text must clear 64px
     or SCHOOL PACK renders as CHOOL PACK. */
  .sh-banner__content { padding: 10px 8px 10px 64px; }

  .promo-banner { font-size: var(--text-xs); padding: var(--space-sm) var(--space-md); }
  .promo-banner a { white-space: nowrap; }

  /* The back-to-top pill and the WhatsApp bubble both sat bottom-right
     and overlapped each other. Stack them instead. */
  .whatsapp-float { bottom: 5.5rem; right: 1rem; }
  .footer-back-to-top { bottom: 1rem; right: 1rem; }
}

/* Float stacking - must come last. .whatsapp-float at line 1196 sets
   bottom: var(--space-lg) (24px) and .footer-back-to-top sets 14px, so the
   two land on top of each other at desktop widths. The pill takes the
   baseline; the bubble clears its full height plus a gap. */
/* Both floats share one right edge and stack from one gutter value, so they
   cannot land on top of each other at any width. */
:root { --float-gutter: 1.25rem; --float-size: 3.25rem; }
.footer-back-to-top { bottom: var(--float-gutter); right: var(--float-gutter); }
.whatsapp-float {
  bottom: calc(var(--float-gutter) + var(--float-size) + 0.75rem);
  right: var(--float-gutter);
}

/* Centre the category strip. justify-content: center would clip the first
   links unreachably once they overflow the scroll container, so the group is
   centred with auto margins on the end items instead. This deliberately
   overrides the left-alignment offset above, which lined the first link up
   with the content column. */
/* Match whatever the end children actually are. Targeting
   .header-bottom-link:first-child broke the moment All Products became a
   button inside .dept-wrap, silently un-centring the whole strip. */

/* ═══════════════════════════════════════════════════════════════════
   DEPARTMENTS MEGA-MENU
   ═══════════════════════════════════════════════════════════════════ */

.dept-wrap { position: relative; flex: 0 0 auto; }

.dept-toggle {
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dept-toggle.is-open { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.dept-caret { font-size: .7em; transition: transform var(--transition-fast); }
.dept-toggle.is-open .dept-caret { transform: rotate(180deg); }

/* .header-bottom-inner is a horizontal scroller and overflow-x: auto clips
   vertically too, so the panel lives outside it, anchored to .header-bottom. */
.header-bottom { position: relative; }
.dept-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  min-width: min(760px, 92vw);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dept-panel[hidden] { display: none; }

.dept-panel-inner { display: grid; grid-template-columns: 1fr 240px; }

.dept-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: var(--space-sm);
}

.dept-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dept-item:hover, .dept-item:focus-visible {
  background: var(--color-surface);
  color: var(--color-primary);
}
.dept-ico {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
}
.dept-item:hover .dept-ico { background: var(--color-primary); color: var(--color-text-inverse); }
.dept-text { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; }
.dept-text small { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }

.dept-promo {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  justify-content: center;
}
.dept-promo-kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.75);
}
.dept-promo strong { font-size: var(--text-lg); }
.dept-promo p { font-size: var(--text-xs); color: rgba(255,255,255,0.85); margin: 0; }
.dept-promo-cta {
  margin-top: .4rem;
  align-self: flex-start;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: .45rem .8rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}
.dept-promo-cta:hover { background: var(--color-accent-hover); }

@media (max-width: 900px) {
  .dept-panel { min-width: 92vw; }
  .dept-panel-inner { grid-template-columns: 1fr; }
  .dept-cols { grid-template-columns: 1fr; }
  .dept-promo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO RECLAIM + BREATHING ROOM
   ═══════════════════════════════════════════════════════════════════ */

/* The hero's "Popular Categories" rail was the fourth place the same list
   appeared, after the nav strip, the mega-menu and the card row below it.
   With the rail gone the slider takes the space it was cramped out of. */
.sh-layout {
  grid-template-columns: 1fr 320px;
  grid-template-rows: 420px;
}

/* Vertical rhythm. Sections were butted against each other with no room to
   separate one band of content from the next. */
.sh-hero { padding-block: var(--space-lg); }

.categories-row { padding-block: var(--space-2xl, 3rem); }

.homepage-grid > .section-panel { margin-bottom: var(--space-xl, 2rem); }

.section-panel { padding: var(--space-xl, 2rem); }

.section-title-bar {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
}

/* The header bands sat tight against their content. */
.header-top { padding-block: var(--space-md); }
.header-bottom { padding-block: .45rem; }
.header-bottom-link { padding-block: .45rem; }

@media (max-width: 900px) {
  .sh-layout { grid-template-columns: 1fr 260px; grid-template-rows: 380px; }
}
@media (max-width: 680px) {
  .sh-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .sh-hero { padding-block: var(--space-md); }
  .categories-row { padding-block: var(--space-lg); }
  .section-panel { padding: var(--space-lg); }
}

/* ═══════════════════════════════════════════════════════════════════
   TWO-TIER NAV, CART BADGE, ACTIVE STATE, HEIGHT DISCIPLINE
   ═══════════════════════════════════════════════════════════════════ */

/* Tier 2 — audience. Replaces the promo strip rather than adding a band, so
   the second axis costs no extra header height. Categories answer "what am I
   buying", this answers "who am I buying for". */
.segment-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.segment-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 38px;
}
.segment-nav { display: flex; gap: .25rem; }
.segment-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.segment-link:hover { color: var(--color-primary); }
.segment-link.is-current {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}
.segment-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.segment-note i { color: var(--color-accent); margin-right: .35rem; }

/* Active category. The strip previously gave no signal about where you were. */
.header-bottom-link.is-current {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-accent);
  border-radius: 0;
}

/* Cart: a count badge reads as state, "Cart 0" reads as a label. */
.cart-icon-wrap { position: relative; display: inline-block; line-height: 1; }
.cart-icon-wrap i { font-size: 1.35rem; }
.cart-count {
  position: absolute;
  top: -.45rem;
  right: -.6rem;
  /* styles.css also sets left: 28px on .cart-count; without resetting it the
     badge stretches between the two offsets instead of hugging the icon. */
  left: auto;
  bottom: auto;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Height discipline. Once scrolling starts the shopper has committed, so the
   header gives space back: the audience tier and the delivery note fold away
   and the bands tighten. Recovers roughly 60px on a phone. */
/* .segment-bar is a sibling of <header>, not a child, so it is not sticky and
   scrolls away on its own - no rule needed to hide it. */
header.scrolled .header-top { padding-block: .35rem; }
header.scrolled .header-bottom { padding-block: .2rem; }
header.scrolled .header-deliver { display: none; }

@media (max-width: 700px) {
  .segment-note { display: none; }
  .segment-bar-inner { justify-content: center; padding: 0 .5rem; }
  .segment-link { padding: 0 .6rem; font-size: var(--text-xs); }
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH FORM, FOCUS VISIBILITY, CONTRAST
   ═══════════════════════════════════════════════════════════════════ */

/* The search is a <search> wrapper around a <form>, so the form itself must
   flex or the input shrink-wraps to its content width. */
.header-search { display: flex; }
.header-search-form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
}
.header-search-input {
  /* 16px stops iOS zooming the page on focus. */
  font-size: 16px;
  min-height: 44px;
}
.header-search-btn { min-width: 44px; min-height: 44px; }

/* Placeholder measured 2.59:1 against the field. This passes 4.5:1 on both
   the white top band and the grey field. */
.header-search-input::placeholder { color: #6B7075; opacity: 1; }

/* Focus was suppressed outright on the search field and measured 1.66:1
   elsewhere, against the 3:1 that WCAG 1.4.11 requires. One inherited token
   drives both bands: navy reads on white, white reads on the navy rail. */
:root { --focus-ring: var(--color-primary); }
.header-bottom { --focus-ring: var(--color-text-inverse); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.header-search:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Utility links measured 48x32 - under the 44px mobile target size. */
.header-nav-item { min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   ONE GUTTER FOR EVERY BAND
   ═══════════════════════════════════════════════════════════════════
   Each band had its own hardcoded 1rem or 1.5rem, so the hero sat 8px
   inside the header and everything hugged the screen edge on a wide
   monitor. They now all frame content on --page-gutter. */

.container,
.header-top-inner,
.header-bottom-inner,
.segment-bar-inner,
.sh-hero,
.categories-row > .container,
.homepage-grid {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* The bands are full-bleed; the gutter belongs on their inner wrapper. */
.header-top,
.header-bottom { padding-left: 0; padding-right: 0; }

.sh-hero { max-width: var(--max-width); margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   SUPPLIED BRAND MARK
   ═══════════════════════════════════════════════════════════════════
   The header previously paired the supplied icon with the wordmark
   re-set as HTML text in DM Sans. That is an approximation of the
   brand, not the brand. Both marks below are the supplied artwork:
   the full lockup where there is width for it, the icon where there
   is not. */

.logo { gap: 0; }
.logo-mark { display: block; width: auto; }
.logo-mark--full { height: 42px; }
.logo-mark--icon { display: none; height: 40px; }

/* The full lockup needs ~131px; below this the icon carries the brand
   and the space goes to the search field instead. */
@media (max-width: 560px) {
  .logo-mark--full { display: none; }
  .logo-mark--icon { display: block; }
}

.auth-brand-logo-img { height: 54px; width: auto; display: block; }

/* The text wordmark is gone from the live templates. */
.logo-text { display: none; }

/* The -10px offset above compensated for the old logo structure, where an
   icon sat inside .logo's own padding next to a text wordmark. With the
   supplied lockup as a single image that offset drags the logo off the
   gutter - and clean off the screen at 375px, where it measured -2px. */
.header-top-inner > .logo {
  margin-left: 0;
  padding-left: 0;
}

/* styles.css sets `padding: .5rem !important` on .header-top-inner inside its
   700px block, which beat the gutter token and left an 8px margin on phones.
   Matched with !important rather than edited there, so the base file stays
   the one place the old layout is described. */
@media (max-width: 700px) {
  .header-top-inner {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }
}

/* .logo carried a 2px transparent border purely as a focus affordance, which
   pushed the mark 2px off the gutter. Focus is handled by the shared
   :focus-visible outline now, so the border can go rather than be
   compensated for with another negative margin. */
.logo { border: 0; }

/* The supplied lockup sets the wordmark at roughly half the icon's height, so
   at 42px "fignoc" renders around 13px and is hard to read. 54px puts it near
   17px without the header growing - the top band was already taller than the
   logo. */
.logo-mark--full { height: 54px; }

/* Products awaiting a price are listed so customers can enquire, rather than
   hidden. They cannot be added to the cart - cart_add refuses them server
   side, so the UI and the API agree. */
.product-price--poa {
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: var(--text-base);
}
.btn-enquire {
  background: #188842;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-decoration: none;
}
.btn-enquire:hover { background: #1da851; color: #ffffff; }

/* Hero fallback shown when no HeroSlide rows exist. Production has none, so
   this is what customers actually see - it must sell, not instruct. It
   carries the page's only h1. */
.sh-slide--fallback {
  background: linear-gradient(135deg, var(--color-primary) 0%, #001f7a 100%);
  display: grid;
  place-items: center;
  text-align: center;
}
.sh-slide--fallback a { text-decoration: none; display: block; width: 100%; }
.sh-slide__pitch {
  padding: var(--space-lg) var(--space-xl);
  max-width: 34rem;
  margin-inline: auto;
}
.sh-slide__pitch h1 {
  color: var(--color-text-inverse);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.sh-slide__pitch p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
}
.sh-slide__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-md);
}
.sh-slide--fallback a:hover .sh-slide__cta { background: var(--color-accent-hover); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER
   ═══════════════════════════════════════════════════════════════════
   Measured at 375px: a 123px band with a 48px icon on the left, the word
   "Cart" on the right and ~200px of dead space between them, no brand
   name anywhere, and a heavy grey hamburger competing with the logo.
   Rebuilt as one tight row of identity + actions, then search. */

@media (max-width: 700px) {
  .header-top-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo . cart menu" "search search search search";
    align-items: center;
    column-gap: .5rem;
    row-gap: .5rem;
    padding-block: .5rem !important;
  }

  /* Show the wordmark - the icon alone never says "Fignoc". */
  .logo { grid-area: logo; }
  .logo-mark--full { display: block; height: 34px; }
  .logo-mark--icon { display: none; }

  .header-search { grid-area: search; }
  .header-search-input { min-height: 42px; }
  .header-search-btn { min-width: 46px; min-height: 42px; }

  .header-nav-right {
    grid-area: cart;
    margin-left: 0;
    gap: .25rem;
  }
  /* Returns and Account belong in the drawer on a phone, not the top bar. */
  .header-nav-right .header-nav-item:not(.header-cart-link) { display: none; }

  .header-cart-link {
    width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }
  .header-cart-link span:not(.cart-icon-wrap):not(.cart-count),
  .header-cart-link strong { display: none; }
  .cart-icon-wrap i { font-size: 1.4rem; }

  .mobile-menu-toggle {
    grid-area: menu;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary);
  }

  /* Deliver-to is useful but not at the cost of a row; it moves to the
     segment bar, which is already a thin strip. */
  .header-deliver { display: none; }
  .segment-bar-inner { justify-content: space-between; }
  .segment-note {
    display: block;
    font-size: .68rem;
    white-space: nowrap;
  }
  .segment-link { padding: 0 .55rem; }
}

@media (max-width: 420px) {
  .segment-note { display: none; }
  .segment-bar-inner { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER REBUILD — supersedes the piecemeal rules above
   ═══════════════════════════════════════════════════════════════════
   Written last so it wins without !important. One layout model (flex with
   an auto-margin spacer) at both breakpoints, so nothing collapses the way
   the grid attempt did. */

/* ── Band 1: identity, search, actions ─────────────────────────────── */
.header-top { background: var(--color-header-bg); }

.header-top-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: .75rem;
  flex-wrap: nowrap;
}

.logo { flex: 0 0 auto; }
.logo-mark--full { height: 44px; }

.header-deliver {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-border);
}

/* The search is the primary control, so it takes the slack. */
.header-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.header-search:focus-within { border-color: var(--color-primary); }
.header-search-input {
  border: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}
.header-search-btn {
  border: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  cursor: pointer;
}
.header-search-btn:hover { background: var(--color-accent-hover); }

.header-nav-right {
  flex: 0 0 auto;
  margin-left: auto;          /* the spacer, instead of a 1fr grid column */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Utility items: icon-led, label under, consistent box. */
.header-nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 44px;
  padding: .25rem .6rem;
  border-radius: var(--radius-md);
  line-height: 1.15;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.header-nav-item:hover { background: var(--color-surface); }
.header-nav-item span { font-size: .68rem; color: var(--color-text-muted); }
.header-nav-item strong { font-size: .82rem; color: var(--color-text-secondary); }

.header-cart-link { flex-direction: row; align-items: center; gap: .5rem; }
.header-cart-link strong { font-size: .88rem; }

/* ── Mobile: one tight row of identity + actions, then search ───────── */
@media (max-width: 700px) {
  .header-top-inner {
    flex-wrap: wrap;
    padding-block: .5rem;
    gap: .5rem;
  }
  .logo { order: 1; }
  .header-nav-right { order: 2; margin-left: auto; }
  .header-search { order: 3; flex: 1 1 100%; max-width: none; }

  .logo-mark--full { display: block; height: 34px; }
  .logo-mark--icon { display: none; }
  .header-deliver { display: none; }

  .header-nav-right .header-nav-item:not(.header-cart-link) { display: none; }
  .header-cart-link {
    width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }
  .header-cart-link strong,
  .header-cart-link .visually-hidden + strong { display: none; }
  .cart-icon-wrap i { font-size: 1.4rem; }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    font-size: 1.45rem;
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary);
  }
}

/* Mega-menu count chips - what makes the panel worth opening rather than a
   second copy of the strip above it. */
.dept-item { justify-content: space-between; }
.dept-count {
  flex: 0 0 auto;
  min-width: 1.6rem;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: 999px;
  padding: .1rem .4rem;
  font-variant-numeric: tabular-nums;
}
.dept-item:hover .dept-count { background: var(--color-primary); color: var(--color-text-inverse); }

/* ═══════════════════════════════════════════════════════════════════
   HERO AD SLIDER — usable on a phone
   ═══════════════════════════════════════════════════════════════════
   The arrows were opacity:0 until :hover, so they never appeared on touch,
   and the dots were 8px and aria-hidden. On the device most customers use,
   the slider could not be controlled at all. */

.sh-slider__arrow {
  opacity: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  border: 0;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
}
.sh-slider:hover .sh-slider__arrow { opacity: 1; }
.sh-slider__arrow:hover { background: var(--color-accent); }

.sh-slider__dots {
  display: flex;
  gap: .4rem;
  padding: .5rem;
  background: rgba(0, 0, 0, .3);
  border-radius: 999px;
}
.sh-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  /* The visible dot stays 12px; the touch target around it is 32px. */
  position: relative;
}
.sh-slider__dot::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.sh-slider__dot--active { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sh-slider__track { transition: none !important; }
}

/* The mobile search input and button measured 42px; 44 is the target size. */
@media (max-width: 700px) {
  .header-search-input { min-height: 44px; }
  .header-search-btn { min-height: 44px; min-width: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO FALLBACK — merchandised, not a navy void
   ═══════════════════════════════════════════════════════════════════
   The first version put a 544px block of centred text inside a 1040px
   slide, so half the hero was empty colour and no product appeared
   anywhere. Split composition: copy left, product photography right. */

.sh-slide--fallback {
  background: linear-gradient(115deg, #001b5c 0%, var(--color-primary) 55%, #123a9e 100%);
  display: block;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.sh-slide--fallback > a {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  height: 100%;
  gap: var(--space-lg);
}

.sh-slide__pitch {
  padding: var(--space-xl) 0 var(--space-xl) var(--space-2xl);
  max-width: none;
  margin: 0;
}
.sh-slide__kicker {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  border-left: 3px solid var(--color-accent);
  padding-left: .55rem;
  margin-bottom: .7rem;
}
.sh-slide__pitch h1 {
  color: var(--color-text-inverse);
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.sh-slide__pitch h1 em {
  font-style: normal;
  color: #FFC9CE;
}
.sh-slide__pitch p {
  color: rgba(255, 255, 255, .8);
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
  max-width: 34ch;
}
.sh-slide__points {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
}
.sh-slide__points li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .9);
}
.sh-slide__points i { color: var(--color-accent); }
.sh-slide__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  padding: .7rem 1.3rem;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(228, 40, 55, .35);
}
.sh-slide--fallback a:hover .sh-slide__cta { background: var(--color-accent-hover); }

/* Product photography fills the right half and bleeds off the edge. */
.sh-slide__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mask-image: linear-gradient(to right, transparent 0%, #000 16%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
}

@media (max-width: 900px) {
  .sh-slide--fallback > a { grid-template-columns: 1fr; }
  .sh-slide__art { display: none; }
  .sh-slide__pitch { padding: var(--space-lg) var(--space-lg); }
  .sh-slide__points { gap: .3rem .8rem; }
}

/* ── Newsletter band ────────────────────────────────────────────────── */
.footer-newsletter {
  background: linear-gradient(120deg, var(--color-primary) 0%, #001f7a 100%);
  color: var(--color-text-inverse);
}
.footer-newsletter h2 { color: var(--color-text-inverse); }
.footer-newsletter p { color: #46536b; }
.footer-newsletter-form button {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: 0;
}
.footer-newsletter-form button:hover { background: var(--color-accent-hover); }

/* Header lockup is now wordmark-led (icon:wordmark 1.26:1 rather than the
   source artwork's 2.37:1), so it stays legible at header size. */
.logo-mark--full { height: 38px; }
@media (max-width: 700px) { .logo-mark--full { height: 32px; } }

/* The fallback slide left a black band: the slider is a fixed 420px but the
   slide only filled its content height. */
.sh-slide { height: 100%; }
.sh-slide--fallback,
.sh-slide--fallback > a { height: 100%; }
.sh-slide--fallback > a { align-items: stretch; }
.sh-slide__pitch { align-self: center; }

/* footer .footer-newsletter sets background:transparent at 0,1,1 specificity,
   which beat a plain .footer-newsletter rule. Matched here so the brand blue
   actually applies. */
footer .footer-newsletter {
  background: linear-gradient(120deg, var(--color-primary) 0%, #001f7a 100%);
  border-bottom: 0;
}
footer .footer-newsletter h2,
footer .footer-newsletter h3 { color: var(--color-text-inverse); }
footer .footer-newsletter p { color: #46536b; }
footer .footer-newsletter-form button {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: 0;
}
footer .footer-newsletter-form button:hover { background: var(--color-accent-hover); }

/* Nudge the centred nav group right so it sits under the search field rather
   than dead-centre against the logo. */

@media (max-width: 900px) {
  .header-bottom-inner { padding-left: var(--page-gutter); }
}

/* Nav spreads across the full bar. Auto-margin centring left 86px on the left
   against 521px of empty blue on the right; space-between distributes the
   items so the strip is used evenly end to end. */
.header-bottom-inner {
  justify-content: space-between;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.header-bottom-link { flex: 0 0 auto; }

/* Once the links no longer fit, fall back to a scroller anchored left. */
@media (max-width: 1024px) {
  .header-bottom-inner { justify-content: flex-start; gap: .25rem; }
}

/* footer has 64px of top padding, which showed as a grey strip above the blue
   newsletter band. The band is the first thing in the footer, so it should
   meet the page edge to edge; the padding moves onto the content below it. */
footer { padding-top: 0; }
footer .footer-newsletter { padding-block: var(--space-xl); }
footer .footer-grid { padding-top: var(--space-2xl); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════════
   Measured at 375px: each card ran about 650px tall for a 135px-wide
   product, which is what made the homepage 8.6 screens. The height went
   on a two-line "Add to Cart" label, a second View button, and a large
   dead gap the flex layout pushed between price and actions. */

@media (max-width: 700px) {
  .product-card {
    padding: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .product-image,
  .product-card .product-image img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    background: #fff;          /* stops dark photos reading as blocks */
  }

  .product-info {
    padding: .55rem .55rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }

  .product-title {
    font-size: .82rem;
    line-height: 1.25;
    margin: 0;
    /* Two full lines instead of one truncated with an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.05em;
  }

  .product-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
  .retail-price { font-size: 1rem; }
  .bulk-price, .product-bulk-price { font-size: .68rem; }

  /* The gap came from .product-actions being pushed to the bottom of a
     stretched flex column. Actions sit directly under the price instead. */
  .product-actions {
    margin: 0;
    display: flex;
    gap: .35rem;
    flex-direction: row;
  }
  .product-actions .btn-add-to-cart {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 .5rem;
    font-size: .8rem;
    white-space: nowrap;       /* no more two-line "Add to / Cart" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
  }
  .product-actions .btn-add-to-cart i { font-size: .95em; }

  /* One primary action per card. The image and title already link through
     to the product, so a second full-width View button only added height. */
  .product-actions .btn-view {
    flex: 0 0 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
  }
  .product-actions .btn-view::before {
    content: "\f06e";          /* eye */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .9rem;
  }

  /* The floating buttons were landing on the last row of cards. */
  :root { --float-gutter: .75rem; --float-size: 2.75rem; }
  .footer-back-to-top { padding: .4rem .6rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FINALISATION
   ═══════════════════════════════════════════════════════════════════ */

/* The utility strip now sits above the header as the topmost band. It stays
   outside <header> so it scrolls away instead of adding sticky height. */
.segment-bar {
  background: var(--color-primary);
  border-bottom: 0;
}
.segment-link { color: rgba(255, 255, 255, .78); }
.segment-link:hover { color: #fff; }
.segment-link.is-current { color: #fff; border-bottom-color: var(--color-accent); }
.segment-note { color: rgba(255, 255, 255, .8); }
.segment-note i { color: #fff; }

@media (max-width: 700px) {
  /* Footer columns stacked to 1114px - nearly 1.4 screens of links. Two up
     halves that without losing anything. */
  footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
    padding-top: var(--space-lg);
  }
  footer .footer-column { margin: 0; }
  footer .footer-column h4,
  footer .footer-column h3 { font-size: .82rem; margin-bottom: .4rem; }
  footer .footer-column li { margin-bottom: .2rem; }
  footer .footer-column a { font-size: .78rem; line-height: 1.5; }

  /* Tap targets. Measured 28 elements under 44px at 375px. */
  .segment-link { min-height: 44px; }
  .see-all-link,
  .footer-column a,
  .footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;      /* inline text links: WCAG 2.5.8 exempts these */
  }
  .sh-slider__arrow { width: 44px; height: 44px; }

  /* Nothing below 12px: 9px and 10.88px were measured on badges and labels. */
  .product-badge,
  .cart-count,
  .deal-item-pct,
  .sh-banner__cat,
  .sh-banner__sub { font-size: .75rem; }

  /* Section headings were desktop-scale on a 375px screen. */
  .section-title-bar h2 { font-size: 1.15rem; }
  .section-panel { padding: var(--space-md); }
  .homepage-grid > .section-panel { margin-bottom: var(--space-md); }
}

/* 320px is still a real screen size in this market. */
@media (max-width: 360px) {
  .product-grid,
  .products-grid { gap: .4rem; }
  .product-title { font-size: .78rem; }
  .logo-mark--full { height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT GRID — responsive, and the card as a proper component
   ═══════════════════════════════════════════════════════════════════
   The shop grid was a fixed single 351px column with 623px cards, so 72
   products came to 45,314px - 59 screens of scrolling on a phone. */

.product-grid,
.products-grid,
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

@media (min-width: 1200px) {
  .product-grid,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 700px) {
  .product-grid,
  .products-grid,
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
}

/* The card. Square image on white so mixed-source photography sits on one
   baseline, then a fixed reading order: name, price, action. */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.product-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
}

.product-card .product-image {
  aspect-ratio: 1 / 1;
  height: auto;
  background: #fff;
  display: grid;
  place-items: center;
  padding: .5rem;
  overflow: hidden;
}
.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card .product-info {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .65rem .7rem;
  flex: 1 1 auto;
}
.product-card .product-title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .product-price { margin: 0; }
.product-card .retail-price { font-weight: 800; }
/* Actions pinned to the bottom so cards in a row line up. */
.product-card .product-actions { margin-top: auto; }

/* The deal strip is a marquee: its inner track is 1500px wide, which pushed
   the document to 345px at a 320px viewport. Clip it at the band. */
.deal-strip {
  overflow: hidden;
  max-width: 100%;
}
.deal-strip-inner { max-width: none; }

/* Newsletter form: the input and Subscribe button sat side by side, and at
   320px the button pushed the document to 345px wide. Stack them. */
@media (max-width: 560px) {
  footer .footer-newsletter-inner { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  footer .footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    min-width: 0;
  }
  footer .footer-newsletter-form input[type="email"] { width: 100%; min-width: 0; }
  footer .footer-newsletter-form button { width: 100%; min-height: 44px; }
}

/* The category strip is a horizontal scroller by design, but its last link
   was reported as document overflow at 768px. Contain it so the scroll stays
   inside the band. */
.header-bottom { overflow: hidden; }
.header-bottom-inner { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HERO + CATEGORY RAIL
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* The slider was pinned to 220px while the pitch needed more, so the last
     proof point was sliced mid-word ("Pay with P..."). Let the slide set the
     height on mobile and trim the copy to what fits comfortably. */
  .sh-slider { height: auto; min-height: 200px; }
  .sh-slide,
  .sh-slide--fallback,
  .sh-slide--fallback > a { height: auto; }
  .sh-slide__pitch { padding: var(--space-lg) var(--space-md); }
  .sh-slide__pitch h1 { font-size: 1.35rem; }
  .sh-slide__pitch p { font-size: .82rem; margin-bottom: .6rem; }
  .sh-slide__points { gap: .3rem .7rem; margin-bottom: var(--space-md); }
  .sh-slide__points li { font-size: .7rem; }
  .sh-slide__cta { padding: .55rem 1rem; font-size: .85rem; }

  .sh-banners { gap: 2px; }
  .sh-banner { min-height: 84px; }

  /* Permanent "HOT SALE" on every banner is fake urgency and it reads as red
     on navy, which is the weakest contrast pair in the palette. */
  .sh-banner__badge { display: none; }

  /* The ticker is clipped mid-number at this width and duplicates the grid
     below it, so it earns nothing on a phone. */
  .deal-strip { display: none; }

  /* Phones had no category navigation at all - .header-bottom is display:none
     under 700px and only the drawer carried categories. A horizontal rail is
     the standard mobile pattern and puts every category one tap away. */
  .header-bottom {
    display: block;
    padding-block: 0;
    overflow: hidden;
  }
  .header-bottom-inner {
    justify-content: flex-start;
    gap: .3rem;
    padding-inline: var(--page-gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--page-gutter);
  }
  .header-bottom-inner::-webkit-scrollbar { display: none; }
  .header-bottom-link {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 .7rem;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }
  /* The mega-menu is a desktop affordance; the drawer covers this on mobile. */
  .dept-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   VISUAL SYSTEM — patterns taken from shopmoment.com, measured
   ═══════════════════════════════════════════════════════════════════
   Moment runs one typeface, seven type sizes, one ink colour at four
   opacities, three radii and effectively one shadow. The discipline is
   what makes it read as considered. These are the transferable parts. */

:root {
  /* One ink colour; hierarchy comes from its opacity, not from picking a
     new grey each time. Warm near-black rather than pure black. */
  --ink:        #23262B;
  --ink-70:     rgba(35, 38, 43, .70);
  --ink-55:     rgba(35, 38, 43, .55);
  --ink-40:     rgba(35, 38, 43, .40);
  /* Product images sit on this, not on white: it unifies photography from
     mixed sources and makes a missing image read as deliberate. */
  --media-bg:   #F1F1EF;
  --hairline:   rgba(35, 38, 43, .12);
}

/* ── Product media panel ───────────────────────────────────────────── */
.product-card .product-image,
.product-image {
  background: var(--media-bg);
}
.product-card .product-image img { mix-blend-mode: normal; }

/* Products with no photograph: a labelled panel rather than a broken-image
   grey box. 19 of 72 products need this. */
.product-image .image-placeholder,
.product-image--empty {
  display: grid;
  place-items: center;
  gap: .35rem;
  width: 100%;
  height: 100%;
  background: var(--media-bg);
  color: var(--ink-40);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-sm);
}
.product-image .image-placeholder i { font-size: 1.5rem; }

/* ── Badges: outlined, not filled colour blocks ────────────────────── */
.product-badge,
.product-badge.bundle,
.sh-banner__badge {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .16rem .4rem;
  box-shadow: none;
  text-transform: none;
}

/* ── Section header: title left, pill CTA right ────────────────────── */
.section-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 0;
}
.section-title-bar h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -.02em;
  margin: 0;
}
.see-all-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: .5rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.see-all-link:hover { background: var(--color-primary); color: #fff; }
.section-title-bar.text-white .see-all-link { background: #fff; color: var(--ink); }

/* ── Footer: dark ground, lead column, link columns ────────────────── */
footer {
  background: #f4f5f8;
  color: #46536b;
}
footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  padding-block: var(--space-2xl) var(--space-xl);
}
footer .footer-column--hidden { display: none; }

.footer-lead {
  color: #131a2b;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.footer-lead-sub {
  color: #62708a;
  font-size: var(--text-sm);
  max-width: 32ch;
  margin: 0 0 var(--space-md);
}
footer .footer-newsletter-form {
  display: flex;
  max-width: 22rem;
  border: 1px solid #e2e7f0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #ffffff;
}
footer .footer-newsletter-form input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #131a2b;
  padding: .7rem .8rem;
  font-size: var(--text-sm);
}
footer .footer-newsletter-form input::placeholder { color: #8b95b0; }
footer .footer-newsletter-form button {
  flex: 0 0 auto;
  width: 52px;
  background: var(--color-primary);
  color: #131a2b;
  border: 0;
  cursor: pointer;
}
footer .footer-newsletter-form button:hover { background: var(--color-accent); }

footer .social-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
footer .social-links a { color: #62708a; font-size: 1.05rem; }
footer .social-links a:hover { color: #131a2b; }
.footer-email-link { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .35rem; }

footer .footer-column h4 {
  color: #131a2b;
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}
footer .footer-column ul { list-style: none; margin: 0; padding: 0; }
footer .footer-column li { margin-bottom: .3rem; }
footer .footer-column a { color: #62708a; font-size: var(--text-sm); text-decoration: none; }
footer .footer-column a:hover { color: #131a2b; }
footer .footer-note { color: #8b95b0; font-size: var(--text-xs); }

footer .footer-trust-strip {
  border-block: 1px solid #e2e7f0;
  padding-block: var(--space-md);
}
footer .footer-trust-item { color: #62708a; font-size: var(--text-xs); }
footer .footer-divider { display: none; }
footer .footer-bottom-links,
footer .footer-bottom { padding-block: var(--space-sm); }
footer .footer-bottom-links a,
footer .footer-bottom p { color: #8b95b0; font-size: var(--text-xs); }

@media (max-width: 900px) {
  footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .footer-column--lead { grid-column: 1 / -1; }
}

/* styles.css:910 puts a linear-gradient on .product-image. Setting the
   shorthand alone left the gradient in place, so background-image is cleared
   explicitly and the selector is raised above the base rule. */
.product-card .product-image,
.product-grid .product-image,
.products-grid .product-image {
  background-color: var(--media-bg);
  background-image: none;
}
.product-card .product-image::after,
.product-grid .product-image::after { display: none; }

/* Same for the badge: give it a solid ground rather than inheriting through. */
.product-card .product-badge,
.product-grid .product-badge,
.products-grid .product-badge {
  background-color: #FFFFFF;
  background-image: none;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* improvements.css:700 scopes a 135deg gradient at .homepage-grid
   .product-grid--home .product-image — specificity 0,3,0, which beat the
   0,2,0 rule above. Matched here so every grid uses the same media panel. */
.homepage-grid .product-grid--home .product-image,
.homepage-grid .product-grid .product-image,
.home-page .product-image {
  background-color: var(--media-bg);
  background-image: none;
  aspect-ratio: 1 / 1;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO BAND — full-bleed photograph, text overlaid
   ═══════════════════════════════════════════════════════════════════
   Replaces the split layout and its two HOT SALE side banners. One
   photograph, one headline, one CTA, dots for the ad slides. */

.hero-band {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 42vw, 560px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
}

.hero-band__media { position: absolute; inset: 0; z-index: -2; }
.hero-band__img,
.hero-band__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-band__track { display: block; height: 100%; }
.hero-band__slide { display: none; height: 100%; }
.hero-band__slide.is-active { display: block; }

/* Legibility scrim: a gradient from the copy side, so the photograph stays
   visible while the text keeps its contrast whatever the image is. */
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(10, 14, 24, .82) 0%,
    rgba(10, 14, 24, .62) 42%,
    rgba(10, 14, 24, .12) 78%,
    rgba(10, 14, 24, 0) 100%
  );
}

.hero-band__inner {
  max-width: var(--max-width);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter);
}
.hero-band__copy { max-width: 34rem; }
.hero-band__copy h1 {
  color: #fff;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.hero-band__copy p {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  margin: 0 0 var(--space-lg);
  max-width: 40ch;
}
.hero-band__cta {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: .8rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.hero-band__cta:hover { background: var(--color-accent); color: #fff; }

.hero-band__dots {
  position: absolute;
  right: var(--page-gutter);
  bottom: var(--space-lg);
  display: flex;
  gap: .45rem;
  z-index: 1;
}
.hero-band__dot {
  width: 26px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  position: relative;
}
.hero-band__dot::after { content: ""; position: absolute; inset: -14px -4px; }
.hero-band__dot.is-active { background: #fff; }

@media (max-width: 700px) {
  .hero-band { min-height: 400px; align-items: end; }
  .hero-band__inner { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); }
  .hero-band__copy { max-width: none; }
  /* Straight-down scrim on a phone: the copy sits at the bottom, not the side. */
  .hero-band::before {
    background: linear-gradient(
      180deg,
      rgba(10, 14, 24, .25) 0%,
      rgba(10, 14, 24, .55) 45%,
      rgba(10, 14, 24, .88) 100%
    );
  }
  .hero-band__cta { display: block; text-align: center; }
  .hero-band__dots { bottom: auto; top: var(--space-md); right: var(--page-gutter); }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY TILES
   ═══════════════════════════════════════════════════════════════════
   Moment's tile silhouette — one rounded panel per category, the name
   bottom-left, an arrow bottom-right — but composed rather than
   wallpapered.

   The wallpaper version was wrong for this catalogue. Their tiles are
   lifestyle photography that fills the frame, so a cover-crop and a
   dark scrim work. Ours are square studio shots of a pen or a printer:
   cover-cropping a 1600x1600 shot into a 16:10 tile sliced the top off
   the glue tube and the base off the printer, and the scrim needed to
   make white text legible over near-white studio backdrops turned the
   photograph to grey mud. The label was also competing with type
   printed on the packaging itself.

   So the tile is a pale ground with the product standing on it,
   contained, nothing cropped, and the label set in ink underneath it
   where there is nothing to fight. _tile_photo_score() feeds this by
   preferring cut-outs. */

.cat-tiles { padding-block: var(--space-2xl); }
.cat-tiles__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.cat-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.15rem);
  margin-top: var(--space-lg);
}

/* Fill the row. Four qualifying categories in a three-column grid left one
   tile alone beside a hole; five read better as two wide then three. The
   count comes from the template, so the grid follows the catalogue. */
.cat-tiles__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.cat-tiles__grid[data-count="2"],
.cat-tiles__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-tiles__grid[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cat-tiles__grid[data-count="5"] > :nth-child(-n+2) { grid-column: span 3; }
.cat-tiles__grid[data-count="5"] > :nth-child(n+3) { grid-column: span 2; }

.cat-tile {
  --tile-pad: clamp(.9rem, 1.5vw, 1.4rem);
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--ink, #0A0E18);
  /* An inset ring rather than a border: pale tiles on a white page need an
     edge, and inset keeps it inside the radius with no layout shift. */
  box-shadow: inset 0 0 0 1px rgba(10, 14, 24, .07);
  transition: transform .28s ease, box-shadow .28s ease;
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 24, .09),
    0 20px 36px -22px rgba(10, 20, 50, .5);
}
.cat-tile:focus-visible {
  outline: 3px solid var(--color-primary, #0D2A6E);
  outline-offset: 3px;
}

/* Grounds. Each is a soft two-stop wash plus a corner highlight, which is
   what stops a large flat panel reading as a coloured rectangle. Kept quiet
   on purpose: the gradient deal tiles sit directly above this section. */
.cat-tile--sand { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(155deg, #FBF4E8 0%, #F1E2C9 100%); }
.cat-tile--sky { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.92), transparent 60%),
  linear-gradient(155deg, #EFF4FE 0%, #D8E5FA 100%); }
.cat-tile--blush { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(155deg, #FDF0F0 0%, #F7DCDE 100%); }
.cat-tile--sage { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(155deg, #EFF6F0 0%, #DAEADD 100%); }
.cat-tile--stone { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.95), transparent 60%),
  linear-gradient(155deg, #F5F6F8 0%, #E3E7ED 100%); }
.cat-tile--lilac { background:
  radial-gradient(115% 85% at 82% 8%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(155deg, #F4F1FC 0%, #E2DCF5 100%); }

/* The product stands in the upper two-thirds, contained, with a contact
   shadow so it sits on the tile rather than floating over it. */
.cat-tile__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cat-tile__shot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 62%;
  height: 58%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 22px rgba(12, 18, 40, .2));
  transition: transform .35s ease;
}
.cat-tile:hover .cat-tile__shot { transform: translateX(-50%) scale(1.04); }

/* Two supporting products flank the hero, smaller and set back, so a tile
   shows the range instead of implying the category sells one item. */
.cat-tile__extra {
  position: absolute;
  z-index: 1;
  width: 30%;
  height: 32%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 14px rgba(12, 18, 40, .16));
  opacity: .92;
  transition: transform .35s ease;
}
/* Most supplier photos come on a white ground, which showed as bare rectangles
   over the tinted tile. Framing them as cards makes that white deliberate. */
.cat-tile__shot,
.cat-tile__extra {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}
.cat-tile__shot { box-shadow: 0 14px 30px rgba(12, 18, 40, .16); filter: none; }
.cat-tile__extra { box-shadow: 0 8px 18px rgba(12, 18, 40, .12); filter: none; }

.cat-tile__extra--1 { left: 4%;  top: 30%; transform: rotate(-4deg); }
.cat-tile__extra--2 { right: 4%; top: 26%; transform: rotate(4deg); }
.cat-tile:hover .cat-tile__extra--1 { transform: rotate(-4deg) translateY(-3px); }
.cat-tile:hover .cat-tile__extra--2 { transform: rotate(4deg) translateY(-3px); }

@media (max-width: 700px) {
  .cat-tile__shot { width: 54%; }
  .cat-tile__extra { width: 27%; height: 28%; }
}

.cat-tile__foot {
  position: absolute;
  z-index: 2;
  left: var(--tile-pad);
  bottom: var(--tile-pad);
  /* Clear of the arrow, so a long name wraps instead of running under it. */
  right: calc(var(--tile-pad) + 3.25rem);
}
.cat-tile__label {
  display: block;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -.015em;
  line-height: 1.15;
}
.cat-tile__count {
  display: block;
  margin-top: .25rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(10, 14, 24, .5);
}
.cat-tile__go {
  position: absolute;
  z-index: 2;
  right: var(--tile-pad);
  bottom: var(--tile-pad);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(10, 14, 24, .18);
  color: var(--ink, #0A0E18);
  font-size: .8rem;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast);
}
.cat-tile:hover .cat-tile__go {
  background: var(--color-primary, #0D2A6E);
  border-color: var(--color-primary, #0D2A6E);
  color: #fff;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .cat-tile,
  .cat-tile__shot,
  .cat-tile__go { transition: none; }
  .cat-tile:hover { transform: none; }
  .cat-tile:hover .cat-tile__shot { transform: translateX(-50%); }
  .cat-tile:hover .cat-tile__go { transform: none; }
}

@media (max-width: 900px) {
  .cat-tiles__grid,
  .cat-tiles__grid[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tiles__grid[data-count="5"] > :nth-child(-n+2),
  .cat-tiles__grid[data-count="5"] > :nth-child(n+3) { grid-column: auto; }
  /* An odd count leaves the last tile beside a hole; let it take the row. */
  .cat-tiles__grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}
@media (max-width: 700px) {
  .cat-tiles { padding-block: var(--space-lg); }
  .cat-tiles__grid { gap: .6rem; margin-top: var(--space-md); }
  /* Taller than wide on a phone: it gives the shot real height in a 170px
     column, where a 3:2 tile left it postage-stamp sized. */
  .cat-tile { aspect-ratio: 4 / 5; --tile-pad: .7rem; }
  .cat-tiles__grid > *:last-child:nth-child(odd) { aspect-ratio: 16 / 9; }
  .cat-tile__shot { top: 6%; width: 80%; height: 52%; }
  .cat-tile__label { font-size: .95rem; }
  .cat-tile__count { font-size: .625rem; letter-spacing: .05em; }
  /* The arrow was decoration a phone cannot spare - the whole tile is the
     link - and dropping it gives the name the full width instead of two
     words per line beside a chip. */
  .cat-tile__foot { right: var(--tile-pad); }
  .cat-tile__go { display: none; }
}

/* Hero CTA: outlined and uppercase, the way theirs reads, rather than a
   solid white slab. */
.hero-band__cta {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .78rem;
  padding: .85rem 1.6rem;
}
.hero-band__cta:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER — full-screen sheet, Moment's pattern
   ═══════════════════════════════════════════════════════════════════
   styles.css:3748 gave the drawer max-height: calc(100vh - 72px) with
   overflow: hidden and no scroll container, so 7 of its 16 links were
   clipped and not hit-testable. Rebuilt as a fixed full-height sheet
   that scrolls, with a header row and a real close control. */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: #fff;
  border-top: 0;
  box-shadow: none;
  max-height: none;
  /* The scroll container the old one lacked. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: none !important;
}
.mobile-drawer.open { display: block; }

.mobile-drawer-inner {
  max-width: none;
  margin: 0;
  padding: 0 0 var(--space-2xl);
  display: block;
  /* Room for the fixed header row below. */
  padding-top: 60px;
}

/* Header row inside the sheet: brand left, close right. */
.mobile-drawer::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 0;
}
.mobile-drawer-close {
  position: fixed;
  top: 8px;
  right: var(--page-gutter);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 1.4rem;
  cursor: pointer;
}
.mobile-drawer-brand {
  position: fixed;
  top: 12px;
  left: var(--page-gutter);
  z-index: 2;
  height: 32px;
}
.mobile-drawer-brand img { height: 36px; width: auto; display: block; }

/* Link rows: large targets, hairline separators, chevron on the right. */
.mobile-drawer .mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 56px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-drawer .mobile-link:active,
.mobile-drawer .mobile-link:hover { background: var(--media-bg); transform: none; }
.mobile-drawer .mobile-link-left { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.mobile-drawer .mobile-ico {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--media-bg);
  color: var(--color-primary);
  font-size: .85rem;
}
.mobile-drawer .mobile-link small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--ink-55);
}
.mobile-drawer > .mobile-drawer-inner > div[style] {
  padding-inline: var(--page-gutter) !important;
  padding-top: var(--space-lg) !important;
  color: var(--ink-55) !important;
}

/* Stop the page behind from scrolling while the sheet is open. */
body.drawer-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   GLASS — used twice, deliberately
   ═══════════════════════════════════════════════════════════════════
   backdrop-filter is GPU-expensive, so it goes only where it does not
   repaint during scroll and where it earns something: a frosted panel
   guarantees the hero copy's contrast over any photograph, whatever
   slide is showing. Solid fallback first, glass only where supported. */

.hero-band__copy {
  background: rgba(12, 16, 26, .58);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero-band__copy {
    background: rgba(12, 16, 26, .34);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
}


/* The hero copy gets the solid version on phones: blur on a scrolling page is
   the one place it actually costs frames on a mid-range Android. */
@media (max-width: 700px) {
  .hero-band__copy {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(12, 16, 26, .55);
    padding: var(--space-md) var(--space-lg);
  }
}

/* ==========================================================================
   MOBILE SHARPENING
   Measured at 390px on a real device profile. Each block below fixes
   something the screenshots showed, not something in the abstract.
   ========================================================================== */

/* The audience strip wrapped onto two ragged lines, spending 90px of the most
   valuable screen space on a layout accident. One line that scrolls instead. */
@media (max-width: 767px) {
  .segment-bar-inner {
    display: flex;
    flex-wrap: wrap;   /* without this the note cannot claim its own line */
    align-items: center;
    gap: 0;
  }
  .segment-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .segment-nav::-webkit-scrollbar { display: none; }
  .segment-link {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: .8125rem;
  }
  /* The delivery note cannot share a 390px row with four links, and two older
     rules hid it on mobile entirely - which dropped the strongest message on
     the page from every phone. It gets its own line above them instead. */
  .segment-note {
    display: block;
    flex: 1 0 100%;
    order: -1;
    margin: 0 0 .375rem;
    font-size: .75rem;
    text-align: left;
  }
}


/* The bulk band inherited a 1.6 body line-height at 1.05rem, so five lines of
   text filled most of a screen. Tighten it and let it read as one statement. */
@media (max-width: 767px) {
  .upsell-band p,
  .upsell-band__copy {
    font-size: .9375rem;
    line-height: 1.5;
  }
  .upsell-band { padding: var(--space-lg) var(--space-md); }
}

/* The newsletter input and its button shared a bordered wrapper, which left
   the button as a small square with dead space beside it. Stack them. */
.footer-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border: 0;
  padding: 0;
  background: none;
}
.footer-newsletter-form input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 48px;
  padding: 0 .875rem;
  border: 1px solid #e2e7f0;
  border-radius: 8px;
  background: #ffffff;
  color: #131a2b;
  font-size: 1rem;   /* 16px stops iOS zooming the page on focus */
}
.footer-newsletter-form input[type="email"]::placeholder { color: #62708a; }
.footer-newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.footer-newsletter-form button[type="submit"] {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary, #0D2A6E);
  color: #131a2b;
  font: inherit;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.footer-newsletter-form button[type="submit"]:hover { background: var(--color-accent, #D71920); }
.footer-newsletter-form button[type="submit"][disabled] { opacity: .6; cursor: default; }
.footer-newsletter-msg {
  margin: .625rem 0 0;
  font-size: .875rem;
  color: #9BE79B;
}
.footer-newsletter-msg.is-error { color: #FFB3B3; }
@media (max-width: 480px) {
  .footer-newsletter-form input[type="email"],
  .footer-newsletter-form button[type="submit"] { flex: 1 1 100%; }
}

/* Back to top is hidden until there is somewhere to go back to, and it sits
   clear of the WhatsApp bubble rather than under it. */
.footer-back-to-top[hidden] { display: none; }
.footer-back-to-top {
  position: fixed;
  z-index: 60;
  right: 1.25rem;
  bottom: 5.75rem;          /* above the WhatsApp bubble, not beside it */
  min-height: 40px;
  padding: 0 .875rem;
  border: 0;
  border-radius: 999px;
  background: rgba(12,16,26,.82);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
@supports (backdrop-filter: blur(1px)) {
  .footer-back-to-top { backdrop-filter: blur(10px); background: rgba(12,16,26,.62); }
}
@media (max-width: 767px) {
  .footer-back-to-top { right: 1rem; bottom: 5.25rem; }
  .footer-back-to-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .footer-back-to-top { width: 40px; padding: 0; text-align: center; }
}

/* The <picture> wrapper must not become the positioned box, or the image
   collapses to intrinsic height inside the absolutely-placed media layer. */
.hero-band__media picture { display: block; height: 100%; }

/* Mobile hero: the portrait crop keeps products in the top half, so the copy
   anchors to the bottom and needs no scrim over the products themselves. */
@media (max-width: 767px) {
  .hero-band { min-height: 78vh; }
  .hero-band__copy h1 { font-size: clamp(1.875rem, 8.5vw, 2.5rem); line-height: 1.05; }
  .hero-band__copy p { font-size: .9375rem; }
}

/* An older rule sized this button as a 52px icon square, which clipped the
   "Sign up" label. It is a labelled button now, so it sizes to its text. */
footer .footer-newsletter-form button[type="submit"] {
  width: auto;
  min-width: 6rem;
  padding: 0 1.25rem;
  overflow: visible;
}
@media (max-width: 480px) {
  footer .footer-newsletter-form button[type="submit"] { width: 100%; }
}

/* The mobile card actions stack in a column, so the View button's
   `flex: 0 0 44px` set its height and it stretched to full width - a wide
   empty box with a lone eye glyph in it, which reads as a broken control.
   The image and the title both already link to the product, so on phones the
   card keeps one action and drops the duplicate. */
@media (max-width: 767px) {
  .product-actions .btn-view { display: none; }
}

/* "Price on request" was inheriting the retail price's display size, so it
   wrapped onto two lines and read as a headline rather than a price. It is a
   sentence, not a number - size it as one. */
.product-price .retail-price.product-price--poa,
.product-price--poa {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}

/* `footer .footer-newsletter-form` (0,1,1) outranked the bare class, so the
   old single-box border was still drawn around the now-stacked input and
   button - a frame around two separately-bordered controls. */
footer .footer-newsletter-form {
  border: 0;
  background: none;
  overflow: visible;
  max-width: 26rem;
}

/* styles.css puts 5.5rem of bottom padding on #site-content to keep the
   floating WhatsApp bubble off the content. But #site-content ends before the
   footer, so all that padding did was open a 120px grey gap in the middle of
   the page - the bubble still covered the footer's last row at full scroll,
   because a fixed element sits over the viewport, not the document end.
   Move the clearance to where the bubble actually lands. */
@media (max-width: 767px) {
  #site-content { padding-bottom: var(--space-lg, 1.5rem); }
  footer { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   HERO SLIDER
   Each slide now carries its own image and its own copy, so they stack and
   cross-fade in place rather than the copy staying put behind a changing
   picture.
   ========================================================================== */
.hero-band { position: relative; overflow: hidden; }
.hero-band__track { position: relative; display: block; min-height: inherit; }
.hero-band__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.hero-band__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
.hero-band__slide picture { display: block; position: absolute; inset: 0; }
.hero-band__slide .hero-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The copy sits over the collage, so it needs its own ground. The scrim is a
   gradient rather than a flat wash so the products stay visible beside it. */
.hero-band__slide .hero-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: inherit;
  height: 100%;
}
.hero-band__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(0,14,44,.94) 0%, rgba(0,14,44,.80) 32%,
    rgba(0,14,44,.30) 58%, rgba(0,14,44,.06) 100%);
}
@media (max-width: 767px) {
  /* Portrait crop, copy at the bottom: the scrim runs bottom-to-top instead. */
  .hero-band__slide::after {
    background: linear-gradient(to top,
      rgba(0,12,38,.96) 0%, rgba(0,12,38,.86) 30%,
      rgba(0,12,38,.42) 58%, rgba(0,12,38,.10) 100%);
  }
  .hero-band__slide .hero-band__inner { align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-band__slide { transition: none; }
}

/* Dots: small, low-contrast until active, bottom-right like Moment's. */
.hero-band__dots {
  position: absolute;
  z-index: 5;
  right: var(--page-gutter);
  bottom: var(--space-lg, 1.5rem);
  display: flex;
  gap: .5rem;
}
.hero-band__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero-band__dot.is-active { background: #fff; width: 26px; }
/* A 9px control needs a real touch target; this one is invisible but 44px. */
.hero-band__dot::after { content: ""; position: absolute; inset: -18px -8px; }
.hero-band__dot { position: relative; }
@media (max-width: 767px) {
  .hero-band__dots { right: auto; left: var(--page-gutter); bottom: auto; top: var(--space-md, 1rem); }
}

/* ==========================================================================
   GRADIENT PROMO TILES
   Vibrant gradient grounds carrying a cut-out product, a HOT SALE badge and a
   shop-now action. The cut-out is the whole trick: an opaque photo here would
   read as a pasted white box, which is why _promo_tiles() only picks products
   whose image has a real alpha channel.
   ========================================================================== */
.promo-tiles { padding: var(--space-xl, 2rem) 0 0; }
.promo-tiles__inner {
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.promo-tile {
  position: relative;
  display: block;
  min-height: 250px;
  padding: 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0,16,52,.55);
}
.promo-tile:focus-visible { outline: 3px solid var(--color-primary, #0D2A6E); outline-offset: 3px; }

/* Themes. Each is a two-stop gradient plus a soft radial highlight, which is
   what stops a large flat panel looking like a coloured rectangle. */
.promo-tile--midnight { background:
  radial-gradient(120% 90% at 88% 12%, rgba(90,150,255,.45), transparent 62%),
  linear-gradient(150deg, #0B1030 0%, #14225C 58%, #0A1F6B 100%); }
.promo-tile--violet { background:
  radial-gradient(120% 90% at 82% 16%, rgba(255,170,240,.42), transparent 62%),
  linear-gradient(150deg, #6C24C0 0%, #A22BC6 55%, #D63BB0 100%); }
.promo-tile--azure { background:
  radial-gradient(120% 90% at 85% 14%, rgba(150,220,255,.45), transparent 62%),
  linear-gradient(150deg, #0037B3 0%, #0B5BD3 55%, #1E86E8 100%); }
.promo-tile--mint { background:
  radial-gradient(120% 90% at 84% 15%, rgba(255,255,255,.55), transparent 60%),
  linear-gradient(150deg, #0E8C8C 0%, #21B3B3 52%, #7FE0E0 100%); }
.promo-tile--ember { background:
  radial-gradient(120% 90% at 84% 15%, rgba(255,210,150,.45), transparent 60%),
  linear-gradient(150deg, #8C1C1C 0%, #C62A2A 55%, #E86A2A 100%); }

.promo-tile__badge {
  position: absolute;
  z-index: 3;
  top: 1rem; left: 1rem;
  display: grid;
  place-content: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: rgba(0,20,64,.82);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
  font-size: .625rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
@supports (backdrop-filter: blur(1px)) {
  .promo-tile__badge { background: rgba(0,20,64,.62); backdrop-filter: blur(8px); }
}

/* The product sits bottom-right, bleeding past the corner so the tile reads as
   a window onto it rather than a photo pasted inside a box. */
.promo-tile__shot {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: -6%;
  width: 62%;
  max-height: 74%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
  transition: transform .3s ease;
}
.promo-tile:hover .promo-tile__shot { transform: scale(1.06) rotate(-1.5deg); }

.promo-tile__copy {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 3.75rem;
  max-width: 62%;
}
.promo-tile__lead,
.promo-tile__deals,
.promo-tile__on { display: block; text-transform: uppercase; }
.promo-tile__lead { font-size: .9375rem; font-weight: 500; letter-spacing: .04em; opacity: .9; }
.promo-tile__deals {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.promo-tile__on { font-size: .9375rem; font-weight: 500; letter-spacing: .04em; opacity: .9; }
.promo-tile__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .875rem;
  font-size: .875rem;
  font-weight: 700;
}
.promo-tile__cta i { font-size: 1.05rem; }
.promo-tile:hover .promo-tile__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Two-up on tablets; on phones a snap-scrolling rail, which is how a row that
   will not fit should behave rather than stacking four tall blocks. */
@media (max-width: 1023px) {
  .promo-tiles__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .promo-tiles__inner {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .promo-tiles__inner::-webkit-scrollbar { display: none; }
  .promo-tile {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-height: 215px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-tile, .promo-tile__shot { transition: none; }
  .promo-tile:hover { transform: none; }
  .promo-tile:hover .promo-tile__shot { transform: none; }
}

/* ==========================================================================
   HERO ARROWS AND TRUST STRIP
   ========================================================================== */
.hero-band__arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(6,12,30,.42);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .hero-band__arrow { backdrop-filter: blur(10px); background: rgba(6,12,30,.28); }
}
.hero-band__arrow:hover { background: rgba(6,12,30,.72); border-color: rgba(255,255,255,.7); }
.hero-band__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-band__arrow--prev { left: clamp(.5rem, 1.5vw, 1.25rem); }
.hero-band__arrow--next { right: clamp(.5rem, 1.5vw, 1.25rem); }
/* On a phone the arrows sit where the thumb swipes, and swipe already works. */
@media (max-width: 767px) { .hero-band__arrow { display: none; } }

.hero-trust {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding: .75rem var(--page-gutter);
  background: rgba(255,255,255,.94);
  color: var(--ink, #23262B);
  font-size: .8125rem;
  font-weight: 600;
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.hero-trust i { color: var(--color-primary, #0D2A6E); }
.hero-trust .fa-whatsapp { color: #188842; }
@media (max-width: 640px) {
  .hero-trust {
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: .75rem;
  }
  .hero-trust::-webkit-scrollbar { display: none; }
}

/* The trust strip occupies the foot of the hero, so the copy and the dots must
   clear it rather than sit underneath. */
.hero-band__slide .hero-band__inner { padding-bottom: 3.5rem; }
.hero-band__dots { bottom: 3.75rem; }
@media (max-width: 767px) {
  .hero-band__dots { bottom: auto; }
}

/* Long category names ("Phone Accessories") ran under the product shot. Give
   the copy the room and pull the shot in a little. */
.promo-tile__copy { max-width: 56%; }
.promo-tile__shot { width: 54%; max-height: 62%; right: -4%; bottom: -4%; }
.promo-tile__on { font-size: .875rem; line-height: 1.25; }

/* ==========================================================================
   ONE-ROW HEADER
   Four stacked bars (audience strip, logo+search, category rail, and the
   drawer) became two: a slim announcement line and a single header row.

   The move that made it fit was shrinking search from a permanent 800px field
   to a button that expands a panel. That is roughly 600px back, which is more
   than enough for five full category names beside the wordmark - no truncation
   and no invented short labels.

   White ground with a hairline, not brand-blue bands: the blue was doing the
   work of separating three bars that no longer exist.
   ========================================================================== */

.announce {
  background: var(--color-primary, #0D2A6E);
  color: #fff;
}
.announce__msg {
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: .4375rem var(--page-gutter);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}
.announce__msg i { margin-right: .4rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--hairline, rgba(35,38,43,.12));
}
.site-header__row {
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding: 0 var(--page-gutter);
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.site-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.site-header__wordmark {
  display: block;
  height: 56px;
  width: auto;
}

/* Categories sit immediately right of the wordmark and take the slack, which
   is what stops the row developing a hole in the middle. */
.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.8vw, 1.75rem);
}
.site-nav__item { position: relative; display: flex; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--ink, #23262B);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link:hover { color: var(--color-primary, #0D2A6E); }
.site-nav__link.is-current {
  color: var(--color-primary, #0D2A6E);
  box-shadow: inset 0 -2px 0 var(--color-accent, #D71920);
}
.site-nav__link:focus-visible { outline: 2px solid var(--color-primary, #0D2A6E); outline-offset: 3px; }
.site-nav__caret { font-size: .625rem; transition: transform .18s ease; }
.site-nav__link[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.site-tools__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .625rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink, #23262B);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.site-tools__btn:hover { background: rgba(35,38,43,.06); }
.site-tools__btn:focus-visible { outline: 2px solid var(--color-primary, #0D2A6E); outline-offset: 2px; }
.site-tools__btn i { font-size: 1.0625rem; }
.site-tools__cart { position: relative; display: inline-flex; }
.site-tools__cart .cart-count {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent, #D71920);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.site-tools__burger { display: none; }

/* Expanding search */
.site-search[hidden] { display: none; }
.site-search {
  border-top: 1px solid var(--hairline, rgba(35,38,43,.12));
  background: #fff;
}
.site-search__form {
  position: relative;
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding: .75rem var(--page-gutter);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.site-search__icon {
  position: absolute;
  left: calc(var(--page-gutter) + .875rem);
  color: var(--ink-55, rgba(35,38,43,.55));
  pointer-events: none;
}
.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 .875rem 0 2.6rem;
  border: 1px solid var(--hairline, rgba(35,38,43,.12));
  border-radius: 10px;
  background: var(--media-bg, #F1F1EF);
  font-size: 1rem;   /* 16px, or iOS zooms the page on focus */
}
.site-search__input:focus-visible {
  outline: 2px solid var(--color-primary, #0D2A6E);
  outline-offset: 1px;
}
.site-search__submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 10px;
  background: var(--color-primary, #0D2A6E);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.site-search__submit:hover { background: var(--color-accent, #D71920); }
.site-search__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-70, rgba(35,38,43,.7));
  font-size: 1.125rem;
  cursor: pointer;
}
.site-search__close:hover { background: rgba(35,38,43,.06); }

/* The category panel hangs off the header, full width. */
.site-header .dept-panel {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--hairline, rgba(35,38,43,.12));
  background: #fff;
  box-shadow: 0 24px 44px -28px rgba(0,16,52,.35);
}

/* --- Tablet: the five names stop fitting, so the nav becomes the menu ---- */
@media (max-width: 1100px) {
  .site-nav__link:not(.site-nav__link--menu) { display: none; }
  .site-nav { flex: 0 0 auto; }
  .site-tools { margin-left: auto; }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header__row { min-height: 60px; gap: .5rem; }
  .site-header__wordmark { height: 30px; }
  .site-nav { display: none; }
  .site-tools { margin-left: auto; gap: 0; }
  .site-tools__label { display: none; }
  .site-tools__btn { padding: 0 .5rem; min-width: 44px; justify-content: center; }
  .site-tools__burger { display: inline-flex; }
  .announce__msg { font-size: .75rem; padding-inline: .75rem; }
  .site-search__submit { display: none; }
  .site-search__form { padding: .625rem var(--page-gutter); }
}

/* The old bars are gone; make sure nothing in styles.css keeps reserving
   space for them or paints their backgrounds. */
.segment-bar,
.header-top,
.header-bottom { display: none !important; }

/* The nav links are nowrap, so the nav box could grow past its flex basis and
   paint over the tools without the row ever reporting an overflow. Clipping it
   makes that impossible, and the breakpoint below collapses to the menu before
   it can happen. */
.site-nav { overflow: hidden; }
@media (max-width: 1200px) {
  .site-nav__link:not(.site-nav__link--menu) { display: none; }
  .site-nav { flex: 0 0 auto; }
  .site-tools { margin-left: auto; }
}

/* ==========================================================================
   HERO
   Built as HTML and CSS rather than a baked image. The previous version
   composited products into a JPEG, which meant the headline was a picture: it
   softened at any zoom, could not be selected or read aloud, and every wording
   change needed the image regenerating.

   The structural fix is a focal point. A jittered grid of product cut-outs
   covers the frame evenly, so the eye has nowhere to land and it reads as
   wallpaper. Each slide now has one subject - a device showing the real
   storefront, or a single large product - with the type as the counterweight.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 78% 8%, rgba(64,132,255,.42), transparent 58%),
    radial-gradient(60% 80% at 20% 92%, rgba(0,72,200,.30), transparent 62%),
    linear-gradient(145deg, #060D28 0%, #0B1A52 46%, #06122F 100%);
  color: #fff;
}

/* A soft light burst behind the headline, which is what stops a large flat
   navy panel reading as a coloured rectangle. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -10%; top: -30%;
  width: 70%; height: 120%;
  background: radial-gradient(closest-side, rgba(120,170,255,.20), transparent 72%);
  pointer-events: none;
}

.hero__track { position: relative; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.hero__slide.is-active { position: relative; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--page-gutter) clamp(4.5rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: 34rem;
}

/* --- Copy ---------------------------------------------------------------- */
.hero__copy { max-width: 34rem; }

.hero__kicker {
  margin: 0 0 .875rem;
  color: var(--hero-gold, #F7C64B);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* The one script line in the design. Kaushan Script ships a single weight and
   rides along on the existing Google Fonts request, so it costs no extra round
   trip - and it has a real fallback stack if it never arrives. */
.hero__script {
  margin: .375rem 0 .875rem;
  color: var(--hero-gold, #F7C64B);
  font-family: "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
}

.hero__lead {
  margin: 0 0 .5rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
}
.hero__lead strong {
  color: var(--hero-gold, #F7C64B);
  font-weight: 700;
  text-transform: uppercase;
}

.hero__sub {
  margin: 0 0 1.75rem;
  max-width: 30rem;
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  line-height: 1.6;
}

/* Solid red pill with an icon disc, as in the reference. The old outlined
   ghost button was the weakest element on the page. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  padding: .5rem .5rem .5rem 1.75rem;
  border-radius: 999px;
  background: var(--color-accent, #D71920);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(215,25,32,.7);
  transition: transform .2s ease, background .2s ease;
}
.hero__cta:hover { background: #B4141A; transform: translateY(-2px); }
.hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero__cta-ico {
  display: grid;
  place-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-accent, #D71920);
  font-size: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: none; }
  .hero__cta:hover { transform: none; }
}

/* --- Media --------------------------------------------------------------- */
.hero__media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

/* A pale disc behind the subject, which separates it from the navy and gives
   the composition a centre. */
.hero__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(84%, 30rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,.04) 68%, transparent 72%);
}

/* Device mockup: a real screenshot of our own storefront in a bezel, angled
   just enough to read as an object rather than a pasted rectangle. */
.hero__device {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  padding: .625rem;
  border-radius: 20px;
  background: linear-gradient(160deg, #2A3145, #131826);
  box-shadow:
    0 2px 0 rgba(255,255,255,.14) inset,
    0 40px 70px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1400px) rotateY(-11deg) rotateX(3deg) rotate(-1.5deg);
}
.hero__device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* The floating tag badge from the reference. */
.hero__tag {
  position: absolute;
  z-index: 3;
  top: 2%;
  left: 2%;
  display: grid;
  place-content: center;
  width: clamp(52px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--color-accent, #D71920);
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 0 18px 34px -14px rgba(215,25,32,.75);
  transform: rotate(-12deg);
}

/* Single-product slides: one large subject with a grounded shadow. */
.hero__product {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  height: auto;
  max-height: 24rem;
  object-fit: contain;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.55));
}

/* --- Controls ------------------------------------------------------------ */
.hero__arrow {
  position: absolute;
  z-index: 6;
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(6,12,30,.4);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .hero__arrow { backdrop-filter: blur(10px); background: rgba(6,12,30,.26); }
}
.hero__arrow:hover { background: rgba(6,12,30,.7); border-color: rgba(255,255,255,.7); }
.hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero__arrow--prev { left: clamp(.5rem, 1.5vw, 1.25rem); }
.hero__arrow--next { right: clamp(.5rem, 1.5vw, 1.25rem); }
@media (max-width: 767px) { .hero__arrow { display: none; } }

.hero__dots {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3.75rem;
  display: flex;
  gap: .5rem;
}
.hero__dot {
  position: relative;
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero__dot.is-active { background: #fff; width: 26px; }
.hero__dot::after { content: ""; position: absolute; inset: -18px -8px; }

/* --- Tablet and phone ---------------------------------------------------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2rem;
    padding-bottom: 5rem;
  }
  /* Media first: the subject is what earns the scroll, and on one column the
     type reads better underneath it. */
  .hero__media { order: -1; }
  .hero__copy { max-width: none; }
  .hero__device { width: min(100%, 26rem); transform: perspective(1200px) rotateY(-7deg); }
  .hero__product { max-height: 15rem; }
}

@media (max-width: 767px) {
  .hero__inner { padding-top: 1.75rem; gap: 1.5rem; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero__script { font-size: clamp(1.375rem, 7vw, 2rem); }
  .hero__lead { font-size: 1rem; }
  .hero__sub { margin-bottom: 1.25rem; font-size: .875rem; }
  .hero__cta { width: 100%; justify-content: space-between; }
  .hero__dots { bottom: auto; top: 1rem; left: var(--page-gutter); transform: none; }
  .hero__tag { width: 46px; border-radius: 14px; }
}

/* The trust strip sits on the foot of the hero, so content must clear it. */
.hero-trust { z-index: 5; }

/* Photograph slide. Rounded card rather than full-bleed: the only picture of
   people we hold is 940px, which a 1440px full-bleed hero would upscale into
   mush. Contained at this size it renders around 1.9x, which is sharp. */
.hero__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(100%, 30rem);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 40px 70px -30px rgba(0,0,0,.75);
  transform: rotate(-1.5deg);
}
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 940 / 720;
  object-fit: cover;
  object-position: center 32%;
}
@media (max-width: 900px) {
  .hero__photo { width: min(100%, 26rem); transform: none; }
}

/* The scrim, the label's text-shadow and the auto-fit grid that used to live
   here all belonged to the wallpaper tile - a photograph cropped to fill the
   panel with white text over it. The composed tile above has no scrim to
   deepen and no white text to shadow, and its grid follows data-count. The
   packaging-text problem those rules were fighting ("Office Stationery"
   reading against a glue tube's own "LIQUID GLUE") is gone with them: the
   label now sits on the tile's own ground, below the product. */

/* Reserve the hero's height before its images decode.

   The <img> elements carry width and height, so each picture reserves its own
   box - but the grid row still resized as they arrived, which moved the copy
   and the CTA under the reader's cursor. A stable min-height on the media
   column fixes the row before anything loads.

   The photo's aspect-ratio also disagreed with its attributes (940/720 in CSS
   against 940x788 in the markup), so it reflowed the moment CSS applied. */
.hero__photo img { aspect-ratio: 940 / 788; }

.hero__media { min-height: 20rem; }
@media (min-width: 901px) {
  .hero__media { min-height: 24rem; }
}
@media (max-width: 767px) {
  .hero__media { min-height: 15rem; }
}

/* The new wordmark is 170px wide against the old 116px, and .site-header__row
   is capped at the 1280px container - so a wider viewport gives the nav no
   extra room. It needed about 741px and had 702. Tightening the gap recovers
   the 40px without shortening another label or dropping an item. */
@media (min-width: 1201px) {
  .site-nav { gap: 1.125rem; }
  .site-header__row { gap: clamp(1rem, 2vw, 1.5rem); }
}

/* ==========================================================================
   CONTRAST FIXES
   Every value below was computed by darkening in HLS until the pair cleared
   4.5:1, so each colour stays recognisably itself rather than being picked by
   eye - which is how a palette ends up with five nearly-identical reds.
   ========================================================================== */

/* The floating WhatsApp bubble is an icon, not text, so it keeps the real
   brand green. Only the places where white type sits on that green were
   darkened, and this puts the bubble back. */
.whatsapp-float,
a.whatsapp-float,
.whatsapp-float:hover { background: #25D366; }

/* "or" between the auth form and the social buttons was #CBD5E1 on white -
   1.48:1, effectively invisible. The rule either side stays light; only the
   word darkens. */
.auth-divider { color: #5B799D; }
.auth-divider::before,
.auth-divider::after { border-color: #CBD5E1; }

/* "Proceed to Checkout" sat at #64748B on a #CBD5E1 button - 3.21:1. The
   button is the primary action in the cart, so it takes the brand navy and
   white type rather than a slightly darker grey on grey. */
.cart-summary .btn-block,
button.btn-block[type="submit"] {
  background: var(--color-primary, #0D2A6E);
  color: #fff;
  border-color: transparent;
}
.cart-summary .btn-block:hover,
button.btn-block[type="submit"]:hover { background: #E42837; }

/* Grey text on tinted grounds: a warning panel's own tint lifts the floor, so
   these needed a little more than the white-ground cases. */
.summary-secure-sub { color: #5C6A80; }

/* Follow-ups from the second audit pass.

   The greens were computed against pure white, but these two sit on #F8FAFC
   and #F0FDF4 - a tinted ground lifts the floor, so they landed at 4.33:1 and
   needed a further step down. */
/* WhatsApp green needs to go in opposite directions depending on its ground,
   which is why a single global rule failed twice: scoping it away from the
   buttons still caught the footer, where a dark green on a near-black ground
   reads worse than the bright one did. Bright green already passes on dark.
   So this only touches light grounds, and only text - not buttons. */
main a[href*="wa.me"]:not([class*="btn"]):not(.whatsapp-float),
.cart-summary a[href*="wa.me"]:not([class*="btn"]) {
  color: #12793B;
}
footer a[href*="wa.me"] { color: #25D366; }

/* The cart's "Proceed to Checkout" is grey-on-grey only in its disabled state,
   which WCAG exempts - a disabled control is meant to read as unavailable. Its
   enabled counterpart is .btn-primary-custom and already passes. Left alone
   deliberately rather than "fixed" into looking clickable when it is not. */

/* ==========================================================================
   AMBER MEANS ONE THING
   The cart had three amber surfaces at once: a delivery nudge, a duplicate of
   the same nudge, and the PayNow reassurance. Amber that means both "you are
   short of the threshold" and "your payment is safe" means nothing.

   Amber is now reserved for the one thing worth acting on - the shortfall.
   Reassurance reads as quiet and settled, which is what reassurance should
   look like.
   ========================================================================== */
.summary-secure-note {
  background: var(--media-bg, #F1F1EF);
  border: 1px solid var(--hairline, rgba(35,38,43,.12));
  border-radius: 10px;
  color: var(--ink, #23262B);
}
.summary-secure-note > i.fas.fa-shield-alt { color: var(--color-primary, #0D2A6E); }
.summary-secure-sub { color: #5C6A80; }

/* ==========================================================================
   MOBILE FIXES FROM LIVE SCREENSHOTS
   ========================================================================== */

/* The "Order from your phone" panel was locked to height: 280px with
   overflow: hidden. That works as two columns, but on one column the copy and
   the photograph need closer to 500px - so the heading was clipped off the top
   and the photograph spilled out of the rounded corner. Content decides the
   height on small screens; the fixed height only ever made sense side by side. */
.social-proof-panel { height: auto; min-height: 280px; }
@media (max-width: 768px) {
  .social-proof-panel { min-height: 0; }
  .social-proof-text { padding: var(--space-lg, 1.5rem) var(--space-md, 1rem); }
  .social-proof-image { min-height: 0; aspect-ratio: 16 / 10; }
  .social-proof-image img { height: 100%; }
}

/* The hero CTA used space-between, which parks its icon disc hard against the
   right edge - exactly where the fixed WhatsApp bubble sits. On a phone the
   two overlapped, so the bubble covered the button's own icon. Centring the
   pair keeps the icon clear of the bubble and reads better anyway. */
@media (max-width: 767px) {
  .hero__cta {
    width: auto;
    justify-content: center;
    gap: .75rem;
    padding-right: .5rem;
  }
}

/* The bubble also sat over the last line of hero copy. Lifting it above the
   trust strip keeps it clear of the text and of the CTA. */
@media (max-width: 767px) {
  .whatsapp-float { bottom: 4.75rem; }
}

/* ==========================================================================
   WAYS TO PAY
   Each provider is set as type in a bordered chip rather than as a logo image.
   The reference artwork was a screenshot: blurred colour halos behind every
   mark, six different logo sizes, and Mastercard orphaned on a second row.
   Shipping that would have undone the sharpening work.

   Real logo files are the right answer and I do not hold licensed copies of
   the Zimbabwean marks. Consistent type in consistent chips is honest, stays
   sharp at any zoom, weighs nothing, and reads at 320px. Each chip carries its
   provider's own colour so the row is still scannable at a glance. Drop real
   SVGs in later and only this block changes.
   ========================================================================== */
.pay {
  padding: clamp(2rem, 5vw, 3.25rem) 0;
  background: var(--media-bg, #F1F1EF);
  border-top: 1px solid var(--hairline, rgba(35,38,43,.12));
}
.pay__inner {
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  text-align: center;
}
.pay__title {
  margin: 0 0 .375rem;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  letter-spacing: -.01em;
  color: var(--ink, #23262B);
}
.pay__sub {
  margin: 0 auto 1.5rem;
  max-width: 42ch;
  color: var(--ink-70, rgba(35,38,43,.7));
  font-size: .9375rem;
}

.pay__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: .625rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.pay__item { display: flex; }

.pay__mark {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 46px;
  padding: 0 .875rem;
  border: 1px solid var(--hairline, rgba(35,38,43,.12));
  border-radius: 8px;
  background: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink, #23262B);
}
.pay__mark b { font-weight: 700; }

/* Provider colours, so the row scans as logos would. */
.pay__mark--ecocash { color: #E4002B; }
.pay__mark--ecocash b { color: #0067B1; }
.pay__mark--onemoney { color: #F7941D; }
.pay__mark--onemoney b { color: #1A1A1A; }
/* Every mark sits on white with a hairline, so the row reads as one set of
   payment options rather than seven competing brand blocks. */
.pay__mark--zimswitch { color: #8A6D00; letter-spacing: .01em; }
.pay__mark--innbucks { color: #0E2A47; }
.pay__mark--visa {
  color: #1A1F71;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
}
.pay__mark--cash {
  color: var(--ink-70, rgba(35,38,43,.7));
  font-weight: 600;
}

/* Mastercard's two interlocking discs, drawn rather than pictured. */
.pay__mark--mc { font-weight: 600; letter-spacing: 0; }
.pay__mc { position: relative; display: inline-block; width: 34px; height: 22px; }
.pay__mc i {
  position: absolute;
  top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.pay__mc i:first-child { left: 0; background: #EB001B; }
.pay__mc i:last-child { right: 0; background: #F79E1B; mix-blend-mode: multiply; }

.pay__note {
  margin: 0;
  color: var(--ink-70, rgba(35,38,43,.7));
  font-size: .8125rem;
}
.pay__note i { margin-right: .35rem; color: var(--color-primary, #0D2A6E); }

/* On a phone the row becomes a snap-scrolling rail rather than four ragged
   lines of chips. */
@media (max-width: 560px) {
  .pay__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
  }
  .pay__list::-webkit-scrollbar { display: none; }
  .pay__item { scroll-snap-align: start; }
  .pay__mark { font-size: .875rem; }
}

/* The chip's flex gap fell between <b>Eco</b> and "Cash", splitting the brand
   names into two words. Gap belongs only where there really are two things -
   the Mastercard discs and their label. */
.pay__mark { gap: 0; }
.pay__mark--mc { gap: .45rem; }

/* The card's image and title are now links, which is what makes hiding the
   View button on phones legitimate rather than a dead end. Styled so they do
   not read as blue underlined links inside a card. */
.product-image__link {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.product-title a {
  color: inherit;
  text-decoration: none;
}
.product-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.product-title a:focus-visible {
  outline: 2px solid var(--color-primary, #0D2A6E);
  outline-offset: 2px;
  border-radius: 2px;
}
.product-image__link:focus-visible {
  outline: 2px solid var(--color-primary, #0D2A6E);
  outline-offset: -2px;
}

/* My own OneMoney chip failed at 2.28:1 - orange on white. Its darker tone
   keeps the brand read and clears AA. */
.pay__mark--onemoney { color: #A85B00; }

/* Cart: "Clear All" at 4.1:1 and the stock line at 3.99:1 were both just
   under. */
.cart-action-link { color: #B31B26; }
.cart-item-stock { color: #0C6B44; }

/* Every checkout input was 15px. Safari zooms the whole page when a field
   under 16px receives focus, so each tap during checkout jolted the layout and
   the customer had to pinch back out - on the one page where that matters
   most. 16px is the threshold, not a preference. */
@media (max-width: 900px) {
  #figv8root .figv8input,
  #figv8root .figv8textarea,
  #figv8root select,
  .figv8input,
  .figv8textarea { font-size: 16px; }
}

/* Checkout had no h1 at all: the page's own heading was styled text, so a
   screen reader and a search engine both saw a page with no title. */
.figv8-page-title { font-size: clamp(1.375rem, 3vw, 1.75rem); margin: 0 0 .35rem; }
.figv8-page-title {
  max-width: 1160px;
  margin: 0 auto .875rem;
  padding-inline: 1rem;
  color: var(--ink, #23262B);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Testimonials ───────────────────────────────────────────────────────────
   Quotes carry themselves: no avatars, no star graphics, no card shadows. The
   section is hidden entirely until a real approved quote exists. */
.voices {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--hairline, rgba(35,38,43,.10));
}
.voices__inner {
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.voices__title {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #111);
  margin: 0 0 1.75rem;
}
.voices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem 2.5rem;
}
.voice blockquote {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-primary, #111);
  text-wrap: pretty;
}
.voice blockquote::before { content: "“"; }
.voice blockquote::after { content: "”"; }
.voice cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-top: .7rem;
  border-top: 2px solid var(--color-accent, #E01F28);
  width: fit-content;
  max-width: 100%;
}
.voice__author { font-size: .85rem; font-weight: 700; color: var(--color-primary, #0C2A6D); }
.voice__role { font-size: .78rem; color: var(--color-text-muted, #62708a); }

/* ── Footer on a light ground ──────────────────────────────────────────────
   These override the white-on-dark rules further up, which were written when
   the footer was near-black. Grouped here so the footer has one colour story. */
footer .footer-lead,
footer .footer-newsletter h2,
footer .footer-newsletter h3 { color: #131a2b; }
footer .footer-newsletter p { color: #62708a; }
footer .footer-newsletter-form input {
  background: #ffffff;
  border: 1px solid #d6dded;
  color: #131a2b;
}
footer .footer-newsletter-form input::placeholder { color: #8b95b0; }
footer .footer-column a { color: #46536b; }
footer .footer-column a:hover { color: var(--color-primary); }
footer .social-links a {
  color: #46536b;
  background: #ffffff;
  border: 1px solid #e2e7f0;
}
footer .social-links a:hover { color: var(--color-primary); border-color: #c8d0e2; }
footer .footer-column--hidden { display: none; }
footer .footer-bottom,
footer .footer-trust-row,
footer .footer-bottom-bar {
  background: transparent;
  border-top: 1px solid #e2e7f0;
}
footer .footer-trust-row,
footer .footer-trust-row * { color: #46536b; }
footer h4::after,
footer .footer-column h4::after { background: var(--color-accent); }

/* Payment marks: keep each wordmark on one line. "EcoCash" and "OneMoney"
   were breaking mid-word into two rows. */
.pay__mark { white-space: nowrap; }
.pay__mark b { white-space: nowrap; }

/* ── "All products" panel ──────────────────────────────────────────────────
   It rendered as a half-width white box with the hero showing through beside
   it, and only two of five categories fitted. One contained row of cards, all
   categories visible, no repeated "Browse the range" filler. */
.site-header .dept-panel {
  /* Something upstream applies translateX(-50%), which parked the panel half
     off-screen to the left - it measured left:-720 in a 1440 viewport. */
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
  margin-left: 0;
}
.site-header .dept-panel-inner {
  display: block;
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding: 1.1rem var(--page-gutter) 1.25rem;
}
.site-header .dept-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem;
  padding: 0;
}
.site-header .dept-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .8rem;
  border: 1px solid #e4e9f2;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.site-header .dept-item:hover { border-color: #c8d0e2; background: #f7f9fd; }
.site-header .dept-ico {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef2fb;
  color: var(--color-primary);
  font-size: .85rem;
}
.site-header .dept-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary, #111);
}
.site-header .dept-count {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  color: #62708a;
  background: #f1f4fa;
  border-radius: 999px;
  padding: .12rem .45rem;
}
.dept-all {
  display: inline-block;
  margin-top: .9rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.dept-all:hover { text-decoration: underline; }

/* Footer controls that sit on a filled ground keep white text: the light-ground
   sweep above turned these labels dark on their own navy button. */
footer .footer-newsletter-form button,
footer .footer-newsletter-form button[type="submit"],
footer .btn-primary,
footer .footer-cta {
  color: #ffffff !important;
}

/* ── Mobile drawer ────────────────────────────────────────────────────────
   The logo and close button scrolled with the list, so the wordmark sat on top
   of "Laptop & Computer Accessories" as soon as the panel was scrolled. The
   header is a solid sticky bar now, above the list. */
.mobile-drawer-brand,
.mobile-drawer-close {
  position: sticky;
  top: 0;
  z-index: 5;
}
.mobile-drawer-brand {
  display: flex;
  align-items: center;
  background: #fff;
  padding: .85rem 1rem;
  border-bottom: 1px solid #e4e9f2;
  margin: 0;
}
.mobile-drawer-close {
  background: #fff;
  border: 0;
  color: #46536b;
  font-size: 1.1rem;
  line-height: 1;
  padding: .5rem;
  border-radius: 8px;
}
.mobile-drawer-close:hover { background: #f1f4fa; }
.mobile-drawer-inner { padding-top: .25rem; }

/* ── Product page on a phone ──────────────────────────────────────────────
   The two-column rule lives in the page's own <style> block, which loads after
   this file, so the existing 900px override never won: the text column stayed
   at roughly 150px and the description wrapped to one word per line. !important
   is deliberate here - the alternative is editing a template another session
   currently has open. */
@media (max-width: 900px) {
  .product-page-grid,
  .product-page-grid.cro-product-detail {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .product-media-card { position: static !important; }
  .cro-product-image { min-height: 300px !important; padding: 1rem !important; }
  .cro-product-image img { max-height: 320px !important; }
  .product-buy-card { padding: 1.15rem !important; }
  #product-name { font-size: 1.35rem !important; }
  #retail-price { font-size: 1.75rem !important; }
  .product-description { font-size: .92rem !important; }
  .product-cta-row { grid-template-columns: 1fr !important; }
  .product-main-cta { width: 100% !important; }
}

/* ── Footer on a phone ── */
@media (max-width: 700px) {
  footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  footer .footer-column h4 { margin-bottom: .6rem; }
  footer .footer-newsletter-form { max-width: none; }
  footer .footer-trust-row { flex-wrap: wrap; gap: .6rem 1rem; }
}

/* Footer link hover. Several rules set color:var(--white) or
   var(--color-text-inverse), which my literal-value sweep did not catch - on
   the light ground a hovered link turned white and became unreadable. */
footer .footer-column a:hover,
footer .footer-column ul li a:hover,
footer .footer-bottom-links a:hover,
footer .footer-note a:hover,
footer .social-links a:hover {
  color: var(--color-primary, #0D2A6E) !important;
}
footer .footer-column a:focus-visible,
footer .footer-bottom-links a:focus-visible {
  outline: 2px solid var(--color-primary, #0D2A6E);
  outline-offset: 2px;
  color: var(--color-primary, #0D2A6E) !important;
}

/* About page: the feature icon wells were red glyphs on grey, which made the
   page read as a warning board. Navy on a navy tint, like every other icon
   well on the site. */
.about-page .feature-icon,
.feature-card .feature-icon {
  background: #eef2fb;
  color: var(--color-primary, #0D2A6E);
}
.about-page .feature-icon i,
.feature-card .feature-icon i { color: var(--color-primary, #0D2A6E); }

/* ── Launching soon band ──────────────────────────────────────────────────
   Enquiries were arriving for lines the shop does not list yet. This is the
   route from "do you have..." to a record the shop can buy against. */
.launch-band { padding: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.launch-band__inner {
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.launch-band__inner > div { max-width: 54ch; }
.launch-band__tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-primary, #0D2A6E);
  background: #eef2fb;
  padding: .24rem .55rem;
  border-radius: 999px;
  margin-bottom: .55rem;
}
.launch-band__title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text-primary, #111);
  margin: 0 0 .3rem;
}
.launch-band__copy { font-size: .9rem; color: var(--color-text-muted, #62708a); margin: 0; }
.launch-band__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.15rem;
  border-radius: 10px;
  background: var(--color-primary, #0D2A6E);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
.launch-band__cta:hover { background: #0a2159; color: #fff; }

.pdp-restock { font-size: .82rem; color: var(--color-text-muted, #62708a); margin: -.6rem 0 1.1rem; }
.pdp-restock a { color: var(--color-primary, #0D2A6E); font-weight: 700; }