/* ==========================================================================
   MyPneus.fr — Design System & Custom Styles
   Authentic Content & Reference-Accurate Redesign
   ========================================================================== */

/* Design Tokens */
:root {
  /* Brand Palette (1 main blue gradient, 1 yellow accent, neutrals) */
  --blue-950: #061538;               /* top bar + footer */
  --blue-900: #0a2a66;
  --blue-700: #1654c9;
  --yellow: #ffb000;
  --yellow-hover: #ffc533;   /* lighter yellow on hover */

  /* Brand blue gradient (hero + fitting-centres band) */
  --grad-blue:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 70%);

  --color-primary-blue: var(--blue-700);
  --color-brand-deep: #123f9e;
  --color-brand-dark: var(--blue-900);
  --color-accent: var(--yellow);     /* Call-to-action colour */
  --color-accent-hover: var(--yellow-hover);
  --color-accent-glow: rgba(255, 176, 0, 0.30);
  --color-on-accent: var(--blue-900); /* dark text on yellow (white would be ~1.9:1) */

  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;

  /* EU Tyre Label Grade Colors */
  --eu-grade-a: #15803d;
  --eu-grade-b: #65a30d;
  --eu-grade-c: #ffb000;   /* theme yellow */
  --eu-grade-d: #d93a3a;   /* red */

  /* Typography (PDF: One clean, readable sans-serif family; min 16px body) */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.09), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* Base Reset & Defaults */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-surface-subtle);
  color: var(--color-text-main);
  line-height: 1.5;
  font-size: 1rem; /* min 16px body for accessibility */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button, input, select {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ==========================================================================
   1. Top Bar: Promo message & Customer service contact
   ========================================================================== */

/* ==========================================================================
   2. Header: Logo, Main Menu, Search Bar, Account, Cart with count & total
   ========================================================================== */

/* Brand Logo (smaller, refreshed, preserving exact MyPneus.fr & Le roi du pneu) */

/* Header Search Bar */

@media (min-width: 900px){
  
}

/* Header Right: Account & Cart */

.cart-counter {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-amount {
  font-size: 0.9rem;
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 10px;
}

/* Main Navigation Menu */

/* ==========================================================================
   3. Hero with Tyre Search
   ========================================================================== */
.hero-section {
  position: relative;
  background: var(--grad-blue);
  color: #ffffff;
  padding: 40px 0 64px;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 1024px){
  .hero-layout {
    grid-template-columns: 1fr 1.35fr;
  }
}

.hero-intro h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

@media (min-width: 768px){
  .hero-intro h1 {
    font-size: 2.75rem;
  }
}

.hero-intro p {
  font-size: 1.1rem;
  color: #e2e8f0;
  line-height: 1.6;
}

/* Tyre Search Widget */
.search-widget {
  background-color: #ffffff;
  color: var(--color-text-main);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Vehicle Tabs & Plate Tab */
.search-tabs-bar {
  display: flex;
  background-color: #f1f5f9;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.search-tab-btn {
  flex: 1 1 auto;          /* size to content, then share leftover space so no tab is clipped */
  min-width: 0;
  padding: 14px 10px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  position: relative;
}

.search-tab-btn:hover {
  color: var(--color-text-main);
  background-color: #e2e8f0;
}

.search-tab-btn.active {
  color: var(--color-brand-deep);
  background-color: #ffffff;
}

.search-tab-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-primary-blue);
}

.search-tab-btn.alt-tab {
  background-color: #e2e8f0;
  color: var(--color-brand-dark);
  flex-shrink: 0;          /* "Par immatriculation" must never be cut off */
}

.search-tab-btn.alt-tab.active {
  background-color: #ffffff;
  color: var(--color-brand-deep);
}

.search-form-body {
  padding: 24px;
}

@media (min-width: 640px){
  .search-form-body {
    padding: 28px;
  }
}

/* Size Fields Grid: Largeur -> Hauteur -> Diamètre -> Charge -> Vitesse */
.dimensions-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 640px){
  .dimensions-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

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

.field-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}

.select-wrap {
  position: relative;
}

.select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface-subtle);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 28px 10px 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.select-wrap select:focus {
  outline: none;
  border-color: var(--color-primary-blue);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 84, 201, 0.18);
}

.select-arrow-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* Where to find my tyre size helper */
.size-helper-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 14px;
  background-color: #f8fafc;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}

.current-dimension-display {
  font-family: monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-brand-deep);
}

.helper-modal-btn {
  color: var(--color-brand-deep);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Season (été, hiver, 4 saisons) & Options (renforcé, run-flat) */
.options-season-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

@media (min-width: 640px){
  .options-season-row {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
  }
}

.season-btn-group {
  display: flex;
  gap: 6px;
}

.season-toggle-btn {
  flex: 1;
  padding: 9px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.season-toggle-btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-main);
}

.season-toggle-btn.active {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #ffffff;
}

.checkbox-group {
  display: flex;
  gap: 14px;
  align-items: center;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-label input {
  accent-color: var(--color-primary-blue);
  width: 16px;
  height: 16px;
}

/* Brand & Rechercher Button Row */
.brand-search-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px){
  .brand-search-row {
    grid-template-columns: 1.2fr 1fr;
  }
}

.btn-rechercher {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: var(--color-on-accent);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px var(--color-accent-glow);
  transition: all var(--transition-fast);
}

.btn-rechercher:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Plate Search Panel */
.plate-panel {
  display: none;
  padding: 28px 24px 32px;
  text-align: center;
}

.plate-panel.active {
  display: block;
}

.french-plate-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  min-height: 64px;
  border: 3px solid #0f172a;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
  margin: 16px auto 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.plate-side-blue {
  flex: 0 0 44px;
  width: 44px;
  background-color: #003399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.plate-side-blue span { display: block; white-space: nowrap; }

.plate-text-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0f172a;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.plate-text-input::placeholder { color: #94a3b8; opacity: 1; }

.plate-text-input:focus {
  outline: none;
}

/* ==========================================================================
   4. Benefits Bar: 4 Icons
   ========================================================================== */
.benefits-bar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
  box-shadow: var(--shadow-sm);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 900px){
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.benefit-icon-container {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: rgba(22, 84, 201, 0.1);
  color: var(--color-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-text h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.benefit-text p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   5. Shared section layout (titles / spacing)
   ========================================================================== */

/* ==========================================================================
   5b. Promotional banner area (slider) — space reserved for the client's banners
   Desktop banner 1320x400 px (aspect 33:10) · mobile banner 750x500 px (3:2).
   BANNER GRID alternative: remove .promo-arrow / .promo-dots from the HTML and add
       .promo-track { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); overflow:visible; }
   ========================================================================== */

.promo-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-xl);
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-track:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; }

.promo-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 33 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

/* When a real banner image is dropped in */
.promo-slide img,
.promo-slide picture { width: 100%; height: 100%; display: block; }
.promo-slide img { object-fit: cover; }

/* Placeholder shown until the client's banners are supplied */

.promo-prev { left: 14px; }
.promo-next { right: 14px; }

.promo-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.promo-dots:empty { display: none; }
.promo-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: rgba(10, 42, 102, 0.25);
  transition: width var(--transition-normal), background-color var(--transition-normal);
}
.promo-dot:hover { background-color: rgba(10, 42, 102, 0.5); }
.promo-dot.active { width: 26px; background-color: var(--blue-900); }
.promo-dot:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }

@media (max-width: 1023px){
  .promo-slide { aspect-ratio: 16 / 6; }
}
@media (max-width: 767px){
  
  .promo-slide { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
  .promo-track { border-radius: var(--radius-lg); }
     /* keeps text clear of the arrows */
  
  
  
  .promo-prev { left: 8px; }
  .promo-next { right: 8px; }
  .promo-dots { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .promo-track { scroll-behavior: auto; }
}

/* ==========================================================================
   7. Featured Tyres: Product Card Carousel or Grid (Car & Moto)
   ========================================================================== */

.tab-filter-btn {
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-filter-btn.active {
  background-color: #ffb000;
  border-color: #ffb000;
  color: var(--color-on-accent);
}

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

@media (min-width: 1100px){
  
}

.product-item-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.product-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

/* EU Label Badges (Fuel, Wet Grip, Noise) */

.btn-add-to-cart {
  background-color: #ffb000;
  color: var(--color-on-accent);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-add-to-cart:hover,
.btn-add-to-cart:focus-visible,
.btn-add-to-cart:active {
  background-color: #ffb000;               /* same yellow in every state */
  box-shadow: 0 4px 12px rgba(255, 176, 0, 0.35);
}

/* ==========================================================================
   8. Fitting centres — "520 centres partenaires" + postcode search card
   (markup: <section class="fitting section" id="centres">). All rules are scoped
   under .fitting so the generic names (.btn, .input, .field, .icon) stay local.
   ========================================================================== */
.fitting {
  position: relative;
  background: var(--grad-blue);
  color: #ffffff;
}

.fitting.section { padding: 64px 0; }

.fitting__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.fitting .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Left column */
.fitting__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
}

.fitting__figure strong {
  font-size: clamp(3.25rem, 2rem + 4.5vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--yellow);
}

.fitting__figure span {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fitting h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.fitting__in > div:first-child > p {
  max-width: 52ch;
  margin-bottom: 20px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #d3def5;
}

.fitting__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 52ch;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fitting__note .icon { color: var(--yellow); margin-top: 2px; }

/* Right column: search card */
.fitting__card {
  background-color: #ffffff;
  color: var(--color-text-main);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-xl);
  min-width: 0;
}

.fitting__card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--blue-900);
  margin-bottom: 18px;
}

.fitting__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.fitting .field label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.fitting .input {
  width: 100%;
  padding: 12px 14px;
  background-color: var(--color-surface-subtle);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.fitting .input::placeholder { color: var(--color-text-light); }

.fitting .input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgba(22, 84, 201, 0.18);
}

.fitting .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fitting .btn--primary {
  background-color: #ffc233;
  color: var(--color-on-accent);
}

.fitting .btn--primary:hover,
.fitting .btn--primary:focus-visible {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--color-accent-glow);
}

.fitting .btn:focus-visible { outline: 2px solid var(--blue-900); outline-offset: 2px; }
.fitting .btn--block { width: 100%; }

.fitting__status {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #15803d;
  background-color: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.fitting__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.fitting__partner .icon { color: var(--blue-700); }

.fitting__partner a {
  color: var(--blue-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fitting__partner a:hover { color: var(--blue-900); }

/* Tablet: stack the two columns */
@media (max-width: 1023px){
  .fitting.section { padding: 52px 0; }
  .fitting__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fitting__in > div:first-child { max-width: 680px; }
  .fitting__card { width: 100%; }
}

/* Phones */
@media (max-width: 767px){
  .fitting.section { padding: 40px 0; }
  .fitting__in { gap: 26px; }
  .fitting__figure span { font-size: 1rem; }
  .fitting__in > div:first-child > p { font-size: 1rem; }
  .fitting__card { padding: 20px 16px; border-radius: var(--radius-lg); }
  .fitting__card h3 { font-size: 1.125rem; }
  .fitting .input { font-size: 1rem; }        /* ≥16px: no iOS zoom on focus */
  .fitting .btn { padding: 14px 16px; }
}

@media (hover: none){
  .fitting .btn--primary:hover { transform: none; box-shadow: none; }
}

/* ==========================================================================
   9. Brands: "Les plus grandes marques de pneus" — bordered logo cards
   ========================================================================== */
.brands-strip-section {
  background-color: #ffffff;
  padding: 64px 0 78px;
}

.brands-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #101828;
  margin: 0 0 30px;
}

/* 6 cards per row on desktop (6 + 5), 10px column gap / 12px row gap */
.brands-image-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 10px;
}

.brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 81px;
  padding: 10px 14px;
  background-color: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-cell:hover,
.brand-cell:focus-visible {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.brand-cell img {
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 42px;
  object-fit: contain;
}

.brand-cell--michelin img { max-width: 134px; }

.brand-wordmark {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #101828;
}

/* Tablet: 4 per row */
@media (max-width: 1023px){
  .brands-image-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Large phones: 3 per row */
@media (max-width: 767px){
  .brands-strip-section { padding: 44px 0 52px; }
  .brands-title { font-size: 1.5rem; margin-bottom: 22px; }
  .brands-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-cell { height: 72px; padding: 8px 10px; }
  .brand-cell img { max-width: 100%; max-height: 36px; }
  .brand-cell--michelin img { max-width: 100%; }
  .brand-wordmark { font-size: 1.05rem; }
}

/* Phones: 2 per row */
@media (max-width: 479px){
  .brands-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-cell { height: 64px; }
}

/* ==========================================================================
   10. Reassurance / Reviews
   (markup: <section class="section section--alt"> … .reviews > .score + .testimonials)
   ========================================================================== */
.section--alt {
  background-color: var(--color-surface-subtle);
  padding: 64px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section__head { text-align: center; margin-bottom: 36px; }

.section__title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-brand-dark);
}

.section--alt .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 20px;
}

.score__num {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-brand-dark);
}

.score__num small {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.stars { display: inline-flex; gap: 3px; margin: 12px 0 10px; color: var(--yellow); }
.section--alt .stars .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; }

.score p { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; }
.score em { font-style: italic; color: var(--color-text-light); }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  min-width: 0;
}

.quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-main);
}

.quote footer { display: flex; align-items: center; gap: 12px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #e8efff;
  color: var(--color-brand-deep);
  font-weight: 800;
  font-size: 1rem;
}

.quote cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-main);
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #15803d;
}
.section--alt .verified .icon { width: 14px; height: 14px; stroke-width: 2.5; }

/* Tablet: score banner on top, 3 testimonials below */
@media (max-width: 1023px){
  .section--alt { padding: 52px 0; }
  .reviews { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: testimonials stack */
@media (max-width: 767px){
  .section--alt { padding: 40px 0; }
  .section__head { margin-bottom: 26px; }
  .section__title { font-size: 1.5rem; }
  .testimonials { grid-template-columns: minmax(0, 1fr); }
  .quote { padding: 20px; }
}

/* ==========================================================================
   11. Short SEO Text Block: Collapsible
   (markup: .seo[data-open] > h2 + .seo__text(.seo__more) + button.seo__toggle)
   ========================================================================== */
.section:has(> .container > .seo) { background-color: #ffffff; }

.seo {
  max-width: 960px;
  padding: 48px 0 56px;
}

.seo h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--color-brand-dark);
  margin-bottom: 14px;
}

.seo__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.seo__text p + p,
.seo__more > p { margin-top: 12px; }

.seo__text h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-brand-dark);
  margin: 22px 0 0;
}

.seo__text h3 + p { margin-top: 6px; }

/* collapsed by default; opened by app.js through data-open="true" */
.seo[data-open="false"] .seo__more { display: none; }

.seo .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.seo .btn--sm {
  padding: 9px 16px;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
}

.seo .btn--outline {
  background-color: #ffffff;
  color: var(--color-brand-deep);
  border: 1.5px solid var(--color-brand-deep);
}

.seo .btn--outline:hover,
.seo .btn--outline:focus-visible {
  background-color: var(--color-brand-deep);
  color: #ffffff;
}

.seo .btn:focus-visible { outline: 2px solid var(--blue-900); outline-offset: 2px; }

.seo__toggle { margin-top: 18px; }

.seo .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-fast);
}

.seo[data-open="true"] .seo__toggle .icon { transform: rotate(180deg); }

@media (max-width: 767px){
  .seo { padding: 32px 0 40px; }
  .seo h2 { font-size: 1.25rem; }
  .seo__text { font-size: 0.875rem; }
}

/* ==========================================================================
   12. Footer: Structured
   ========================================================================== */

@media (min-width: 640px){
  
}

@media (min-width: 1024px){
  
}

/* Mobile Sticky Cart */

/* "Voir panier" has an inline white colour: force dark text on yellow */

@media (max-width: 767px){
  
  body {
    padding-bottom: 60px;
  }
}

/* Size Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background-color: #ffffff;
  border-radius: var(--radius-xl);
  max-width: 520px;
  width: 100%;
  padding: 24px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ==========================================================================
   RESPONSIVE LAYER
   Added on top of the existing design — no visual redesign, only fixes so the
   layout adapts cleanly from 320px phones up to large desktops.
   Breakpoints: 1199 / 1023 / 899 / 767 / 639 / 479 / 359
   ========================================================================== */

/* ---- Global safety nets ------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Let grid/flex children shrink instead of forcing the page wider than the screen */

@media (min-width: 768px){
  
}
@media (min-width: 1100px){
  
}
.product-item-card,
.quote,
.benefit-item,
.field-group,
.hero-intro,
.search-widget {
  min-width: 0;
}
.product-item-card { container-type: inline-size; }
.product-item-card > div:first-child { min-width: 0; }

/* Footer / long strings should never push the layout */

/* ---- Product card footer: price + button (adapts to the card's own width) -- */

@container (max-width: 250px) {
  .card-bottom-action {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-add-to-cart {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
  }
}
@container (max-width: 190px) {
  .card-header-meta { flex-wrap: wrap; gap: 2px 8px; }
  .product-tyre-image { height: 100px; }
  .product-tyre-image img { max-height: 95px; }
}

/* ---- ≤ 1199px : small desktops / landscape tablets ---------------------- */
@media (max-width: 1199px){
  .container { padding-left: 24px; padding-right: 24px; }

  /* Hero is side-by-side from 1024px; keep the 5 size selects readable */
  .select-wrap select {
    padding-left: 10px;
    padding-right: 22px;
    font-size: 0.875rem;
  }
  .select-arrow-icon { right: 8px; }
  .search-form-body { padding: 22px; }
}

/* ---- ≤ 1023px : tablets (hero stacks to one column) --------------------- */
@media (max-width: 1023px){
  .hero-section { padding: 36px 0 52px; }
  .hero-intro { text-align: center; max-width: 720px; margin: 0 auto; }
  .search-widget { width: 100%; max-width: 760px; margin: 0 auto; }
  
}

/* ---- ≤ 899px : search bar was hidden here, bring it back ----------------- */
@media (max-width: 899px){
  
  
  
  
  /* Header wraps to 3 rows here, so only the menu stays sticky (saves ~110px of screen) */
  
  
  .benefits-grid { gap: 18px 16px; }
}

/* ---- ≤ 767px : large phones / small tablets ----------------------------- */
@media (max-width: 767px){
  .container { padding-left: 16px; padding-right: 16px; }

  /* Top bar: stack and centre */
  
  
  
  

  /* Header: lighter, icon-only account, smaller logo */
  
  
  
  
  

  /* Hero */
  .hero-section { padding: 28px 0 40px; }
  .hero-intro h1 { font-size: 1.875rem; margin-bottom: 12px; }
  .hero-intro p { font-size: 1rem; }
  .hero-layout { gap: 26px; }

  /* Search widget */
  .search-widget { border-radius: var(--radius-lg); }
  .search-tab-btn { padding: 13px 14px; font-size: 0.875rem; flex: 0 0 auto; }
  .search-form-body, .plate-panel { padding: 18px 16px; }
  .select-wrap select { font-size: 1rem; padding-top: 11px; padding-bottom: 11px; } /* ≥16px stops iOS zoom-on-focus */
  .plate-text-input { font-size: 1rem; }
  .size-helper-banner { flex-wrap: wrap; gap: 6px 12px; }
  .btn-rechercher { width: 100%; padding: 14px 20px; }
  .brand-search-row .field-group { justify-content: flex-end; }

  /* Sections */
  
  
  
  .benefits-bar { padding: 20px 0; }
  
  
  

  /* Product filter pills */
  
  .tab-filter-btn { padding: 8px 16px; }
  
  .product-item-card { padding: 12px; }

  /* Fitting centres */
  
  
  

  /* Brands / reviews / footer */
  
  
  
  

  /* Sticky mobile cart: respect iPhone home-indicator area */
  
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* Modal */
  .modal-overlay { padding: 16px; }
  .modal-box { max-height: 90vh; overflow-y: auto; padding: 20px; }
}

/* ---- ≤ 639px : phones ---------------------------------------------------- */
@media (max-width: 639px){
     /* drop "· Du lundi au vendredi" (still in footer) */

  .season-btn-group { flex-wrap: wrap; }
  .season-toggle-btn { flex: 1 1 calc(50% - 6px); }
  .benefit-icon-container { width: 42px; height: 42px; }
  .benefit-text h3 { font-size: 0.875rem; }
  .benefit-text p { font-size: 0.75rem; }
}

/* ---- ≤ 479px : small phones --------------------------------------------- */
@media (max-width: 479px){
  .hero-intro h1 { font-size: 1.625rem; }
  
  
  .cart-amount { display: none; }                    /* amount is shown in the sticky bottom cart bar */
  

  .dimensions-row { gap: 10px; }
  .dimensions-row .field-group:last-child { grid-column: 1 / -1; } /* 5th select spans the row, no orphan */
  .checkbox-group { flex-wrap: wrap; gap: 8px 16px; }

  .french-plate-wrapper { border-width: 2px; }
  .plate-side-blue { flex-basis: 32px; width: 32px; }
  .plate-text-input { font-size: 1.25rem; letter-spacing: 1px; padding: 6px 4px; min-width: 0; }
  .plate-panel .btn-rechercher { width: 100%; }

  
  
  
  
}

/* ---- ≤ 359px : very small phones ---------------------------------------- */
@media (max-width: 359px){
  .container { padding-left: 12px; padding-right: 12px; }
  .hero-intro h1 { font-size: 1.5rem; }
  
  .product-item-card { padding: 10px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .tab-filter-btn { padding: 7px 12px; font-size: 0.8125rem; }
}

/* ---- Touch devices: no sticky hover "lift", comfortable tap targets ------ */
@media (hover: none){
  .product-item-card:hover,
.btn-rechercher:hover { transform: none; }
  
  .btn-add-to-cart, .season-toggle-btn, .tab-filter-btn { min-height: 40px; }
}

/* ---- Respect reduced-motion preference ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   FOOTER SOCIAL ICONS — theme colour by default, brand colours on hover
   ========================================================================== */

   /* keeps the black X badge visible on the dark footer */

@media (max-width: 1023px){
  
}
@media (max-width: 599px){
  
  
  
}
@media (hover: none){
  
          /* no sticky hover colours on touch screens */
  
}
/* Banner images: keep the focal area visible when cropped on small screens */
@media (max-width: 767px){
  .promo-slide img { object-position: 65% center; }
}

/* ==========================================================================
   Promotional banner slider — show every image in full (no cropping)
   The image is fitted inside the slide (object-fit: contain). Any spare space
   is filled with a soft blurred copy of the same image, so banners of any
   shape look clean on desktop, tablet and mobile.
   ========================================================================== */
.promo-slide {
  background-color: #0b1530;
  isolation: isolate;
}
.promo-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--promo-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.1) brightness(0.9);
  transform: scale(1.2);            /* hides the blurred edges */
  pointer-events: none;
}
.promo-slide img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 767px){
  .promo-slide img { object-position: center; }   /* overrides the old crop focus */
}

/* ==========================================================================
   Featured tyres ("Pneus en vedette") — scoped to this section only
   ========================================================================== */
section[aria-labelledby="prod-title"] { padding: 56px 0; background: #fff; }
section[aria-labelledby="prod-title"] .icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
section[aria-labelledby="prod-title"] .section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; text-align: left; margin-bottom: 20px; }
section[aria-labelledby="prod-title"] .section__title { margin: 0; }
section[aria-labelledby="prod-title"] .link-more { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; color: var(--blue-700); text-decoration: none; }
section[aria-labelledby="prod-title"] .link-more:hover { text-decoration: underline; }
section[aria-labelledby="prod-title"] .subhead { display: flex; align-items: center; gap: 8px; margin: 26px 0 14px; font-size: 1rem; font-weight: 800; color: var(--color-text-main, #0f172a); }
section[aria-labelledby="prod-title"] .subhead .icon { color: var(--blue-700); width: 18px; height: 18px; }
section[aria-labelledby="prod-title"] .products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
section[aria-labelledby="prod-title"] .card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e5e9f0; border-radius: 10px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
section[aria-labelledby="prod-title"] .card:hover { box-shadow: 0 8px 22px rgba(15,23,42,.10); transform: translateY(-2px); }
section[aria-labelledby="prod-title"] .card__media { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
section[aria-labelledby="prod-title"] .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
section[aria-labelledby="prod-title"] .card__media img.img-bottom { object-position: center bottom; }
section[aria-labelledby="prod-title"] .card__season { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); font-size: .68rem; font-weight: 700; color: #0f172a; line-height: 1; }
section[aria-labelledby="prod-title"] .card__season .icon { width: 12px; height: 12px; }
section[aria-labelledby="prod-title"] .card__season--ete .icon { color: #f59e0b; }
section[aria-labelledby="prod-title"] .card__season--hiver .icon { color: #2563eb; }
section[aria-labelledby="prod-title"] .card__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1; }
section[aria-labelledby="prod-title"] .card__brand { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
section[aria-labelledby="prod-title"] .card__title { margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.25; }
section[aria-labelledby="prod-title"] .card__title a { color: #0f172a; text-decoration: none; }
section[aria-labelledby="prod-title"] .card__title a:hover { text-decoration: underline; }
section[aria-labelledby="prod-title"] .card__size { font-size: .8rem; font-weight: 500; color: #1e293b; }
section[aria-labelledby="prod-title"] .card__note { font-size: .72rem; color: #64748b; }
section[aria-labelledby="prod-title"] .labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
section[aria-labelledby="prod-title"] .label-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid #dfe5ee; border-radius: 6px; background: #fff; font-size: .7rem; font-weight: 800; color: #0f172a; line-height: 1.4; }
section[aria-labelledby="prod-title"] .label-badge .icon { width: 13px; height: 13px; }
section[aria-labelledby="prod-title"] .label-badge--fuel .icon { color: #16a34a; }
section[aria-labelledby="prod-title"] .label-badge--wet .icon { color: #2563eb; }
section[aria-labelledby="prod-title"] .label-badge--noise .icon { color: #dc2626; }
section[aria-labelledby="prod-title"] .card__foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
section[aria-labelledby="prod-title"] .price { font-size: 1.15rem; font-weight: 800; color: #0f172a; white-space: nowrap; }
section[aria-labelledby="prod-title"] .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 9px 12px; }
section[aria-labelledby="prod-title"] .btn--primary { background: var(--yellow); color: #0f172a; }
section[aria-labelledby="prod-title"] .btn--primary:hover, section[aria-labelledby="prod-title"] .btn--primary:focus-visible { background: var(--yellow-hover); }
section[aria-labelledby="prod-title"] .btn--block { width: 100%; }

@media (max-width: 1100px){ section[aria-labelledby="prod-title"] .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 720px){
  section[aria-labelledby="prod-title"] { padding: 40px 0; }
  section[aria-labelledby="prod-title"] .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  section[aria-labelledby="prod-title"] .section__title { font-size: 1.5rem; }
}
@media (max-width: 480px){
  section[aria-labelledby="prod-title"] .products { gap: 10px; }
  section[aria-labelledby="prod-title"] .section__head { flex-direction: column; align-items: flex-start; }
  section[aria-labelledby="prod-title"] .card__season { top: 6px; left: 6px; font-size: .64rem; padding: 2px 7px; }
  section[aria-labelledby="prod-title"] .card__body { padding: 10px 10px 12px; }
  section[aria-labelledby="prod-title"] .card__title { font-size: .86rem; }
  section[aria-labelledby="prod-title"] .labels { gap: 4px; }
  section[aria-labelledby="prod-title"] .label-badge { padding: 2px 5px; font-size: .66rem; }
  section[aria-labelledby="prod-title"] .price { font-size: 1.05rem; }
  section[aria-labelledby="prod-title"] .btn { padding: 8px 6px; font-size: .74rem; }
}
@media (max-width: 330px){ section[aria-labelledby="prod-title"] .products { grid-template-columns: 1fr; } }

/* First row (Pneus auto): same image placement on every card.
   The 1:1 frame keeps its square; the photo is inset 5.3% from each side, anchored to the frame's bottom edge,
   fills that width (height follows the photo's own ratio, capped at 77% of the frame) and is never stretched.
   Everything is a percentage of the frame, so it scales on desktop, tablet and mobile. */
section[aria-labelledby="prod-title"] h3.subhead:first-of-type + .products > .card .card__media {
  aspect-ratio: 1 / 1;
  background: #fff;
}
section[aria-labelledby="prod-title"] h3.subhead:first-of-type + .products > .card .card__media img,
section[aria-labelledby="prod-title"] h3.subhead:first-of-type + .products > .card .card__media img.img-bottom {
  position: absolute;
  inset: auto;
  left: 5.3%;
  bottom: 0;
  width: 89.4%;
  height: auto;
  max-height: 77%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  display: block;
}

/* Second row (Pneus moto): same frame and bottom anchoring as the auto row.
   Each photo is shown whole (never stretched or cropped) at up to 77% of the square frame's height,
   centered horizontally and sitting on the frame's bottom edge. Percentages keep it responsive. */
section[aria-labelledby="prod-title"] .products + h3.subhead + .products > .card .card__media {
  aspect-ratio: 1 / 1;
  background: #fff;
}
section[aria-labelledby="prod-title"] .products + h3.subhead + .products > .card .card__media img,
section[aria-labelledby="prod-title"] .products + h3.subhead + .products > .card .card__media img.img-bottom {
  position: absolute;
  inset: auto 0 0 0;
  width: auto;
  height: 77%;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  display: block;
}
/* ==========================================================================
   Tyre search results (shop page)
   ========================================================================== */
.bizpro-results { padding-top: 40px; padding-bottom: 60px; }
.results-head { margin-bottom: 24px; }
.results-title { margin: 0 0 12px; font-size: 1.75rem; color: var(--color-brand-deep, #0b2a6b); }
.results-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.results-chip { background: #eef2ff; color: #1e3a8a; border-radius: 999px; padding: 5px 12px; font-size: 0.875rem; }
.results-reset { font-size: 0.875rem; font-weight: 700; margin-left: 6px; }
.results-count { margin: 0; color: var(--color-text-muted, #64748b); font-size: 0.9375rem; }
.products--results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.results-empty { text-align: center; padding: 48px 16px; background: #f8fafc; border: 1px dashed var(--color-border, #e2e8f0); border-radius: 12px; }
.results-empty p { margin: 0 0 8px; }
.results-empty .btn { display: inline-block; margin-top: 12px; }
.bizpro-results .navigation.pagination { margin-top: 28px; text-align: center; }
.bizpro-results .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 2px; border-radius: 8px; border: 1px solid var(--color-border, #e2e8f0); }
.bizpro-results .page-numbers.current { background: var(--color-primary-blue, #0a5cff); color: #fff; border-color: transparent; }

/* ==========================================================================
   Search results page: product cards need the same look as the homepage
   (the homepage rules above are scoped to the "Pneus en vedette" section)
   ========================================================================== */
.bizpro-results .icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bizpro-results .card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e5e9f0; border-radius: 10px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.bizpro-results .card:hover { box-shadow: 0 8px 22px rgba(15,23,42,.10); transform: translateY(-2px); }
.bizpro-results .card__media { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.bizpro-results .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bizpro-results .card__media img.img-bottom { object-position: center bottom; }
.bizpro-results .card__season { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); font-size: .68rem; font-weight: 700; color: #0f172a; line-height: 1; }
.bizpro-results .card__season .icon { width: 12px; height: 12px; }
.bizpro-results .card__season--ete .icon { color: #f59e0b; }
.bizpro-results .card__season--hiver .icon { color: #2563eb; }
.bizpro-results .card__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1; }
.bizpro-results .card__brand { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
.bizpro-results .card__title { margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.25; }
.bizpro-results .card__title a { color: #0f172a; text-decoration: none; }
.bizpro-results .card__title a:hover { text-decoration: underline; }
.bizpro-results .card__size { font-size: .8rem; font-weight: 500; color: #1e293b; }
.bizpro-results .card__note { font-size: .72rem; color: #64748b; }
.bizpro-results .labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.bizpro-results .label-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid #dfe5ee; border-radius: 6px; background: #fff; font-size: .7rem; font-weight: 800; color: #0f172a; line-height: 1.4; }
.bizpro-results .label-badge .icon { width: 13px; height: 13px; }
.bizpro-results .label-badge--fuel .icon { color: #16a34a; }
.bizpro-results .label-badge--wet .icon { color: #2563eb; }
.bizpro-results .label-badge--noise .icon { color: #dc2626; }
.bizpro-results .card__foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bizpro-results .price { font-size: 1.15rem; font-weight: 800; color: #0f172a; white-space: nowrap; }
.bizpro-results .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 9px 12px; }
.bizpro-results .btn--primary { background: var(--yellow); color: #0f172a; }
.bizpro-results .btn--primary:hover, .bizpro-results .btn--primary:focus-visible { background: var(--yellow-hover); }
.bizpro-results .btn--block { width: 100%; }
.bizpro-results .card__media a { display: block; position: absolute; inset: 0; }
.bizpro-results .card__media img { object-fit: contain; padding: 8px; }
.bizpro-results .results-chip strong { margin-right: 4px; }
.bizpro-results .card__season--4saisons .icon { color: #0f766e; }
.bizpro-results .btn { text-decoration: none; }
@media (max-width: 560px){
  .products--results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bizpro-results .card__body { padding: 10px 10px 12px; }
  .bizpro-results .btn { padding: 8px 6px; font-size: .74rem; }
}

/* ==========================================================================
   Single product page: Related products / Up-sells / default WooCommerce loops
   Matches the card look used on the homepage and search results.
   !important is used on purpose: WooCommerce's own stylesheet uses more specific
   selectors (".woocommerce ul.products li.product ...") and would otherwise win.
   ========================================================================== */
body .related.products,
body .upsells.products,
body .up-sells.products { margin-top: 48px; clear: both; }

body .related.products > h2,
body .upsells.products > h2,
body .up-sells.products > h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-brand-deep, #0b2a6b);
}

body .woocommerce ul.products,
body ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
body ul.products::before, body ul.products::after { display: none !important; content: none !important; }

body .woocommerce ul.products li.product,
body ul.products li.product {
  display: flex !important;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  min-width: 0;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
body ul.products li.product:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .10); transform: translateY(-2px); }

/* The link (image + title + price) grows, so every button sits on the same bottom line */
body ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

body .woocommerce ul.products li.product img,
body ul.products li.product img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  margin: 0 !important;
  background: #fff;
  box-shadow: none;
}

body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body ul.products li.product .woocommerce-loop-product__title {
  margin: 0 !important;
  padding: 10px 14px 0 !important;
  font-size: .95rem !important;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a !important;
}

body .woocommerce ul.products li.product .price,
body ul.products li.product .price {
  display: block;
  margin: 6px 0 0 !important;
  padding: 0 14px;
  font-size: 1.1rem !important;
  font-weight: 800;
  color: #0f172a !important;
}
body ul.products li.product .price .amount { color: inherit !important; }
body ul.products li.product .price ins { text-decoration: none; background: none; }
body ul.products li.product .price del { color: #94a3b8; font-weight: 500; font-size: .85em; }

body .woocommerce ul.products li.product .button,
body ul.products li.product .button,
body ul.products li.product a.add_to_cart_button {
  display: block !important;
  margin: auto 14px 0 !important;   /* auto top margin pins the button to the card bottom */
  padding: 10px 12px !important;
  text-align: center;
  font-size: .85rem !important;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a !important;
  background: var(--yellow, #ffb30f) !important;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s;
}
body ul.products li.product .button:hover,
body ul.products li.product a.add_to_cart_button:hover { background: var(--yellow-hover, #f5a300) !important; color: #0f172a !important; }
body ul.products li.product a.added_to_cart { display: block; margin: 8px 14px 0; text-align: center; font-size: .8rem; font-weight: 700; }

@media (max-width: 1023px) { body ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { body ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 330px)  { body ul.products { grid-template-columns: 1fr; } }

/* Beat WooCommerce's column rules (".woocommerce ul.products[class*=columns-] li.product { width: 22.05% }")
   and its clearfix pseudo-elements, which otherwise squeeze the cards and leave an empty first grid cell. */
body.woocommerce ul.products[class*="columns-"],
body.woocommerce-page ul.products[class*="columns-"],
body ul.products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-items: stretch;
  align-items: stretch;
}
body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product,
body ul.products[class*="columns-"] li.product {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  grid-column: auto !important;
}
body.woocommerce ul.products::before, body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before, body.woocommerce-page ul.products::after,
body ul.products[class*="columns-"]::before, body ul.products[class*="columns-"]::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 1023px) {
  body.woocommerce ul.products[class*="columns-"], body.woocommerce-page ul.products[class*="columns-"], body ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  body.woocommerce ul.products[class*="columns-"], body.woocommerce-page ul.products[class*="columns-"], body ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
}
@media (max-width: 330px) {
  body.woocommerce ul.products[class*="columns-"], body.woocommerce-page ul.products[class*="columns-"], body ul.products[class*="columns-"] { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Single product page (single-product.php), tyre layout.
   Same outer width and side padding as the header; flat panels, thin borders.
   Desktop: gallery left, details right, specs + description below.
   Tablet/mobile: single column.
   ========================================================================== */
.bp-product-page { --pp-line: #dde2ea; --pp-ink: #14213d; --pp-muted: #66748a; padding: 20px 0 72px; background: #f4f6f9; color: var(--pp-ink); }
/* header-matching container (beats the narrower generic .container in style.css) */
.bp-product-page > .container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 20px; box-sizing: border-box; }
@media (max-width: 1199px) { .bp-product-page > .container { padding-inline: 24px; } }
@media (max-width: 767px)  { .bp-product-page > .container { padding-inline: 16px; } }
@media (max-width: 359px)  { .bp-product-page > .container { padding-inline: 12px; } }
.bp-product-page .icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bp-breadcrumb { margin: 0 0 16px; font-size: .84rem; color: var(--pp-muted); }
.bp-breadcrumb a { color: var(--pp-muted); text-decoration: none; }
.bp-breadcrumb a:hover { color: var(--color-primary-blue, #0a5cff); text-decoration: underline; }

.bp-product > * { min-width: 0; }
.bp-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.bp-product__gallery,
.bp-card { background: #fff; border: 1px solid var(--pp-line); border-radius: 6px; }

/* Gallery */
.bp-product__gallery { position: static; padding: 16px; }
.bp-product__gallery .woocommerce-product-gallery { margin: 0; width: 100% !important; float: none !important; opacity: 1 !important; }
.bp-product__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.bp-product__gallery .woocommerce-product-gallery__image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; max-height: calc(100vh - 360px); min-height: 320px; }
.bp-product__gallery .woocommerce-product-gallery__image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bp-product__gallery .woocommerce-product-gallery__image img,
.bp-product__gallery img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bp-product__gallery .woocommerce-product-gallery__image { text-align: center; box-sizing: border-box; }
/* Single image (no slider): fill the box. With several images WooCommerce's slider sets widths itself, so don't force them. */
.bp-product__gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child { width: 100%; }
.bp-product__gallery .flex-viewport { max-width: 100%; overflow: hidden; }
.bp-product__gallery .woocommerce-product-gallery__image a { margin: 0 auto; }
.bp-product__gallery .woocommerce-product-gallery__image img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: 100%; max-height: calc(100vh - 360px); object-fit: contain; object-position: center center; }
.bp-product__gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 72px)); gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #edf0f5; list-style: none; }
.bp-product__gallery .flex-control-thumbs li { width: auto !important; float: none !important; margin: 0 !important; }
.bp-product__gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; border: 1px solid var(--pp-line); border-radius: 4px; opacity: .6; cursor: pointer; transition: opacity .15s, border-color .15s; }
.bp-product__gallery .flex-control-thumbs img.flex-active,
.bp-product__gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--pp-ink); }
.bp-product__gallery .woocommerce-product-gallery { position: relative; }
.bp-product__gallery .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; left: auto; z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid var(--pp-line); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3Cpath d='M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px 20px no-repeat; box-shadow: 0 2px 6px rgba(11,27,63,.12); font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; cursor: zoom-in; transition: box-shadow .15s, border-color .15s; }
.bp-product__gallery .woocommerce-product-gallery__trigger:hover { border-color: var(--pp-ink); box-shadow: 0 3px 10px rgba(11,27,63,.2); }
.bp-product__gallery .woocommerce-product-gallery__trigger::before,
.bp-product__gallery .woocommerce-product-gallery__trigger::after { content: none; display: none; }
.bp-product__gallery .woocommerce-product-gallery__trigger span { display: none; }
.bp-sale { position: absolute; top: 14px; left: 14px; z-index: 5; padding: 3px 9px; border-radius: 3px; background: #c62828; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }

/* Summary */
.bp-product__summary { min-width: 0; }
.bp-brand { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); }
.bp-title { margin: 6px 0 12px; font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--pp-ink); }

/* size / season / type as a plain line with dividers */
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--pp-line); font-size: .92rem; color: #3b4a63; }
.bp-meta > * { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 0; background: none; font-weight: 600; font-size: inherit; }
.bp-meta > *:first-child { padding-left: 0; }
.bp-meta > * + * { border-left: 1px solid var(--pp-line); }
.bp-size { font-family: inherit; font-weight: 800 !important; color: var(--pp-ink); }
.bp-season--ete .icon { color: #e08a00; }
.bp-season--hiver .icon { color: #2563eb; }
.bp-season--4saisons .icon { color: #0f766e; }

/* EU label values: one bordered strip, three cells */
.bp-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; background: #fff; border: 1px solid var(--pp-line); border-radius: 6px; }
.bp-label { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 10px; text-align: left; }
.bp-label + .bp-label { border-left: 1px solid var(--pp-line); }
.bp-label .icon { width: 24px; height: 24px; flex: none; }
.bp-label__txt { display: block; min-width: 0; }
.bp-label strong { display: block; font-size: 1.05rem; line-height: 1.2; color: var(--pp-ink); }
.bp-label small { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.2; color: var(--pp-muted); }
.bp-label--fuel .icon { color: #16a34a; }
.bp-label--wet .icon { color: #2563eb; }
.bp-label--noise .icon { color: #dc2626; }

/* Buy box */
.bp-buybox { padding: 20px; background: #fff; border: 1px solid var(--pp-line); border-radius: 6px; scroll-margin-top: 100px; }
.bp-buybox__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bp-price { font-size: clamp(1.8rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: var(--pp-ink); line-height: 1.05; }
.bp-price del { color: #94a3b8; font-size: .55em; font-weight: 500; margin-right: 8px; }
.bp-price ins { text-decoration: none; background: none; }
.bp-price-note { display: block; margin-top: 4px; font-size: .8rem; color: var(--pp-muted); }
.bp-stock { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0; font-size: .88rem; font-weight: 700; background: none; }
.bp-stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.bp-stock.is-in { color: #15803d; }
.bp-stock.is-out { color: #b91c1c; }
/* WooCommerce prints its own English "25 in stock" line inside the form */
.bp-cart .stock, .bp-cart p.stock { display: none !important; }

.bp-cart form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
.bp-cart .quantity { margin: 0; }
.bp-cart .quantity input.qty { width: 80px; height: 52px; padding: 0 8px; text-align: center; font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--pp-ink); border: 1px solid #c5ccd8; border-radius: 4px; background: #fff; -moz-appearance: textfield; appearance: textfield; }
.bp-cart .quantity input.qty::-webkit-outer-spin-button,
.bp-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-cart .quantity input.qty:focus { outline: 2px solid var(--color-primary-blue, #0a5cff); outline-offset: 0; border-color: var(--color-primary-blue, #0a5cff); }
/* beat WooCommerce's purple ".button.alt" */
.bp-product-page .bp-cart form.cart .single_add_to_cart_button,
.bp-product-page .bp-cart form.cart .single_add_to_cart_button.button.alt {
  flex: 1 1 200px; min-height: 52px; padding: 0 22px; border: 0 !important; border-radius: 4px !important; cursor: pointer;
  background: var(--yellow, #ffb000) !important; color: #14213d !important; font: inherit; font-size: 1rem; font-weight: 800; text-transform: none; letter-spacing: 0; transition: background .15s;
}
.bp-product-page .bp-cart form.cart .single_add_to_cart_button:hover { background: var(--yellow-hover, #f5a300) !important; }
.bp-product-page .bp-cart form.cart .single_add_to_cart_button.disabled,
.bp-product-page .bp-cart form.cart .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
.bp-cart table.variations { width: 100%; margin-bottom: 12px; }
.bp-cart table.variations select { width: 100%; padding: 11px; border: 1px solid #c5ccd8; border-radius: 4px; }
.bp-sku { margin: 12px 0 0; font-size: .78rem; color: #8a96a8; }

.bp-short { margin-top: 18px; color: #3b4a63; font-size: .95rem; line-height: 1.65; }
.bp-short p { margin: 0 0 8px; }

/* Trust points: plain list */
.bp-trust { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--pp-line); }
.bp-trust li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--pp-line); font-size: .86rem; line-height: 1.45; color: var(--pp-muted); }
.bp-trust li b { color: var(--pp-ink); margin-right: 6px; }
.bp-trust li span { min-width: 0; }
.bp-trust .icon { margin-top: 3px; color: #16a34a; stroke-width: 3; }

/* Specs + description */
.bp-product__details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }

/* Tabs (specs / description). Without JS all panels are shown stacked. */
.bp-tabs__nav { display: none; }
.bp-tabs.is-enhanced { gap: 0; }
.bp-tabs.is-enhanced .bp-tabs__nav { display: flex; gap: 4px; margin: 0; padding: 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: #fff; border: 1px solid var(--pp-line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.bp-tabs.is-enhanced .bp-tabs__nav::-webkit-scrollbar { display: none; }
.bp-tabs__tab { flex: 0 0 auto; position: relative; margin: 0; padding: 16px 22px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 1rem; font-weight: 700; color: var(--pp-muted); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.bp-tabs__tab:hover { color: var(--pp-ink); }
.bp-tabs__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }
.bp-tabs__tab.is-active { color: var(--pp-ink); border-bottom-color: #ffb100; }
.bp-tabs.is-enhanced .bp-tabs__panel { display: none; border-top-left-radius: 0; border-top-right-radius: 0; }
.bp-tabs.is-enhanced .bp-tabs__panel.is-active { display: block; }
.bp-tabs.is-enhanced .bp-tabs__panel > h2 { display: none; }
.bp-card { padding: 24px 28px; min-width: 0; overflow-wrap: anywhere; }
.bp-card h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pp-line); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--pp-ink); }
.bp-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bp-specs th, .bp-specs td { padding: 10px 12px; text-align: left; vertical-align: top; border: 0; }
.bp-specs tr:nth-child(odd) { background: #f6f8fb; }
.bp-specs th { width: 46%; font-weight: 600; color: var(--pp-muted); }
.bp-specs td { font-weight: 700; color: var(--pp-ink); }
.bp-desc { color: #3b4a63; font-size: .95rem; line-height: 1.75; }
.bp-desc p:first-child { margin-top: 0; }

.bp-product-page .woocommerce-message, .bp-product-page .woocommerce-error, .bp-product-page .woocommerce-info {
  list-style: none; margin: 0 0 16px; padding: 12px 16px; border-radius: 4px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .92rem;
}
.bp-product-page .woocommerce-message .button { float: right; margin-left: 12px; color: var(--pp-ink); font-weight: 800; }

/* Related products */
.bp-product-page .related.products { margin-top: 48px; }

/* Tablet */
@media (max-width: 1000px) {
  .bp-product { gap: 24px; }
  .bp-card { padding: 20px; }
}
/* Mobile: single column */
@media (max-width: 800px) {
  .bp-product { grid-template-columns: 1fr; gap: 16px; }
  .bp-product__gallery { position: static; padding: 12px; }
  .bp-tabs__tab { padding: 14px 16px; font-size: .95rem; }
  .bp-product-page { padding-bottom: 48px; }
}
@media (max-width: 480px) {
  .bp-meta > * { padding: 0 10px; }
  .bp-label { flex-direction: column; gap: 4px; padding: 10px 4px; text-align: center; }
  .bp-buybox { padding: 16px; }
  .bp-card { padding: 18px 14px; }
  .bp-tabs.is-enhanced .bp-tabs__nav { padding: 0 4px; }
  .bp-tabs__tab { flex: 1 1 0; padding: 14px 8px; text-align: center; }
  .bp-cart .quantity input.qty { width: 72px; }
  .bp-product-page .bp-cart form.cart .single_add_to_cart_button { flex-basis: 100%; }
  .bp-specs th, .bp-specs td { padding: 9px 10px; }
  .bp-specs th { width: 50%; }
}

/* Search form: tyre fields vs rim (Jantes) fields */
.search-group[hidden] { display: none !important; }

/* Search tabs: 7 tabs no longer fit one row. Never squeeze or clip a label:
   wrap onto a second row on desktop (each tab keeps its full text), scroll on phones. */
.search-tabs-bar { flex-wrap: wrap; overflow: visible; }
.search-tab-btn {
  flex: 1 1 auto;
  flex-shrink: 0;
  min-width: max-content;
  padding: 14px 16px;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 639px) {
  .search-tabs-bar { flex-wrap: nowrap; overflow-x: auto; }
  .search-tab-btn { flex: 0 0 auto; }
}


/* Hero "Charge" is a text field: same look as the selects */
.select-wrap .field-text-input {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-surface-subtle);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-main);
  transition: all var(--transition-fast);
}
.select-wrap .field-text-input::placeholder { color: var(--color-text-main); font-weight: 600; opacity: 1; }
.select-wrap .field-text-input:focus {
  outline: none;
  border-color: var(--color-primary-blue);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 84, 201, 0.18);
}
@media (max-width: 1199px) { .select-wrap .field-text-input { padding-left: 10px; font-size: 0.875rem; } }
@media (max-width: 639px) { .select-wrap .field-text-input { font-size: 1rem; padding-top: 11px; padding-bottom: 11px; } }