/* ---- Bio-Lec Mobility — tokens ---- */
:root {
  --blue-900: #003a6f;
  --blue-800: #004f93;
  --blue-700: #0165B7;   /* Primary */
  --blue-600: #0073AA;   /* Primary Alt */
  --blue-500: #2F9BDF;   /* Secondary / Sky */
  --blue-100: #E1ECF7;
  --blue-50:  #F0F5FA;   /* Light bg */

  --amber: #FFBC00;      /* Accent — seasoning only */
  --red:   #D63638;      /* Sale only */
  --green: #1f8a5b;

  --ink-900: #111111;    /* Dark contrast */
  --ink-800: #1E293B;    /* Dark slate, body headings */
  --ink-700: #334155;    /* Charcoal, body copy */
  --ink-500: #64748B;
  --ink-400: #94A3B8;

  --line: #D1D5DB;
  --line-soft: #E5E9EE;
  --white: #ffffff;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 8px 24px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 24px 60px -28px rgba(1, 101, 183, .35);

  --container: 1280px;
}

html, body { margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-700);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

h1, h2, h3, h4 { color: var(--ink-800); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.3; }
p  { margin: 0; }

/* ---- promo bar ---- */
.promo-bar {
  background: var(--blue-900);
  color: #cfe1f3;
  font-size: 13px;
}
.promo-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px;
}
.promo-bar .tp { display: flex; align-items: center; gap: 8px; }
.promo-bar .tp .stars { color: #00b67a; font-weight: 700; }
.promo-bar nav { display: flex; gap: 22px; }
.promo-bar nav a:hover { color: white; }

/* ---- main nav ---- */
.nav {
  background: var(--blue-700);
  color: white;
}
.nav .container {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}
.nav .logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-0.01em; font-size: 22px; }
.nav .logo .mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #fff 0%, #cfe1f3 100%);
  color: var(--blue-700);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 18px; letter-spacing: -0.03em;
}
.nav ul { list-style: none; padding:0; margin:0; display:flex; gap: 6px; flex: 1; }
.nav ul a {
  padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 15px;
  display: inline-flex; align-items:center; gap: 6px;
  transition: background .15s;
}
.nav ul a:hover, .nav ul a.is-active { background: rgba(255,255,255,.12); }
.nav ul a.is-active { color: white; }
.search {
  display:flex; align-items:center; gap: 10px;
  background: rgba(255,255,255,.14); border-radius: 999px;
  padding: 9px 16px; min-width: 280px;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}
.search input {
  background: transparent; border: 0; outline: 0; color: white; width: 100%;
  font: inherit;
}
.search input::placeholder { color: rgba(255,255,255,.7); }
.nav .actions { display:flex; gap: 6px; align-items:center; }
.icon-btn {
  background: transparent; border:0; color: white; padding: 9px;
  border-radius: 10px; display:flex; align-items:center; gap: 6px;
  font-weight: 600; font-size: 14px;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }
.cart-badge {
  background: var(--amber); color: var(--ink-900);
  font-size: 11px; font-weight: 800; border-radius: 999px;
  padding: 1px 6px;
}

/* ---- crumbs ---- */
.crumbs {
  font-size: 13px; color: var(--ink-500);
  padding: 16px 0;
}
.crumbs a:hover { color: var(--blue-700); }
.crumbs .sep { margin: 0 8px; color: var(--ink-400); }

/* ---- hero / pdp ---- */
/* Breadcrumb (.bl-crumbs) now lives in assets/common/css/common.css */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  margin-top: 20px;
  padding-bottom: 56px;
  align-items: start;
}

/* gallery */
.gallery {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  align-items: center;            /* vertically centre thumb rail with main image (desktop) */
  position: sticky;
  top: var(--blm-sticky-top, 88px);
  align-self: start;
  /* No viewport max-height: the square stage can be taller than that cap and,
     with overflow visible, would spill past the .pdp bottom and overlap the
     blue section below. Letting the gallery take its natural height fixes that
     while keeping it sticky. */
}

/* Thumb rail with top/bottom scroll arrows */
.thumbs-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.thumbs-arrow {
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 999px;            /* circular */
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  flex: 0 0 auto;
  margin: 2px auto;                /* centred, not touching the sides */
}
.thumbs-arrow:hover:not(:disabled) {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: white;
}
.thumbs-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Cap at 6 thumbs visible: 6 × 80 + 5 × 10 = 530px */
  max-height: 530px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;  /* Firefox */
  padding: 2px;
  margin: -2px;
  min-height: 0;
  flex: 0 1 auto;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs .thumb { flex: 0 0 80px; }
.thumb {
  width: 80px; height: 80px;
  border: 2px solid var(--line-soft); background: var(--blue-50);
  border-radius: 12px; overflow: hidden; padding: 0;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s;
}
.thumb.is-active { border-color: var(--blue-700); }
/* video thumbnail play badge */
.thumb.is-video { position: relative; }
.thumb.is-video .thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.30); border-radius: 10px;
}
.thumb.is-video .thumb-play::before {
  content: '▶'; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--blue-700); font-size: 11px; padding-left: 2px;
}
.thumb:hover { border-color: var(--blue-500); }
.stage {
  background: var(--blue-50);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  position: relative; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid #ddd;
}
/* Sliding gallery track: each slide is full-width; the track translates. */
.stage .bl-track { display: flex; width: 100%; height: 100%; will-change: transform;
  transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.stage.bl-draggable { cursor: grab; }
.stage.bl-draggable.grabbing { cursor: grabbing; }
.stage .bl-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; }
.stage .bl-slide img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.stage .bl-slide-video .bl-vholder { position: absolute; inset: 0; }
.stage .badge-deal {
  position: absolute; top: 16px; left: 16px;
  background: var(--amber); color: var(--ink-900);
  font-weight: 800; letter-spacing: -.01em;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 5px;
}
.stage .badge-deal svg { width: 12px; height: 12px; }
.stage .gallery-nav {
  position: absolute; bottom: 20px; right: 20px;
  display:flex; gap: 8px;
  z-index: 6;                 /* above the video iframe so prev/next stays clickable */
}
#bl-stage-video { z-index: 1; }
.stage .gallery-nav button {
  width: 40px; height: 40px; border-radius: 999px;
  background: white; border: 1px solid var(--line); color: var(--ink-800);
  display:flex; align-items:center; justify-content:center;
  pointer-events: auto;
}
.stage .gallery-nav button:hover { background: var(--blue-700); color: white; border-color: var(--blue-700); }

/* Gallery icons rendered as HTML characters (reliable, no SVG dependency) */
.gallery .stage .gallery-nav button {
  font-size: 22px; line-height: 1; font-weight: 700; color: var(--ink-800);
  padding: 0; font-family: Arial, sans-serif;
}
.gallery .stage .gallery-nav button:hover { color: white; }
.gallery .thumbs-arrow {
  font-size: 12px; line-height: 1; color: var(--ink-700); font-family: Arial, sans-serif;
}

/* details column */
.details .pre { font-size: 13px; font-weight: 600; color: var(--blue-700); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;}
.details h1 { margin-bottom: 12px; font-size: 26px; }
.rating { display:flex; align-items:center; gap: 10px; color: var(--ink-700); font-size: 14px; }
.rating .stars { display:inline-flex; gap: 2px; color: var(--amber); }
.rating .rating-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; cursor: pointer; }
.rating .rating-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.price-row {
  display:flex; align-items: center; gap: 12px;
  margin: 18px 0 6px;
}
.price-now { font-size: 36px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.price-was { font-size: 18px; color: var(--ink-500); text-decoration: line-through; line-height: 1; }
.price-save { background: rgba(214,54,56,.1); color: var(--red); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.price-note { color: var(--ink-500); font-size: 13px; }
.price-note .vat { color: var(--blue-700); text-decoration: underline; cursor: pointer; }





/* size selector */
.size-row { margin: 4px 0 18px; }
.size-row-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px;}
.size-row .lbl { font-size: 13px; color: var(--ink-500); font-weight: 600; }

.size-select-wrap {
  position: relative;
}
/* ===== ONE shared style for EVERY variation select (single + multi attribute).
   The multi-attribute WC selects also get the .size-select class via JS, so this
   single rule styles them all. !important guards against theme/WooCommerce
   select styles. ===== */
.size-select,
#bl-wc-form-holder.bl-wc-visible .variations select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  box-sizing: border-box !important; width: 100% !important; max-width: 100% !important;
  min-height: 50px !important; height: auto !important; line-height: 1.3 !important; margin: 0 !important;
  border: 1.5px solid var(--line) !important; border-radius: 12px !important;
  padding: 14px 44px 14px 16px !important;
  font: 600 15px 'Plus Jakarta Sans', sans-serif !important; color: var(--ink-800) !important;
  cursor: pointer !important; transition: border-color .15s, box-shadow .15s !important; outline: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230165B7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important;
}
.size-select:hover,
#bl-wc-form-holder.bl-wc-visible .variations select:hover { border-color: var(--blue-500) !important; }
.size-select:focus,
#bl-wc-form-holder.bl-wc-visible .variations select:focus { border-color: var(--blue-700) !important; box-shadow: 0 0 0 4px rgba(1,101,183,.12) !important; }
/* The chevron now comes from the select's background image — old overlay not needed. */
.size-select-chev { display: none; }

.rating-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue-700);
  font-weight: 600;
  cursor: pointer;
}
.rating-action:hover { color: var(--blue-800); text-decoration: underline; text-underline-offset: 3px; }

/* Keep the link transparent AND keep its blue text in all states (theme can turn it white on focus) */
.rating-action,
.rating-action:hover,
.rating-action:focus,
.rating-action:active,
.rating-action:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  color: var(--blue-700) !important;
  -webkit-text-fill-color: var(--blue-700) !important;
}
.rating-action:hover { color: var(--blue-800) !important; -webkit-text-fill-color: var(--blue-800) !important; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFadeIn .18s ease-out;
}
.modal {
  background: white;
  border-radius: 18px;
  box-shadow: 0 24px 70px -16px rgba(15, 23, 42, 0.45);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn .22s ease-out;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;            /* never shrink — close stays visible */
  position: sticky; top: 0;
  background: white; z-index: 2;
}
.modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.modal-close {
  background: var(--blue-50);
  color: var(--ink-700);
  border: 0;
  border-radius: 999px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 22px; line-height: 1; font-weight: 400;
  font-family: Arial, sans-serif; padding: 0;
}
.modal-close:hover { background: var(--blue-700); color: white; }
.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;            /* allows the body to scroll inside the modal */
  -webkit-overflow-scrolling: touch;
}

/* ===== Clearance offers — redesigned cards ===== */
.bl-clr-note { color: var(--ink-500); font-size: 14px; line-height: 1.6; margin: 0; text-align: center; padding: 16px 0; }
.bl-clr-grid { display: grid; gap: 16px; }

.bl-clr-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 18px 18px 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bl-clr-card::before {            /* accent bar on the left */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ff5d5d, #d63638);
}
.bl-clr-card:hover { border-color: var(--blue-100); box-shadow: 0 10px 28px -14px rgba(15,23,42,.28); transform: translateY(-2px); }
.bl-clr-card.is-out { opacity: .72; }
.bl-clr-card.is-out::before { background: var(--ink-400); }

/* tiny corner ribbon */
.bl-clr-ribbon {
  position: absolute; top: 12px; right: -34px; transform: rotate(45deg);
  background: #d63638; color: #fff; font: 800 10px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .08em; padding: 4px 40px; box-shadow: 0 2px 6px -2px rgba(214,54,56,.6);
}

.bl-clr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 70px; }
.bl-clr-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.bl-clr-stock .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.bl-clr-stock.ok  { background: rgba(31,138,91,.12); color: var(--green); }
.bl-clr-stock.low { background: rgba(255,188,0,.20); color: #8a6d00; }
.bl-clr-stock.out { background: rgba(214,54,56,.10); color: var(--red); }
.bl-clr-save { font-size: 12px; font-weight: 800; color: #fff; background: var(--red); padding: 4px 10px; border-radius: 999px; }

.bl-clr-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-700); margin: 0 0 14px; }

.bl-clr-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bl-clr-prices .now { color: var(--ink-900); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.bl-clr-prices .was { color: var(--ink-400); text-decoration: line-through; font-size: 15px; }
.bl-clr-prices .off { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green); background: rgba(31,138,91,.10); padding: 4px 10px; border-radius: 999px; }

.bl-clr-actions { display: flex; align-items: stretch; gap: 10px; }
.bl-clr-qtywrap {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; background: #fff;
}
.bl-clr-qtywrap span { font-size: 12px; font-weight: 600; color: var(--ink-500); white-space: nowrap; flex: 0 0 auto; }
.bl-clr-qty { border: 0; outline: 0; background: transparent; font: 700 15px 'Plus Jakarta Sans', sans-serif; color: var(--ink-900); padding: 10px 4px; cursor: pointer; }
.bl-clr-add {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; cursor: pointer; min-height: 48px;
  background: var(--blue-700); color: #fff; font: 700 15px 'Plus Jakarta Sans', sans-serif;
  transition: background .15s, box-shadow .15s;
}
.bl-clr-add:hover:not(:disabled) { background: var(--blue-800); box-shadow: 0 8px 20px -8px rgba(1,101,183,.6); }
.bl-clr-add:disabled { background: var(--ink-400); cursor: not-allowed; opacity: .85; }
.bl-clr-add svg { flex: 0 0 auto; }

@media (min-width: 560px) { .bl-clr-grid { grid-template-columns: 1fr; } }

/* Force shortcode form fields to a single column (1 per row) inside modals */
.modal-body .nf-form-content,
.modal-body .nf-row,
.modal-body .nf-field-container,
.modal-body .field-wrap { width: 100% !important; max-width: 100% !important; float: none !important; }
.modal-body .nf-row { display: block !important; }
.modal-body .nf-row > div,
.modal-body .nf-row > .nf-cell { width: 100% !important; display: block !important; margin: 0 0 14px !important; }
.modal-body .nf-field-element input,
.modal-body .nf-field-element textarea,
.modal-body .nf-field-element select { width: 100% !important; box-sizing: border-box; }
.invoice-shortcode-slot {
  min-height: 80px;
}
.invoice-shortcode-slot code {
  background: var(--blue-50);
  color: var(--blue-700);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Add-to-basket loading / added states */
#add-basket { transition: background .15s, opacity .15s; }
#add-basket.is-loading { pointer-events: none; opacity: .9; cursor: progress; }
#add-basket.is-added { background: var(--green) !important; }
.bl-spinner {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: blSpin .7s linear infinite;
}
@keyframes blSpin { to { transform: rotate(360deg); } }

/* ===== Hidden real WooCommerce form (drives cart in the background) ===== */
#bl-wc-form-holder { display: none; }

/* Fallback: multi-attribute variable products show the real WC selects, styled */
#bl-wc-form-holder.bl-wc-visible { display: block; margin: 8px 0; }
#bl-wc-form-holder.bl-wc-visible .quantity { display: none !important; }
#bl-wc-form-holder.bl-wc-visible .stock,
#bl-wc-form-holder.bl-wc-visible .availability,
#bl-wc-form-holder.bl-wc-visible .woocommerce-variation-availability { display: none !important; }
#bl-wc-form-holder.bl-wc-visible .variations,
#bl-wc-form-holder.bl-wc-visible .variations tbody,
#bl-wc-form-holder.bl-wc-visible .variations tr,
#bl-wc-form-holder.bl-wc-visible .variations td,
#bl-wc-form-holder.bl-wc-visible .variations th { display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#bl-wc-form-holder.bl-wc-visible .variations { border-collapse: collapse; margin: 0 0 10px; }
#bl-wc-form-holder.bl-wc-visible .variations tr { margin-bottom: 14px; }
#bl-wc-form-holder.bl-wc-visible .variations td,
#bl-wc-form-holder.bl-wc-visible .variations th { padding: 0; border: 0; text-align: left; }
/* select itself always fills its cell (some themes constrain variation selects) */
.size-select,
#bl-wc-form-holder.bl-wc-visible .variations select { width: 100% !important; max-width: 100% !important; }
#bl-wc-form-holder.bl-wc-visible .variations .label label { font-size: 13px; color: var(--ink-500); font-weight: 600; margin-bottom: 8px; display: block; }
/* select styling comes from the shared rule above; just the Clear link here */
#bl-wc-form-holder.bl-wc-visible .reset_variations { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ink-500); }
/* The design's own Add-to-basket button submits the form, so hide WC's button + price block here */
#bl-wc-form-holder.bl-wc-visible .woocommerce-variation-add-to-cart,
#bl-wc-form-holder.bl-wc-visible .single_add_to_cart_button { display: none !important; }
/* main product price updates on found_variation, so hide the in-form one */
#bl-wc-form-holder.bl-wc-visible .woocommerce-variation-price,
#bl-wc-form-holder.bl-wc-visible .single_variation { display: none !important; }

/* ===== Redesigned details column ===== */
/* Clearance pill at the top */
.details .clearance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #329ae0; color: #fff; border: 0; cursor: pointer;
  font: 800 14px 'Plus Jakarta Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 11px; border-radius: 999px; margin-bottom: 14px;
  box-shadow: 0 4px 12px -4px rgba(50,154,224,.5); transition: background .15s, transform .15s;
}
.details .clearance-pill:hover { background: #2487c9; transform: translateY(-1px); }
.details .clearance-pill .cp-dot { font-size: 8px; }
.details .clearance-pill .cp-arr { font-size: 13px; }

/* VAT relief in green with check */
.price-note.vat-green { display: flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700; }
.price-note.vat-green svg { color: var(--green); }
.price-note.vat-green .vat { color: var(--green); }

/* "i" info icon + tooltip for VAT relief */
.vat-i-wrap { position: relative; display: inline-flex; align-items: center; }
.vat-i {
  width: 18px; height: 18px; border-radius: 999px; cursor: help;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px 'Plus Jakarta Sans', serif; font-style: italic; line-height: 1;
  transition: background .15s, color .15s;
}
.vat-i:hover, .vat-i:focus { background: var(--blue-700); color: #fff; outline: none; }
.vat-tip {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  width: 260px; max-width: 70vw;
  background: var(--ink-800); color: #fff; font: 500 12px 'Plus Jakarta Sans', sans-serif; line-height: 1.5;
  padding: 12px 14px; border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s;
  z-index: 30; pointer-events: none; text-align: left;
}
.vat-tip::after { content: ''; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: var(--ink-800); }
.vat-i-wrap:hover .vat-tip,
.vat-i:focus + .vat-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* In stock / Free delivery strip */
.assure-strip {
  display: flex; align-items: center; gap: 18px; margin: 16px 0;
  padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.assure-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-800); }
.assure-item.in-stock svg { color: var(--green); }
.assure-item.out-stock { color: var(--red); }
.assure-item.out-stock svg { color: var(--red); }
.assure-item.pre-order { color: #C97A1A; }
.assure-item.pre-order svg { color: #C97A1A; }
.assure-strip .assure-item:last-child svg { color: var(--blue-700); }
.assure-sep { width: 1px; height: 18px; background: var(--line); }

/* Quantity + Add to basket on one row */
.cart-row { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; flex-wrap: wrap; }
.cart-row .qty { flex: 0 0 auto; }
.cart-row #add-basket {
  flex: 1 1 auto; min-width: 0;            /* allow the button to shrink instead of forcing page overflow */
  min-height: 52px !important; height: auto; padding: 0 20px !important;
  border-radius: 12px !important; font-size: 16px;
  white-space: normal;                     /* let the long "Add to basket — £x,xxx" label wrap */
  line-height: 1.2; text-align: center;
}

/* Request a call back line */
.callback-line { text-align: center; color: var(--ink-500); font-size: 14px; margin: 4px 0 18px; }
.callback-link,
.callback-link:hover,
.callback-link:focus,
.callback-link:active {
  background: none !important; background-color: transparent !important;
  border: 0; padding: 0; cursor: pointer; box-shadow: none !important; outline: none !important;
  color: var(--blue-700); font-weight: 700; font-size: 14px; font-family: inherit;
}
.callback-link:hover { color: var(--blue-800); text-decoration: underline; text-underline-offset: 3px; }

/* Trustpilot bar */
.tp-bar { text-align: center; padding: 18px 0 4px; border-top: 1px solid var(--line-soft); }
.tp-top { display: inline-flex; align-items: center; gap: 10px; }
.tp-word { font-size: 16px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; }
.tp-stars { display: inline-flex; gap: 3px; }
.tp-star { width: 22px; height: 22px; background: #00B67A; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.tp-sub { margin-top: 8px; font-size: 13px; color: var(--ink-500); }
.tp-brand { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--ink-900); }

.qty {
  display: inline-flex; align-items: stretch;
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  overflow: hidden; height: 44px;
}
.qty input { width: 38px; border: 0; outline: 0; text-align: center; font: 600 15px 'Plus Jakarta Sans'; color: var(--ink-800); background: transparent; }
.qty .qty-steps { display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); }
.qty .qty-steps button {
  flex: 1; width: 26px; border: 0; padding: 0; cursor: pointer;
  background: var(--blue-50); color: var(--blue-700);
  font-size: 8px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.qty .qty-steps button:hover { background: var(--blue-100); }
.qty .qty-up { border-bottom: 1px solid var(--line-soft); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 12px; font-weight: 700; font-size: 16px;
  border: 1.5px solid transparent; transition: transform .08s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--blue-700); color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-800); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: white; color: var(--blue-700); border-color: var(--blue-700); }
.btn-secondary:hover { background: var(--blue-50); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--blue-50); }

/* accessories */
.accessories { margin-top: 24px; }
.accessories h3 { font-size: 14px; color: var(--ink-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;}
.acc-list { display: grid; gap: 10px; }
.acc {
  display:grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items:center;
  padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.acc:hover { border-color: var(--blue-500); }
.acc.is-added { border-color: var(--blue-700); background: var(--blue-50); }
.acc .pic {
  width: 64px; height: 64px; border-radius: 10px; background: var(--blue-50);
  display:flex; align-items:center; justify-content:center;
}
.acc .info .name { font-weight: 600; color: var(--ink-800); font-size: 14px; line-height: 1.25; }
.acc .info .meta { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.acc .info .price { font-size: 14px; font-weight: 700; color: var(--ink-800); margin-top: 4px;}
.acc .add-btn {
  border: 1.5px solid var(--blue-700); color: var(--blue-700); background: white;
  padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items:center; gap: 6px;
}
.acc .add-btn:hover { background: var(--blue-50); }
.acc.is-added .add-btn { background: var(--blue-700); color: white; }

/* accordions */
.accordion { margin-top: 28px; border-top: 1px solid var(--line-soft); }
.acc-row { border-bottom: 1px solid var(--line-soft); }
.acc-row > button {
  width: 100%; background: transparent; border: 0; padding: 18px 4px;
  display:flex; align-items:center; justify-content: space-between;
  font: 600 16px 'Plus Jakarta Sans'; color: var(--ink-800); cursor: pointer;
}
.acc-row .body {
  padding: 0 4px 22px;
  color: var(--ink-700); font-size: 15px;
  display: grid; gap: 10px;
}
.acc-row .body table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px;
  border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.acc-row .body table tr:nth-child(even) td { background: var(--blue-50); }
.acc-row .body table td {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.acc-row .body table tr:last-child td { border-bottom: 0; }
.acc-row .body table td:first-child {
  color: var(--ink-500); width: 46%; font-weight: 500;
  border-right: 1px solid var(--line-soft);
}
.acc-row .body table td:last-child { color: var(--ink-900); font-weight: 700; }
.acc-row .body ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
/* green circle-check icon before every list item */
.acc-row .body ul li {
  position: relative; padding-left: 30px;
  color: var(--ink-700); font-size: 15px; line-height: 1.55;
}
.acc-row .body ul li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a5b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8.5 12l2.4 2.4 4.6-4.8'/></svg>") center / contain no-repeat;
}
/* legacy check-list markup (icon supplied inline) — keep it tidy too */
.acc-row .body ul.check-list li { padding-left: 0; display: flex; align-items: flex-start; gap: 10px; }
.acc-row .body ul.check-list li::before { display: none; }
.acc-row .body ul.check-list li svg {
  color: var(--green); flex: 0 0 auto; margin-top: 3px;
  background: rgba(31, 138, 91, .12); border-radius: 999px; padding: 3px; width: 18px; height: 18px; box-sizing: border-box;
}
.acc-row .chev { transition: transform .2s; color: var(--blue-700); }
.acc-row.is-open .chev { transform: rotate(180deg); }

/* feature spotlight */