@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
/* AUTO BITS UK — shared image polish
 * Same treatment as the product gallery: a little breathing room around images and soft rounded corners.
 * Full-bleed heroes stay edge to edge on purpose.
 */
:root { --ab-r: 14px; --ab-r-sm: 10px; --ab-gap: 14px; }

/* ── Shop grid ── */
.products-grid { gap: var(--ab-gap) !important; }
.products-grid .product-card { border-radius: var(--ab-r); overflow: hidden; }
.products-grid .card-img { margin: 8px 8px 0; border-radius: var(--ab-r-sm); overflow: hidden; }

/* ── Homepage product rows ── */
.product-grid { gap: var(--ab-gap) !important; }
.product-grid .product-card { border-radius: var(--ab-r); overflow: hidden; }
.product-grid .product-card-img { margin: 8px 8px 0; border-radius: var(--ab-r-sm); overflow: hidden; }

/* ── Homepage 3-up promo tiles ── */
.promo-banners { gap: 12px !important; padding: 12px; background: #0d0d0d; }
.promo-banner { border-radius: var(--ab-r); }

/* ── Homepage scrolling promo cards ── */
.promo-scroll-track { gap: 12px !important; padding: 12px; }
.promo-scroll-card { border-radius: var(--ab-r); flex-basis: calc(33.333% - 8px) !important; }

/* ── Homepage plate gallery grid ── */
.plate-grid-wrap .plate-grid { inset: 12px; gap: 8px; }
.plate-tile { border-radius: var(--ab-r-sm); }

/* ── Homepage film + phone-holder feature ── */
.intro-film { padding: 12px; }
.intro-film video { border-radius: 16px; }
.intro-film .intro-film-ui { left: 12px; right: 12px; bottom: 12px; border-radius: 0 0 16px 16px; }
.video-section { padding: 12px; }
.video-section .video-still, .video-section video { border-radius: 16px; }

/* ── Business plates page ── */
.gallery-strip { gap: 10px !important; padding: 10px; }
.gallery-strip .gal-cell { border-radius: var(--ab-r-sm); }

/* ── Bag drawer thumbnails ── */
.cart-item-img { border-radius: 8px; }

@media (max-width: 768px) {
  :root { --ab-gap: 10px; }
  .promo-banners, .promo-scroll-track { padding: 10px; gap: 10px !important; }
  .promo-scroll-card { flex-basis: calc(85% - 10px) !important; }
  .intro-film, .video-section { padding: 8px; }
  .intro-film .intro-film-ui { left: 8px; right: 8px; bottom: 8px; }
  .products-grid .card-img, .product-grid .product-card-img { margin: 6px 6px 0; }
}

/* ── Shared footer (all pages except the homepage) ── */
.ab-footer { background: #0d0d0d; border-top: 1px solid #222; padding: 40px 48px 32px; display: flex; flex-direction: column; gap: 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; width: 100%; }
.ab-footer a { color: #b5b5b5; text-decoration: none; transition: color .15s; }
.ab-footer a:hover { color: #fff; }
.ab-f-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ab-f-logo img { height: 34px; width: auto; display: block; }
.ab-f-links, .ab-f-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ab-f-links a, .ab-f-legal a { padding: 6px 0; }
.ab-f-trust { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 16px 0; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; color: #9a9a9a; }
.ab-f-trust span::before { content: '✓ '; color: #53d769; }
.ab-f-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.ab-f-legal a[href^="mailto"] { text-transform: none; letter-spacing: .04em; }
@media (max-width: 768px) { .ab-footer { padding: 32px 20px 28px; } .ab-f-links, .ab-f-legal { gap: 2px 20px; } .ab-f-links a, .ab-f-legal a { padding: 10px 0; } }

/* ── One heading style everywhere (legal, tracking, confirmation pages used a different font) ── */
.wrap > h1, .card > h1, .card h1, .track-heading, .headline { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 900 !important;
  transform: none !important; letter-spacing: -.025em !important; text-transform: uppercase; }

/* ── Readability: small labels were too faint/small on the dark background ── */
.spec-k, .spec-key, .variant-label, .price-note, .back-link, .delivery-note, .page-label, .updated, .bc-bar, .bc-bar a,
.prod-tag, .card-cat, .product-card-info .colour-dot + *, .section-sub { color: #8f8f8f !important; }
.spec-k, .spec-key, .variant-label, .back-link, .page-label, .updated, .bc-bar, .bc-bar a, .ab-gal-zoom, .ab-gal-count { font-size: 10px !important; }
.price-note, .delivery-note { font-size: 11px !important; }

/* ── Comfortable tap targets on phones ── */
@media (max-width: 768px) {
  .hamburger, .nav-hamburger { padding: 11px 8px !important; margin-right: -8px; }
  #cart-trigger, .cart-icon-btn { min-width: 42px; min-height: 42px; display: inline-flex !important; align-items: center; justify-content: center; }
  .cart-close-btn { min-width: 44px; min-height: 44px; }
  .swatch { width: 34px !important; height: 34px !important; }
  [data-colour-group] { gap: 14px !important; }
  .bc-bar a { display: inline-block; padding: 8px 0; }
  .back-link { padding: 10px 0; }
}

/* ── 404 page: nav spans the full width ── */
body > nav { align-self: stretch; width: 100%; }

/* track page had its own centred footer rules — keep the shared layout */
footer.ab-footer { text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; }

/* ── "You might also like" on product pages ── */
.ab-related { padding: 56px 48px 64px; background: #111; border-top: 1px solid #1f1f1f; }
.ab-rel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.ab-rel-head h2 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: -.02em; color: #f0f0f0; }
.ab-rel-head a { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #bbb; text-decoration: none; padding: 8px 0; }
.ab-rel-head a:hover { color: #fff; }
.ab-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ab-rel-card { background: #1a1a1a; border-radius: 14px; overflow: hidden; text-decoration: none; color: #f0f0f0; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ab-rel-card:hover { transform: translateY(-3px); }
.ab-rel-img { margin: 8px 8px 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; background: #0d0d0d; }
.ab-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ab-rel-card:hover .ab-rel-img img { transform: scale(1.04); }
.ab-rel-body { padding: 14px 16px 16px; }
.ab-rel-name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .01em; line-height: 1.25; }
.ab-rel-price { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #bbb; margin-top: 6px; }
@media (max-width: 960px) { .ab-rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .ab-related { padding: 40px 16px 48px; } .ab-rel-grid { gap: 10px; } .ab-rel-img { margin: 6px 6px 0; } }

/* ── Keyboard users can always see where they are ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .swatch:focus-visible {
  outline: 2px solid #f0f0f0 !important; outline-offset: 3px; }

/* ── Readability pass 2: body copy and labels that were too dim ── */
.prod-desc, .feature-body, .bp-subtitle, .body-text, .step-desc, .use-case p, .form-subhead { color: #b0b0b0 !important; }
.feature-eyebrow, .trust-desc, .result-meta, .track-tag, .track-note, .carriers h3, .step-num, .bp-tag, .bp-price-label,
.bp-price-val span, .bp-delivery-note, .section-label, .price-cell-label, .price-cell-val sub, .form-legal, .eyebrow,
.section-watermark + * .section-sub { color: #949494 !important; }
.bp-tag, .bp-price-label, .section-label, .price-cell-label { font-size: 10px !important; }
.form-section label, form label, .form-eyebrow, .form-label { color: #9a9a9a !important; font-size: 10px !important; }
.filter-btn { color: #9a9a9a; } .filter-btn.active { color: #f0f0f0; }
.fit-note, .buy-note, .prod-info-note { color: #949494 !important; }

/* ── Stock status: pill, notify-me form, badges ── */
.ab-stock-pill{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:999px;background:#1c1c1c;
  font-family:'Inter',system-ui,sans-serif;font-size:13px;color:#e8e8e8;letter-spacing:0;text-transform:none}
.ab-stock-pill .dot{width:8px;height:8px;border-radius:50%;background:#53d769}
.ab-stock-pill.soon .dot{background:#fd9426}.ab-stock-pill.pre .dot{background:#5fc9f8}
.ab-notify{position:relative;margin-top:24px;padding:20px;border-radius:16px;background:#1a1a1a;border:1px solid #262626}
.ab-notify-t{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:16px;color:#f0f0f0;letter-spacing:-.01em}
.ab-notify-s{font-size:13px;line-height:1.6;color:#a8a8a8;margin:6px 0 14px}
.ab-notify-row{display:flex;gap:8px}
.ab-notify-row input{flex:1;min-width:0;height:46px;border-radius:999px;border:1px solid #333;background:#111;color:#f0f0f0;padding:0 18px;font-size:15px;outline:none}
.ab-notify-row input:focus{border-color:#f0f0f0}
.ab-notify-row button{height:46px;padding:0 22px;border-radius:999px;border:0;background:#f0f0f0;color:#111;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.ab-notify-row button:disabled{opacity:.6;cursor:default}
.ab-notify-msg{font-size:13px;margin-top:10px;min-height:1px}
.ab-notify-msg.ok{color:#53d769}.ab-notify-msg.bad{color:#ff6b63}
@media(max-width:480px){.ab-notify-row{flex-direction:column}.ab-notify-row input{flex:none;width:100%}.ab-notify-row button{width:100%}}

/* ── Bag count: one red, centred badge everywhere ── */
#cart-badge, #cart-count {
  background: #e5322d !important; color: #fff !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-weight: 700 !important;
  font-size: 10.5px !important; line-height: 1 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums;
  min-width: 18px !important; width: auto !important; height: 18px !important; padding: 0 5px !important; box-sizing: border-box !important;
  border-radius: 999px !important; box-shadow: 0 0 0 2px #111;
  align-items: center !important; justify-content: center !important; text-align: center !important;
  top: calc(50% - 25px) !important; left: calc(50% + 5px) !important; right: auto !important; bottom: auto !important; text-indent: 0 !important; margin: 0 !important;
}

/* ── Header: feathered, progressive blur that builds as you scroll (no hard block edge) ──
   --nav-p goes 0 → 1 over the first ~180px of scroll (set in cart.js). */
body > nav {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  isolation: isolate;
}
body > nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -36px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(17,17,17, calc(.8 + .14 * var(--nav-p, 0))) 0%,
    rgba(17,17,17, calc(.72 + .18 * var(--nav-p, 0))) 50%,
    rgba(17,17,17, calc(.3 + .2 * var(--nav-p, 0))) 78%,
    rgba(17,17,17, 0) 100%);
  -webkit-backdrop-filter: blur(calc(1px + 11px * var(--nav-p, 0))) saturate(130%);
  backdrop-filter: blur(calc(1px + 11px * var(--nav-p, 0))) saturate(130%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  transition: background .2s linear;
}
/* Keep the AB logo crisp over bright photos */
body > nav .nav-logo img, body > nav a[class*="logo"] img { filter: drop-shadow(0 1px 8px rgba(0,0,0,.55)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body > nav::before { background: linear-gradient(to bottom, rgba(17,17,17,.96) 0%, rgba(17,17,17,.9) 62%, rgba(17,17,17,0) 100%); }
}

/* ── Phones: reserve the main photo's space up front so the page doesn't jump while it loads ── */
@media (max-width: 900px) { .gallery { height: auto !important; } .gallery-main { aspect-ratio: 1 / 1; height: auto !important; flex: none !important; } .gallery-thumbs { min-height: 84px; } }

/* ── Pages with a sticky bar under the header (shop filters): header + bar act as one panel,
      so the feather sits under the filter bar instead of bleeding over it ── */
body:has(.filter-bar) > nav::before { bottom: -1px; -webkit-mask-image: none; mask-image: none; background: #111; }
body:has(.filter-bar) > nav { border-bottom: 0 !important; }
.filter-bar { background: #111 !important; border-bottom-color: rgba(255,255,255,.06) !important; }
.filter-bar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(17,17,17,.75), rgba(17,17,17,0)); }

/* ── Header layout: AB logo left · links centred · bag right (all pages) ── */
@media (min-width: 1081px) {
  body > nav { display: grid !important; grid-template-columns: 1fr auto 1fr !important; }
  body > nav > .nav-logo { justify-self: start; }
  body > nav > .nav-links { justify-self: center; }
  body > nav > :last-child { justify-self: end; }
}
@media (min-width: 1081px) and (max-width: 1320px) {
  body > nav .nav-links { gap: 18px !important; }
  body > nav .nav-links a, body > nav .nav-dropdown > a { font-size: 10px !important; letter-spacing: .12em !important; }
}
/* Not enough room for 7 centred links → use the menu button */
@media (max-width: 1080px) {
  body > nav .nav-links { display: none !important; }
  body > nav .hamburger, body > nav .nav-hamburger { display: flex !important; }
  body > nav:has(> .nav-right) { grid-template-columns: auto 1fr auto !important; }
  body > nav > .nav-right { justify-self: end; }
}