/* ===================================================================
   RaceDiscs v2 – CLEAN MODERN CSS
   Text-only nav • No pills • Modern rectangular buttons
   =================================================================== */

/* -------------------------
   1. ROOT DESIGN TOKENS
   ------------------------- */

:root{
  --rd-bg-page: #f3f4f6;
  --rd-bg-surface: #ffffff;
  --rd-bg-soft: #f9fafb;

  --rd-text-main: #0f172a;
  --rd-text-muted: #6b7280;
  --rd-text-inverse: #ffffff;

  --rd-accent: #f97316;
  --rd-accent-hover: #ea580c;
  --rd-accent-soft: #ffedd5;

  --rd-border-subtle: rgba(0,0,0,0.12);
  --rd-border-strong: rgba(0,0,0,0.22);

  --rd-radius-sm: 6px;
  --rd-radius-md: 6px;
  --rd-radius-lg: 12px;

  --rd-width-shell: 1200px;
}


/* -------------------------
   2. RESET + BASE
   ------------------------- */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--rd-bg-page);
  color: var(--rd-text-main);
}

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


/* -------------------------
   3. GLOBAL LAYOUT
   ------------------------- */

.rd-shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.rd-main{
  flex:1 0 auto;
  padding:24px 16px 40px;
}

.rd-container{
  max-width:var(--rd-width-shell);
  margin:0 auto;
}




/* -------------------------
   4. HEADER (TEXT-ONLY NAV)
   ------------------------- */

.site-header{
  background: var(--rd-bg-surface);
  border-bottom:1px solid var(--rd-border-subtle);
  position:sticky;
  top:0;
  z-index:1000;
}

.site-header__inner{
  max-width:var(--rd-width-shell);
  margin:0 auto;
  padding:12px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.site-header__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.site-header__logo{
  height:60px;
}

.site-header__title{
  font-size:1rem;
  font-weight:600;
  color:var(--rd-text-muted);
  letter-spacing:0.04em;
}

/* Header right group (nav + cart) */
.site-header__right{
  display:flex;
  align-items:center;
  gap:24px;
}

/* Cart link */
.site-header__cart{
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  color:var(--rd-text-main);
  white-space:nowrap;
}

.site-header__cart:hover{
  text-decoration:underline;
}

.site-header__cart {
  position: relative;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.rd-cart-badge {
  display: none;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
}

.site-header__account {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rd-text-main);
  white-space: nowrap;
}

.site-header__account:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------
   Global Free Shipping Bar
------------------------------------------------------- */
.free-ship-bar{
  width:100%;
  text-align:center;

  padding:6px 0;
  font-size:0.8rem;               /* clean, compact */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;

  background:#f7f7f7;             /* very soft grey */
  color:#444;                     /* subtle, not shouty */

  border-bottom:1px solid #e5e7eb; /* barely-there separator */
}

/* NAVIGATION — Apple-style text-only */

.site-nav__list{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

.site-nav__link{
  color: var(--rd-text-main);
  text-decoration:none;
  font-size:0.95rem;
  padding:4px 0;
}

.site-nav__link:hover{
  text-decoration:underline;
}

/* Primary CTA in nav (Find My Bike) */
.site-nav__link--primary{
  color: var(--rd-accent-hover);
  font-weight:600;
}


/* -------------------------
   5. HERO BLOCK
   ------------------------- */

.hero{
  margin-top:24px;
}

.hero__inner{
  background: var(--rd-bg-surface);
  border-radius: var(--rd-radius-lg);
  padding:32px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

.hero__eyebrow{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--rd-accent-hover);
}

.hero__title{
  font-size:2.2rem;
  margin:10px 0;
  font-weight:700;
}

.hero__subtitle{
  font-size:1rem;
  color:var(--rd-text-muted);
  max-width:45rem;
}

.hero__actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

/* ------------------------------------------------------------------
   Find My Bike – hero
   ------------------------------------------------------------------ */

.hero--fmb .hero__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.fmb-hero-logo{
  max-width:220px;
  height:auto;
  display:block;
}

/* ------------------------------------------------------------------
   Find My Bike – form panel
   ------------------------------------------------------------------ */

.fmb-panel{
  padding:24px 24px 28px;
}

@media (min-width: 768px){
  .fmb-panel{
    padding:28px 32px 32px;
  }
}

.fmb-panel__header{
  margin-bottom:20px;
}

.fmb-title{
  font-size:1.35rem;
  font-weight:700;
  margin:0 0 4px;
}

.fmb-subtitle{
  margin:0;
  font-size:0.95rem;
  color:var(--rd-text-muted);
  max-width:46rem;
}

.fmb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px 24px;
  margin-bottom:16px;
}

.fmb-field{
  display:flex;
  flex-direction:column;
}

.fmb-field label{
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:4px;
}

.fmb-field select,
.fmb-field input{
  width:100%;
  padding:8px 10px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-strong);
  font-size:0.95rem;
  font-family:inherit;
  background-color:var(--rd-bg-base);
}

.fmb-field select:focus,
.fmb-field input:focus{
  outline:none;
  border-color:var(--rd-accent-hover);
  box-shadow:0 0 0 1px var(--rd-accent-soft);
}

.fmb-inline-note{
  display:block;
  margin-top:4px;
  font-size:0.8rem;
  color:var(--rd-text-muted);
}

.fmb-field--search{
  margin-top:12px;
}

/* ------------------------------------------------------------------
   Find My Bike – actions + origin row
   ------------------------------------------------------------------ */

.fmb-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.fmb-actions__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Unified pill-style buttons for Find My Bike */
.fmb-button{
  padding:8px 16px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:#f3f4f6;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--rd-text-muted);
  cursor:pointer;
}

/* Primary: same look as an active fitment-toggle pill */
.fmb-button--primary{
  background:var(--rd-accent-soft);
  border-color:var(--rd-accent-hover);
  color:var(--rd-accent-hover);
}

/* Secondary: same base pill, just neutral */
.fmb-button--secondary{
  background:#f3f4f6;
  border-color:var(--rd-border-subtle);
  color:var(--rd-text-muted);
}


.fmb-origin{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--rd-text-muted);
}

.fmb-origin__flag{
  width:20px;
  height:20px;
  border-radius:50%;
}

/* Hide the redundant Front / rear selector on the main FMB form.
   Users choose front/rear using the toggle in the results instead. */
.fmb-field--position {
  display: none;
}


/* ------------------------------------------------------------------
   Find My Bike – results list
   ------------------------------------------------------------------ */

.fmb-results{
  margin-top:24px;
  padding:20px 0 0;
  border-top:1px solid var(--rd-border-soft);
}

/* Header: title + position toggle */
.fmb-results__header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* everything left-aligned */
  gap:4px;
  margin-bottom:12px;
}

.fmb-results__title{
  font-size:1.15rem;
  font-weight:700;
  margin:0;
}

.fmb-results__subtitle{
  margin:2px 0 0;
  font-size:0.95rem;
  color:var(--rd-text-muted);
}


.fmb-results__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Card layout – stacks on mobile, two columns on desktop */
.fmb-results__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rd-border-soft);
}

.fmb-results__item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

/* Thumbnail + part pill */

.fmb-result-thumb{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.fmb-result-part{
  font-size:0.8rem;
  font-weight:700;
  border-radius:999px;
  padding:4px 10px;
  background:var(--rd-bg-soft);
  color:var(--rd-text-main);
  border:1px solid var(--rd-border-subtle);
}

.fmb-result-thumb img{
  max-width:140px;
  height:auto;
  border-radius:var(--rd-radius-md);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
}

/* Text block */

.fmb-result-heading{
  font-weight:700;
}

.fmb-result-meta,
.fmb-result-searchmeta{
  margin:4px 0 0;
  font-size:0.9rem;
  color:var(--rd-text-muted);
}

.fmb-result-description{
  margin:6px 0 0;
  font-size:0.95rem;
  color:var(--rd-text-main);
}

/* Inline product-card slot (RomanCart clone) */

.fmb-result-card-slot{
  margin-top:8px;
}

.fmb-results__item.has-card{
  padding-bottom:18px;
}

/* Inline Romancart card imported into global FMB results */
.fmb-results__item .product-card--inline-from-fmb{
  margin-top:0;
}

.fmb-results__item .product-card--inline-from-fmb form{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

.fmb-results__item .product-card--inline-from-fmb .product-card__label{
  margin:0;
  font-size:0.9rem;
}

/* Make sure the Add to basket button stays compact in FMB results */
.fmb-results__item .product-card--inline-from-fmb button,
.fmb-results__item .product-card--inline-from-fmb input[type="submit"] {
  width: auto !important;
  max-width: max-content;
  flex: 0 0 auto;
}

.product-card__price--was {
  text-decoration: line-through;
  color: #9ca3af;    /* soft grey */
  margin-right: 6px;
  font-weight: 500;
}

.product-card__price--sale {
  color: var(--rd-accent-hover);
  font-weight: 700;
}

.product-card__status--sale {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: var(--rd-radius-sm);
  background: var(--rd-accent-soft);
  border: 1px solid var(--rd-accent-hover);
  color: var(--rd-accent-hover);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* Desktop: image column left, everything else right */
@media (min-width: 640px){
  .fmb-results__item{
    grid-template-columns:150px minmax(0,1fr);
    align-items:flex-start;
  }

  .fmb-result-thumb{
    grid-row:1 / span 4;
  }

  .fmb-result-heading,
  .fmb-result-meta,
  .fmb-result-searchmeta,
  .fmb-result-description,
  .fmb-result-card-slot{
    grid-column:2;
  }
}



@media (max-width: 640px){
  .hero--fmb .hero__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .fmb-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .fmb-actions__buttons{
    width:100%;
  }

  .fmb-actions__buttons .fmb-button{
    flex:1;
    text-align:center;
  }
}

/* Browse-by-manufacturer block on FMB page */
.fmb-manufacturers {
    padding: 3rem 1.5rem 4rem;
    background: #f7f8fa; /* or whatever your subtle panel colour is */
}

.fmb-manufacturers__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.fmb-manufacturers__title {
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.fmb-manufacturers__intro {
    margin-bottom: 2rem;
    color: #777;
}

.fmb-manufacturers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
}

.fmb-manufacturers__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fmb-manufacturers__item:hover,
.fmb-manufacturers__item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fmb-manufacturers__thumb {
    width: 70px;
    height: 70px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmb-manufacturers__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fmb-manufacturers__label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #222;
}


/* ---------------------------------
   HOME HERO – LAYOUT & TRUST ROW
   --------------------------------- */

.hero--home .hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:32px;
  align-items:center;
}

@media (max-width: 900px){
  .hero--home .hero__inner{
    grid-template-columns:1fr;
  }
}

.home-hero__content{
  max-width:40rem;
}

/* (Optional future use if you want ticks instead of bullets)
.home-hero__points{
  list-style:none;
  margin:16px 0 20px;
  padding:0;
}

.home-hero__points li{
  position:relative;
  padding-left:26px;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--rd-text-main);
  margin-bottom:6px;
}

.home-hero__points li::before{
  content:"✓";
  position:absolute;
  left:4px;
  top:0;
  color:#16a34a;
  font-weight:700;
}
*/

/* Default bullet list for home hero – more breathing room */
.home-hero__points li{
  margin-bottom: 10px;
  line-height: 1.55;
}


/* SSL + Made in UK row */
.home-hero__trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:8px;
  margin-bottom:4px;
}

.home-hero__trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  font-size:0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--rd-text-main);         /* stronger, matches title/meta hierarchy */
  margin:6px 0 10px;
}

.free-ship-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.4rem 1rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.free-ship-bar__msg {
    font-weight: 600;
    letter-spacing: 0.04em;
}


/* Right-hand side container for the slideshow */
.home-hero__media{
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 900px){
  .home-hero__media{
    margin-top:20px;
    justify-content:center;
  }
}

/* ---------------------------------
   HOME PRODUCT SLIDESHOW
   --------------------------------- */

.home-slideshow{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

@media (max-width: 600px){
  .home-slideshow{
    align-items:center;
  }
}

/* Viewport for slides */
.home-slideshow__slides{
  position:relative;
  width:100%;
  border-radius:var(--rd-radius-lg);
  overflow:hidden;
  background:var(--rd-bg-surface);
  box-shadow:0 4px 18px rgba(0,0,0,0.12);
  aspect-ratio:16 / 9;
}

/* Slides (JS toggles .is-active) */
.home-slideshow__slide{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease-out;
}

.home-slideshow__slide.is-active{
  opacity:1;
  pointer-events:auto;
}

.home-slideshow__slide img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Prev / next buttons */
.home-slideshow__control{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--rd-border-subtle);
  background:#f3f4f6;
  color:#111827;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 1px 2px rgba(15,23,42,0.18);
  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


@media (hover:hover){
  .home-slideshow__control:hover{
    background-color:#e5e7eb;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(15,23,42,0.22);
  }
}

.home-slideshow__controls{
  margin-top:6px;
  display:flex;
  justify-content:center;
  gap:8px;
  width:100%;
}


/* -------------------------
   6. MODERN BUTTONS
   ------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;
  border-radius:var(--rd-radius-md);

  background: var(--rd-bg-surface);
  border:1px solid var(--rd-border-subtle);

  color:var(--rd-text-main);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:500;

  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn:hover{
  background:#f3f4f6;
}

/* Unified primary button look (matches fmb-button--primary) */
.btn--primary{
  background: var(--rd-accent-soft);
  border: 1px solid var(--rd-accent-hover);
  color: var(--rd-accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}

.btn--primary:hover{
  background: var(--rd-accent-hover);
  border-color: var(--rd-accent-hover);
  color: #fff;
}

/* Home hero buttons – smaller on mobile for better balance */
@media (max-width: 640px) {
  .hero--home .hero__actions .btn {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
  }

  .hero--home .hero__actions {
    gap: 10px;
  }
}



.pin-card__row{
  display: flex;
  align-items: center;
  gap: 8px;
}


/* -------------------------
   7.5 CONTACT FORM
   ------------------------- */

.contact-form{
  max-width: 640px;
  margin: 0 auto;
}

.contact-form__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.contact-form__field label{
  font-size:0.9rem;
  font-weight:600;
  color:var(--rd-text-main);
}

.contact-form__field input,
.contact-form__field textarea{
  padding:8px 10px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-strong);
  font-size:0.95rem;
  font-family:inherit;
  background:var(--rd-bg-surface);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus{
  outline:none;
  border-color:var(--rd-accent-hover);
  box-shadow:0 0 0 1px var(--rd-accent-soft);
}

/* Honeypot: keep for bots, hide from humans */
.contact-form__field--honeypot{
  position:absolute;
  left:-9999px;
  opacity:0;
  height:0;
  overflow:hidden;
}

.contact-form__note{
  margin-top:4px;
  font-size:0.85rem;
  color:var(--rd-text-muted);
}

.contact-form__actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
}

/* Submit button – matches modern primary button style */
.contact-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:var(--rd-radius-md);
  border:1px solid var(--rd-accent-hover);
  background:var(--rd-accent);
  color:#111827;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(15,23,42,0.18);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

@media (hover:hover){
  .contact-form__submit:hover{
    background:var(--rd-accent-hover);
    border-color:var(--rd-accent-hover);
    box-shadow:0 6px 18px rgba(15,23,42,0.22);
    transform:translateY(-1px);
  }
}

.contact-form__submit:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(15,23,42,0.16);
}

@media (max-width:640px){
  .contact-form__actions{
    justify-content:stretch;
  }
  .contact-form__submit{
    width:100%;
  }
}


/* -------------------------
   7. CARDS & FEATURES
   ------------------------- */

.page-section{
  margin-top:40px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:16px;
}

.rd-card{
  background:var(--rd-bg-surface);
  padding:20px;
  border-radius:var(--rd-radius-lg);
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

/* Centre standalone figure blocks inside cards */
.rd-card figure{
  text-align:center;
  margin: 24px auto;
}

.rd-card figure img{
  margin-left:auto;
  margin-right:auto;
}

.rd-card figure figcaption{
  margin-top:10px;
  font-size:0.9rem;
  color:var(--rd-text-muted);
}

/* ✔ Modern green tick list */
.tick-list{
  list-style:none;
  margin:0;
  padding:0;
}

.tick-list li{
  position:relative;
  padding-left:28px;
  margin-bottom:10px;
  font-size:1rem;
  line-height:1.55;
}

.tick-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#16a34a;          /* green tick */
  font-weight:700;
  font-size:1.2rem;
  line-height:1;
}

/* Add spacing between stacked product cards */
.rd-card {
  margin-bottom: 32px;   /* clean, modern spacing */
}

.rd-card:last-child {
  margin-bottom: 0;      /* optional: no extra gap after final card */
}


/* -------------------------
   8. MANUFACTURER PAGE ELEMENTS
   ------------------------- */

.page--manufacturer .hero__inner{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Logo + heading row */
.mfg-hero__header{
  display:flex;
  justify-content:space-between;   /* KTM block on left, RaceDiscs on right */
  align-items:flex-start;
  gap:24px;
}

.mfg-hero__header-main{
  display:flex;
  align-items:center;
  gap:30px;
}

.mfg-hero__brand{
  height:56px;
}


.mfg-hero__logo{
  height:100px;
}

/* KTM-only badge */
.mfg-hero__badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--rd-text-muted);
  margin-bottom:4px;
}

/* Manufacturer hero typography */
.mfg-hero__title{
  font-size:1.8rem;
  margin:2px 0 4px;
  font-weight:700;
}

.mfg-hero__subtitle{
  font-size:0.95rem;
  color:var(--rd-text-muted);
  max-width:32rem;
}

/* mini-FMB selector */
.bike-selector{
  margin-top:16px;                 /* a touch more breathing room under the header */
  padding:16px;
  background:var(--rd-bg-soft);
  border-radius:var(--rd-radius-md);
  border:1px solid var(--rd-border-subtle);
}

.bike-selector__fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}

.bike-selector__field{
  display:flex;
  flex-direction:column;
  gap:4px;                         /* tuck labels closer to their selects */
}

.bike-selector__label{
  font-size:0.82rem;
  font-weight:600;
  color:var(--rd-text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.bike-selector__select{
  padding:7px 10px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-strong);
  font-size:0.9rem;
  background:var(--rd-bg-surface);
  width:100%;
}

.bike-selector__message{
  margin-top:6px;
  font-size:0.82rem;
  color:var(--rd-text-muted);
  min-height:1em; /* keeps layout stable when empty */
}

.bike-selector__message--error{
  color:#b91c1c;                   /* red but not shouty */
  font-weight:600;                 /* makes the error a bit more authoritative */
}

.bike-selector__actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;        /* button hugs the right edge on desktop */
}

/* Use the same pill style for mini-FMB CTAs & legacy promo button */
.bike-selector__actions .btn,
.fmb-promo__btn{
  padding:8px 16px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:#f3f4f6;
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--rd-text-muted);
  cursor:pointer;
}

/* Primary state (Find my Fantic disc / Show discs for my Triumph) */
.bike-selector__actions .btn.btn--primary,
.fmb-promo__btn{
  background:var(--rd-accent-soft);
  border-color:var(--rd-accent-hover);
  color:var(--rd-accent-hover);
}


/* Manufacturer hero & selector — mobile refinements */
@media (max-width: 640px){
  .mfg-hero__header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .mfg-hero__header-main{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .mfg-hero__brand{
    height:48px;                 /* slightly smaller on mobile */
  }

  .bike-selector{
    padding:14px;
  }

  .bike-selector__fields{
    gap:12px;
  }

  .bike-selector__actions{
    justify-content:stretch;
  }

  .bike-selector__actions .btn{
    width:100%;                    /* big, easy-to-hit CTA on mobile */
  }
}





/* Fitment result panel */

.fitment-result{
  margin-top:32px;
}

.fitment-result__inner{
  background:var(--rd-bg-surface);
  border-radius:var(--rd-radius-lg);
  border:1px solid var(--rd-border-subtle);
  padding:20px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}


/* Position toggle (All / Front / Rear) */
.fitment-toggle{
  margin: 8px 0 10px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fitment-toggle__btn{
  padding: 5px 10px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border-subtle);
  background: #f3f4f6;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--rd-text-muted);
  cursor: pointer;
}

.fitment-toggle__btn.is-active{
  background: var(--rd-accent-soft);
  border-color: var(--rd-accent-hover);
  color: var(--rd-accent-hover);
}


.fitment-result__image{
  border-radius:var(--rd-radius-md);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  padding:8px;
}

.fitment-result__title{
  font-size:1.2rem;
  margin:0 0 4px;
}

.fitment-result__thumb{
  align-self:flex-start;
  border-radius:var(--rd-radius-md);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  padding:8px;
}

.fitment-result__thumb-img{
  display:block;
  max-width:140px;
  height:auto;
  margin:0 auto;
}

.fitment-result__content{
  display:flex;
  flex-direction:column;
}


/* Result cards injected by JS */
.fitment-result__body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fitment-result__card{
  display:grid;
  grid-template-columns:minmax(0, 150px) minmax(0, 1fr);
  gap:16px;
  padding:14px 0 16px;
  border-top:1px solid var(--rd-border-subtle);
}

.fitment-result__card:first-child{
  border-top:0;
  padding-top:0;
}

@media (max-width: 640px){
  .fitment-result__card{
    grid-template-columns:1fr;
  }
}

/* Unified Add to basket buttons – manufacturer pages + main FMB inline cards */
.fitment-result__card .product-card__buy input[type="submit"][data-confirm-pulse],
.fmb-results__item .product-card--inline-from-fmb input[type="submit"][data-confirm-pulse] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-accent-hover);
  background: var(--rd-accent-soft);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--rd-accent-hover);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              transform 0.1s ease,
              box-shadow 0.15s ease;
}

.fitment-result__card .product-card__buy input[type="submit"][data-confirm-pulse]:hover,
.fitment-result__card .product-card__buy input[type="submit"][data-confirm-pulse]:focus-visible,
.fmb-results__item .product-card--inline-from-fmb input[type="submit"][data-confirm-pulse]:hover,
.fmb-results__item .product-card--inline-from-fmb input[type="submit"][data-confirm-pulse]:focus-visible {
  background: var(--rd-accent-hover);
  border-color: var(--rd-accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}



.fitment-result__meta{
  font-size:0.85rem;
  color:var(--rd-text-muted);
  margin:0 0 6px;
}

.fitment-result__price{
  font-size:0.9rem;
  font-weight:600;
  color:var(--rd-text-main);
  margin:0 0 8px;
}

/* Hide the old model/year selector inside the cart area */
.fitment-result__cart label,
.fitment-result__cart select{
  display:none;
}


.fitment-result__description{
  font-size:0.9rem;
  color:var(--rd-text-main);
  margin:0 0 8px;
}

.made-in-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--rd-text-muted);
}

.fitment-result__description{
  font-size:0.9rem;
  color:var(--rd-text-main);
  margin:0 0 8px;
}

.made-in-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;                           /* more breathing room */
  padding:5px 10px;                  /* larger, more premium */
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  font-size:0.85rem;                 /* was 0.75 — better balance */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--rd-text-main);         /* stronger, matches title/meta hierarchy */
  margin:6px 0 10px;                 /* better spacing below description */
}

.made-in-badge::before{
  content:"";
  display:inline-block;
  width:22px;                        /* bigger flag */
  height:14px;                       /* matches aspect ratio nicely */
  background:url("Images/Logos/UK.png") center/cover no-repeat;
  border-radius:2px;
  flex-shrink:0;
}



.fitment-result__cart{
  margin-top:8px;
}


/* modern sku chip */
.sku-chip{
  background:var(--rd-accent-soft);
  color:var(--rd-accent-hover);
  border:1px solid var(--rd-accent-hover);
  padding:4px 10px;
  border-radius:var(--rd-radius-sm);
  font-weight:600;
  display:inline-flex;
}

/* -------------------------------------------------
   Image lightbox (disc thumbnails, reusable)
   ------------------------------------------------- */

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:80;               /* above header/nav */
  display:none;             /* hidden by default */
  justify-content:center;   /* centre dialog horizontally */
  align-items:center;       /* centre dialog vertically */
}

.image-lightbox.is-open{
  display:flex;             /* flex container when open */
}

.image-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.65);
}

/* dialog centred by flex, no manual top margin */
.image-lightbox__dialog{
  position:relative;
  max-width:min(90vw, 640px);
  max-height:80vh;
  margin:0;                 /* let flexbox centre it */
  padding:16px 16px 20px;
  border-radius:var(--rd-radius-lg);
  background:var(--rd-bg-surface);
  box-shadow:0 18px 45px rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  align-items:center;
}


.image-lightbox__img{
  max-width:100%;
  max-height:70vh;
  height:auto;
  border-radius:var(--rd-radius-md);
  display:block;
}

.image-lightbox__close{
  position:absolute;
  top:6px;
  right:8px;
  border:0;
  background:transparent;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:var(--rd-text-muted);
}

.image-lightbox__close:hover{
  color:var(--rd-text-main);
}


/* -------------------------
   9. FOOTER
   ------------------------- */

.site-footer{
  margin-top:auto;
  background:#0f172a;
  color:#e5e7eb;
  padding:28px 16px 20px;
  font-size:0.9rem;
}

.site-footer__inner{
  max-width:var(--rd-width-shell);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Top columns */
.site-footer__columns{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:24px;
}

.site-footer__col{
  min-width:0;
}

.site-footer__heading{
  margin:0 0 10px;
  font-size:0.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#f9fafb;
}

.site-footer__list{
  list-style:none;
  margin:0;
  padding:0;
}

.site-footer__list li{
  margin-bottom:6px;
}

.site-footer__list a{
  color:#e5e7eb;
  text-decoration:none;
}

.site-footer__list a:hover{
  text-decoration:underline;
}

.site-footer__col--brand .site-footer__text{
  margin:0 0 8px;
  color:#cbd5f5;
}

.site-footer__trust span{
  white-space:nowrap;
}

/* Bottom row */
.site-footer__bottom{
  border-top:1px solid rgba(148,163,184,0.4);
  padding-top:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  font-size:0.8rem;
}

.site-footer__bottom a{
  color:#e5e7eb;
  text-decoration:none;
}

.site-footer__bottom a:hover{
  text-decoration:underline;
}

/* Social area inside brand column */
.site-footer__col--brand .site-footer__social {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;      /* simple, consistent alignment */
  gap: 0.5rem;
}

.site-footer__heading--small {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Ensure icon colour is controlled here, not by global link styles */
.site-footer__col--brand .social-link,
.site-footer__col--brand .social-link:link,
.site-footer__col--brand .social-link:visited {
  color: #ffffff;           /* white in the footer by default */
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Drop the icon down by 1px to sit better with the baseline */
.site-footer__col--brand .social-link svg {
  display: block;
  position: relative;
  top: -4px;
}

.site-footer__col--brand .social-link:hover {
  color: #1877F2;           /* Facebook blue on hover */
  opacity: 0.9;
}


/* -------------------------
   10. BRAKE PIN RULES
   ------------------------- */

/* Improve spacing + proportions for brake pin forms */
.pin-card__row {
  gap: 14px; /* was 8px – cleaner separation */
}

.pin-card__select {
  padding: 10px 14px;        /* increases height + visual weight */
  font-size: 0.95rem;        /* slightly larger text */
}

/* Bolts page – stack dropdown + button on mobile to avoid horizontal overflow */
@media (max-width: 640px) {
  .page--bolts .pin-card__row {
    flex-direction: column;
    align-items: stretch;
  }

  .page--bolts .pin-card__row .pin-card__select {
    width: 100%;
  }

  .page--bolts .pin-card__row .btn {
    width: 100%;          /* full-width, easy tap target */
    justify-content: center;
  }
}


/* Centre image + caption inside pin cards */
.pin-card__media {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* Centre SKU chip */
.pin-card__sku {
  text-align: center;
  margin-bottom: 8px;
}

/* Ensure the image doesn't stretch */
.pin-card__image {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* -------------------------
   11. Sitempa page – clean up default list styles for better readability
   ------------------------- */

/* Sitemap lists – clean links only */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitemap-list li {
  margin-bottom: 10px;
  padding-left: 0;       /* remove tick-list indent */
}

.sitemap-list li::before {
  content: none !important;   /* no ticks */
}

/* ---------------------------------
   12. HEADER – mobile layout
   --------------------------------- */
@media (max-width: 640px) {
  /* Stack logo and nav instead of cramming them in one row */
  .site-header__inner {
    padding: 8px 12px;
    flex-direction: column;
    align-items: center;   /* centre everything; use flex-start if you prefer left-aligned */
    gap: 6px;
  }

  /* Slightly smaller logo but always visible */
  .site-header__logo {
    height: 44px;
  }

  /* Nav: allow wrapping + tighter spacing + slightly smaller text */
  .site-nav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .site-nav__link {
    font-size: 0.9rem;
    padding: 2px 0;
  }

  /* Make the 'Find My Bike' link stand out but not shout */
  .site-nav__link--primary {
    font-weight: 600;
  }
}

@media (max-width: 640px){
  .site-header__right{
    flex-direction:column;
    gap:6px;
  }

  .site-header__cart{
    font-size:0.85rem;
  }
}


/* ---------------------------------
   FREE SHIPPING BAR – mobile tweak
   --------------------------------- */
@media (max-width: 640px) {
  .free-ship-bar {
    padding: 4px 0;
    font-size: 0.7rem;   /* a bit more compact */
  }

  .free-ship-bar__inner {
    padding: 0 12px;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* Hide SSL pill in the bar on mobile – keeps things clean */
  .free-ship-bar .home-hero__trust-pill {
    display: none;
  }
}

/* =========================================================
   Manufacturer Disc Catalogue Layout
   ========================================================= */

.disc-group{
  margin-top:18px;
}

.disc-group__desc{
  background: var(--rd-bg-surface);
  border: 1px solid var(--rd-border-subtle);
  border-radius: var(--rd-radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 18px;
}

.disc-group__title{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:0.01em;
}

.disc-group__text{
  margin:8px 0 0;
  color: var(--rd-text-muted);
  line-height:1.55;
  max-width: 60rem;
}

.disc-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 320px));
  gap:16px;
  justify-content:start; /* prevents the “stretched cards” look */
}

.disc-card{
  background: var(--rd-bg-surface);
  border: 1px solid var(--rd-border-subtle);
  border-radius: var(--rd-radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.disc-card__imgwrap{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.disc-card__img{
  width: 96px;
  height: auto;
  border-radius: var(--rd-radius-md);
  border: 1px solid var(--rd-border-subtle);
  background: var(--rd-bg-soft);
  display:block;
}

.disc-card__title{
  margin:0;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.25;
}

.disc-chip{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:4px 10px;
  border-radius:var(--rd-radius-sm);
  border:1px solid var(--rd-border-subtle);
  background:var(--rd-bg-soft);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rd-text-muted);
}

.disc-meta{
  margin:0;
  color: var(--rd-text-muted);
  font-size: 0.92rem;
  line-height:1.45;
}

.disc-meta strong{
  color: var(--rd-text-main);
}

.disc-actions{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Ensure disc buttons stay neutral */
.disc-actions .btn{
  width:auto;
}

.disc-group__badge-row{
  margin-top:8px;
}

/* Make the image link behave like an image (no weird underline / focus outlines) */
.disc-card__imglink{
  display:inline-flex;
  border-radius:var(--rd-radius-md);
}
.disc-card__imglink:focus-visible{
  outline:2px solid var(--rd-accent-hover);
  outline-offset:2px;
}

/* Woo cart bridge UI */
.cart-count-badge{
  margin-left: .4rem;
  display: none;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .45em;
  border-radius: 999px;
  font-size: .85em;
  line-height: 1.4em;
  text-align: center;
  background: #e11d48;
  color: #fff;
  vertical-align: middle;
}

.rd-toast{
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(92vw, 520px);
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(20,20,20,.95);
  color: #fff;
  font-size: .95rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.rd-toast--show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}