/* ========================================
   CSS VARIABLES — WI BRAND
   ======================================== */
:root {
  --charcoal: #1c1c1c;
  --charcoal-light: #2a2a2a;
  --cream: #f0eadf;
  --cream-light: #faf9f5;
  --cream-dark: #e5ddd0;
  --red: #de0808;
  --text-dark: #141413;
  --text-mid: #666;
  --text-light: #b5afa8;
  --white: #fff;
  --border: #e5e5e5;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius: 6px;
  --radius-lg: 12px;
  --max-width: 1280px;
  --transition: 0.25s ease;
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; }
input, select, textarea { font-family: var(--font); font-size: 15px; }

/* ========================================
   LAYOUT
   ======================================== */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section--dark { background: var(--charcoal); color: var(--cream); }
.section--cream { background: var(--cream-light); }

/* ========================================
   TOP BAR
   ======================================== */
.top-bar {
  background: var(--cream);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 0;
  text-align: center;
  letter-spacing: 0.3px;
}
.top-bar .tb-sep { margin: 0 20px; opacity: 0.5; }
.top-bar { position: relative; }
.vat-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  border: 1px solid var(--text-dark);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 !important;
  opacity: 1 !important;
}
.vat-btn {
  border: 0;
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  line-height: 1.4;
}
.vat-btn.active {
  background: var(--text-dark);
  color: var(--cream);
}
@media (max-width: 900px) {
  .vat-toggle {
    position: static;
    transform: none;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 12px !important;
  }
}
@media (max-width: 700px) {
  .top-bar { display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .top-bar .tb-x { display: none; }
}

/* ========================================
   HEADER / NAV
   ======================================== */
.header {
  background: var(--charcoal);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
  flex-shrink: 0;
}
.logo small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0.7;
}
.nav { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.nav a {
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: opacity var(--transition);
  opacity: 0.85;
  white-space: nowrap;
}
.nav a:hover, .nav a.active { opacity: 1; }
.nav-cta {
  background: var(--cream) !important;
  color: var(--charcoal) !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  transition: background var(--transition) !important;
}
.nav-cta:hover { background: var(--cream-dark) !important; }
/* Header responsive: full search only at the widest width; collapse to a
   hamburger below 1100 so the nav never crams or wraps into the logo. */
@media (max-width: 1279px) { .header-search { display: none; } }
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; position: absolute; top: 100%;
    left: 0; right: 0; background: var(--charcoal); padding: 20px 24px; gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .nav.open .nav-search-mobile { display: block !important; }
  .menu-toggle { display: block; }
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  color: var(--cream);
  font-size: 28px;
  padding: 4px;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
  transition: all var(--transition);
  text-align: center;
  cursor: pointer;
}
.btn--primary {
  background: var(--cream);
  color: var(--charcoal);
}
.btn--primary:hover { background: var(--cream-dark); }
.btn--dark {
  background: var(--charcoal);
  color: var(--cream);
}
.btn--dark:hover { background: var(--charcoal-light); }
.btn--outline {
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
}
.btn--outline:hover { background: var(--cream); color: var(--charcoal); }
.btn--red {
  background: var(--red);
  color: var(--white);
}
.btn--red:hover { background: #c00707; }
.btn--sm { padding: 10px 20px; font-size: 13px; }
.btn--lg { padding: 18px 42px; font-size: 16px; }

/* ========================================
   HERO
   ======================================== */
.hero {
  background: var(--charcoal);
  color: var(--cream);
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, rgba(28,28,28,0.95) 0%, rgba(28,28,28,0.7) 100%);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  color: var(--cream);
  opacity: 0.6;
}
.hero p {
  font-size: 18px;
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: 36px;
  max-width: 500px;
}
.hero-badges {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}
.hero-badge {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-badge svg { width: 18px; height: 18px; fill: var(--cream); opacity: 0.6; }
.hero-image {
  background: var(--charcoal-light);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ========================================
   SERVICES STRIP
   ======================================== */
.services-strip {
  background: var(--cream);
  padding: 60px 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.service-card {
  text-align: center;
  padding: 24px 16px;
}
.service-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--charcoal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon svg { width: 24px; height: 24px; fill: var(--cream); }
.service-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--charcoal);
}
.service-card p {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}

/* ========================================
   HOW IT WORKS
   ======================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.step {
  text-align: center;
  padding: 32px 20px;
}
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--charcoal);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.section--dark .step-number {
  background: rgba(240,234,223,0.15);
  color: var(--cream);
}
.step h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.step p {
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.6;
}

/* ========================================
   SECTION HEADERS
   ======================================== */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-header h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-header p {
  font-size: 17px;
  color: var(--text-mid);
  max-width: 600px;
  margin: 0 auto;
}
.section--dark .section-header p { color: var(--text-light); }

/* ========================================
   PRODUCT CATALOGUE
   ======================================== */
.catalogue-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}
.catalogue-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}
/* ── Collapsible filter accordion (compact, Ralawise-style) ── */
.filter-section { border-bottom: 1px solid var(--border); }
.filter-section > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-mid);
}
.filter-section > summary::-webkit-details-marker { display: none; }
.filter-section > summary::after {
  content: '＋'; font-size: 15px; font-weight: 400; color: var(--text-mid); opacity: 0.7;
}
.filter-section[open] > summary::after { content: '−'; }
.filter-list { list-style: none; margin: 2px 0 14px; }
.brand-list { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.filter-list li { border-radius: var(--radius); }
.filter-list li > a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; font-size: 14px; color: var(--text-dark);
  transition: background var(--transition);
}
.filter-list li > a:hover { background: var(--cream-light); }
.filter-list li.active > a { background: var(--charcoal); color: var(--cream); font-weight: 500; }
.filter-list li.filter-all > a { font-weight: 500; }
.filter-count { font-size: 12px; opacity: 0.5; flex-shrink: 0; }

/* Nested category dropdown */
.cat-acc > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--text-dark);
  border-radius: var(--radius);
}
.cat-acc > summary::-webkit-details-marker { display: none; }
.cat-acc > summary:hover { background: var(--cream-light); }
.cat-acc > summary .cat-name { flex: 1; }
.cat-acc > summary::after {
  content: '▸'; font-size: 11px; opacity: 0.55; transition: transform 0.2s; margin-left: 2px;
}
.cat-acc[open] > summary::after { transform: rotate(90deg); }
.subcategory-list { list-style: none; padding-left: 10px; margin: 2px 0 6px;
  border-left: 2px solid var(--border); }
.subcategory-list li { border-radius: var(--radius); }
.subcategory-list li > a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 13px; color: var(--text-mid);
  transition: background var(--transition);
}
.subcategory-list li > a:hover { background: var(--cream-light); }
.subcategory-list li.active > a { background: var(--charcoal); color: var(--cream); font-weight: 500; }
.search-box {
  position: relative;
  margin-bottom: 28px;
}
.search-box input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  transition: border-color var(--transition);
  background: var(--white);
}
.search-box input:focus { border-color: var(--charcoal); outline: none; }
.search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--text-mid);
}

/* Products grid */
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.products-header h2 { font-size: 22px; font-weight: 600; }
.products-count { font-size: 14px; color: var(--text-mid); }
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.products-grid--featured { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .products-grid--featured { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .products-grid.products-grid--featured { grid-template-columns: 1fr 1fr; gap: 14px; } }
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(20,20,19,0.06), 0 4px 14px rgba(20,20,19,0.05);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--cream-dark);
}
.product-card-img {
  aspect-ratio: 1;
  /* Slightly deeper than the card so white garments always show an edge, plus a
     faint inner ring that frames every product (fixes 'white on white'). */
  background: #efece5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(20,20,19,0.04);
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-img .placeholder-icon {
  width: 48px;
  height: 48px;
  fill: var(--border);
}
.product-card-body { padding: 16px; }
.product-card-brand {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-mid);
  margin-bottom: 4px;
}
.product-card-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
  color: var(--text-dark);
}
.product-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-mid);
}
.product-card-colours {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.colour-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Stronger than --border so white/pale swatches stay visible on white cards */
  border: 1px solid rgba(20,20,19,0.22);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.06);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}
.pagination button {
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}
.pagination button:hover { background: var(--cream-light); }
.pagination button.active { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.pagination button:disabled { opacity: 0.3; cursor: default; }

/* ========================================
   PRODUCT DETAIL
   ======================================== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.product-gallery {
  background: var(--cream-light);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
/* Desktop density: the photo must never push the buying controls off-screen.
   Cap the stage to a bit over half the viewport; contain, not crop. */
@media (min-width: 821px) {
  .pdp-stage { max-height: 56vh; }
  .pdp-stage #main-image { max-height: 56vh; object-fit: contain; }
  .product-detail { grid-template-columns: 0.9fr 1.1fr; gap: 44px; }
}
.product-info h1 {
  font-size: 27px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.15;
}
.product-brand-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-mid);
  margin-bottom: 16px;
}
.product-description {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 18px;
}
/* Clamp long supplier blurbs to three lines; site.js adds a Read more toggle */
.product-description.clamped { display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.desc-toggle { display: inline-block; margin: -10px 0 18px; font-size: 13px;
  font-weight: 700; color: var(--red); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; }
.product-option { margin-bottom: 16px; }
.product-option label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  color: var(--text-dark);
}
.colour-options { display: flex; gap: 8px; flex-wrap: wrap; }
.colour-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Stronger than --border so a white/pale garment swatch is clearly visible
     and selectable (was near-invisible on the white card). */
  border: 2px solid rgba(20,20,19,0.18);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  box-shadow: inset 0 -1px 3px rgba(0,0,0,0.07);
}
.colour-option:hover, .colour-option.selected { border-color: var(--charcoal); }
.colour-option.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
}
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-option {
  padding: 10px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--white);
  transition: all var(--transition);
}
.size-option:hover, .size-option.selected {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--cream);
}
/* Live-stock annotation: label stacked over a small availability line. */
.size-option { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; text-align: center; }
.size-label { display: block; }
.size-stock {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
.size-stock:empty { display: none; }
.size-option.stock-in  .size-stock { color: #1a7f37; }
.size-option.stock-low .size-stock { color: #b25e00; }
.size-option.stock-oos .size-stock { color: var(--red); }
.size-option.stock-oos { opacity: .72; }
.size-option.stock-oos .size-label { text-decoration: line-through; text-decoration-thickness: 1px; }
/* Keep the small line readable on the dark selected/hover state. */
.size-option:hover .size-stock, .size-option.selected .size-stock { color: rgba(255,255,255,.9); }
.size-option.stock-oos:hover, .size-option.stock-oos.selected { opacity: 1; }

.stock-summary {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
}
.stock-summary:empty { display: none; }
.stock-summary.in  { color: #1a7f37; }
.stock-summary.low { color: #b25e00; }
.stock-summary.oos { color: var(--red); }
.stock-summary::before { content: "● "; }
.quantity-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quantity-input input {
  width: 80px;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
}
.quantity-input input:focus { border-color: var(--charcoal); outline: none; }
.add-to-quote-btn { margin-top: 32px; width: 100%; }

/* ========================================
   QUOTE BASKET
   ======================================== */
.quote-basket-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--charcoal);
  color: var(--cream);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: all var(--transition);
}
.quote-basket-toggle:hover { transform: scale(1.08); }
.quote-basket-toggle svg { width: 24px; height: 24px; fill: var(--cream); }
.quote-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-badge:empty { display: none; }

/* ========================================
   QUOTE REQUEST FORM
   ======================================== */
.quote-form-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-dark);
}
.form-group label .required { color: var(--red); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  background: var(--white);
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--charcoal);
  outline: none;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.file-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--cream-light);
}
.file-upload:hover { border-color: var(--charcoal); }
.file-upload p { font-size: 14px; color: var(--text-mid); margin-top: 8px; }
.file-upload .accepted { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* Quote summary sidebar */
.quote-summary {
  background: var(--cream-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: sticky;
  top: 100px;
}
.quote-summary h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.quote-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.quote-item:last-child { border-bottom: none; }
.quote-item-name { font-weight: 500; flex: 1; }
.quote-item-details { font-size: 12px; color: var(--text-mid); }
.quote-item-remove {
  background: none;
  color: var(--red);
  font-size: 18px;
  padding: 0 0 0 12px;
  line-height: 1;
}
.quote-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-mid);
  font-size: 14px;
}

/* ========================================
   CONTACT PAGE
   ======================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-info-item {
  margin-bottom: 28px;
}
.contact-info-item h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.contact-info-item p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: var(--charcoal);
  color: var(--cream);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-about p {
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.7;
  margin-top: 12px;
}
.footer h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; }
.footer li a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.footer li a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.5;
}

/* ========================================
   INSTAGRAM FOOTER STRIP
   ======================================== */
.ig-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 48px 0;
}
.ig-strip-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  text-align: center;
}
.ig-strip-head .ig-glyph { color: var(--charcoal); flex: none; }
.ig-strip-head h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--text-dark);
}
.ig-strip-head .ig-handle {
  font-size: 16px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.ig-strip-head .ig-handle:hover { text-decoration: underline; }
.ig-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-dark);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.ig-tile:hover img { transform: scale(1.05); }
.ig-embed { width: 100%; min-height: 120px; }
.ig-embed iframe { width: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  .ig-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .ig-strip { padding: 36px 0; }
  .ig-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ig-strip-head { gap: 8px; margin-bottom: 20px; }
  .ig-strip-head h2 { font-size: 19px; }
}

/* ========================================
   LOADING / EMPTY STATES
   ======================================== */
.loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-mid);
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--charcoal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-mid);
}
.empty-state h3 { font-size: 20px; margin-bottom: 8px; color: var(--text-dark); }

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb {
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 32px;
}
.breadcrumb a { transition: color var(--transition); }
.breadcrumb a:hover { color: var(--text-dark); }
.breadcrumb span { margin: 0 8px; opacity: 0.4; }

/* ========================================
   TOAST
   ======================================== */
.toast {
  position: fixed;
  bottom: 90px;
  left: 24px;
  background: var(--charcoal);
  color: var(--cream);
  padding: 16px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}
/* Nothing in the toast is clickable, and it sits bottom-left at z-index 200
   over the buying controls for 3 seconds. pointer-events:auto meant it ate
   those clicks. It is a notification, so let clicks straight through. */
.toast.show { opacity: 1; transform: translateY(0); pointer-events: none; }

/* ========================================
   BACK LINK
   ======================================== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mid);
  margin-bottom: 24px;
  transition: color var(--transition);
}
.back-link:hover { color: var(--text-dark); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .catalogue-layout { grid-template-columns: 1fr; }
  .catalogue-sidebar { position: static; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
  .quote-form-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--charcoal);
    padding: 20px 24px;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .menu-toggle { display: block; }
  .hero { padding: 60px 0 80px; }
  .hero h1 { font-size: 32px; }
  .section { padding: 60px 0; }
  .section-header h2 { font-size: 28px; }
  .services-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .product-card-body { padding: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .hero-badges { flex-direction: column; gap: 12px; }
}


/* ════════════════════════════════════════════════════════
   REVIEW FIXES — 2026-07-18 design panel
   ════════════════════════════════════════════════════════ */

/* Red accent system: section headers earn a brand mark */
.section-header h2::after {
  content: ''; display: block; width: 48px; height: 3px;
  background: var(--red); margin: 16px auto 0;
}
/* Primary conversion CTAs go red */
.btn--cta { background: var(--red); color: #fff; }
.btn--cta:hover { background: #c00707; }

/* Full-bleed homepage hero */
.hero--bleed {
  background-image: linear-gradient(100deg, rgba(28,28,28,0.94) 30%, rgba(28,28,28,0.62) 75%, rgba(28,28,28,0.45)),
                    url('/site/img/hero-embroidery.jpg');
  background-size: cover; background-position: center right;
}
.hero--bleed::before { display: none; }
.hero--bleed .hero-grid { grid-template-columns: 1fr; max-width: 640px; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); }

/* Inner-page heroes: less air, more content */
.page-hero { padding: 56px 0 64px !important; }

/* How-it-works: connect the steps */
.steps-grid { position: relative; }
@media (min-width: 769px) {
  .steps-grid::before {
    content: ''; position: absolute; top: 24px; left: 12.5%; right: 12.5%;
    height: 1px; background: rgba(240,234,223,0.25);
  }
  .step { position: relative; }
}

/* Colour swatches: bigger targets, unmistakable selection, two-tone support */
.colour-option { width: 44px; height: 44px; }
.colour-option.selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.colour-option.selected::after { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.9); }

/* Pagination touch targets */
.pagination button { min-height: 44px; min-width: 44px; }

/* Labelled quote basket FAB */
.quote-basket-toggle {
  width: auto; min-width: 56px; border-radius: 28px; padding: 0 20px;
  gap: 8px; font-size: 14px; font-weight: 600;
}
.quote-basket-toggle .fab-label { color: var(--cream); }

/* Header quote-count chip */
.nav-basket-count {
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}

/* Header search */
.header-search { position: relative; }
.header-search input {
  width: 170px; padding: 9px 12px 9px 34px; border: 1px solid rgba(240,234,223,0.25);
  border-radius: var(--radius); background: rgba(255,255,255,0.07); color: var(--cream);
  font-size: 14px; transition: all var(--transition);
}
.header-search input::placeholder { color: rgba(240,234,223,0.5); }
.header-search input:focus { background: #fff; color: var(--text-dark); outline: none; width: 210px; }
.header-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: rgba(240,234,223,0.6); pointer-events: none;
}
.header-search input:focus + svg, .header-search input:focus ~ svg { fill: var(--text-mid); }

/* Reassurance microcopy blocks */
.reassure { font-size: 13px; color: var(--text-mid); line-height: 1.9; margin-top: 14px; }
.reassure span { display: block; padding-left: 20px; text-indent: -20px; }

/* Category page: mobile filters toggle (hidden on desktop) */
.filters-toggle { display: none; }

/* Related products responsive grid */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Newsletter band responsive */
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

/* ── Mobile fixes ── */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  input, select, textarea { font-size: 16px !important; }
  .newsletter-grid { display: block; }
  .newsletter-grid form { margin-top: 18px; }
  .newsletter-grid input[type="email"] { width: 100%; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Sidebar collapses behind a toggle */
  .filters-toggle {
    display: block; width: 100%; padding: 14px 16px; margin-bottom: 16px;
    background: var(--charcoal); color: var(--cream); border-radius: var(--radius);
    font-size: 15px; font-weight: 600; text-align: left;
  }
  .filters-toggle::after { content: ' ▾'; float: right; }
  .filters-toggle.open::after { content: ' ▴'; }
  .catalogue-sidebar { display: none; }
  .catalogue-sidebar.open { display: block; }
  /* Quote page: basket first, form second */
  .quote-form-grid { display: flex; flex-direction: column; }
  .quote-summary { order: -1; position: static; margin-bottom: 24px; }
  /* Header search hides on small screens (menu has one) */
  .header-search { display: none; }
}

/* Mobile menu: proper layer, full-width tap rows */
@media (max-width: 768px) {
  .nav.open {
    z-index: 200; background: var(--charcoal);
    box-shadow: 0 16px 32px rgba(0,0,0,0.45);
    gap: 0; padding: 8px 24px 20px;
  }
  .nav.open a {
    display: block; width: 100%; padding: 14px 0; font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav.open a.nav-cta { margin-top: 12px; text-align: center; border-bottom: none; }
  .menu-toggle { padding: 8px 12px; }
  .nav-search-mobile { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-search-mobile input {
    width: 100%; padding: 12px 14px; border-radius: var(--radius);
    border: none; font-size: 16px;
  }
}


/* ════════════════════════════════════════════════════════
   BEST-IN-CLASS UPGRADE — 2026-08-05
   Trust bar · elevated categories · work showcase · reviews
   ════════════════════════════════════════════════════════ */

/* Eyebrow label above section headings */
.eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.section--dark .eyebrow { color:#ff5a5a; }

/* ── Industry chips (homepage strip → sector landing pages) ── */
.ind-chips { display:flex; flex-wrap:wrap; gap:10px; }
.ind-chip { display:inline-block; padding:10px 16px; background:var(--white);
  border:1px solid var(--border); border-radius:40px; font-size:14px; font-weight:600;
  color:var(--text-dark); text-decoration:none; transition:all var(--transition);
  box-shadow:0 1px 3px rgba(20,20,19,0.05); }
.ind-chip:hover { border-color:var(--charcoal); background:var(--cream-light); transform:translateY(-1px); }

/* ── School shop finder ── */
.school-search-wrap { max-width:520px; margin:0 auto 26px; }
#school-search { width:100%; padding:15px 18px; border:2px solid var(--border); border-radius:var(--radius);
  font-size:16px; font-family:inherit; }
#school-search:focus { outline:none; border-color:var(--red); }
.school-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.school-card { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 20px; text-decoration:none; color:var(--text-dark); transition:all var(--transition);
  box-shadow:0 1px 3px rgba(20,20,19,0.06); }
.school-card:hover { border-color:var(--charcoal); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.school-card h3 { font-size:16px; font-weight:700; margin:0; }
.school-town { font-size:13px; color:var(--text-mid); margin:3px 0 0; }
.school-go { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600;
  color:var(--red); white-space:nowrap; flex-shrink:0; }
@media (max-width:900px){ .school-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .school-grid { grid-template-columns:1fr; } }

/* ── Logo visualiser (product page) ── */
.pdp-stage { position:relative; display:block; }
.pdp-logo-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.viz-logo { position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.18)); }
/* The gallery's img rule (width/height 100% + cover) must NEVER hit the logo —
   that was the "broken fragments" bug: the logo got stretched to the stage. */
.product-gallery img.viz-logo, .pdp-logo-layer img.viz-logo, img.viz-logo {
  width:auto; height:auto !important; max-height:none; object-fit:contain; }
.viz-logo:active { cursor:grabbing; }
.viz-panel { margin-top:16px; background:var(--cream-light); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 18px; }
.viz-head { margin-bottom:12px; }
.viz-head b { display:block; font-size:15px; color:var(--text-dark); }
.viz-head span { font-size:12.5px; color:var(--text-mid); }
.viz-upload { display:inline-flex; align-items:center; gap:8px; background:var(--charcoal);
  color:#fff; font-size:14px; font-weight:600; padding:10px 16px; border-radius:var(--radius); cursor:pointer; }
.viz-upload:hover { background:var(--charcoal-light); }
.viz-controls[hidden] { display:none; }
.viz-controls { margin-top:14px; }
.viz-positions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.viz-pos { background:var(--white); border:1.5px solid var(--border); border-radius:40px;
  padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-dark);
  font-family:inherit; transition:all var(--transition); }
.viz-pos.active, .viz-pos:hover { border-color:var(--red); color:var(--red); }
.viz-size { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--text-mid); }
.viz-size input { flex:1; accent-color:var(--red); }
.viz-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.viz-add { background:var(--red); color:#fff; border:0; border-radius:var(--radius);
  padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:all var(--transition); }
.viz-add:hover { filter:brightness(0.94); }
.viz-add:disabled { opacity:0.6; cursor:default; }
.viz-add.added { background:#1b7a3d; }
.viz-reset { background:none; border:0; color:var(--text-mid); font-size:13px;
  text-decoration:underline; cursor:pointer; font-family:inherit; }
.viz-hint { font-size:12px; color:var(--text-mid); margin:10px 0 0; }
.viz-toquote { color:var(--red); font-weight:700; text-decoration:none; }
.viz-toquote:hover { text-decoration:underline; }
/* Floating control bar over the photo. The panel below the image sits under the
   fold on most screens, so resizing meant losing sight of the garment. JS moves
   the position pills and the size slider in here while a logo is loaded. */
.viz-dock { position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  width:min(94%,460px); z-index:6; padding:10px 14px 12px; border-radius:16px;
  background:rgba(255,255,255,0.94); border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,0.16); }
@supports (backdrop-filter:blur(6px)) { .viz-dock { backdrop-filter:blur(6px); } }
.viz-dock .viz-positions { justify-content:center; gap:6px; margin-bottom:8px; }
.viz-dock .viz-pos { padding:6px 13px; font-size:12.5px; }
.viz-dock .viz-size { font-size:12.5px; }
@media (max-width:768px) {
  .viz-dock { width:96%; bottom:8px; padding:8px 10px 10px; border-radius:14px; }
  .viz-dock .viz-pos { padding:6px 11px; font-size:11.5px; }
  .viz-dock .viz-size { font-size:11.5px; }
}
/* One-off "drag me" callout, anchored just above the logo. */
.viz-coach { position:absolute; z-index:7; transform:translate(-50%,-100%);
  background:var(--charcoal); color:#fff; font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:40px; white-space:nowrap; pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.28); }
.viz-coach::after { content:''; position:absolute; left:50%; bottom:-4px;
  width:9px; height:9px; background:var(--charcoal);
  transform:translateX(-50%) rotate(45deg); border-radius:1px; }
.viz-coach.out { opacity:0; transition:opacity 0.4s ease; }
@media (prefers-reduced-motion:no-preference) {
  .viz-dock { animation:vizDockIn 0.25s ease-out; }
  .viz-coach { animation:vizCoachIn 0.3s ease-out; }
}
@keyframes vizDockIn { from { opacity:0; transform:translate(-50%,10px); }
                       to   { opacity:1; transform:translateX(-50%); } }
@keyframes vizCoachIn { from { opacity:0; transform:translate(-50%,-90%); }
                        to   { opacity:1; transform:translate(-50%,-100%); } }

/* ── Kit Finder lead capture (results screen) ───────────────────────────── */
.fr-capture { margin:22px 0; padding:20px 22px; border-radius:var(--radius-lg);
  background:var(--cream-light); border:1px solid var(--border); text-align:left; }
.fr-capture h3 { font-size:19px; font-weight:700; color:var(--text-dark); margin:0 0 6px; }
.fr-capture p { font-size:14px; color:var(--text-mid); margin:0 0 16px; }
.fr-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
.fr-fields label { display:flex; flex-direction:column; gap:5px; font-size:13px;
  font-weight:600; color:var(--text-dark); }
.fr-fields label.fr-wide { grid-column:1 / -1; }
/* One flex item, or the column direction drops "(optional)" onto its own line */
.fr-lab { display:block; }
.fr-opt { font-weight:500; color:var(--text-mid); }
.fr-fields input, .fr-fields textarea { font-family:inherit; font-size:16px;
  padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--text-dark); width:100%; }
.fr-fields input:focus, .fr-fields textarea:focus { border-color:var(--red); outline:none; }
.fr-fields textarea { resize:vertical; }
.fr-submit-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.fr-msg { font-size:13px; font-weight:600; color:var(--text-mid); }
.fr-msg.err { color:var(--red); }
@media (max-width:640px) { .fr-fields { grid-template-columns:1fr; } }

/* ── Floating buttons get out of the way of real buttons ──────────────────
   The quote FAB and Winston are position:fixed, so on shorter screens they
   land on top of the buying controls and swallow the click. site.js checks
   for real overlap on scroll and adds .fab-dodge to whichever one is in the
   way; it slides off and comes straight back once the button has passed.
   These rules sit AFTER the :hover rules on purpose so they win. */
.quote-basket-toggle, .wi-chat-fab, .wi-chat-nudge {
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.quote-basket-toggle.fab-dodge,
.wi-chat-fab.fab-dodge,
.wi-chat-nudge.fab-dodge {
  opacity: 0; pointer-events: none; transform: translateY(90px) scale(0.9);
}
.wi-chat-fab.fab-dodge { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .quote-basket-toggle, .wi-chat-fab, .wi-chat-nudge { transition: opacity 0.15s linear; }
  .quote-basket-toggle.fab-dodge,
  .wi-chat-fab.fab-dodge,
  .wi-chat-nudge.fab-dodge { transform: none; }
}
@keyframes wiPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(222,8,8,0.5); } 50%{ box-shadow:0 0 0 10px rgba(222,8,8,0); } }
.btn-pulse { animation:wiPulse 0.8s ease-out 2; }

/* ── Product page reassurance band ── */
.pdp-assure { display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  border-top:1px solid var(--border); padding-top:34px; }
.pdp-assure-item { text-align:left; }
.pdp-assure-item .pa-ico { width:40px; height:40px; border-radius:10px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.pdp-assure-item .pa-ico svg { width:22px; height:22px; fill:var(--red); }
.pdp-assure-item h3 { font-size:16px; font-weight:700; margin:0 0 6px; color:var(--text-dark); }
.pdp-assure-item p { font-size:14px; line-height:1.6; color:var(--text-mid); margin:0; }
@media (max-width:760px){ .pdp-assure { grid-template-columns:1fr; gap:24px; } }

/* ── Multi-logo upload list (quote + checkout) ── */
.logo-list-head { font-weight:600; margin-bottom:10px; color:var(--text-dark); }
.logo-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--border); }
.logo-row:first-of-type { border-top:none; }
.logo-row .logo-file { flex:1 1 160px; min-width:0; font-size:14px; font-weight:500;
  color:var(--text-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logo-row .logo-place { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-mid); }
.logo-row .logo-place select { padding:6px 8px; border:1px solid var(--border);
  border-radius:6px; font-size:13px; background:#fff; max-width:190px; }
.logo-row .logo-remove { border:none; background:none; cursor:pointer; font-size:20px;
  line-height:1; color:var(--text-mid); padding:2px 6px; border-radius:6px; }
.logo-row .logo-remove:hover { background:#fbeeee; color:var(--red); }
@media (max-width:560px){ .logo-row .logo-place select { max-width:none; } }

/* ── Trust bar (honest proof; review rating is CMS-gated) ── */
.trust-bar { background:var(--white); border-bottom:1px solid var(--border); }
.trust-bar .container { display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; }
.trust-item { display:flex; align-items:center; gap:12px; }
.trust-item > svg { width:26px; height:26px; fill:var(--charcoal); flex-shrink:0; }
.trust-item b { display:block; font-size:14.5px; font-weight:700; color:var(--text-dark); line-height:1.2; }
.trust-item span { font-size:12px; color:var(--text-mid); }
.trust-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; }
.trust-rating { text-decoration:none; }
.trust-rating:hover b { text-decoration:underline; }
.stars { display:inline-flex; gap:1px; vertical-align:middle; }
.stars svg { width:15px; height:15px; fill:#ffb400; }
@media (max-width:1024px){ .trust-divider{ display:none; } .trust-bar .container{ gap:16px 28px; } }
@media (max-width:620px){
  .trust-bar .container{ display:grid; grid-template-columns:1fr 1fr; gap:18px 10px; }
  .trust-item{ flex-direction:column; text-align:center; gap:7px; }
  .trust-item > svg{ width:22px; height:22px; }
  .trust-item b{ font-size:13px; }
  .trust-item span{ font-size:11.5px; }
  .trust-item:last-child{ grid-column:1 / -1; }
}

/* ── Elevated category tiles ── */
.cat-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-tile { position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:all var(--transition); overflow:hidden; }
.cat-tile::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform var(--transition); }
.cat-tile:hover { border-color:var(--charcoal); box-shadow:var(--shadow); transform:translateY(-2px); }
.cat-tile:hover::before { transform:scaleY(1); }
.cat-tile .cat-ico { width:46px; height:46px; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--transition); }
.cat-tile:hover .cat-ico { background:var(--charcoal); }
.cat-tile .cat-ico svg { width:23px; height:23px; fill:var(--charcoal); transition:fill var(--transition); }
.cat-tile:hover .cat-ico svg { fill:var(--cream); }
.cat-tile h3 { font-size:14.5px; font-weight:600; color:var(--text-dark); line-height:1.25; margin:0; }
.cat-tile p { font-size:12px; color:var(--text-mid); margin:2px 0 0; }
.cat-tile .cat-arrow { margin-left:auto; opacity:0; transform:translateX(-6px);
  transition:all var(--transition); color:var(--red); flex-shrink:0; }
.cat-tile:hover .cat-arrow { opacity:1; transform:translateX(0); }
.cat-tile .cat-arrow svg { width:18px; height:18px; fill:var(--red); display:block; }
@media (max-width:1024px){ .cat-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-tiles{ grid-template-columns:1fr; } }

/* ── Work / capabilities showcase (real photography) ── */
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:196px; gap:16px; }
.work-tile { position:relative; border-radius:var(--radius-lg); overflow:hidden; display:block; }
.work-tile img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.work-tile:hover img { transform:scale(1.05); }
.work-tile::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,14,0.88) 0%, rgba(15,15,14,0.30) 34%, rgba(15,15,14,0) 62%); }
.work-tile .work-cap { position:absolute; left:20px; bottom:16px; z-index:2; color:#fff; }
.work-tile .work-cap b { display:block; font-size:16px; font-weight:700; }
.work-tile .work-cap span { font-size:12.5px; opacity:0.9; }
.work-tile--lg { grid-column:span 6; grid-row:span 2; }
.work-tile--sm { grid-column:span 3; grid-row:span 1; }
@media (max-width:768px){ .work-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .work-tile--lg{ grid-column:span 2; grid-row:span 2; } .work-tile--sm{ grid-column:span 1; grid-row:span 1; } }

/* ── Reviews band ── */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 28px; }
.review-card .stars { margin-bottom:14px; }
.review-card p { font-size:15px; line-height:1.65; color:var(--text-dark); margin-bottom:18px; }
.review-card .review-by { font-size:13px; font-weight:700; color:var(--text-dark); }
.review-card .review-by span { display:block; font-weight:400; color:var(--text-mid); font-size:12px; margin-top:2px; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ── Trusted-by logo strip (optional, CMS) ── */
.logo-strip { display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; }
.logo-strip img { height:32px; width:auto; filter:grayscale(1); opacity:0.55; transition:opacity var(--transition); }
.logo-strip img:hover { opacity:0.9; }


/* ════════════════════════════════════════════════════════
   HELP-LED DESIGN — 2026-08-05
   "You've landed in the right place. We'll guide you."
   ════════════════════════════════════════════════════════ */

/* Site-wide help bar (under header, every page) */
.help-bar { background: var(--cream); border-bottom: 1px solid var(--cream-dark); }
.help-bar .container {
  display: flex; align-items: center; justify-content: center; gap: 10px 22px;
  flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; text-align: center;
}
.help-bar .help-msg { font-size: 14px; color: var(--text-dark); }
.help-bar .help-msg b { font-weight: 700; }
.help-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.help-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--charcoal); border: 1.5px solid var(--charcoal); padding: 6px 15px;
  border-radius: 999px; transition: all var(--transition);
}
.help-link:hover { background: var(--charcoal); color: var(--cream); }
.help-link svg { width: 15px; height: 15px; fill: currentColor; }
.help-link--red { background: var(--red); color: #fff; border-color: var(--red); }
.help-link--red:hover { background: #c00707; border-color: #c00707; color: #fff; }
@media (max-width: 700px) {
  .help-bar .help-msg { font-size: 13px; }
  .help-bar .hm-rest { display: none; }
  .help-bar .container { padding-top: 9px; padding-bottom: 9px; gap: 8px 12px; }
  .help-link { padding: 7px 13px; font-size: 13px; }
}

/* Promise pillars (the ethos section) */
.promise-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 44px; }
.promise { text-align: center; padding: 6px; }
.promise .p-ico {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(240,234,223,0.12); display: flex; align-items: center; justify-content: center;
}
.promise .p-ico svg { width: 26px; height: 26px; fill: var(--cream); }
.promise h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.promise p { font-size: 13px; opacity: 0.75; line-height: 1.55; }
@media (max-width: 900px) { .promise-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } }
@media (max-width: 520px) { .promise-grid { grid-template-columns: 1fr; } }

/* Contextual help block (category / product / search) */
.help-block {
  background: var(--cream-light); border: 1px solid var(--cream-dark); border-radius: var(--radius-lg);
  padding: 26px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between;
}
.help-block .hb-text h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.help-block .hb-text p { font-size: 14px; color: var(--text-mid); max-width: 540px; line-height: 1.6; }
.help-block .hb-actions { display: flex; gap: 12px; flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════
   KIT FINDER — 2026-08-05 (modelled on the safety-shoes boot finder)
   ════════════════════════════════════════════════════════ */
.finder-wrap { max-width: 940px; margin: 0 auto; }
.finder-head { text-align: center; margin-bottom: 8px; }
.finder-progress { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.finder-progress-fill { height: 100%; background: var(--red); width: 25%; transition: width 0.35s ease; border-radius: 999px; }
.finder-progress-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-mid); margin-bottom: 28px; }
.finder-step { display: none; }
.finder-step.active { display: block; animation: finderIn 0.3s ease; }
@keyframes finderIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.finder-step h2 { font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.finder-step .fs-sub { text-align: center; color: var(--text-mid); font-size: 15px; margin-bottom: 30px; }
.finder-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.finder-option {
  position: relative; text-align: left; background: var(--white); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 20px; cursor: pointer; transition: all var(--transition);
}
.finder-option:hover { border-color: var(--charcoal); transform: translateY(-2px); box-shadow: var(--shadow); }
.finder-option.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.finder-option .fo-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--cream);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: all var(--transition); }
.finder-option:hover .fo-ico, .finder-option.selected .fo-ico { background: var(--charcoal); }
.finder-option .fo-ico svg { width: 24px; height: 24px; fill: var(--charcoal); transition: fill var(--transition); }
.finder-option:hover .fo-ico svg, .finder-option.selected .fo-ico svg { fill: var(--cream); }
.finder-option h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-dark); }
.finder-option p { font-size: 13px; color: var(--text-mid); line-height: 1.45; }
.finder-option .fo-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.finder-option.selected .fo-check { display: flex; }
.finder-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.finder-back { background: none; color: var(--text-mid); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.finder-back:hover { color: var(--text-dark); }
.finder-back[disabled] { opacity: 0; pointer-events: none; }
.finder-skip { font-size: 13px; color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px; }
/* Result */
.finder-result { display: none; text-align: center; }
.finder-result.active { display: block; animation: finderIn 0.3s ease; }
.finder-result .fr-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.finder-result h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.finder-result .fr-summary { color: var(--text-mid); font-size: 16px; max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
.finder-result .fr-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.finder-result .fr-restart { margin-top: 22px; }
@media (max-width: 780px) { .finder-options { grid-template-columns: 1fr 1fr; } .finder-step h2 { font-size: 24px; } }
@media (max-width: 480px) { .finder-options { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════
   CHAT WIDGET — 2026-08-05 (Baz-style helper, widget-first)
   ════════════════════════════════════════════════════════ */
.wi-chat { position: fixed; bottom: 24px; right: 24px; z-index: 120; }
.wi-chat-fab {
  display: inline-flex; align-items: center; gap: 10px; background: var(--charcoal); color: var(--cream);
  border-radius: 999px; padding: 10px 20px 10px 12px; box-shadow: var(--shadow-lg); cursor: pointer;
  font-size: 15px; font-weight: 600; position: relative; transition: transform var(--transition);
}
.wi-chat-fab:hover { transform: translateY(-2px); }
.wi-chat-fab .wi-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wi-chat-fab .wi-avatar svg { width: 20px; height: 20px; fill: #fff; }
.wi-chat-badge { position: absolute; top: -4px; left: 30px; background: var(--red); color: #fff; font-size: 11px;
  font-weight: 700; min-width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 2px solid var(--white); }
.wi-chat.open .wi-chat-fab { display: none; }
.wi-chat-panel { position: absolute; bottom: 0; right: 0; width: 360px; max-width: calc(100vw - 32px);
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 100px)); animation: finderIn 0.25s ease; }
.wi-chat-head { background: var(--charcoal); color: var(--cream); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.wi-chat-head .wi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wi-chat-head .wi-avatar svg { width: 22px; height: 22px; fill: #fff; }
.wi-chat-head b { font-size: 15px; font-weight: 700; display: block; line-height: 1.2; }
.wi-chat-head span.role { font-size: 12px; opacity: 0.7; }
.wi-chat-head .wi-chat-close { margin-left: auto; background: none; color: var(--cream); font-size: 22px; opacity: 0.7; line-height: 1; padding: 4px; }
.wi-chat-head .wi-chat-close:hover { opacity: 1; }
.wi-chat-body { padding: 16px; overflow-y: auto; flex: 1; background: var(--cream-light); }
.wi-chat-msg { font-size: 14px; line-height: 1.55; padding: 11px 14px; border-radius: 14px; margin-bottom: 10px; max-width: 85%; }
.wi-chat-msg.bot { background: var(--white); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text-dark); }
.wi-chat-msg.user { background: var(--charcoal); color: var(--cream); margin-left: auto; border-bottom-right-radius: 4px; }
.wi-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.wi-chat-chip { font-size: 13px; font-weight: 600; color: var(--charcoal); background: var(--white);
  border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: all var(--transition); }
.wi-chat-chip:hover { border-color: var(--charcoal); background: var(--cream); }
.wi-chat-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wi-chat-cta a { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; text-align: center; }
.wi-chat-cta a.primary { background: var(--red); color: #fff; }
.wi-chat-cta a.ghost { border: 1.5px solid var(--charcoal); color: var(--charcoal); }
.wi-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--white); }
.wi-chat-input input { flex: 1; border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 14px; }
.wi-chat-input input:focus { border-color: var(--charcoal); outline: none; }
.wi-chat-input button { background: var(--red); color: #fff; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wi-chat-input button svg { width: 18px; height: 18px; fill: #fff; }
/* Quote-basket FAB moves to bottom-left so it never collides with chat */
.quote-basket-toggle { left: 24px; right: auto; }
@media (max-width: 480px) { .wi-chat-fab .wi-chat-fab-label { display: none; } .wi-chat-fab { padding: 12px; } }

.wi-chat-panel[hidden] { display: none !important; }


/* ── Brands A–Z page (2026-08-05) ── */
.brand-letter { font-size: 20px; font-weight: 700; color: var(--red); margin: 30px 0 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brand-card { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); transition: all var(--transition); }
.brand-card:hover { border-color: var(--charcoal); box-shadow: var(--shadow); transform: translateY(-1px); }
.brand-card b { font-size: 14.5px; font-weight: 600; color: var(--text-dark); }
.brand-card .bc-count { font-size: 12px; color: var(--text-mid); white-space: nowrap; }
.brand-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.brand-jump a { font-size: 13px; font-weight: 600; color: var(--charcoal); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 10px; transition: all var(--transition); }
.brand-jump a:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .brand-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════
   ENERGY PASS — bigger, bolder, more in-your-face (2026-08-05)
   ════════════════════════════════════════════════════════ */
h1, h2 { letter-spacing: -0.6px; }
.hero h1 { font-size: clamp(46px, 6.4vw, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -1.6px; }
.hero p { font-size: 19px; }
.section-header h2 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.9px; line-height: 1.06; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 2.4px; }
.finder-head h1, .finder-step h2 { font-weight: 800; letter-spacing: -0.8px; }
.finder-step h2 { font-size: clamp(28px, 3.6vw, 40px); }
.finder-result h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.product-card-name { font-size: 15.5px; font-weight: 700; }
.cat-tile h3 { font-size: 15px; font-weight: 700; }
.btn { font-weight: 700; }
.btn--lg { font-size: 17px; padding: 18px 46px; letter-spacing: 0.3px; }
.brand-letter { font-size: 22px; font-weight: 800; }

/* Section heading red underline: a touch bolder */
.section-header h2::after { width: 56px; height: 4px; }

/* ── Winston: bigger, bolder, red, and attention-grabbing ── */
.wi-chat-fab {
  background: var(--red); color: #fff; padding: 14px 26px 14px 14px; font-size: 17px; font-weight: 700;
  animation: wiPulse 2.6s ease-in-out infinite;
}
.wi-chat-fab:hover { background: #c00707; transform: translateY(-3px) scale(1.02); }
.wi-chat-fab .wi-avatar { width: 42px; height: 42px; background: #fff; }
.wi-chat-fab .wi-avatar svg { width: 24px; height: 24px; fill: var(--red); }
.wi-chat-badge { background: var(--charcoal); color: #fff; left: 34px; border-color: #fff; }
@keyframes wiPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,0.22); }
  50% { box-shadow: 0 10px 40px rgba(222,8,8,0.55); }
}
@media (prefers-reduced-motion: reduce) { .wi-chat-fab { animation: none; } }


/* ── Sticky help-bar CTA — always there as you scroll (desktop) ── */
@media (min-width: 768px) and (min-height: 900px) {
  .help-bar { position: sticky; top: 85px; z-index: 99; }
  .catalogue-sidebar, .quote-summary { top: 150px; }
}


/* ── Help bar → red-accented action bar that slims on scroll (2026-08-05) ── */
.help-bar { border-bottom: 2px solid rgba(222,8,8,0.28);
  transition: padding .18s ease, box-shadow .18s ease, background .18s ease; }
.help-bar .help-msg b { font-weight: 800; }
.help-quote { background: var(--red); color: #fff; border-color: var(--red); font-weight: 800; }
.help-quote:hover { background: #c00707; border-color: #c00707; color: #fff; }
.help-bar.scrolled { border-bottom-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,0.10); background: #f6ece7; }
.help-bar.scrolled .container { padding-top: 7px; padding-bottom: 7px; }
.help-bar.scrolled .hm-rest { display: none; }
.help-bar.scrolled .help-link { padding: 5px 13px; }

/* ── Scroll-reveal (progressive; hidden only when JS adds .reveal) ───────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Hero: guide-first CTA ──────────────────────────────────────────────── */
.btn--kit, .btn--kit:hover { background: var(--red); color: #fff; }
.btn--kit { box-shadow: 0 10px 26px rgba(198,40,40,.4); font-weight: 800; }
.btn--kit:hover { filter: brightness(1.06); }
.hero-quote-link { color: rgba(255,255,255,.9); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hero-quote-link:hover { color: #fff; }

/* ── Proactive Winston nudge ────────────────────────────────────────────── */
.wi-chat-nudge {
  position: fixed; right: 22px; bottom: 92px; z-index: 998;
  max-width: 268px; text-align: left; cursor: pointer;
  background: #fff; color: var(--text-dark, #1a2b22);
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px 16px 4px 16px;
  padding: 14px 34px 14px 16px; font-size: 14px; line-height: 1.4; font-weight: 500;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.wi-chat-nudge.in { opacity: 1; transform: none; }
.wi-nudge-x { position: absolute; top: 6px; right: 10px; font-size: 18px; line-height: 1; color: #9aa8a0; padding: 2px 4px; }
.wi-nudge-x:hover { color: #33443b; }
@media (max-width: 600px) { .wi-chat-nudge { right: 14px; bottom: 84px; max-width: 220px; } }

/* ── Buyer guides ───────────────────────────────────────────────────────── */
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.guide-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: box-shadow .2s, transform .2s; }
.guide-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.guide-card h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; color: var(--charcoal); }
.guide-card p { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.guide-more { font-weight: 700; color: var(--red); font-size: 14px; }
.guide-article { max-width: 760px; }
.guide-lede { font-size: 19px; line-height: 1.6; color: var(--text-mid); margin: 0 0 26px; }
.guide-body h2 { font-size: 24px; font-weight: 800; margin: 30px 0 12px; letter-spacing: -.3px; }
.guide-body p { font-size: 16px; line-height: 1.75; margin-bottom: 14px; }
.guide-body strong { color: var(--charcoal); }
.guide-faqs { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 26px; }
.guide-faqs h2 { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.guide-faqs .faq-item { margin-bottom: 18px; }
.guide-faqs .faq-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.guide-faqs .faq-item p { font-size: 15px; line-height: 1.65; color: var(--text-mid); }
.design-online-btn { display: inline-flex; align-items: center; justify-content: center; }


/* ── PDP thumbnails: wrap on desktop, swipe strip on mobile ── */
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-detail > div { min-width: 0; }
@media (max-width: 700px) {
  .pdp-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .pdp-thumbs img { flex: 0 0 auto; }
}

/* ── Sticky mobile CTA bar on product pages ── */
.pdp-sticky { display: none; }
@media (max-width: 820px) {
  .pdp-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    background: #fff; border-top: 1px solid var(--border); padding: 10px 14px;
    gap: 14px; align-items: center; justify-content: space-between;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.10); }
  .pdp-sticky.hidden { display: none; }
  .pdp-sticky .ps-price { font-weight: 800; font-size: 16px; line-height: 1.2; }
  .pdp-sticky .ps-price small { display: block; font-weight: 500; font-size: 11px; color: var(--text-mid); }
  .pdp-sticky .ps-btn { flex: 1; max-width: 230px; padding: 12px 16px; }
  body:has(.pdp-sticky:not(.hidden)) .wi-chat { bottom: 84px; }
  body:has(.pdp-sticky:not(.hidden)) .wi-chat-nudge { bottom: 148px; }
}


/* ── Photo-led category tiles (homepage, top ranges) ── */
.cat-photo-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-photo-tile { display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  transition:all var(--transition); }
.cat-photo-tile:hover { border-color:var(--charcoal); box-shadow:var(--shadow); transform:translateY(-2px); }
.cpt-media { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;
  background:var(--cream-light); overflow:hidden; }
.cpt-media img { width:100%; height:100%; object-fit:contain; padding:14px;
  mix-blend-mode:multiply; transition:transform var(--transition); }
.cat-photo-tile:hover .cpt-media img { transform:scale(1.045); }
.cpt-media .cpt-ico { width:54px; height:54px; }
.cpt-media .cpt-ico svg { width:100%; height:100%; fill:var(--text-mid); }
.cpt-body { padding:13px 16px 15px; border-top:1px solid var(--border); }
.cpt-body h3 { font-size:15.5px; font-weight:700; color:var(--text-dark); line-height:1.25; }
.cpt-body p { font-size:12.5px; color:var(--text-mid); margin-top:2px; }
.cat-all-tile { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; padding:16px 22px; background:var(--charcoal); color:var(--cream);
  border-radius:var(--radius-lg); font-size:14px; transition:all var(--transition); }
.cat-all-tile b { font-weight:800; font-size:16px; margin-right:10px; color:#fff; }
.cat-all-tile:hover { background:#000; transform:translateY(-1px); }
.cat-all-arrow { font-size:20px; font-weight:800; color:var(--red); }
@media (max-width:820px) {
  .cat-photo-tiles { grid-template-columns:1fr 1fr; gap:12px; }
  .cpt-body { padding:10px 12px 12px; }
  .cpt-body h3 { font-size:14px; }
  .cpt-media img { padding:10px; }
}

/* ── All-categories hub page ── */
.cat-hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.cat-hub-card { background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:all var(--transition); }
.cat-hub-card:hover { border-color:var(--charcoal); box-shadow:var(--shadow); }
.cat-hub-media { display:flex; align-items:center; justify-content:center; aspect-ratio:16/9;
  background:var(--cream-light); overflow:hidden; }
.cat-hub-media img { width:100%; height:100%; object-fit:contain; padding:12px; mix-blend-mode:multiply; }
.cat-hub-body { padding:16px 18px 18px; }
.cat-hub-body h2 { font-size:18px; font-weight:800; letter-spacing:-0.2px; }
.cat-hub-body h2 a { color:var(--text-dark); }
.cat-hub-body h2 a:hover { color:var(--red); }
.cat-hub-body > p { font-size:12.5px; color:var(--text-mid); margin:2px 0 10px; }
.cat-hub-subs { display:flex; flex-wrap:wrap; gap:7px; }
.cat-hub-subs a { font-size:12.5px; font-weight:600; color:var(--text-dark);
  background:var(--cream-light); border:1px solid var(--border); border-radius:999px;
  padding:4px 11px; transition:all var(--transition); }
.cat-hub-subs a:hover { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.cat-hub-subs a.cat-hub-more { background:transparent; border-style:dashed; color:var(--text-mid); }
@media (max-width:900px) { .cat-hub-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .cat-hub-grid { grid-template-columns:1fr; gap:14px; } }


/* ── "Brands we work with" logo scroller ── */
.brands-strip { background:var(--white); border-bottom:1px solid var(--border); padding:26px 0 22px; overflow:hidden; }
.brands-strip-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.brands-strip-head .eyebrow { margin:0; }
.brands-strip-all { font-size:13px; font-weight:700; color:var(--text-dark); text-decoration:underline; text-underline-offset:3px; }
.brands-strip-all:hover { color:var(--red); }
.brands-marquee { display:flex; width:max-content; animation:brands-scroll 36s linear infinite; }
.brands-marquee:hover { animation-play-state:paused; }
.brands-track { display:flex; align-items:center; gap:56px; padding-right:56px; }
.brand-logo { display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.brand-logo img { height:40px; width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1); opacity:0.72; transition:all var(--transition); }
.brand-logo:hover img { filter:none; opacity:1; }
@keyframes brands-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:700px) {
  .brands-track { gap:38px; padding-right:38px; }
  .brand-logo img { height:30px; max-width:120px; }
  .brands-marquee { animation-duration:28s; }
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee { animation:none; flex-wrap:wrap; width:auto; }
  .brands-marquee .brands-track[aria-hidden] { display:none; }
  .brands-track { flex-wrap:wrap; gap:28px 40px; }
}


/* ── 0% VAT chip (zero-rated safety boots & helmets) ── */
.zero-vat-chip { display:inline-block; vertical-align:middle; margin-left:6px;
  background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:0.4px; padding:2px 9px; }
.product-card-meta .zero-vat-chip { font-size:10px; padding:1px 7px; margin-left:4px; }


/* ── Products nav hover dropdown ── */
.nav-drop { position:relative; display:inline-flex; }
.nav-drop > a { display:inline-flex; align-items:center; gap:5px; }
.nav-caret { opacity:.6; }
.nav-drop-panel { position:absolute; top:100%; left:-18px; padding-top:14px; display:none; z-index:150; }
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel { display:block; }
.nav-drop-panel { min-width:440px; }
.nav-drop-panel > .nd-col, .nav-drop-panel > .nd-all { display:block; }
.nav-drop-panel { filter:drop-shadow(0 10px 24px rgba(0,0,0,0.18)); }
.nav-drop-panel .nd-col { background:var(--white); padding:18px 22px 10px; }
.nav-drop-panel .nd-col:first-child { border-radius:10px 10px 0 0; }
.nav-drop-panel .nd-col b { display:block; font-size:11px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--text-mid); margin-bottom:8px; }
.nav-drop-panel .nd-col a { display:inline-block; width:48%; padding:5px 0; font-size:14px;
  color:var(--text-dark); font-weight:500; }
.nav-drop-panel .nd-col a:hover { color:var(--red); }
.nav-drop-panel .nd-all { background:var(--white); border-top:1px solid var(--border);
  border-radius:0 0 10px 10px; padding:12px 22px; font-size:13.5px; font-weight:700;
  color:var(--red); }
.nav-drop-panel .nd-all:hover { background:var(--cream-light); }
@media (max-width: 1023px) { .nav-drop-panel { display:none !important; } .nav-caret { display:none; } }

.wi-chat-followup { opacity:.65; font-size:12.5px; }


/* ── Size grid: quantity box under each size ── */
.size-option.size-cell { display:inline-flex; flex-direction:column; align-items:center;
  gap:4px; cursor:pointer; padding:8px 10px 9px; min-width:58px; }
.size-cell .size-qty { width:52px; padding:5px 4px; text-align:center; font-size:13px;
  border:1.5px solid var(--border); border-radius:6px; -moz-appearance:textfield; }
.size-cell .size-qty::-webkit-outer-spin-button, .size-cell .size-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.size-cell .size-qty:focus { border-color:var(--charcoal); outline:none; }
.size-cell.selected { border-color:var(--red); }
.size-cell.selected .size-qty { border-color:var(--red); font-weight:700; }
.size-total { margin-top:10px; font-size:13.5px; font-weight:700; color:var(--text-dark); }