/* Kenya Ihsaan Tyres — static site styles */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --accent: oklch(0.86 0.19 96);
  --accent-tint: oklch(0.96 0.05 96);
  --ink: oklch(0.12 0 0);
  --bg: oklch(0.98 0.004 250);
  --offer-bg: oklch(0.08 0 0);
  --offer-yellow: oklch(0.9 0.2 96);
  /* Directional tread blocks, shared by the Why band and the page heroes */
  --tread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='48' viewBox='0 0 34 48'%3E%3Cpath d='M0 0h11l15 22H15zM0 48h11l15-22H15z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }

.heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: oklch(0.15 0.006 250);
  color: oklch(0.85 0.006 250);
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 13px;
  flex-wrap: wrap;
}
.utility-bar > div { display: flex; align-items: center; gap: 7px; }
.utility-bar svg { flex-shrink: 0; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--offer-bg);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
  border-top: 1px solid oklch(0.9 0.2 96 / 0.35);
  border-bottom: 1px solid oklch(0.9 0.2 96 / 0.35);
}
.marquee-track {
  display: inline-flex;
  width: 200%;
  animation: offerMarquee 14s linear infinite;
}
.marquee-half { display: flex; width: 50%; justify-content: space-around; }
.marquee-half span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--offer-yellow);
  text-shadow: 0 0 6px oklch(0.9 0.2 96 / 0.85), 0 0 16px oklch(0.9 0.2 96 / 0.5);
  animation: offerFlicker 2.6s ease-in-out infinite;
}
.marquee-half span:nth-child(1) { animation-delay: 0s; }
@keyframes offerMarquee { from { transform: translateX(-50%); } to { transform: translateX(0%); } }
@keyframes offerFlicker {
  0%, 100% { text-shadow: 0 0 6px oklch(0.9 0.2 96 / 0.85), 0 0 16px oklch(0.9 0.2 96 / 0.5); }
  50% { text-shadow: 0 0 10px oklch(0.9 0.2 96 / 1), 0 0 26px oklch(0.9 0.2 96 / 0.85), 0 0 40px oklch(0.9 0.2 96 / 0.4); }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid oklch(0.9 0.005 250);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}
.brand-mark { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.brand-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.brand-logo.small { width: 30px; height: 30px; border-radius: 7px; }
.brand-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.5px; line-height: 1; }

.icon-btn {
  position: relative;
  border-radius: 50%;
  border: 1px solid oklch(0.88 0.006 250);
  background: oklch(0.99 0.003 250);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn.desktop { width: 40px; height: 40px; }
.icon-btn.mobile { width: 38px; height: 38px; }

.cart-badge {
  display: none;
  position: absolute;
  top: -5px; right: -5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}
.cart-badge.show { display: flex; }

.wa-round {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
}

.hamburger {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid oklch(0.88 0.006 250);
  background: oklch(0.99 0.003 250);
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer;
}
.hamburger span { width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-actions { display: none; align-items: center; gap: 14px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav a.nav-link {
  font-size: 15px; font-weight: 600; cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.desktop-nav a.nav-link.active { border-bottom-color: var(--accent); }
.wa-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 999px;
}

@media (max-width: 880px) {
  .mobile-actions { display: flex; }
  .desktop-nav { display: none; }
}

/* ---------- Mobile side nav ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: oklch(0.1 0.006 250 / 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.side-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: 78%; max-width: 340px;
  background: oklch(0.15 0.006 250);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
  padding: 28px 28px 32px 28px;
}
.side-nav.open { transform: translateX(0%); box-shadow: -12px 0 40px oklch(0 0 0 / 0.35); }
.side-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.side-nav-brand { display: flex; align-items: center; gap: 9px; }
.side-nav-brand .brand-dot { width: 12px; height: 12px; }
.side-nav-brand .brand-name { font-size: 18px; color: oklch(0.97 0.004 250); }
.side-nav-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid oklch(0.35 0.006 250); background: transparent;
  color: oklch(0.9 0.006 250); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
}
.side-nav-links { display: flex; flex-direction: column; gap: 2px; }
.side-nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px; font-weight: 700; color: oklch(0.97 0.004 250);
  padding: 16px 4px; border-bottom: 1px solid oklch(0.26 0.006 250);
  cursor: pointer;
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.side-nav.open .side-nav-links a { opacity: 1; transform: translateX(0); }
.side-nav.open .side-nav-links a:nth-child(1) { transition-delay: 0.08s; }
.side-nav.open .side-nav-links a:nth-child(2) { transition-delay: 0.14s; }
.side-nav.open .side-nav-links a:nth-child(3) { transition-delay: 0.20s; }
.side-nav.open .side-nav-links a:nth-child(4) { transition-delay: 0.26s; }
.side-nav-wa {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 15px;
  padding: 15px 20px; border-radius: 10px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 620px;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide .placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, oklch(0.3 0.01 250) 0px, oklch(0.3 0.01 250) 18px, oklch(0.34 0.008 250) 18px, oklch(0.34 0.008 250) 36px);
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.85 0.006 250);
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.1 0.006 250 / 0.1) 0%, oklch(0.1 0.006 250 / 0.35) 50%, oklch(0.08 0.006 250 / 0.85) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 64px 80px 64px;
  max-width: 1280px; margin: 0 auto;
}
.hero-kicker {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.hero-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 76px; line-height: 1.0; margin: 0 0 22px 0;
  min-height: 160px; color: oklch(0.99 0 0);
}
.hero-title span { display: inline-block; opacity: 1; transition: opacity 0.5s ease; }
.hero-title span.fading { opacity: 0; }
.hero-sub { font-size: 17px; line-height: 1.6; color: oklch(0.92 0.006 250); max-width: 520px; margin: 0 0 36px 0; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-solid {
  display: flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 16px; padding: 16px 28px; border-radius: 10px;
}
.btn-outline {
  display: flex; align-items: center; gap: 9px;
  border: 2px solid oklch(0.99 0 0); color: oklch(0.99 0 0);
  font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 10px;
}
.hero-dots {
  position: absolute; z-index: 2; bottom: 32px; right: 64px;
  display: flex; gap: 9px;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 999px;
  background: oklch(0.99 0 0 / 0.4); border: none; cursor: pointer; padding: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.hero-dots button.active { width: 26px; background: var(--accent); }

@media (max-width: 880px) {
  .hero { height: 78vh; min-height: 480px; }
  .hero-content { padding: 0 20px 56px 20px; }
  .hero-title { font-size: 42px; min-height: 92px; }
}

/* ---------- Sections ---------- */
main { flex: 1; }
.section { padding: 72px 64px; max-width: 1280px; margin: 0 auto; width: 100%; }
.section.no-top { padding-top: 0; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 34px; margin: 0 0 40px 0; text-align: center; }

@media (max-width: 880px) {
  .section { padding: 48px 20px; }
  .section.no-top { padding-top: 0; padding-bottom: 48px; }
}

/* ---------- Page hero ----------
   One dark band for Best Sellers (home), Brands, About and Contact.
   The tread edge rolls in each time a page opens.
   .page-hero--center   centred text (Best Sellers)
   .page-hero--overlap  the section that follows (.sellers-cards) pulls up over the band */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(640px 320px at 92% 0%, oklch(0.86 0.19 96 / 0.13) 0%, transparent 65%),
    oklch(0.15 0.006 250);
  color: oklch(0.96 0.004 250);
}
.page-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 56px 64px 52px 64px; }
.page-crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px 0; padding: 0;
  font-size: 13.5px; color: oklch(0.66 0.006 250);
}
.page-crumbs li + li::before { content: '/'; margin-right: 8px; color: oklch(0.45 0.006 250); }
.page-crumbs a { cursor: pointer; transition: color 0.2s ease; }
.page-crumbs a:hover { color: var(--accent); }
.page-crumbs [aria-current="page"] { color: oklch(0.96 0.004 250); font-weight: 600; }
.page-hero-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 64px; line-height: 0.95; margin: 0 0 16px 0; color: oklch(0.99 0 0);
  text-wrap: balance;
}
.page-hero-sub { font-size: 17px; line-height: 1.6; color: oklch(0.78 0.006 250); max-width: 540px; margin: 0; }
.page-hero-tread {
  height: 34px;
  background-color: oklch(0.86 0.19 96 / 0.32);
  -webkit-mask: var(--tread) 0 0 / 24px 34px repeat-x;
          mask: var(--tread) 0 0 / 24px 34px repeat-x;
  animation: treadRoll 1.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes treadRoll {
  from { -webkit-mask-position: -240px 0; mask-position: -240px 0; }
  to   { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.page-hero--center { text-align: center; }
.page-hero--center .page-hero-sub { margin: 0 auto; }
.page-hero--center .category-filter { margin: 28px 0 0 0; }
.page-hero--overlap .page-hero-inner { padding-bottom: 136px; }
.sellers-cards { position: relative; z-index: 1; margin-top: -130px; }
.sellers-cards .brand-card { box-shadow: 0 22px 44px -30px oklch(0.1 0.006 250 / 0.5); }

/* Category pills on the dark band */
.page-hero .category-pill { background: transparent; border-color: oklch(0.99 0 0 / 0.22); color: oklch(0.9 0.006 250); }
.page-hero .category-pill.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Hero text lines up with each page's content width */
[data-page="about"] .page-hero-inner { max-width: 1000px; }
[data-page="contact"] .page-hero-inner { max-width: 1100px; }
@media (min-width: 1280px) { [data-page="brands"] .page-hero-inner { max-width: 1480px; } }
@media (min-width: 1800px) { [data-page="brands"] .page-hero-inner { max-width: 1680px; } }

/* Less space between a hero and the content under it */
.page-hero + .section:not(.no-top) { padding-top: 48px; }

@media (max-width: 880px) {
  .page-hero-inner { padding: 36px 20px 36px 20px; }
  .page-hero-title { font-size: 44px; }
  .page-hero-sub { font-size: 16px; }
  .page-hero-tread { height: 26px; -webkit-mask-size: 18px 26px; mask-size: 18px 26px; }
  .page-hero--overlap .page-hero-inner { padding-bottom: 110px; }
  .sellers-cards { margin-top: -100px; }
  .page-hero + .section:not(.no-top) { padding-top: 32px; }
}

/* Trust strip */
.trust-strip { background: oklch(0.2 0.006 250); padding: 36px 64px; }
.trust-strip-inner { max-width: 1280px; margin: 0 auto; }
.trust-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase; color: oklch(0.7 0.006 250);
  margin-bottom: 20px; text-align: center;
}
.trust-chips { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.trust-chips-wrapper { display: flex; flex-direction: column; align-items: center; }
.trust-group { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; }
.trust-group:last-child { margin-bottom: 0; }
.trust-group-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent);
}
.trust-chip {
  cursor: pointer; padding: 10px 22px; border-radius: 8px;
  background: oklch(0.27 0.006 250); color: oklch(0.95 0.004 250);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.5px;
}

/* Deal-in single card */
.deal-card { text-align: center; width: 280px; margin: 0 auto; }
.deal-card .photo { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: oklch(0.95 0.004 250); }
.deal-card .photo img { width: 100%; height: 100%; object-fit: contain; }
.deal-card .label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 0.5px; }

/* ---------- Delivery hero ---------- */
.delivery-hero {
  position: relative; width: 100%; height: 60vh; min-height: 420px;
  overflow: hidden; margin: 64px 0;
}
.delivery-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.delivery-hero .placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, oklch(0.3 0.01 250) 0px, oklch(0.3 0.01 250) 18px, oklch(0.34 0.008 250) 18px, oklch(0.34 0.008 250) 36px);
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.85 0.006 250); font-family: 'SF Mono', 'Courier New', monospace; font-size: 13px;
}
.delivery-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, oklch(0.08 0.006 250 / 0.9) 0%, oklch(0.08 0.006 250 / 0.55) 55%, oklch(0.08 0.006 250 / 0.15) 100%);
}
.delivery-hero-content {
  position: relative; z-index: 2; height: 100%; max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 64px;
}
.delivery-hero-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 56px; line-height: 1.05; margin: 0 0 18px 0; color: oklch(0.99 0 0);
}
.delivery-hero-sub {
  font-size: 16px; line-height: 1.6; color: oklch(0.92 0.006 250);
  max-width: 480px; margin: 0 0 30px 0;
}
@media (max-width: 880px) {
  .delivery-hero { height: 66vh; min-height: 460px; margin: 40px 0; }
  .delivery-hero-content { padding: 0 24px; }
  .delivery-hero-title { font-size: 36px; }
  .delivery-hero-scrim { background: linear-gradient(180deg, oklch(0.08 0.006 250 / 0.35) 0%, oklch(0.08 0.006 250 / 0.9) 75%); }
}

/* Grid 3 / 2 */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Brand card (home) */
.brand-card { border: 1px solid oklch(0.9 0.005 250); border-radius: 14px; padding: 22px; background: oklch(0.99 0.003 250); }
.brand-card .photo { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; margin-bottom: 14px; background: oklch(0.95 0.004 250); }
.brand-card .photo img { width: 100%; height: 100%; object-fit: contain; }
.brand-card .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; margin-bottom: 12px; }
.tyre-row-list { display: flex; flex-direction: column; gap: 8px; }
.tyre-row {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 8px; background: oklch(0.96 0.004 250);
}
.tyre-row .size { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tyre-row-tags, .tyre-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.popular-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  color: oklch(0.3 0.04 90); background: oklch(0.82 0.13 90); padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.vclass-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  color: oklch(0.35 0.1 250); background: oklch(0.9 0.03 250); padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; cursor: help;
}
.tyre-card-tags { justify-content: center; margin-top: -2px; }

/* ---------- Prices ---------- */
.row-price { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.row-price s { font-size: 11.5px; color: oklch(0.55 0.006 250); }
.row-price b { font-size: 13px; font-weight: 800; }
/* Card price stack — big current price, then old price + discount badge */
.tyre-price { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tyre-price .now {
  font-size: 18px; font-weight: 700; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
}
.tyre-price .was-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tyre-price .was {
  font-size: 12.5px; color: oklch(0.58 0.006 250);
  text-decoration: line-through; white-space: nowrap;
}
.save-badge {
  font-size: 11.5px; font-weight: 700; line-height: 1;
  color: oklch(0.99 0 0); background: oklch(0.5 0.12 158);
  padding: 4px 5px; border-radius: 4px; white-space: nowrap;
}
.delivery-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  color: oklch(0.99 0 0); background: oklch(0.99 0 0 / 0.14);
  border: 1px solid oklch(0.99 0 0 / 0.3);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 14px; width: fit-content;
}
.see-more { text-align: center; margin-top: 14px; }
.see-more a {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px;
  font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 30% 3px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.16,1,0.3,1);
}
.see-more-arrow { display: inline-block; transition: translate 0.35s cubic-bezier(0.16,1,0.3,1); }

/* ---------- Why choose us: dark band with a tyre-tread edge ---------- */
.why-band { position: relative; background: oklch(0.15 0.006 250); color: oklch(0.96 0.004 250); }
/* Directional tread blocks, drawn with a mask so the colour stays in CSS */
.why-tread {
  height: 48px;
  background-color: oklch(0.86 0.19 96 / 0.2);
  -webkit-mask: var(--tread) 0 0 / 34px 48px repeat-x;
          mask: var(--tread) 0 0 / 34px 48px repeat-x;
}
.why-inner {
  max-width: 1280px; margin: 0 auto; padding: 64px 64px 88px 64px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start;
}
.why-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 64px; line-height: 0.95; margin: 0 0 22px 0; color: oklch(0.99 0 0);
  text-wrap: balance;
}
.why-lead { font-size: 17px; line-height: 1.6; color: oklch(0.78 0.006 250); max-width: 400px; margin: 0 0 32px 0; }
.why-intro .btn-solid { display: inline-flex; }
.why-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid oklch(0.28 0.006 250); }
.why-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 28px 0; border-top: 1px solid oklch(0.28 0.006 250);
}
.why-icon {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: oklch(0.99 0 0);
  box-shadow: 0 0 0 4px oklch(0.15 0.006 250), 0 0 0 6px var(--accent);
}
.why-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-item h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 27px; letter-spacing: 0.3px;
  margin: 0 0 6px 0; color: oklch(0.99 0 0);
}
.why-item p { font-size: 15.5px; line-height: 1.6; color: oklch(0.74 0.006 250); margin: 0; max-width: 46ch; }

@media (max-width: 879px) {
  .why-tread { height: 36px; -webkit-mask-size: 26px 36px; mask-size: 26px 36px; }
  .why-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 56px 20px; }
  .why-title { font-size: 46px; margin-bottom: 14px; }
  .why-lead { font-size: 16px; margin-bottom: 24px; }
  .why-item { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px 0 22px 6px; }
  .why-icon { width: 56px; height: 56px; }
  .why-item h3 { font-size: 23px; }
  .why-item p { font-size: 15px; }
}

/* ---------- Our branch: details + map in one panel ---------- */
.branch-section { padding-top: 88px; }
.branch-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: oklch(0.99 0.003 250); border: 1px solid oklch(0.9 0.005 250); border-radius: 20px; overflow: hidden;
}
.branch-info { display: flex; flex-direction: column; padding: 32px 36px 36px 32px; }
.branch-photo {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  margin-bottom: 28px; background: oklch(0.94 0.004 250);
}
.branch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.open-badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: oklch(0.15 0.006 250 / 0.86); color: oklch(0.99 0 0);
  font-size: 13px; font-weight: 700;
}
.open-badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.8 0.18 150); box-shadow: 0 0 0 3px oklch(0.8 0.18 150 / 0.3);
}
/* No shop photo? Keep the "Open 24/7" badge as a normal inline pill */
.branch-photo.no-photo { aspect-ratio: auto; background: none; overflow: visible; margin-bottom: 16px; }
.branch-photo.no-photo .open-badge { position: static; }
.branch-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 44px; line-height: 1; margin: 0 0 12px 0;
}
.branch-lead { font-size: 16px; line-height: 1.6; color: oklch(0.42 0.006 250); margin: 0 0 22px 0; }
.branch-facts { margin: 0 0 28px 0; border-bottom: 1px solid oklch(0.92 0.004 250); }
.branch-facts > div {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid oklch(0.92 0.004 250);
}
.branch-facts dt { font-size: 13.5px; color: oklch(0.55 0.006 250); }
.branch-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.branch-facts a { text-decoration: underline; text-decoration-color: oklch(0.8 0.006 250); text-underline-offset: 3px; }
.branch-facts a:hover { text-decoration-color: var(--ink); }
.branch-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.branch-ctas .btn-solid { font-size: 15px; padding: 14px 22px; }
.branch-ctas .btn-outline-dark { font-size: 15px; padding: 12px 20px; }
.branch-map { position: relative; min-height: 460px; background: oklch(0.93 0.004 250); }
.branch-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 879px) {
  .branch-section { padding-top: 48px; }
  .branch-panel { grid-template-columns: 1fr; border-radius: 16px; }
  .branch-info { padding: 16px 18px 22px 18px; }
  .branch-photo { margin-bottom: 20px; }
  .branch-title { font-size: 34px; }
  .branch-ctas > a { flex: 1 1 auto; justify-content: center; }
  .branch-map { min-height: 300px; }
}

.map-placeholder {
  aspect-ratio: 16/9; border-radius: 14px;
  background: repeating-linear-gradient(135deg, oklch(0.92 0.02 96) 0px, oklch(0.92 0.02 96) 14px, oklch(0.96 0.01 96) 14px, oklch(0.96 0.01 96) 28px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid oklch(0.85 0.02 96);
}
.map-placeholder span {
  font-family: 'SF Mono', 'Courier New', monospace; font-size: 13px; color: oklch(0.4 0.02 96);
  background: oklch(0.98 0.004 250); padding: 6px 14px; border-radius: 6px;
}
.map-embed {
  aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  border: 1px solid oklch(0.85 0.02 96);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Category filter */
.category-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.category-pill {
  cursor: pointer; padding: 9px 20px; border-radius: 999px;
  border: 1.5px solid oklch(0.85 0.006 250); background: oklch(0.99 0.003 250);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.3px;
  color: oklch(0.42 0.006 250);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.category-pill.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.brand-card.filtered-out, .brand-block.filtered-out { display: none; }

/* ---------- Brands page ---------- */
.brand-block-list { display: flex; flex-direction: column; gap: 20px; }
.brand-block { border: 1px solid oklch(0.9 0.005 250); border-radius: 16px; padding: 24px; background: oklch(0.99 0.003 250); }
.brand-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
.brand-block-head .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; }
.brand-block-head .blurb { font-size: 14px; color: oklch(0.42 0.006 250); margin: 0; max-width: 520px; text-align: right; }
.carousel-wrap { position: relative; }
.carousel-btn {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid oklch(0.85 0.006 250); background: oklch(0.99 0 0);
  box-shadow: 0 4px 10px oklch(0.2 0.006 250 / 0.15);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px;
}
.carousel-btn.left { left: -18px; }
.carousel-btn.right { right: -18px; }

/* Cards size themselves from how many should fit across the track.
   Fewer, wider cards = bigger photos; the count steps up with screen width. */
.carousel-track {
  --per-view: 1.6;
  --card-gap: 12px;
  display: flex; gap: var(--card-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 2px 2px 10px 2px; scroll-padding-inline: 2px;
}
.tyre-card {
  flex: 0 0 calc((100% - var(--card-gap) * (var(--per-view) - 1)) / var(--per-view));
  min-width: 0; scroll-snap-align: start;
  border: 1px solid oklch(0.91 0.005 250); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; background: oklch(1 0 0);
}
.tyre-card .photo {
  aspect-ratio: 1/1; position: relative; overflow: hidden;
  background: oklch(1 0 0);
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.6 0.006 250); font-size: 12px;
}
.tyre-card .photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tyre-card .popular-badge { position: absolute; top: 8px; right: 8px; }
.tyre-card-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px 12px;
  border-top: 1px solid oklch(0.94 0.004 250);
}
.tyre-card .size {
  font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left;
  color: oklch(0.3 0.006 250);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.add-cart-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 13px; padding: 10px; border-radius: 7px;
  border: none; cursor: pointer; width: 100%;
}
.add-cart-btn:focus-visible, .carousel-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 559px) {
  .brand-block { padding: 16px; }
  .brand-block-head .blurb { text-align: left; }
  .carousel-btn { width: 34px; height: 34px; font-size: 16px; }
  .carousel-btn.left { left: -10px; }
  .carousel-btn.right { right: -10px; }
  .tyre-card-body { padding: 8px 10px 10px 10px; }
  .tyre-price .now { font-size: 16px; }
}
@media (min-width: 560px) { .carousel-track { --per-view: 2.5; } }
@media (min-width: 880px) { .carousel-track { --per-view: 3.2; --card-gap: 16px; } }
@media (min-width: 1100px) { .carousel-track { --per-view: 4; } }
/* Big screens: give the brands page more room so each card (and photo) grows */
@media (min-width: 1280px) {
  [data-page="brands"] .section { max-width: 1480px; }
  .tyre-card .size { font-size: 15px; }
  .tyre-price .now { font-size: 20px; }
}
@media (min-width: 1800px) {
  [data-page="brands"] .section { max-width: 1680px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* ---------- Brands page: tyre finder ---------- */
.tyre-finder[hidden], .tyre-finder-tabs[hidden], .tyre-finder-help[hidden],
.finder-pop[hidden], .filter-empty[hidden] { display: none; }

.tyre-finder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center; gap: 18px 40px;
  background: oklch(0.2 0.006 250); color: oklch(0.95 0.004 250);
  border-radius: 16px; padding: 26px 30px; margin: 0 0 32px 0;
}
.tyre-finder-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1;
  margin: 0 0 8px 0; color: oklch(0.99 0 0);
}
.tyre-finder-help { font-size: 14.5px; line-height: 1.55; color: oklch(0.76 0.006 250); margin: 0; max-width: 460px; }
.tyre-finder-help mark {
  background: none; color: var(--accent); font-weight: 700;
  border-bottom: 2px solid var(--accent);
}
.tyre-finder-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 10px;
  background: oklch(0.27 0.006 250); border-radius: 11px;
}
.finder-tab {
  position: relative; flex: 1; cursor: pointer;
  border: none; background: transparent; border-radius: 8px; padding: 9px 12px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: 0.3px;
  color: oklch(0.8 0.006 250);
  transition: background 0.15s ease, color 0.15s ease;
}
.finder-tab[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.finder-tab.has-value::after {
  content: ''; position: absolute; top: 8px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.finder-tab[aria-selected="true"].has-value::after { background: var(--ink); }
.finder-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.finder-select { position: relative; }
.finder-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-radius: 10px; border: 2px solid oklch(0.99 0 0); cursor: pointer;
  background: oklch(0.99 0 0); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 15.5px; font-weight: 600; text-align: left;
}
.finder-trigger.is-placeholder { color: oklch(0.45 0.006 250); font-weight: 500; }
.finder-trigger svg { flex-shrink: 0; transition: transform 0.2s ease; }
.finder-trigger[aria-expanded="true"] { border-color: var(--accent); }
.finder-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.finder-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.finder-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: oklch(0.99 0 0); color: var(--ink);
  border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 44px oklch(0 0 0 / 0.3);
}
.finder-search {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1.5px solid oklch(0.85 0.006 250); background: oklch(0.98 0.004 250); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 16px; /* 16px stops iOS zooming in */
}
.finder-search:focus { outline: none; border-color: var(--ink); }
.finder-list { list-style: none; margin: 6px 0 0 0; padding: 0; max-height: 264px; overflow-y: auto; }
.finder-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 7px; cursor: pointer; font-size: 14.5px;
}
.finder-option.is-active { background: var(--accent-tint); }
.finder-option[aria-selected="true"] { font-weight: 700; }
.finder-option[aria-selected="true"]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
  margin-right: -2px; flex-shrink: 0; order: -1;
}
.finder-option > span:first-of-type { flex: 1; }
.finder-num { font-size: 12.5px; color: oklch(0.55 0.006 250); font-weight: 500; }
.finder-empty { padding: 12px; font-size: 13.5px; color: oklch(0.5 0.006 250); }

/* ---------- Brands page: layout, sidebar, results ---------- */
.brands-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.brands-results { min-width: 0; container-type: inline-size; }

.filter-panel {
  position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: oklch(0.99 0.003 250); border: 1px solid oklch(0.9 0.005 250); border-radius: 16px;
  padding: 20px 16px 16px 18px;
}
.filter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.filter-panel-head h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 21px; margin: 0; }
.filter-close, .filter-panel-foot { display: none; }

.filter-tree, .filter-list { list-style: none; margin: 0; padding: 0; }
.filter-node + .filter-node { border-top: 1px solid oklch(0.94 0.004 250); }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.filter-row .filter-check { flex: 1; padding: 10px 2px; }
.filter-row .filter-label { font-weight: 600; }

.filter-check {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 2px; font-size: 14.5px; line-height: 1.3; color: oklch(0.32 0.006 250);
}
.filter-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filter-box {
  position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid oklch(0.72 0.006 250); background: oklch(1 0 0);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.filter-check:hover .filter-box { border-color: var(--ink); }
.filter-check input:checked + .filter-box { background: var(--accent); border-color: var(--ink); }
.filter-check input:checked + .filter-box::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--ink); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
.filter-check input:focus-visible + .filter-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.filter-check input:checked ~ .filter-label { color: var(--ink); font-weight: 700; }
.filter-num { font-size: 13px; color: oklch(0.58 0.006 250); }

.filter-toggle {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  border: none; background: transparent; cursor: pointer; color: oklch(0.45 0.006 250);
}
.filter-toggle:hover { background: oklch(0.95 0.004 250); color: var(--ink); }
.filter-toggle::before, .filter-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translate(-50%, -50%);
}
.filter-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.2s ease; }
.filter-node.open > .filter-row .filter-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.filter-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.filter-children { display: none; padding: 0 0 10px 28px; }
.filter-node.open > .filter-children { display: block; }
.filter-subhead {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
  color: oklch(0.5 0.006 250); margin: 6px 0 2px 0;
}
.filter-subhead ~ .filter-subhead { margin-top: 12px; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 40px; }
.results-summary { font-size: 14px; color: oklch(0.42 0.006 250); }
.results-summary strong { color: var(--ink); }
.filter-open {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: oklch(0.99 0.003 250);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink);
}
.filter-open-count {
  display: none; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800;
}
.filter-open-count.show { display: inline-flex; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.active-filters:empty { display: none; }
.active-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px 6px 13px; border-radius: 999px;
  border: 1px solid oklch(0.82 0.12 96); background: var(--accent-tint); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
}
.active-chip span { font-size: 10.5px; color: oklch(0.4 0.006 250); }
.active-chip:hover { border-color: var(--ink); }
.clear-link {
  border: none; background: none; cursor: pointer; padding: 4px 2px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: oklch(0.42 0.006 250); text-decoration: underline; text-underline-offset: 3px;
}
.clear-link:hover { color: var(--ink); }

.match-count {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--accent-tint); color: oklch(0.35 0.006 250);
}
.match-count:empty { display: none; }

.tyre-card.is-hidden, .brand-block.is-hidden { display: none; }
.carousel-wrap.no-scroll .carousel-btn { display: none; }

.filter-empty {
  text-align: center; padding: 48px 24px; border-radius: 16px;
  border: 1.5px dashed oklch(0.85 0.006 250); background: oklch(0.99 0.003 250);
}
.filter-empty h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; margin: 0 0 8px 0; }
.filter-empty p { font-size: 15px; color: oklch(0.42 0.006 250); margin: 0 auto 22px auto; max-width: 420px; line-height: 1.55; }
.filter-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.filter-empty-actions .btn-outline-dark { background: none; cursor: pointer; font-family: 'Inter', sans-serif; color: var(--ink); }
.filter-empty-actions .btn-solid { font-size: 15px; padding: 12px 22px; }

/* Card count follows the width of the results column, not the whole screen,
   so cards stay a good size next to the sidebar. Browsers without container
   queries fall back to the screen-width rules above. */
@container (min-width: 0px) { .carousel-track { --per-view: 1.6; --card-gap: 12px; } }
@container (min-width: 500px) { .carousel-track { --per-view: 2.5; } }
@container (min-width: 720px) { .carousel-track { --per-view: 3.2; --card-gap: 16px; } }
@container (min-width: 980px) { .carousel-track { --per-view: 4; } }
@container (min-width: 1240px) { .carousel-track { --per-view: 5; } }

@media (max-width: 879px) {
  .tyre-finder { grid-template-columns: 1fr; padding: 22px 20px; }
  .tyre-finder-title { font-size: 26px; }

  .brands-layout { grid-template-columns: 1fr; }
  .filter-open { display: inline-flex; }

  .filter-panel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 71;
    width: 86%; max-width: 360px; max-height: none;
    border: none; border-radius: 0; padding: 0;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 12px 0 40px oklch(0 0 0 / 0.3);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.45s;
  }
  .filter-panel.open { transform: translateX(0); visibility: visible; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
  .filter-panel-head { padding: 20px 20px 12px 20px; margin: 0; border-bottom: 1px solid oklch(0.92 0.004 250); }
  .filter-close {
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid oklch(0.88 0.006 250); background: oklch(0.99 0 0); font-size: 15px;
  }
  .filter-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px 20px; }
  .filter-check { padding: 9px 2px; font-size: 15px; }
  .filter-panel-foot {
    display: flex; gap: 10px; padding: 14px 20px 20px 20px;
    border-top: 1px solid oklch(0.92 0.004 250);
  }
  .filter-foot-clear, .filter-apply {
    cursor: pointer; border-radius: 10px; padding: 13px 14px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px;
  }
  .filter-foot-clear { border: 1.5px solid oklch(0.85 0.006 250); background: none; color: var(--ink); }
  .filter-apply { flex: 1; border: none; background: var(--accent); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-panel, .filter-panel.open { transition: none; }
}

/* ---------- Brands page: price range (full-width row inside the Tyre Finder) ---------- */
.price-filter[hidden], .price-note[hidden] { display: none; }
.price-filter {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center; gap: 16px 40px;
  margin-top: 6px; padding-top: 24px;
  border-top: 1px solid oklch(0.3 0.006 250);
}
/* Only batteries/rims in stock: the panel shows just the price range */
.tyre-finder.price-only .tyre-finder-intro,
.tyre-finder.price-only .tyre-finder-controls { display: none; }
.tyre-finder.price-only .price-filter { margin-top: 0; padding-top: 0; border-top: 0; }

.price-filter-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.price-filter-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.1;
  margin: 0; color: oklch(0.99 0 0);
}
.price-reset {
  visibility: hidden; border: none; background: none; cursor: pointer; padding: 2px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: oklch(0.76 0.006 250); text-decoration: underline; text-underline-offset: 3px;
}
.price-filter.is-active .price-reset { visibility: visible; }
.price-reset:hover { color: var(--accent); }
.price-summary { font-size: 14.5px; line-height: 1.55; color: oklch(0.76 0.006 250); margin: 0 0 14px 0; }

/* Histogram: how many sizes sit at each price; bars inside the range turn yellow */
.price-hist { display: flex; align-items: flex-end; gap: 3px; height: 48px; padding: 0 10px; }
.price-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: oklch(0.34 0.006 250); transition: background 0.2s ease; }
.price-bar.is-in { background: var(--accent); }

/* Two native range inputs stacked on one track */
.price-slider { position: relative; height: 28px; margin: 2px 0 12px 0; }
.price-track { position: absolute; left: 10px; right: 10px; top: 12px; height: 4px; border-radius: 4px; background: oklch(0.34 0.006 250); }
.price-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 4px; background: var(--accent); }
.price-range {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 28px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-range:focus { outline: none; }
.price-range::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.price-range::-moz-range-track { background: transparent; }
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; box-sizing: border-box;
  width: 20px; height: 20px; margin-top: 4px; border-radius: 50%;
  border: 3px solid oklch(0.2 0.006 250); background: oklch(0.99 0 0);
  box-shadow: 0 0 0 1.5px oklch(0.99 0 0); cursor: grab;
  transition: scale 0.15s ease, box-shadow 0.15s ease;
}
.price-range::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid oklch(0.2 0.006 250); background: oklch(0.99 0 0);
  box-shadow: 0 0 0 1.5px oklch(0.99 0 0); cursor: grab;
  transition: scale 0.15s ease, box-shadow 0.15s ease;
}
.price-range:hover::-webkit-slider-thumb { scale: 1.15; box-shadow: 0 0 0 1.5px oklch(0.99 0 0), 0 0 0 7px oklch(0.86 0.19 96 / 0.35); }
.price-range:hover::-moz-range-thumb { scale: 1.15; box-shadow: 0 0 0 1.5px oklch(0.99 0 0), 0 0 0 7px oklch(0.86 0.19 96 / 0.35); }
.price-range:active::-webkit-slider-thumb { scale: 1.25; cursor: grabbing; }
.price-range:active::-moz-range-thumb { scale: 1.25; cursor: grabbing; }
.price-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px oklch(0.99 0 0), 0 0 0 5px var(--accent); }
.price-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1.5px oklch(0.99 0 0), 0 0 0 5px var(--accent); }

/* Min / max boxes, styled like the rim-size dropdown next to them */
.price-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.price-field { position: relative; display: block; }
.price-field span { position: absolute; left: 14px; top: 7px; font-size: 11.5px; color: oklch(0.5 0.006 250); pointer-events: none; }
.price-field input {
  width: 100%; padding: 22px 14px 7px 14px; border-radius: 10px;
  border: 2px solid oklch(0.99 0 0); background: oklch(0.99 0 0); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; /* 16px stops iOS zooming in */
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.86 0.19 96 / 0.35); }
.price-sep { color: oklch(0.6 0.006 250); }

/* Quick ranges */
.price-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.price-presets:empty { display: none; }
.price-chip {
  cursor: pointer; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid oklch(0.99 0 0 / 0.22); background: transparent; color: oklch(0.9 0.006 250);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, translate 0.2s cubic-bezier(0.16,1,0.3,1);
}
.price-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.price-chip:focus-visible, .price-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.price-note { margin: 12px 0 0 0; font-size: 13px; line-height: 1.45; color: oklch(0.7 0.006 250); }

@media (max-width: 879px) {
  .price-filter { grid-template-columns: 1fr; gap: 14px; margin-top: 4px; padding-top: 20px; }
  .price-filter-title { font-size: 22px; }
  .price-summary { margin-bottom: 12px; }
  .price-chip { padding: 8px 12px; }
}

/* ---------- About page ---------- */
.about-top { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-bottom: 56px; }
@media (max-width: 880px) { .about-top { grid-template-columns: 1fr; } }
.about-top p { font-size: 16.5px; line-height: 1.75; color: oklch(0.32 0.006 250); margin: 0; }
.photo-placeholder {
  aspect-ratio: 4/3; border-radius: 14px;
  background: repeating-linear-gradient(135deg, oklch(0.93 0.005 250) 0px, oklch(0.93 0.005 250) 14px, oklch(0.97 0.004 250) 14px, oklch(0.97 0.004 250) 28px);
  display: flex; align-items: center; justify-content: center; border: 1px solid oklch(0.88 0.006 250);
  overflow: hidden;
}
.photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder span {
  font-family: 'SF Mono', 'Courier New', monospace; font-size: 13px; color: oklch(0.5 0.006 250);
  background: oklch(0.98 0.004 250); padding: 6px 14px; border-radius: 6px;
}
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.value-card { text-align: center; padding: 24px; border-radius: 12px; background: var(--accent-tint); }
.value-card .title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; margin-bottom: 6px; }
.value-card .desc { font-size: 14px; color: oklch(0.4 0.006 250); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-col { display: flex; flex-direction: column; gap: 24px; }
.contact-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; color: oklch(0.5 0.006 250); margin-bottom: 6px;
}
.contact-value { font-size: 17px; line-height: 1.5; }
.contact-ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.btn-outline-dark {
  display: flex; align-items: center; gap: 9px;
  border: 2px solid var(--ink); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px;
}
.contact-ctas .btn-solid { font-size: 15px; padding: 14px 22px; }
.contact-map { aspect-ratio: 1/1; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: auto; color: oklch(0.85 0.006 250);
  padding: 56px 64px 36px 64px;
  background:
    radial-gradient(560px 320px at 8% 0%, oklch(0.86 0.19 96 / 0.16) 0%, transparent 65%),
    radial-gradient(480px 280px at 96% 110%, oklch(0.86 0.19 96 / 0.10) 0%, transparent 65%),
    oklch(0.1 0 0);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.85;
}
.site-footer::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(oklch(0.99 0 0 / 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, oklch(0 0 0 / 1) 0%, transparent 75%);
}
.footer-grid { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand .brand-dot { width: 12px; height: 12px; }
.footer-brand .brand-logo { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.footer-brand:hover .brand-logo { transform: rotate(-6deg) scale(1.08); }
.footer-brand .brand-name { font-size: 19px; color: oklch(0.97 0.004 250); }
.footer-desc { font-size: 14px; line-height: 1.6; color: oklch(0.65 0.006 250); max-width: 320px; margin: 0; }
.footer-heading {
  position: relative; display: inline-block;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; color: oklch(0.7 0.006 250); margin-bottom: 14px;
  padding-bottom: 8px;
}
.footer-heading::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 22px;
  background: var(--accent); border-radius: 2px;
}
.footer-list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: oklch(0.75 0.006 250); }
.footer-list span { transition: color 0.2s ease; }
.footer-list:hover span { color: oklch(0.9 0.006 250); }
.footer-brands-list { display: flex; flex-direction: column; gap: 16px; }
.footer-brand-group-label {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 7px;
}
.footer-brand-group-items {
  display: grid; grid-template-columns: repeat(2, auto); column-gap: 24px; row-gap: 8px;
}
.footer-wa-link {
  display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 700;
  width: fit-content; position: relative;
}
.footer-wa-link svg { transition: transform 0.3s ease; }
.footer-wa-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.footer-wa-link:hover::after { transform: scaleX(1); }
.footer-wa-link:hover svg { transform: scale(1.15) rotate(-8deg); }
.footer-social { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.22 0.006 250); color: oklch(0.85 0.006 250);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.footer-social a:hover {
  background: var(--accent); color: var(--ink);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px oklch(0.86 0.19 96 / 0.45);
}

/* ---------- Floating buttons ---------- */
.floating-wa {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px oklch(0.2 0.006 250 / 0.3);
}
.floating-social {
  position: fixed; right: 27px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px oklch(0.2 0.006 250 / 0.3);
}
.floating-tiktok { bottom: 112px; background: oklch(0.15 0.006 250); }
@media (max-width: 640px) {
  .floating-social { width: 42px; height: 42px; right: 30px; }
  .floating-tiktok { bottom: 100px; }
}
.back-to-top {
  position: fixed; bottom: 24px; right: 94px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  background: oklch(0.15 0.006 250); border: none;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px oklch(0.2 0.006 250 / 0.3); cursor: pointer;
}
.back-to-top.show { display: flex; }

/* ---------- Cart drawer ---------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: 88%; max-width: 400px;
  background: oklch(0.99 0.003 250);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0%); box-shadow: -12px 0 40px oklch(0 0 0 / 0.25); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 16px 22px; border-bottom: 1px solid oklch(0.9 0.005 250);
}
.cart-head .title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; }
.cart-head .count { font-size: 14px; font-weight: 600; color: oklch(0.5 0.006 250); }
.cart-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid oklch(0.88 0.006 250); background: oklch(0.99 0 0);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px;
}
.cart-items { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.cart-item { display: flex; align-items: center; gap: 12px; border: 1px solid oklch(0.9 0.005 250); border-radius: 12px; padding: 12px; }
.cart-item .thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: oklch(0.95 0.004 250); flex-shrink: 0; }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item .info { flex: 1; min-width: 0; }
.cart-item .info .brand { font-weight: 700; font-size: 14px; }
.cart-item .info .size { font-size: 12.5px; color: oklch(0.5 0.006 250); }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid oklch(0.85 0.006 250); background: oklch(0.98 0.004 250);
  cursor: pointer; font-weight: 700;
}
.qty-controls .qty { font-size: 14px; font-weight: 700; min-width: 14px; text-align: center; }
.remove-btn { color: oklch(0.55 0.16 25); border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }
.cart-item .info .line-price { font-size: 13px; font-weight: 800; margin-top: 3px; }
.cart-item .info .line-price.muted { font-weight: 600; color: oklch(0.55 0.006 250); }
.cart-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-radius: 12px; background: var(--accent-tint);
  font-size: 13.5px; font-weight: 700;
}
.cart-total strong { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; }
.cart-total-note { font-size: 11.5px; color: oklch(0.5 0.006 250); margin-top: -8px; }
.cart-empty { font-size: 14px; color: oklch(0.5 0.006 250); text-align: center; padding: 24px 0; }
.cart-footer { padding: 18px 22px 24px 22px; border-top: 1px solid oklch(0.9 0.005 250); }
.cart-footer p { font-size: 12.5px; color: oklch(0.5 0.006 250); margin: 0 0 14px 0; }
.cart-order-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 15px; padding: 15px 20px; border-radius: 10px;
  opacity: 0.5;
}
.cart-order-btn.active { opacity: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 90;
  background: oklch(0.15 0.006 250); color: oklch(0.99 0 0);
  font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.3); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.toast.show { opacity: 1; }

/* ---------- Hover effects ----------
   Buttons use the individual `translate` and `scale` properties, so they never
   fight the `transform` some of them already use for positioning. */

/* Filled and outlined buttons: a fill drives in from the left and out to the right,
   and the icon drives out and back in. Dark fill on light sections, white fill on dark ones. */
.btn-solid, .wa-pill, .add-cart-btn, .cart-order-btn, .filter-apply, .side-nav-wa,
.btn-outline, .btn-outline-dark {
  --wipe: var(--ink);
  --wipe-text: var(--accent);
  position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, translate 0.22s cubic-bezier(0.16,1,0.3,1), scale 0.12s ease, box-shadow 0.3s ease;
}
.hero .btn-solid, .delivery-hero .btn-solid, .why-band .btn-solid, .page-hero .btn-solid,
.side-nav-wa, .btn-outline { --wipe: oklch(0.99 0 0); --wipe-text: var(--ink); }

.btn-solid::before, .wa-pill::before, .add-cart-btn::before, .cart-order-btn::before, .filter-apply::before,
.side-nav-wa::before, .btn-outline::before, .btn-outline-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--wipe);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) {
  .btn-solid:hover, .wa-pill:hover, .add-cart-btn:hover, .cart-order-btn.active:hover, .filter-apply:hover,
  .side-nav-wa:hover, .btn-outline:hover, .btn-outline-dark:hover {
    color: var(--wipe-text); border-color: var(--wipe); translate: 0 -2px;
    box-shadow: 0 12px 24px -12px oklch(0.1 0.006 250 / 0.55);
  }
  .btn-solid:hover::before, .wa-pill:hover::before, .add-cart-btn:hover::before, .cart-order-btn.active:hover::before,
  .filter-apply:hover::before, .side-nav-wa:hover::before, .btn-outline:hover::before, .btn-outline-dark:hover::before {
    transform: scaleX(1); transform-origin: left center;
  }
  .btn-solid:hover svg, .wa-pill:hover svg, .add-cart-btn:hover svg, .cart-order-btn.active:hover svg,
  .side-nav-wa:hover svg, .btn-outline:hover svg, .btn-outline-dark:hover svg {
    animation: driveThrough 0.6s cubic-bezier(0.16,1,0.3,1);
  }
}
.btn-solid:active, .wa-pill:active, .add-cart-btn:active, .cart-order-btn.active:active, .filter-apply:active,
.side-nav-wa:active, .btn-outline:active, .btn-outline-dark:active { scale: 0.97; translate: 0 0; }
@keyframes driveThrough {
  0%   { transform: translateX(0); opacity: 1; }
  44%  { transform: translateX(16px); opacity: 0; }
  45%  { transform: translateX(-16px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Category pills: a yellow tint rises from the bottom */
.category-pill {
  position: relative; isolation: isolate; overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.22s cubic-bezier(0.16,1,0.3,1);
}
.category-pill::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-tint); transform: translateY(101%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.page-hero .category-pill::before { background: oklch(0.86 0.19 96 / 0.14); }
.category-pill.active::before { display: none; }
@media (hover: hover) {
  .category-pill:not(.active):hover { border-color: var(--ink); color: var(--ink); translate: 0 -2px; }
  .category-pill:not(.active):hover::before { transform: translateY(0); }
  .page-hero .category-pill:not(.active):hover { border-color: var(--accent); color: var(--accent); }
}
.category-pill:active { scale: 0.96; }

/* Carousel arrows */
.carousel-btn { transition: background 0.2s ease, border-color 0.2s ease, scale 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; }
@media (hover: hover) {
  .carousel-btn:hover { background: var(--accent); border-color: var(--accent); scale: 1.12; box-shadow: 0 8px 18px oklch(0.2 0.006 250 / 0.25); }
}
.carousel-btn:active { scale: 0.94; }

/* See more, brand chips, header */
@media (hover: hover) {
  .see-more a:hover { background-size: 100% 3px; }
  .see-more a:hover .see-more-arrow { translate: 4px 0; }
  .trust-chip:hover { background: var(--accent); color: var(--ink); translate: 0 -2px; }
  .desktop-nav a.nav-link:not(.active):hover { border-bottom-color: oklch(0.86 0.19 96 / 0.55); }
  .icon-btn:hover { border-color: var(--ink); translate: 0 -2px; }
  .hamburger:hover { border-color: var(--ink); }
  .wa-round:hover { scale: 1.1; }
  .filter-open:hover { background: var(--ink); color: var(--accent); }
  .filter-foot-clear:hover { border-color: var(--ink); }
  .qty-btn:hover { background: var(--accent); border-color: var(--accent); }
  .finder-tab:not([aria-selected="true"]):hover { background: oklch(0.32 0.006 250); color: oklch(0.99 0 0); }
  .price-chip:not([aria-pressed="true"]):hover { border-color: var(--accent); color: var(--accent); translate: 0 -1px; }
}
.trust-chip { transition: background 0.2s ease, color 0.2s ease, translate 0.22s cubic-bezier(0.16,1,0.3,1); }
.desktop-nav a.nav-link { transition: border-color 0.2s ease; }
.icon-btn, .hamburger { transition: border-color 0.2s ease, translate 0.22s cubic-bezier(0.16,1,0.3,1); }
.wa-round { transition: scale 0.22s cubic-bezier(0.16,1,0.3,1); }
.filter-open { transition: background 0.2s ease, color 0.2s ease; }
.qty-btn { transition: background 0.15s ease, border-color 0.15s ease; }

/* Floating WhatsApp, TikTok and back-to-top: grow with a pulsing yellow ring */
.floating-wa, .floating-social, .back-to-top { transition: scale 0.25s cubic-bezier(0.16,1,0.3,1); }
.back-to-top svg { transition: translate 0.25s cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) {
  .floating-wa:hover, .floating-social:hover, .back-to-top:hover { scale: 1.1; animation: ringPulse 1.2s ease-out infinite; }
  .back-to-top:hover svg { translate: 0 -3px; }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 8px 24px oklch(0.2 0.006 250 / 0.3), 0 0 0 0 oklch(0.86 0.19 96 / 0.6); }
  100% { box-shadow: 0 8px 24px oklch(0.2 0.006 250 / 0.3), 0 0 0 14px oklch(0.86 0.19 96 / 0); }
}

/* Keyboard focus */
.btn-solid:focus-visible, .btn-outline-dark:focus-visible, .wa-pill:focus-visible, .category-pill:focus-visible,
.cart-order-btn:focus-visible, .filter-apply:focus-visible,
.see-more a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .delivery-hero :focus-visible, .why-band :focus-visible, .page-hero :focus-visible,
.side-nav :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .page-hero-tread, .floating-wa, .floating-social, .back-to-top,
  .btn-solid svg, .wa-pill svg, .add-cart-btn svg, .cart-order-btn svg, .side-nav-wa svg,
  .btn-outline svg, .btn-outline-dark svg { animation: none !important; }
  .btn-solid::before, .wa-pill::before, .add-cart-btn::before, .cart-order-btn::before, .filter-apply::before,
  .side-nav-wa::before, .btn-outline::before, .btn-outline-dark::before, .category-pill::before,
  .see-more a, .see-more-arrow { transition-duration: 0.01ms !important; }
}

/* ---------- Pages ---------- */
.page { display: none; }
.page.active { display: block; }