/* product-grid-cards.css */
/* ============================================================
   Optica — BB Post Grid product card styling
   Add to: WP Admin → Appearance → Customise → Additional CSS
   ============================================================ */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --green-900:   #0A4A25;
  --green-800:   #0F824A;
  --green-700:   #13A35A;
  --green-600:   #2DB870;
  --green-500:   #45C884;
  --green-100:   #D4EFDF;
  --green-050:   #EAF7EF;

  --orange:      #E85D2C;
  --orange-dark: #D8551A;
  --orange-tint: #FCE6DA;

  --logo-luxe:        #6B4E9E;
  --picture-perfect:  #2E9E9C;
  --bespoke:          #B0276E;

  --ink:         #0C1F16;
  --text:        #1F2B24;
  --text-muted:  #566963;
  --paper:       #F5F5F2;
  --cream:       #F0EBDF;
  --white:       #FFFFFF;
  --border:      #E4E0D6;
  --border-strong: #B7B3A6;

  --radius:      14px;
  --radius-lg:   24px;
  --shadow:      0 22px 50px -18px rgba(12,31,22,0.22);
  --container:   1280px;
  --ease:        cubic-bezier(.2,.7,.2,1);
  --dur:         220ms;
}

/* ---- Grid: override BB float layout + kill clearfix ---- */
.fl-post-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  float: none !important;
  width: 100% !important;
  align-items: stretch !important;
}
.fl-post-grid::before,
.fl-post-grid::after {
  display: none !important;
}
@media (min-width: 1100px) {
  .fl-post-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 580px) {
  .fl-post-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- BB column wrapper: let CSS Grid control width ---- */
.fl-post-grid .fl-post-column {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ---- Card wrapper ---- */
.fl-post-grid-post {
  background: #fff !important;
  border: 1px solid #E4E0D6 !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              border-color 220ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms cubic-bezier(.2,.7,.2,1) !important;
  position: relative !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.fl-post-grid-post:hover {
  transform: translateY(-2px) !important;
  border-color: #13A35A !important;
  box-shadow: 0 14px 30px -16px rgba(12,31,22,0.18) !important;
}

/* ---- Image area: aspect-ratio 4/3, padding gives breathing room ---- */
.fl-post-grid-post .fl-post-image {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: unset !important;
  background: #fff !important;
  border-bottom: 1px solid #E4E0D6 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10% !important;
  width: 100% !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.fl-post-grid-post .fl-post-image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
/* Override dsqpi: it sets aspect-ratio:1/1 and height:auto on img */
.fl-post-grid-post .fl-post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: unset !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Image background: white for all cards */

/* Hide hover image + ACF gallery */
.fl-post-grid-post .hoverimagert { display: none !important; }
.fl-post-grid-post .gallerer     { display: none !important; }

/* ---- Text body ---- */
.fl-post-grid-post .fl-post-text {
  padding: 16px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
}

/* ---- Stock status + range pill row ---- */
.fl-post-grid-post .product-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

/* Stock status dot pill */
.fl-post-grid-post .stock-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.fl-post-grid-post .stock-status::before {
  display: none !important;
}
.fl-post-grid-post .stock-status.in-stock    { color: #13A35A !important; }
.fl-post-grid-post .stock-status.backorder   { color: #D8551A !important; }
.fl-post-grid-post .stock-status.out-of-stock { color: #566963 !important; }

/* Range pills */
.fl-post-grid-post .range-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.fl-post-grid-post .range-pill::before {
  display: none !important;
}
.fl-post-grid-post .range-pill.logo-luxe {
  color: #6B4E9E !important;
  background: rgba(107, 78, 158, 0.10) !important;
}
.fl-post-grid-post .range-pill.picture-perfect {
  color: #2E9E9C !important;
  background: rgba(46, 158, 156, 0.10) !important;
}
.fl-post-grid-post .range-pill.bespoke {
  color: #B0276E !important;
  background: rgba(176, 39, 110, 0.10) !important;
}

/* ---- Title ---- */
.fl-post-grid-post .fl-post-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0C1F16 !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.005em !important;
}
.fl-post-grid-post .fl-post-title a {
  color: #0C1F16 !important;
  text-decoration: none !important;
}
.fl-post-grid-post .fl-post-title a:hover {
  color: #13A35A !important;
}

/* ---- Specs line (short description) ---- */
.fl-post-grid-post .product-specs {
  font-size: 16px !important;
  color: #566963 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}

/* ---- Price / MOQ block ---- */
.fl-post-grid-post .notso-post-meta {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #E4E0D6 !important;
}

/* Logged-in: "FROM $xx.xx / ex GST" */
.fl-post-grid-post .fromerer {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  margin: 0 0 4px !important;
}
.fl-post-grid-post .fromerer .fromerer_label {
  font-size: 16px !important;
  color: #566963 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.fl-post-grid-post .fromerer .fromerer_span {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0C1F16 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}
.fl-post-grid-post .fromerer .fromerer_span strong {
  font-weight: 700 !important;
}
.fl-post-grid-post .fromerer .price-meta-unit {
  font-size: 16px !important;
  color: #566963 !important;
  font-weight: 400 !important;
  align-self: flex-end !important;
}

/* Logged-out: lock icon + "Log in for pricing" */
.fl-post-grid-post .fromerer_login {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0F824A !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
}
.fl-post-grid-post .fromerer_login svg {
  flex-shrink: 0 !important;
  color: #0F824A !important;
}
.fl-post-grid-post .fromerer_login:hover {
  color: #13A35A !important;
}

/* MOQ line */
.fl-post-grid-post .minirer {
  margin: 0 !important;
  font-size: 16px !important;
  color: #566963 !important;
  font-weight: 500 !important;
}
.fl-post-grid-post .minirer .minirer_span {
  font-weight: 700 !important;
  color: #0C1F16 !important;
}

/* ============================================================
   Sidebar accordion
   ============================================================ */

.filter-block {
  background: #fff;
  border: 1px solid #E4E0D6;
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.filter-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0F824A;
  margin: 0 0 14px;
}
/* Cat tree base */
.cat-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tree > li {
  margin: 0;
}

/* ---- Section header (All Branded / Retail-ready / Workshop) ---- */
.cat-section {
  border-top: 1px solid #E4E0D6;
  padding-top: 12px;
  margin-top: 8px;
}
.cat-section:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.cat-section-link {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F824A;
  text-decoration: none;
  padding: 4px 4px 10px;
}
.cat-section-link:hover {
  color: #13A35A;
}

/* ---- Always-open sub-list under each section header ---- */
.cat-sub--open {
  display: block !important;
  margin: 0;
  padding: 0;
  border-left: 0;
}

/* ---- Second-level accordion buttons ---- */
.cat-toplevel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #0C1F16;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.cat-toplevel:hover {
  background: #EAF7EF;
}
.cat-toplevel .chev {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.45;
}
.cat-toplevel[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* ---- Third-level leaf links ---- */
.cat-sub {
  list-style: none;
  margin: 2px 0 6px 10px;
  padding: 0 0 0 10px;
  display: none;
  border-left: 1px solid #E4E0D6;
}
.cat-toplevel[aria-expanded="true"] + .cat-sub {
  display: block;
}
.cat-sub li {
  margin: 0;
}
.cat-sub a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: #566963;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cat-sub a:hover {
  background: #EAF7EF;
  color: #0F824A;
}
/* Selected = the hover tint plus bold text and a green bar on the left; hover stays the plain tint (2026-09-02) */
.cat-sub a.is-active {
  background: #EAF7EF;
  color: #0F824A;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #13A35A;
}
.cat-sub a.is-active:hover {
  background: #DDF1E5;
}

/* ============================================================
   Sidebar filter blocks
   ============================================================ */

.filter-block {
  background: #fff;
  border: 1px solid #E4E0D6;
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 12px;
}
.filter-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #13A35A;
  margin: 0 0 14px;
}
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.check-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 0;
  color: #0C1F16;
}
.check-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #13A35A;
  cursor: pointer;
  flex-shrink: 0;
}
.check-list .count {
  margin-left: auto;
  font-size: 13px;
  color: #566963;
}
.filter-clear {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0C432A;
  background: transparent;
  border: 1px solid #E4E0D6;
  border-radius: 999px;
  padding: 10px 18px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.filter-clear:hover {
  border-color: #13A35A;
  color: #13A35A;
}

/* ============================================================
   Sort bar
   ============================================================ */

.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #E4E0D6;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.results-count {
  font-size: 16px;
  color: #566963;
}
.results-count strong {
  color: #0C1F16;
  font-weight: 700;
}
.sort-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #566963;
}
.sort-select select {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #0C1F16;
  background: #fff;
  border: 1px solid #E4E0D6;
  border-radius: 8px;
  padding: 8px 36px 8px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23566963' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sort-select select:focus {
  outline: 2px solid #13A35A;
  outline-offset: 1px;
  border-color: #13A35A;
}
.view-toggle {
  display: inline-flex;
  background: #F5F2EC;
  border: 1px solid #E4E0D6;
  border-radius: 8px;
  padding: 3px;
}
.view-toggle button {
  background: transparent;
  border: 0;
  padding: 7px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #566963;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle button:hover { color: #0C1F16; }
.view-toggle button.is-active {
  background: #fff;
  color: #0C1F16;
  box-shadow: 0 1px 3px rgba(12,31,22,0.10);
}
.view-toggle svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .sort-bar { padding: 12px 14px; }
  .results-count { font-size: 14px; }
  .sort-controls { gap: 10px; }
}

/* ============================================================
   List view
   ============================================================ */

body.view-list .fl-post-grid,
body.view-list div.products {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
body.view-list article.product,
body.view-list .fl-post-grid-post {
  flex-direction: row !important;
  align-items: flex-start !important;
}
body.view-list .product-media,
body.view-list .fl-post-grid-post .fl-post-image {
  width: 220px !important;
  height: 165px !important;
  min-height: unset !important;
  aspect-ratio: unset !important;
  padding: 8px !important;
  flex-shrink: 0 !important;
  border-bottom: 0 !important;
  border-right: 1px solid #E4E0D6 !important;
}
body.view-list .fl-post-grid-post .fl-post-image a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.view-list .fl-post-grid-post .fl-post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 600px) {
  body.view-list .product-media,
  body.view-list .fl-post-grid-post .fl-post-image { width: 140px !important; height: 105px !important; }
}
body.view-list .product-body,
body.view-list .fl-post-text {
  padding: 18px 22px !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 4px 24px !important;
  flex: 1 !important;
}
body.view-list .product-title-wrap {
  flex: 1 1 320px;
  min-width: 0;
}
body.view-list .product-foot {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.view-list .fl-post-grid-post .notso-post-meta {
  flex-basis: 100% !important;
  margin-top: 8px !important;
}

/* ============================================================
   Page header band
   ============================================================ */

.page-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3.2vw, 44px);
}
.breadcrumb {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.breadcrumb a {
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.15s ease;
}
.breadcrumb a:hover { color: var(--green-700); text-decoration: none; }
.breadcrumb .sep { opacity: 0.5; font-size: 12px; }
.breadcrumb .here { color: var(--ink); font-weight: 600; }
.page-header-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
}
@media (min-width: 900px) {
  .page-header-inner { grid-template-columns: 1.5fr 1fr; gap: 48px; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-800);
  background: var(--green-050);
  border: 1px solid #C9E5D2;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-700);
}
.page-lede {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}
.page-lede strong { color: var(--ink); font-weight: 700; }
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-stat .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mini-stat .lbl {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ============================================================
   Catalogue layout
   ============================================================ */

.catalogue {
  padding: clamp(28px, 3.2vw, 44px) 0 clamp(40px, 4.5vw, 68px);
}
.catalogue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .catalogue-grid { grid-template-columns: 280px 1fr; gap: 40px; }
}
@media (min-width: 900px) {
  .sidebar {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-right: 6px;
  }
}

/* ============================================================
   Price filter
   ============================================================ */

.price-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.price-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-input label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.price-input input {
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.price-input input:focus {
  outline: 2px solid var(--green-700);
  outline-offset: -1px;
  border-color: var(--green-700);
}
.price-track {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 6px 6px 0;
}
.price-track .fill {
  position: absolute;
  left: 12%; right: 22%;
  top: 0; bottom: 0;
  background: var(--green-700);
  border-radius: 2px;
}
.price-track .handle {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  background: var(--white);
  border: 2px solid var(--green-700);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(12,31,22,0.15);
}
.price-track .handle.left  { left: 12%; }
.price-track .handle.right { left: 78%; }
.price-currency { margin-top: 12px; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   Native product grid (WooCommerce / PDP related products)
   ============================================================ */

.stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stock-status::before {
  display: none;
}
.stock-status.in-stock   { color: var(--green-700); }
.stock-status.backorder  { color: var(--orange-dark); }
.stock-status.out-of-stock { color: var(--text-muted); }

/* Scoped to div.products only — WooCommerce also puts a bare "products" class
   on the outer <section class="related products/upsells/cross-sells"> wrapper,
   and an unscoped .products rule turns that section's own children (heading,
   sort bar, product grid) into grid columns instead of stacking them. */
div.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 580px)  { div.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { div.products { grid-template-columns: repeat(3, 1fr); } }

article.product {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  position: relative;
  text-decoration: none;
  color: inherit;
}
article.product:hover {
  border-color: var(--green-700);
  box-shadow: 0 14px 30px -16px rgba(12,31,22,0.18);
}
article.product .product-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -999em;
  overflow: hidden;
}
article.product .product-link:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: -2px;
  border-radius: var(--radius);
}
article.product .product-foot { position: relative; z-index: 2; }
.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.product-media .product-img {
  width: 70%; height: 78%;
  display: grid; place-items: center;
}
.product-media .product-img svg { width: 100%; height: 100%; max-width: 180px; max-height: 160px; }
/* Real product images in card media area — fill with cover */
.product-media .product-media-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.product-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.product-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.product-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.product-specs {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}
.product-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.product-price-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-800);
  text-decoration: none;
  transition: color 0.15s ease;
}
.product-price-out:hover { color: var(--green-700); }
.product-price-out svg { width: 13px; height: 13px; }
.product-price-in { display: none; flex-direction: column; gap: 2px; }
.product-price-in .price {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.product-price-in .price-meta { font-size: 12px; color: var(--text-muted); }
body.is-logged-in .product-price-out { display: none; }
body.is-logged-in .product-price-in  { display: flex; }

.product-moq {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
  flex-wrap: wrap;
}
.product-moq strong { color: var(--ink); font-weight: 700; }
.product-moq .sep { opacity: 0.4; }
.product-foot.has-moq { align-items: flex-start; }
.product-foot.has-moq > .price-stack { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
.pagination a:hover { background: var(--green-050); color: var(--green-800); }
.pagination .is-current { background: var(--green-700); color: #fff; }
.pagination .pg-prev, .pagination .pg-next { gap: 6px; }
.pagination .pg-prev svg, .pagination .pg-next svg { width: 14px; height: 14px; }
.pagination .pg-disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================
   Announcement bar
   ============================================================ */

.bar {
  background: var(--green-050);
  border-bottom: 1px solid #DCEFE2;
  font-size: 13.5px;
  color: var(--green-800);
}
.bar-inner {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 28px;
  align-items: center;
  padding: 11px 28px;
  max-width: var(--container);
  margin: 0 auto;
}
.bar a { font-weight: 600; color: var(--green-800); }
.bar a:hover { text-decoration: none; }
.bar .welcome { font-weight: 700; color: var(--green-800); }
.bar .trade-tag { font-weight: 700; color: var(--green-800); letter-spacing: 0.02em; }
.bar .visit a { color: var(--green-700); }
.bar .phone { white-space: nowrap; }
.bar a.account-btn {
  background: var(--green-700);
  color: #fff;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px -4px rgba(15,130,74,0.45);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bar a.account-btn:hover {
  background: var(--green-800);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(15,130,74,0.55);
}

/* ============================================================
   Main nav
   ============================================================ */

.nav { background: var(--green-700); color: #fff; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 28px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo { font-weight: 700; font-size: 28px; letter-spacing: 0.02em; color: #fff; }
.logo sup { font-size: 11px; vertical-align: super; opacity: 0.85; }
.menu { display: flex; gap: 28px; margin-left: 36px; font-weight: 600; font-size: 16px; }
.menu a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; }
.menu a::after { content: "â–¾"; font-size: 11px; opacity: 0.85; }
.menu a.no-caret::after { display: none; }
.menu .menu-catalogue {
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  transition: background 0.15s ease;
}
.menu .menu-catalogue:hover { background: rgba(255,255,255,0.18); }
.menu .new-pill {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-weight: 600; }
.book-call {
  background: #fff;
  color: var(--green-800);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cart { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; }

/* ============================================================
   Help / Get in touch section
   ============================================================ */

.help { background: var(--cream); padding: clamp(40px, 4.5vw, 68px) 0; }
.help .section-head { text-align: center; max-width: 600px; margin: 0 auto 32px; }
.help .section-head h2 { margin-top: 18px; }
.help .section-head .lede { margin: 16px auto 0; }
.section-head { max-width: 760px; margin: 0 0 28px; }
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 18px 0 0;
}
.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--text-muted); line-height: 1.55; max-width: 58ch; margin: 0; }
.help-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px)  { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .help-grid { grid-template-columns: repeat(4, 1fr); } }
.help-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  position: relative;
}
.help-card:hover {
  transform: translateY(-2px);
  border-color: var(--green-700);
  box-shadow: 0 14px 30px -16px rgba(12,31,22,0.18);
}
.help-card-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; }
.help-card-icon svg { width: 18px; height: 18px; }
.help-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 0; color: var(--ink); }
.help-card p { font-size: 16px; line-height: 1.45; color: var(--text-muted); margin: 0; flex: 1; }
.help-card-action {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-700);
  font-weight: 600;
  font-size: 16px;
}
.help-card-action svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.help-card:hover .help-card-action svg { transform: translateX(3px); }
.help-card-static { cursor: default; }
.help-card-static:hover { transform: none; border-color: var(--border); box-shadow: none; }
.help-card-phones { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.help-card-phones a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--green-700);
  transition: color 0.15s ease;
}
.help-card-phones a:hover { color: var(--green-800); text-decoration: none; }
.help-card-phones strong {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--green-050);
  border: 1px solid #C9E5D2;
  padding: 3px 7px;
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
}
.help-card .coming-soon {
  position: absolute;
  top: 22px; right: 22px;
  background: var(--orange-tint);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

/* ============================================================
   Footer
   ============================================================ */

.footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: clamp(40px, 5vw, 72px) 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } }
.footer-brand .footer-logo { font-weight: 700; font-size: 28px; letter-spacing: 0.02em; color: #fff; text-decoration: none; }
.footer-brand .footer-logo sup { font-size: 11px; vertical-align: super; opacity: 0.7; }
.footer-brand p { font-size: 16px; line-height: 1.6; margin: 14px 0 18px; color: rgba(255,255,255,0.65); max-width: 36ch; }
.footer-contact { display: flex; flex-direction: column; gap: 3px; font-size: 16px; }
.footer-contact a { color: #fff; text-decoration: none; opacity: 0.9; display: inline-flex; align-items: center; gap: 8px; }
.footer-contact a:hover { opacity: 1; text-decoration: none; }
.footer-contact strong { font-weight: 700; opacity: 0.7; min-width: 30px; }
.footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: #fff; text-decoration: none; font-size: 16px; opacity: 0.85; transition: opacity 0.15s ease; }
.footer-col a:hover { opacity: 1; text-decoration: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 28px;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
.footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-bottom-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; }
.footer-bottom-links a:hover { color: #fff; }
.footer-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.footer-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   Mobile rules
   ============================================================ */

@media (max-width: 720px) {
  .bar, .menu, .book-call { display: none; }
  .nav-inner { padding: 14px 16px; }
  .mini-stats { display: none; }
}

/* ============================================================
   PRODUCT DETAIL PAGE (PDP)
   ============================================================ */

.pdp-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.pdp { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 4.5vw, 64px); }
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) { .pdp-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }

/* Media area */
.pdp-media { display: flex; flex-direction: column; gap: 16px; }
.pdp-pane  { display: flex; flex-direction: column; gap: 12px; }
.pdp-main-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #EAF2F6, #DDEAF1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pdp-main-image img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumb {
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pdp-thumb:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.pdp-thumb.is-active { border-color: var(--green-700); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb.tint-amber { background: linear-gradient(160deg, #F8EFE0, #F1E4CB); }
.pdp-thumb.tint-cream { background: linear-gradient(160deg, #F5F0E2, #EBE3CF); }
.pdp-thumb.tint-blue  { background: linear-gradient(160deg, #EAF2F6, #DDEAF1); }
.pdp-thumb.tint-grey  { background: linear-gradient(160deg, #EFEEEA, #E1DFD7); }

/* Info panel */
.pdp-info { display: flex; flex-direction: column; gap: 18px; }
.pdp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp-info h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 0; line-height: 1.1; color: var(--ink); }
.pdp-code { font-size: 14px; color: var(--text-muted); margin: -8px 0 0; }
.pdp-code strong { color: var(--text); font-weight: 700; }

/* Auth-aware price */
.pdp-price {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.pdp-price-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-800);
  font-weight: 700;
  font-size: 16px;
}
.pdp-price-out svg { width: 16px; height: 16px; }
.pdp-price-out:hover { color: var(--green-700); }
.pdp-price-in { display: none; flex-direction: column; gap: 4px; }
.pdp-price-in .price { font-size: 22px; font-weight: 700; color: #303030; letter-spacing: -0.02em; }
.pdp-price-in .price-meta { font-size: 13px; color: var(--text-muted); }
body.is-logged-in .pdp-price-out { display: none; }
body.is-logged-in .pdp-price-in  { display: flex; }

/* Role-restricted "not available" notice (2026-08-31) — deliberately not gated by
   body.is-logged-in like .pdp-price-out above, since a logged-in user with the
   wrong trade role still needs to see this. */
.pdp-restricted-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 16px;
}
.pdp-restricted-notice svg { width: 16px; height: 16px; flex-shrink: 0; }
.pdp-restricted-notice--block {
  display: block;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

/* Read more toggle */
.pdp-desc-wrap .pdp-read-more,
button.pdp-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  background: transparent !important;
  border: 1px solid #13A35A !important;
  border-radius: 30px !important;
  padding: 8px 16px !important;
  font-size: 14px;
  font-weight: 600;
  color: #13A35A !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none !important;
}
.pdp-read-more svg { transition: transform 0.3s ease; }
.pdp-read-more.is-open svg { transform: rotate(180deg); }
.pdp-full-desc { overflow: hidden; transition: max-height 0.3s ease-out; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 999px;
  font-size: 15.5px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn-primary {
  background: var(--orange);
  color: #fff;
  padding: 16px 32px;
  box-shadow: 0 10px 24px -10px rgba(232,93,44,0.55);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--green-700); color: var(--green-700); }
.btn-block { width: 100%; display: flex; }
.btn-large { padding: 16px 24px; font-size: 16px; }
.btn.is-disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Info panel sections */
.pdp-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdp-section h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); margin: 0; }
.pdp-section p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.pdp-section p + p { margin-top: 6px; }
.pdp-dims { font-size: 14px !important; color: var(--text-muted) !important; }
.pdp-dims strong { color: var(--ink); font-weight: 700; }

/* Qty stepper */
.qty-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qty-simple {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.qty-simple .qty-step {
  background: var(--paper);
  border: 0;
  width: 38px; height: 38px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.qty-simple .qty-step:hover { background: var(--green-050); color: var(--green-800); }
.qty-simple input {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  width: 70px;
  border: 0;
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
}
.qty-simple input::-webkit-outer-spin-button,
.qty-simple input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-simple .qty-suffix { align-self: center; margin-left: 4px; font-size: 14px; color: var(--text-muted); }

/* CTAs + trust strip */
/* qty stepper and CTA button on the same row */
form.optica-atc { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; }
.qty-simple { flex-shrink: 0; }
.pdp-ctas { display: flex !important; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 8px; }
.pdp-ctas .btn { width: 100%; }
@media (max-width: 480px) { form.optica-atc { flex-wrap: wrap !important; } .qty-simple { width: 100%; } }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-top: 6px; }
.pdp-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); font-weight: 500; }
.pdp-trust-item svg { width: 18px; height: 18px; color: var(--green-700); flex-shrink: 0; }

/* Specs table */
.pdp-specs {
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: clamp(36px, 4vw, 56px) 0;
}
.pdp-specs h2 { font-size: clamp(1.5rem, 2.2vw, 1.8rem); margin: 0 0 20px; color: var(--ink); }
.specs-table {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 16px;
}
.specs-table th, .specs-table td { padding: 14px 18px; text-align: left; vertical-align: top; }
.specs-table th { width: 240px; background: var(--paper); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); }
.specs-table td { color: var(--text); border-bottom: 1px solid var(--border); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .specs-table th, .specs-table td { display: block; padding: 10px 16px; }
  .specs-table th { width: auto; padding-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 0; }
  .specs-table td { padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
}

/* Related products grid */
.pdp-related {
  background: var(--white);
  padding: clamp(40px, 4.5vw, 64px) 0;
  border-top: 1px solid var(--border);
}
.pdp-related .section-head { margin-bottom: 24px; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 580px)  { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .related-grid { grid-template-columns: repeat(4, 1fr); } }

/* Cart page — column headers + totals heading */
.oct-head .oct-col { font-size: 13px !important; }
.cart_totals h2 { font-size: 13px !important; }

/* Order card: retail + workshop pages share the branded panel's card; description moves under the gallery (2026-09-02) */
.pdp-order-card { background: #fff; border: 1px solid var(--border, #e3e2de); border-radius: 14px; padding: 20px; box-shadow: 0 6px 22px rgba(32,36,44,.06); margin: 16px 0 18px; }
.pdp-order-head { display: block; margin-bottom: 14px; }
.pdp-order-head h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
.pdp-trust--compact { padding-top: 0; gap: 6px 16px; }
.pdp-trust--compact .pdp-trust-item { font-size: 13px; font-weight: 600; }
.pdp-trust--compact .pdp-trust-item svg { width: 16px; height: 16px; }
.pdp-info--standard > .pdp-trust { display: none; } /* chips live in the card header now */
.pdp-desc-under h3 { font-weight: 700; color: var(--ink); }
.pdp-order-card .pdp-price { margin-top: 0; }
.pdp-order-card > .pdp-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.pdp-desc-under { margin-top: 26px; }
.pdp-desc-under h3 { font-size: 18px; margin: 0 0 10px; }
.pdp-desc-under .pdp-full-desc { padding-top: 8px; }

/* Specifications under the description on retail/workshop pages (2026-09-02) */
.pdp-spec-under { margin-top: 26px; }
.pdp-spec-under h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.pdp-spec-table { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 15px; }
.pdp-spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--border, #e4e1da); vertical-align: top; }
.pdp-spec-table td:first-child { color: var(--text-muted); width: 42%; }
/* Related cards on product pages: image, title, price only. Category grids keep a 3-line description. */
.pdp-related .product-specs { display: none; }
.product-specs { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Colour dots row (2026-09-08) ---- */
.fl-post-grid-post .card-colours {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  min-height: 16px !important;
}
.fl-post-grid-post .card-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.fl-post-grid-post .card-dot {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(12, 31, 22, 0.18) !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.fl-post-grid-post .card-dot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
.fl-post-grid-post .card-dot--more {
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #566963 !important;
  line-height: 1 !important;
  padding-left: 2px !important;
}
.fl-post-grid-post .card-dot--any {
  background: conic-gradient(#D9363E, #E8A23B, #f2d22e, #13A35A, #2E9E9C, #3066B0, #6B4E9E, #E87CA0, #D9363E) !important;
}
.fl-post-grid-post .card-colours-n {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #566963 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ---- Sidebar leaf categories (no children), 2026-09-08 ---- */
.cat-tree a.cat-toplevel--link { text-decoration: none !important; color: var(--ink, #0C1F16) !important; }
.cat-tree a.cat-toplevel--link:hover { color: var(--ink, #0C1F16) !important; }
/* ---- Range pill size (Chris, 2026-09-08: too big once it started rendering) ---- */
.fl-post-grid-post .range-pill {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  padding: 2px 8px !important;
  line-height: 1.5 !important;
}





/* ---- Category page header full width, 2026-09-08 (page-header full width) ---- */
@media (min-width: 900px) { .page-header-inner { grid-template-columns: 1fr !important; } }
.page-header .page-lede { max-width: none !important; margin-right: 28px !important; }
header.page-header > .container.container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }

/* ── Standard PDP rework, 2026-09-15. Approved mockup:
      https://claude.ai/artifact/4jvyNS9qjfphiUrCxSfjWD
      Eyebrow pill, named swatch pills, no-MOQ note, backorder note,
      no-account exit, spec sheet under the buy panel.
      State rules carry !important: the site's inline CSS repaints button
      states otherwise (see optica-button-hover-check). ────────────── */

.pdp-info--standard .pdp-eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-800, #0F824A); background: var(--green-050, #EAF7EF);
  border-radius: 999px; padding: 5px 12px;
}

.pdp-var-pills { display: flex; flex-wrap: wrap; gap: 9px; }
button.pdp-var-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border, #E4E0D6) !important; border-radius: 999px !important;
  background: #fff !important; padding: 7px 14px 7px 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text, #1F2B24) !important;
  cursor: pointer; line-height: 1.3;
}
button.pdp-var-pill i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid rgba(0,0,0,.15);
}
button.pdp-var-pill:hover,
button.pdp-var-pill:focus-visible {
  border-color: var(--green-700, #13A35A) !important;
  background: #fff !important; color: var(--text, #1F2B24) !important;
}
button.pdp-var-pill.on {
  border-color: var(--green-700, #13A35A) !important;
  background: var(--green-050, #EAF7EF) !important;
  color: var(--ink, #0C1F16) !important;
}
/* 2026-09-21: an option that is not made with the current choice is dimmed and dashed but stays
   clickable (the click moves the other option to a pair that is made); an option no variation
   uses is hidden; a dead end shows a plain message above the button. */
button.pdp-var-pill[hidden] { display: none !important; }
button.pdp-var-pill.is-unavailable,
button.pdp-var-pill.is-unavailable:hover,
button.pdp-var-pill.is-unavailable:focus-visible {
  border-style: dashed !important; border-color: var(--border, #E4E0D6) !important;
  background: #fff !important; color: var(--text-muted, #566963) !important; opacity: .6;
}
.pdp-var-msg { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: #8A3B12; }
.pdp-var-msg[hidden] { display: none; }

.pdp-qty-note { font-size: 14.5px; color: var(--text-muted, #566963); }
.pdp-qty-note b { color: var(--green-800, #0F824A); }

.pdp-backnote {
  font-size: 14.5px; color: var(--orange-dark, #D8551A);
  background: var(--orange-tint, #FCE6DA); border-radius: 8px;
  padding: 10px 13px; margin: 12px 0 0;
}

.pdp-noacct { font-size: 14.5px; color: var(--text-muted, #566963); margin: 10px 0 0; }
.pdp-noacct a { color: var(--green-800, #0F824A); font-weight: 600; text-decoration: none; }
.pdp-noacct a:hover { text-decoration: underline; color: var(--green-800, #0F824A); }

.pdp-spec-under--info {
  background: var(--cream, #F0EBDF); border: 1px solid var(--border, #E4E0D6);
  border-radius: 14px; padding: 20px 22px; margin-top: 18px;
}
.pdp-spec-under--info h3 { margin: 0 0 10px; }
.pdp-spec-under--info .pdp-spec-table td { border-bottom: 1px solid var(--border-strong, #D3CDBD); }
.pdp-spec-under--info .pdp-spec-table tr:last-child td { border-bottom: 0; }

/* Inside the reworked buy panel the old section divider reads as a stray
   line under the price box. The card supplies the separation now. */
.pdp-info--standard .pdp-order-card .pdp-section {
  border-top: 0;
  padding-top: 0;
  margin-top: 16px;
}

/* The buy form is a flex row (qty beside CTA). The rework's note lines joined
   that row and crushed the button. Let the row wrap and give each note its own
   full-width line; qty and CTA still share a row when nothing sits between. */
.pdp-info--standard form.optica-atc { flex-wrap: wrap !important; }
.pdp-info--standard form.optica-atc .pdp-backnote,
.pdp-info--standard form.optica-atc .pdp-noacct { flex: 1 1 100%; margin-top: 0; }

/* 17 Sep 2026: hide the MOQ line when the product has no minimum (was a hard-coded 10) */
.fl-post-grid-post .minirer:has(.minirer_span:empty) { display: none; }

/* optica-bb.css */
/* =============================================================
   Optica Accessories — Beaver Builder Compatible Stylesheet

   HOW TO USE:
   - Paste into: Beaver Builder > Global Settings > CSS tab
     OR enqueue via wp_enqueue_style() in functionsac.php

   WHAT BB CONTROLS (do NOT set these in BB row settings to avoid
   double-overrides — or set them there and they'll win):
   - Row max-width  → set per row in BB row settings
   - Row padding    → set per row in BB row settings
   - Column gaps    → set per row/column in BB settings

   WHAT THIS FILE CONTROLS:
   - All visual component styles (cards, buttons, colours, type)
   - Mobile responsive layouts for components inside BB rows
   - Typography, spacing within components
   ============================================================= */

/* ============== Design tokens ============== */
:root {
  --green-900:   #0A4A25;
  --green-800:   #0F824A;
  --green-700:   #13A35A;
  --green-600:   #2DB870;
  --green-500:   #45C884;
  --green-100:   #D4EFDF;
  --green-050:   #EAF7EF;

  --orange:      #E85D2C;
  --orange-dark: #D8551A;
  --orange-tint: #FCE6DA;

  --logo-luxe:        #6B4E9E;
  --picture-perfect:  #2E9E9C;
  --bespoke:          #B0276E;

  --ink:         #0C1F16;
  --text:        #1F2B24;
  --text-muted:  #566963;
  --paper:       #F5F5F2;
  --cream:       #F0EBDF;
  --white:       #FFFFFF;
  --border:      #E4E0D6;
  --border-strong: #B7B3A6;

  --radius:      14px;
  --radius-lg:   24px;
  --shadow:      0 22px 50px -18px rgba(12,31,22,0.22);
  --ease:        cubic-bezier(.2,.7,.2,1);
  --dur:         220ms;
  --nav-h:       60px;
}

/* ============== Reset ============== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============== Typography ============== */
h1 {
  font-family: "Recursive", "Atkinson Hyperlegible Next", sans-serif;
  margin: 0;
  color: var(--green-700);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(2rem, 8vw, 3.9rem);
  font-variation-settings: "CASL" 0, "MONO" 0;
}
h1 em { font-style: normal; color: var(--ink); }

h2,
.section-head h2,
.subcat-head h2,
.featured-body h2,
.subcat-head h2 {
  font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-variation-settings: "CASL" 0, "MONO" 0;
  letter-spacing: -0.022em;
}

/* .container intentionally removed — BB Theme owns this class.
   BB row Max Width setting controls width instead. */

/* ============== Announcement bar ============== */
.bar {
  background: var(--green-050);
  border-bottom: 1px solid #DCEFE2;
  font-size: 13.5px;
  color: var(--green-800);
}
.bar-inner {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 28px;
  align-items: center;
  padding: 11px 0;
}
.bar a { font-weight: 600; color: var(--green-800); }
.bar a:hover { text-decoration: none; }
.bar .welcome { font-weight: 700; color: var(--green-800); }
.bar .trade-tag { font-weight: 700; color: var(--green-800); letter-spacing: 0.02em; }
.bar .visit a { color: var(--green-700); }
.bar .phone { white-space: nowrap; }
.bar .new-badge { display: inline-flex; align-items: center; gap: 6px; }
.bar .new-badge::after {
  content: "NEW";
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
}
.bar a.account-btn {
  background: var(--green-700);
  color: #fff;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px -4px rgba(15,130,74,0.45);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bar a.account-btn:hover {
  background: var(--green-800);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(15,130,74,0.55);
}
/* Auth-aware account button */
body.is-logged-in  #barAccountOut     { display: none; }
body.is-logged-out #barAccountIn      { display: none; }
body.is-logged-in  #mobileTradLoginOut { display: none; }
body.is-logged-out #mobileTradLoginIn  { display: none; }

/* ============== Nav ============== */
.nav { background: var(--green-700); color: #fff; position: relative; overflow: visible; }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 0;
}
.logo {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}
.logo sup { font-size: 11px; vertical-align: super; opacity: 0.85; }
.menu { display: flex; gap: 28px; margin-left: 36px; font-weight: 600; font-size: 16px; }
.menu a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; }
.menu a::after { content: "▾"; font-size: 20px !important; margin-left: 5px; opacity: 0.85; }
.menu a.no-caret::after { display: none; }
.menu .menu-catalogue {
  gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.10); transition: background 0.15s ease;
}
.menu .menu-catalogue:hover { background: rgba(255,255,255,0.18); }
.menu .new-pill {
  display: inline-block; background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 999px; vertical-align: middle; line-height: 1;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-weight: 600; }
.book-call {
  background: #fff; color: var(--green-800);
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
}
.book-call:hover, .book-call:hover * { color: var(--green-800) !important; }
.cart { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; }
.cart:hover, .cart:hover * { color: inherit !important; }

/* ============== Mobile hamburger button ============== */
.ham-btn {
  display: none;
  background: transparent; border: 0;
  padding: 10px 8px; color: #fff; cursor: pointer;
  flex-direction: column; gap: 5px;
  justify-content: center; align-items: center;
  flex-shrink: 0; min-width: 44px; min-height: 44px;
  border-radius: 8px; transition: background 0.15s ease;
}
.ham-btn:hover { background: rgba(255,255,255,0.12); }
.ham-btn span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), width 0.25s var(--ease);
  transform-origin: center;
}
.ham-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-btn.is-open span:nth-child(2) { opacity: 0; width: 0; }
.ham-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============== Mobile menu overlay ============== */
.mobile-menu {
  display: none; position: fixed;
  /* WP's admin toolbar (visible to any logged-in user, not just admins)
     adds extra height above the nav that --nav-h alone doesn't account
     for, pushing the first menu item behind it. WP exposes its own height
     as this custom property; falls back to 0 when logged out. */
  inset: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0;
  background: var(--ink); z-index: 49;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-inner { padding: 8px 0 env(safe-area-inset-bottom, 24px); }

.mobile-trade-login {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--green-700);
  text-decoration: none; color: #fff; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-trade-login .login-label { display: flex; flex-direction: column; gap: 2px; }
.mobile-trade-login .login-title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: #fff; }
.mobile-trade-login .login-sub { font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; }
.mobile-trade-login .login-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); display: grid; place-items: center;
  flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.30);
}
.mobile-nav-section { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-section:last-child { border-bottom: none; }
.mobile-nav-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.40); padding: 12px 24px 6px; display: block;
}
.mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; font-size: 18px; font-weight: 600;
  color: rgba(255,255,255,0.90); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease; gap: 16px;
}
.mobile-nav-link:hover, .mobile-nav-link:active { background: rgba(255,255,255,0.06); color: #fff; }
.mobile-nav-link .nav-arrow { width: 20px; height: 20px; opacity: 0.45; flex-shrink: 0; }
.mobile-nav-link .new-pill {
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; line-height: 1.4;
}

/* ---- Mobile category rows with expandable submenus ---- */
.mobile-nav-row { display: flex; align-items: stretch; }
.mobile-nav-row .mobile-nav-link { flex: 1; }
.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 52px; flex-shrink: 0; background: none; border: 0;
  color: rgba(255,255,255,0.9); cursor: pointer; padding: 0;
}
.mobile-nav-toggle:hover, .mobile-nav-toggle:active { background: rgba(255,255,255,0.06); }
.mobile-nav-toggle .nav-arrow { width: 20px; height: 20px; opacity: 0.45; transition: transform 0.2s var(--ease); }
.mobile-nav-toggle[aria-expanded="true"] .nav-arrow { transform: rotate(90deg); opacity: 0.9; }

.mobile-submenu { display: none; flex-direction: column; padding: 0 24px 10px 40px; }
.mobile-submenu.is-open { display: flex; }
.mobile-submenu-link {
  padding: 10px 0; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.68); text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile-submenu-link:first-child { border-top: 0; }
.mobile-submenu-link:hover, .mobile-submenu-link:active { color: #fff; }
.mobile-contact-strip { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.mobile-contact-strip a {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.75); font-size: 16px; font-weight: 500; text-decoration: none;
}
.mobile-contact-strip a:hover { color: #fff; }
.mobile-contact-strip svg { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; }

/* ============== Eyebrow label ============== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-800); background: var(--green-050);
  border: 1px solid #C9E5D2; padding: 7px 14px;
  border-radius: 999px; margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green-700);
}

/* ============== Container ==============
   .container is used by hand-coded HTML modules (hero, compare, networks
   strips) to cap width — unlike native BB rows below them, which get their
   1280px cap from BB's own row settings. This class was referenced in markup
   but never defined, so it fell back to 100% width, i.e. as wide as
   whatever full-width BB row it sat inside. */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* The parent bb-theme's legacy Bootstrap-style grid CSS defines
   ".fl-full-width .container" with padding-left/right: 0 at desktop
   breakpoints (992px, 1100px). That compound selector (0,2,0 specificity)
   always beats the plain ".container" rule above (0,1,0) regardless of
   source order, silently zeroing the side padding on desktop only — mobile
   already has an !important override below using this same selector list,
   which is why this bug never showed up on mobile. Mirroring it here for
   all widths. */
.hero .container, .compare .container, .categories .container,
.branded-ranges .container, .gallery .container, .subcat-section .container,
.featured .container, .distributor .container, .help .container,
.pdp-related .container, .footer .container, .page-header .container {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Archive templates (Theme Builder — product category, search results) ship
   their main content row as a native BB fixed-width row with 0 padding,
   unlike every other 1280px block on the site (28px each side via .container
   above) — sidebar and product grid sit flush against the 1280 edge instead
   of lining up with the header logo/cart. */
.fl-theme-builder-archive-product-categories .fl-row-fixed-width,
.fl-theme-builder-archive-search-result .fl-row-fixed-width {
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

/* ============== Hero ============== */
.hero { padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 64px); }
@media (min-width: 720px) {
  .hero {
    padding-top: 50px;
  }
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }

.hero h1 { max-width: 16ch; }
@media (min-width: 720px) {
  .hero h1 {
    line-height: 1.2;
    font-size: 46px;
  }
}
.hero-sub { margin: 20px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--text); }
@media (min-width: 600px) { .hero-sub { font-size: 17.5px; max-width: 56ch; } }
.hero-sub strong { color: var(--ink); font-weight: 700; }

.hero-ctas { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 480px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; } }

/* ============== Buttons ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; font-weight: 700; border-radius: 999px; font-size: 15.5px;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  min-height: 48px; text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 14px 22px; border: 1px solid transparent;
  font-family: "Atkinson Hyperlegible Next", sans-serif; letter-spacing: -0.005em;
}
.btn .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary {
  background: var(--orange); color: #fff; padding: 16px 32px;
  box-shadow: 0 10px 24px -10px rgba(232,93,44,0.55);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-text {
  color: var(--green-800); background: transparent;
  padding: 10px 6px; border: 0; font-size: 15.5px; min-height: 44px;
}
.btn-text:hover { color: var(--green-700); }
.btn-text .arrow { width: 18px; height: 18px; }
.btn-text:hover .arrow { transform: translateX(3px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--white); }

/* WooCommerce AJAX loading state — prevent WC's default padding-right from growing the button */
.single_add_to_cart_button { position: relative; }
.single_add_to_cart_button.loading { pointer-events: none; padding-right: 32px !important; opacity: 0.8; }
.single_add_to_cart_button.loading::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }

/* ============== Hero trust stats ============== */
.hero-trust {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 16px; align-items: start;
}
@media (min-width: 600px) { .hero-trust { grid-template-columns: repeat(4, 1fr); } }
.hero-trust .stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-trust .num {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1;
}
@media (min-width: 600px) { .hero-trust .num { font-size: 22px; } }
.hero-trust .lbl { font-size: 14px; color: var(--text-muted); }
@media (min-width: 600px) { .hero-trust .lbl { font-size: 16px; } }

/* ============== Hero slider ============== */
.hero-slider-wrap { display: flex; flex-direction: column; gap: 18px; }
.slider-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-tabs::-webkit-scrollbar { display: none; }
.slider-tab {
  position: relative; background: transparent; border: 0;
  padding: 12px 14px 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; transition: color var(--ease); white-space: nowrap; flex-shrink: 0;
}
@media (min-width: 400px) { .slider-tab { font-size: 16px; gap: 9px; padding: 12px 16px 14px; } }
.slider-tab .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  opacity: 0.45; transition: opacity var(--ease), background var(--ease); flex-shrink: 0;
}
.slider-tab:hover { color: var(--ink); }
.slider-tab.is-active { color: var(--ink); }
.slider-tab.is-active .dot { opacity: 1; }
.slider-tab .progress {
  position: absolute; left: 0; bottom: -1px;
  height: 3px; width: 0; border-radius: 2px 2px 0 0;
  background: transparent; pointer-events: none;
}
.slider-tab.is-active .progress {
  animation: progress-fill 6000ms linear forwards;
  animation-play-state: var(--slider-play, running);
}
.slider-tab[data-slide="0"].is-active .progress,
.slider-tab[data-slide="0"].is-active .dot { background: #8977C8; }
.slider-tab[data-slide="1"].is-active .progress,
.slider-tab[data-slide="1"].is-active .dot { background: var(--green-700); }
.slider-tab[data-slide="2"].is-active .progress,
.slider-tab[data-slide="2"].is-active .dot { background: #B7552A; }
@keyframes progress-fill { from { width: 0%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .slider-tab.is-active .progress { animation: none; width: 100%; }
}

.hero-slider {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow); background: #E8DEF3;
}
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; opacity: 0; z-index: 1;
  transition: opacity 600ms ease-in-out; pointer-events: none; will-change: opacity;
}
.slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-1 { background: #E8DEF3; }
.slide-2 { background: #DDEBE0; }
.slide-3 { background: #E6E2D6; }

.slide-label {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 7px 12px 7px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 24px -12px rgba(12,31,22,0.28);
}
@media (min-width: 600px) { .slide-label { left: 18px; bottom: 18px; font-size: 14px; padding: 8px 14px 8px 12px; } }
.slide-label .dot { width: 8px; height: 8px; border-radius: 50%; }
.slide-1 .slide-label .dot { background: #8977C8; }
.slide-2 .slide-label .dot { background: var(--green-700); }
.slide-3 .slide-label .dot { background: #B7552A; }

.slide-callout { display: none; }
@media (min-width: 500px) {
  .slide-callout {
    display: flex; position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
    border-radius: 12px; padding: 10px 14px; color: var(--ink);
    box-shadow: 0 12px 28px -12px rgba(12,31,22,0.30);
    max-width: 200px; flex-direction: column; gap: 2px;
  }
}
@media (min-width: 960px) { .slide-callout { max-width: 240px; top: 18px; right: 18px; padding: 12px 16px; border-radius: 14px; } }
.slide-callout .callout-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.slide-callout .callout-desc { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text-muted); }
@media (min-width: 600px) { .slide-callout .callout-title { font-size: 16px; } .slide-callout .callout-desc { font-size: 16px; } }
.slide-1 .slide-callout .callout-title { color: #6D58B2; }
.slide-2 .slide-callout .callout-title { color: var(--green-700); }
.slide-3 .slide-callout .callout-title { color: #B7552A; }

.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,0.94); border: 1px solid rgba(12,31,22,0.06);
  display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(12,31,22,0.30);
  cursor: pointer; transition: background var(--ease), transform var(--ease);
  color: var(--ink);
}
@media (min-width: 600px) { .slider-btn { width: 44px; height: 44px; } }
.slider-btn:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.slider-btn:active { transform: translateY(-50%) scale(0.96); background: rgba(255,255,255,0.94); }
.slider-btn svg { width: 18px; height: 18px; color: var(--ink); }
@media (min-width: 600px) { .slider-btn svg { width: 20px; height: 20px; } }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
@media (min-width: 600px) { .slider-btn.prev { left: 14px; } .slider-btn.next { right: 14px; } }

.slider-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.slider-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.55); cursor: pointer; padding: 0;
  transition: width var(--ease), background var(--ease);
}
.slider-dots button.is-active { width: 26px; border-radius: 999px; background: #fff; }

/* ============== Section shared ============== */
.section-head { max-width: 760px; margin: 0 0 28px; }
.categories .section-head { max-width: none; } /* homepage heading on one line */
.section-head .lede { margin-top: 16px; }
.section-head h2 {
  font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink); margin: 18px 0 0;
}
.lede { font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--text-muted); line-height: 1.55; max-width: 58ch; margin: 0; }

/* ============== Compare strip ============== */
.compare { background: #fff; border-top: 1px solid var(--border); padding: 16px 0; }
.compare-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  justify-content: center; font-size: 14px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.compare-inner span:first-child { color: var(--ink); }
.compare-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--green-050); color: var(--green-800);
  border-radius: 999px; font-size: 13px;
}
@media (min-width: 600px) { .compare-pill { font-size: 14px; } .compare { padding: 18px 0; } }

/* ============== Networks strip ============== */
.networks { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; }
.networks-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.networks-label { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; text-align: center; }
.networks-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 36px; }
.networks-logo { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--ink); opacity: 0.78; transition: opacity 0.15s ease; }
@media (min-width: 600px) { .networks-logo { font-size: 16px; } }
.networks-logo:hover { opacity: 1; }

/* ============== Categories ============== */
.categories { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0 clamp(32px, 5vw, 60px); border-top: 1px solid var(--border); }
.category-grid {
  display: grid; gap: 2px; grid-template-columns: 1fr;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 900px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
.category {
  background: var(--white); display: flex; flex-direction: column; min-height: 0;
  transition: background var(--dur) var(--ease); position: relative;
  overflow: hidden; text-decoration: none; color: inherit;
}
@media (min-width: 900px) { .category { min-height: 460px; } }
.category .cat-visual {
  position: relative; height: 160px; display: grid; place-items: center;
  overflow: hidden; border-bottom: 1px solid var(--border); transition: transform var(--dur) var(--ease);
}
@media (min-width: 600px) { .category .cat-visual { height: 180px; } }
.category .cat-visual svg { width: 78%; height: 78%; max-width: 320px; }
.category:hover .cat-visual { transform: scale(1.015); }
.category.branded  .cat-visual { background: radial-gradient(60% 80% at 50% 60%, var(--green-100) 0%, var(--green-050) 70%, var(--white) 100%); }
.category.retail   .cat-visual { background: radial-gradient(60% 80% at 50% 60%, var(--orange-tint) 0%, #FBEFE5 60%, var(--white) 100%); }
.category.workshop .cat-visual { background: radial-gradient(60% 80% at 50% 60%, #ECE6D8 0%, #F5F0E3 60%, var(--white) 100%); }
.cat-visual-label {
  position: absolute; top: 16px; left: 20px;
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
}
.cat-visual-label .num { display: inline-block; margin-right: 8px; font-weight: 700; }
.category.branded  .cat-visual-label { background: #2A52BE; }
.category.retail   .cat-visual-label { background: #F2A21B; }
.category.workshop .cat-visual-label { background: #3E4C59; }

/* 2026-08-31: range card treatment (Chris). Recoloured 2026-09-01 to
   option G "Cobalt & Marigold" (2026-09-01, after A "Navy & Amber" for a day): branded cobalt #2A52BE (original purple #7A67B8
   clashed with --logo-luxe #6B4E9E), retail marigold #F2A21B (original
   #D8551A was identical to the Optica site orange), workshop steel
   #3E4C59 unchanged. Accent bar + 10% wash key
   each card to its colour. Pill markup lives in a BB module (aria-hidden,
   decorative), so text is swapped in CSS and colours need !important to
   beat the module's inline style duplicates. Proper fix later: edit the
   BB module markup + its inline styles, then delete this block. */
.category-grid .cat-visual-label { font-size: 0 !important; }
.category-grid .cat-visual-label .num { font-size: 16px !important; }
.category-grid .cat-visual-label::after { font-size: 16px; letter-spacing: 0.12em; }
.category.branded  .cat-visual-label::after { content: "Custom-branded accessories"; }
.category.retail   .cat-visual-label::after { content: "Retail-ready Accessories"; }
.category.workshop .cat-visual-label::after { content: "Workshop Tools & Parts"; }
.category.branded  .cat-visual-label { background: #2A52BE !important; }
.category.retail   .cat-visual-label { background: #F2A21B !important; }
.category.workshop .cat-visual-label { background: #3E4C59 !important; }
.category .cat-visual::before,
.category .cat-visual::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.category .cat-visual::before { top: 0; height: 5px; z-index: 2; }
.category .cat-visual::after { top: 0; bottom: 0; z-index: 1; }
.category.branded  .cat-visual::before { background: #2A52BE; }
.category.retail   .cat-visual::before { background: #F2A21B; }
.category.workshop .cat-visual::before { background: #3E4C59; }
.category.branded  .cat-visual::after { background: rgba(42, 82, 190, 0.10); }
.category.retail   .cat-visual::after { background: rgba(242, 162, 27, 0.14); }
.category.workshop .cat-visual::after { background: rgba(62, 76, 89, 0.10); }

/* 2026-08-31: range colour system, sitewide wayfinding (Chris).
   Spec: brand/creative-kit.md "Range colour system". One small range
   marker per screen, always with the range name. Green keeps all CTAs.
   Branded cobalt #2A52BE / Retail marigold #F2A21B (white text per Chris 2026-09-01, chosen over ink with the AA shortfall known) / Workshop steel #3E4C59. */

/* Homepage range section eyebrows: rendered as solid range-colour pills
   matching the range card badges (see .branded-ranges .eyebrow pill
   further down for the branded one). */
.subcat-section.retail .eyebrow,
.subcat-section.workshop .eyebrow {
  display: inline-flex !important; /* module CSS hides these eyebrows */
  align-items: center;
  width: fit-content !important;
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.subcat-section.retail .eyebrow { background: #F2A21B; }
.subcat-section.workshop .eyebrow { background: #3E4C59; }
.subcat-section.retail .eyebrow::before,
.subcat-section.workshop .eyebrow::before { display: none !important; }

/* Mega menu: dropdown panel keyed to its range. mega-menu.js moves the
   panels to body level at runtime, so key each panel by the category
   links it contains, not by its trigger. */
.mega-panel:has(.menusub a[href*="personalised-eyewear-accessories"]),
.mega-panel:has(.menusub a[href*="/custom-branded/"]) { border-top-color: #2A52BE; }
.mega-panel:has(.menusub a[href*="wholesale-eyeglass-accessories"]),
.mega-panel:has(.menusub a[href*="/retail-ready/"]) { border-top-color: #F2A21B; }
.mega-panel:has(.menusub a[href*="optical-tools-and-equipment"]),
.mega-panel:has(.menusub a[href*="/workshop/"]) { border-top-color: #3E4C59; }

/* Subcat cards: icon chips keyed to their range colour. Workshop off
   brand green to steel; retail off the module's orange (--orange-dark,
   which is now the site accent only) to range amber.
   !important beats the BB module's inline duplicates. */
.subcat-section.workshop .subcat-icon { background: rgba(62, 76, 89, 0.10) !important; color: #3E4C59 !important; }
.subcat-section.retail .subcat-icon { background: rgba(242, 162, 27, 0.14) !important; color: #8A5B00 !important; }

/* 2026-08-31: hide the header cart count when the cart is empty (Chris).
   The static BB header always prints "0 items"; the Woo fragment in
   functions.php adds .has-items only when the cart holds products, so
   the count is hidden until something is added. */
.nav-cart-btn .nav-cart-count { display: none !important; }
/* 2026-09-18 (Chris): number only, as an orange badge on the top right of the
   icon so a loaded cart is obvious at a glance. The fragment in dx-drawer.php
   prints the bare count; the link's aria-label carries "n items". */
.nav-cart-btn { position: relative; }
.nav-cart-btn .nav-cart-count.has-items {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: absolute; top: -8px; right: -12px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--orange, #E85D2C); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Icon is hardcoded 18px in the markup; larger now the count text
   only shows when the cart has items. Extra left margin separates it
   from the Ask Iris pill (the a.book-call element restyled by iris.css). */
.nav-cart-btn svg { width: 24px !important; height: 24px !important; }
.nav-right .nav-cart-btn { margin-left: 14px; margin-right: 8px; }

/* Mobile menu: dot before each top-level range link (row links only,
   submenu links use a different class and stay plain) */
.mobile-nav-link[href*="personalised-eyewear-accessories"]::before,
.mobile-nav-link[href*="wholesale-eyeglass-accessories"]::before,
.mobile-nav-link[href*="optical-tools-and-equipment"]::before,
.mobile-nav-link[href$="/custom-branded/"]::before,
.mobile-nav-link[href$="/retail-ready/"]::before,
.mobile-nav-link[href$="/workshop/"]::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 9px; vertical-align: middle;
}
.mobile-nav-link[href*="personalised-eyewear-accessories"]::before,
.mobile-nav-link[href$="/custom-branded/"]::before { background: #2A52BE; }
.mobile-nav-link[href*="wholesale-eyeglass-accessories"]::before,
.mobile-nav-link[href$="/retail-ready/"]::before { background: #F2A21B; }
.mobile-nav-link[href*="optical-tools-and-equipment"]::before,
.mobile-nav-link[href$="/workshop/"]::before { background: #3E4C59; }

/* Category ROOT pages: short range underline on the H1. Child categories
   need an ancestor body class from the template, see the range colour
   addendum in campaigns/dennis-category-handoff/BRIEF.md. */
body.term-personalised-eyewear-accessories .page-header h1::after,
body.term-wholesale-eyeglass-accessories .page-header h1::after,
body.term-optical-tools-and-equipment .page-header h1::after {
  content: ""; display: block; width: 44px; height: 4px;
  border-radius: 2px; margin-top: 12px;
}
body.term-personalised-eyewear-accessories .page-header h1::after { background: #2A52BE; }
body.term-wholesale-eyeglass-accessories .page-header h1::after { background: #F2A21B; }
body.term-optical-tools-and-equipment .page-header h1::after { background: #3E4C59; }

/* 2026-08-31: key the Custom-Branded section chrome to the Branded purple
   so the how-it-works process visibly belongs to the range card above it
   (Chris). The free-artwork callout also moves off its orange tint, which
   now reads as Retail. Sub-range cards keep their own colours; green keeps
   the CTAs. !important beats the BB module's inline duplicates. */
.branded-ranges .process-bar { border-top: 5px solid #2A52BE !important; }
.branded-ranges .process-bar-label { color: #2A52BE !important; }
.branded-ranges .step-mini {
  background: rgba(42, 82, 190, 0.10) !important;
  border-color: #2A52BE !important;
  color: #5E4B9E !important;
}
.branded-ranges .value-callout {
  background: rgba(42, 82, 190, 0.10) !important;
  border-color: #CFC7E8 !important;
}
.branded-ranges .value-callout-icon {
  background: #2A52BE !important;
  box-shadow: 0 4px 12px -4px rgba(42, 82, 190, 0.45) !important;
}
.branded-ranges .value-callout-text strong { color: #5E4B9E !important; }
/* Eyebrow rendered as the same solid purple pill as the Branded range
   card's image badge, so this section visibly continues that card. */
.branded-ranges .eyebrow {
  display: inline-flex !important; /* module CSS hides this eyebrow */
  align-items: center;
  background: #2A52BE;
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.branded-ranges .eyebrow::before { display: none !important; } /* theme's green eyebrow dot */
/* 2026-08-31: badges removed from the sub-range cards per Chris. */
.best-seller-pill, .lead-time-pill { display: none !important; }
/* Sub-range card upgrades: top bar + one chooser tag per card in the
   sub-range colour, replacing the deleted badges with information that
   helps a practice pick a range. Tag text is CSS content for now; move
   into the BB module markup at the Dennis edit (spec row with MOQ/lead
   numbers also goes there once Chris confirms range minimums). */
.technique-visual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; z-index: 2;
}
.technique.deboss  .technique-visual::before { background: #6B4E9E; }
.technique.wrap    .technique-visual::before { background: #2E9E9C; }
.technique.printed .technique-visual::before { background: #B0276E; }
.technique-visual::after {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  color: #fff;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 5px;
}
.technique.deboss  .technique-visual::after { content: "Fastest · 3 weeks"; background: #6B4E9E; }
.technique.wrap    .technique-visual::after { content: "Most personal"; background: #23807D; }
.technique.printed .technique-visual::after { content: "Fully custom"; background: #B0276E; }
/* Spec row: typical MOQ per range (Chris, 2026-08-31). Lead time shows
   only on Logo Luxe, via its chooser tag above. CSS content pending the
   BB module edit like the tags. */
.technique .technique-body::after {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E7E2D8;
  font-size: 14px;
  color: #5A6B60;
  letter-spacing: 0.02em;
}
.technique.deboss  .technique-body::after { content: "MOQ from 100"; }
.technique.wrap    .technique-body::after { content: "MOQ from 500"; }
.technique.printed .technique-body::after { content: "MOQ from 500"; }
.category .cat-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (min-width: 600px) { .category .cat-body { padding: 28px; gap: 14px; } }
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cat-pills .pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--white); color: var(--text); }
.cat-pills .pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
.category.branded  .cat-pills .pill:nth-child(1) .pill-dot { background: var(--logo-luxe); }
.category.branded  .cat-pills .pill:nth-child(2) .pill-dot { background: var(--picture-perfect); }
.category.branded  .cat-pills .pill:nth-child(3) .pill-dot { background: var(--bespoke); }
.category.retail   .cat-pills .pill .pill-dot { background: var(--orange); }
.category.workshop .cat-pills .pill .pill-dot { background: var(--ink); }
.category h3 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; }
@media (min-width: 600px) { .category h3 { font-size: 1.35rem; } }
.category p { color: var(--text-muted); font-size: 16px; line-height: 1.55; margin: 0; }
.category .meta-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); font-size: 16px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 500; color: var(--ink); }
.category .meta-row .count { color: var(--text-muted); font-weight: 400; }
.category .meta-row .cta-text { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-weight: 600; }
.category .meta-row .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.category:hover .meta-row .arrow { transform: translateX(3px); }

/* ============== Gallery ============== */
.gallery { background: var(--cream); padding: clamp(36px, 6vw, 68px) 0; }
.gallery .section-head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 24px; max-width: none; }
@media (min-width: 900px) { .gallery .section-head { grid-template-columns: 1.3fr 1fr; gap: 80px; } }
.gallery .section-head h2 { margin-top: 18px; }
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.g-case { margin: 0; padding: 18px 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); cursor: pointer; }
@media (min-width: 600px) { .g-case { padding: 22px 16px 18px; } }
.g-case:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.g-case-shape { aspect-ratio: 2.4 / 1; background: var(--case-bg, #1A1A1A); border-radius: 14% / 46%; display: grid; place-items: center; padding: 0 10%; text-align: center; color: var(--case-fg, #ffffff); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.15; box-shadow: 0 14px 22px -10px rgba(0,0,0,0.28), 0 3px 6px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.g-case-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.08) 80%, rgba(0,0,0,0.18) 100%); border-radius: inherit; pointer-events: none; }
.g-case-shape .g-label { position: relative; z-index: 1; text-transform: uppercase; letter-spacing: 0.08em; }
.g-case figcaption { font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.3; }
@media (min-width: 600px) { .g-case figcaption { font-size: 16px; } }
.gallery-footer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--border-strong); flex-direction: column; }
@media (min-width: 700px) { .gallery-footer { flex-direction: row; } }
.gallery-footer p { color: var(--text-muted); font-size: 16px; margin: 0; max-width: 60ch; }

/* ============== Process bar ============== */
.process-bar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px 28px; margin-bottom: 28px; }
@media (min-width: 600px) { .process-bar { padding: 28px 32px 32px; margin-bottom: 32px; } }
.process-bar-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-strong); margin-bottom: 24px; flex-direction: column; }
@media (min-width: 600px) { .process-bar-header { flex-direction: row; align-items: center; padding-bottom: 22px; margin-bottom: 28px; } }
.process-bar-label { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-700); display: inline-flex; align-items: center; gap: 12px; }
.process-bar-label::before { content: ""; width: 28px; height: 1px; background: var(--green-700); }
.process-bar-meta { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px; color: var(--text-muted); }
.process-bar-meta strong { color: var(--ink); font-weight: 700; }
.process-bar-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .process-bar-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 760px) { .process-bar-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.process-step-mini { display: flex; flex-direction: column; gap: 10px; position: relative; }
@media (min-width: 760px) { .process-step-mini:not(:last-child)::after { content: ""; position: absolute; top: 14px; right: -22px; width: 11px; height: 11px; border-top: 1.5px solid var(--border-strong); border-right: 1.5px solid var(--border-strong); transform: rotate(45deg); } }
.step-mini { width: 40px; height: 40px; border-radius: 50%; background: var(--green-050); border: 1.5px solid var(--green-700); color: var(--green-800); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 10px -4px rgba(15,130,74,0.25); }
.process-step-title { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 4px 0 0; line-height: 1.2; }
.process-step-desc { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ============== Trust strip ============== */
.trust-strip { background: var(--green-700); color: var(--white); padding: 20px 0; }
.trust-strip-inner { display: grid; grid-template-columns: 1fr; justify-content: center; align-items: center; gap: 14px; text-align: center; }
@media (min-width: 600px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 40px; } }
@media (min-width: 900px) { .trust-strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px; } }
.trust-pt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
@media (min-width: 600px) { .trust-pt { justify-content: flex-start; } }
@media (min-width: 900px) { .trust-pt { justify-content: center; } }
.trust-pt svg { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.95; }

/* ============== Branded ranges ============== */
.branded-ranges { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0; }
.branded-ranges-head { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; margin-bottom: 28px; }
@media (min-width: 900px) { .branded-ranges-head { grid-template-columns: 1.2fr 1fr; gap: 80px; margin-bottom: 32px; } }
.branded-ranges-head h2 { margin-top: 18px; }
.branded-ranges-head .lede { margin: 0; }
.technique-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .technique-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .technique-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.technique { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); text-decoration: none; color: inherit; }
.technique:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.technique-visual { aspect-ratio: 15 / 8; background: var(--cream); position: relative; display: grid; place-items: center; overflow: hidden; }
.technique-visual .case { position: absolute; width: 80%; aspect-ratio: 2.4 / 1; border-radius: 14% / 46%; box-shadow: 0 30px 45px -12px rgba(0,0,0,0.32), 0 6px 12px rgba(0,0,0,0.08), inset 0 -3% 0 -1% rgba(0,0,0,0.12); display: grid; place-items: center; padding: 0 10%; text-align: center; color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; overflow: hidden; }
.technique-visual .case > svg.case-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.technique-visual .case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0) 48%, rgba(0,0,0,0.10) 80%, rgba(0,0,0,0.22) 100%); border-radius: inherit; pointer-events: none; }
.technique.deboss .technique-visual { background: #E8E0F4; }
.technique.deboss .case { background: linear-gradient(160deg, #A99AE0 0%, #8977C8 55%, #6D58B2 100%); color: rgba(255,255,255,0.95); }
.technique.deboss .technique-num { color: var(--logo-luxe); }
.technique.deboss:hover { border-color: var(--logo-luxe); }
.technique.wrap .technique-visual { background: #D7EFEE; }
.technique.wrap .case { background: #2C4A6B; color: #fff; }
.technique.wrap .case::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 25% 20%, rgba(255,255,255,0.22), transparent 60%), radial-gradient(50% 25% at 75% 35%, rgba(255,255,255,0.12), transparent 70%); border-radius: inherit; pointer-events: none; z-index: 2; }
.technique.wrap .technique-num { color: var(--picture-perfect); }
.technique.wrap:hover { border-color: var(--picture-perfect); }
.technique.printed .technique-visual { background: #F4D3E0; }
.technique.printed .case { background: #1A0F08; color: rgba(255,255,255,0.88); }
.technique.printed .technique-num { color: var(--bespoke); }
.technique.printed:hover { border-color: var(--bespoke); }
.technique-body { padding: 12px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
@media (min-width: 600px) { .technique-body { padding: 14px 28px 30px; gap: 12px; } }
.technique-num { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-700); }
.technique h3 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--ink); text-wrap: balance; }
@media (min-width: 600px) { .technique h3 { font-size: 1.35rem; } }
.technique p { color: var(--text-muted); font-size: 16px; line-height: 1.55; margin: 0; }
.technique .cta-text { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 16px; }
.technique .cta-text .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.technique:hover .cta-text .arrow { transform: translateX(3px); }
.best-seller-pill { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--orange); color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; box-shadow: 0 3px 10px rgba(232,93,44,0.30); }
.lead-time-pill { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--green-700); color: var(--white); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 5px; box-shadow: 0 3px 10px rgba(15,130,74,0.30); display: inline-flex; align-items: center; gap: 6px; }
.lead-time-pill svg { width: 13px; height: 13px; opacity: 0.95; }
.orange-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-tint); color: var(--orange-dark); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em; margin-top: 20px; }
.orange-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ============== Value callout ============== */
.value-callout { display: inline-flex; align-items: center; gap: 12px; background: var(--orange-tint); border: 1px solid #F8C9A8; padding: 12px 16px 12px 12px; border-radius: 14px; margin-top: 20px; max-width: 100%; flex-wrap: nowrap; }
@media (min-width: 600px) { .value-callout { gap: 14px; padding: 14px 20px 14px 14px; border-radius: 16px; margin-top: 22px; } }
.value-callout-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(232,93,44,0.45); }
.value-callout-icon svg { width: 18px; height: 18px; }
@media (min-width: 600px) { .value-callout-icon { width: 40px; height: 40px; } .value-callout-icon svg { width: 20px; height: 20px; } }
.value-callout-text { display: flex; flex-direction: column; gap: 2px; }
.value-callout-text strong { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 700; font-size: 15px; color: var(--orange-dark); letter-spacing: -0.005em; line-height: 1.25; }
.value-callout-text span { font-size: 15px; color: var(--text); font-weight: 500; line-height: 1.35; }
@media (min-width: 600px) { .value-callout-text strong { font-size: 16px; } .value-callout-text span { font-size: 16px; } }

/* ============== Testimonials ============== */
.testimonials { background: var(--green-050); padding: clamp(36px, 6vw, 68px) 0; }
.testimonials .section-head { text-align: center; max-width: 1100px; margin: 0 auto 28px; }
.testimonials .section-head h2 { margin-top: 18px; }
.testimonial-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .testimonial-grid { gap: 24px; } }
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; position: relative; }
@media (min-width: 600px) { .testimonial { padding: 32px 30px; gap: 22px; } }
.testimonial .stars { display: inline-flex; gap: 2px; color: var(--orange); font-size: 16px; letter-spacing: 0.1em; line-height: 1; }
.testimonial blockquote { margin: 0; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.05rem; line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; font-weight: 500; }
.testimonial .who { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.testimonial .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green-100); display: grid; place-items: center; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px; font-weight: 700; color: var(--green-800); flex-shrink: 0; }
.testimonial .name-row { display: flex; flex-direction: column; gap: 2px; }
.testimonial .name { font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; color: var(--ink); font-size: 16px; }
.testimonial .role { font-size: 16px; color: var(--text-muted); }

/* ============== Sub-category sections ============== */
.subcat-section { padding: clamp(36px, 6vw, 68px) 0; }
.subcat-section.retail   { background: var(--white); }
.subcat-section.workshop { background: var(--cream); }
.subcat-split { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .subcat-split { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.subcat-head { display: flex; flex-direction: column; gap: 16px; align-self: start; }
@media (min-width: 600px) { .subcat-head { gap: 18px; } }
.subcat-head h2 { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0; font-variation-settings: "CASL" 0, "MONO" 0; }
.subcat-head .lede { margin: 0; max-width: 40ch; }
.subcat-head .btn { align-self: flex-start; margin-top: 8px; }
.subcat-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.subcat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (min-width: 600px) { .subcat-card { padding: 24px 22px 22px; gap: 10px; } }
.subcat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 14px 32px -16px rgba(12,31,22,0.18); }
.subcat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; }
.subcat-icon svg { width: 22px; height: 22px; }
.subcat-section.retail   .subcat-icon { background: var(--orange-tint); color: var(--orange-dark); }
.subcat-section.workshop .subcat-icon { background: var(--green-050); color: var(--green-800); }
.subcat-card h4 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.subcat-card p { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.subcat-card .arrow-hint { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 16px; font-weight: 600; color: var(--green-700); }
.subcat-card .arrow-hint svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.subcat-card:hover .arrow-hint svg { transform: translateX(3px); }

/* ============== Featured product ============== */
.featured { background: var(--paper); padding: clamp(36px, 6vw, 68px) 0; border-top: 1px solid var(--border); }
.featured-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .featured-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.featured-visual { background: linear-gradient(135deg, var(--green-050) 0%, var(--cream) 100%); border-radius: var(--radius-lg); aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); }
.featured-visual svg { width: 60%; max-width: 280px; height: auto; }
.featured-visual-tag { position: absolute; top: 18px; left: 18px; background: var(--white); border-radius: 999px; padding: 6px 12px; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-800); box-shadow: 0 4px 12px -6px rgba(12,31,22,0.18); }
.featured-body { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 600px) { .featured-body { gap: 18px; } }
.featured-body h2 { margin: 0; font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); font-variation-settings: "CASL" 0, "MONO" 0; }
.featured-body p.lede { margin: 0; }
.featured-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.featured-bullets li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--text); }
.featured-bullets .check-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.featured-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* ============== Distributor strip ============== */
.distributor { background: var(--white); padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.distributor-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 48px; }
.distributor-label { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.distributor-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; }
.distributor-logo { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: var(--ink); opacity: 0.65; transition: opacity 0.15s ease; font-variation-settings: "CASL" 0; }
.distributor-logo:hover { opacity: 1; }

/* ============== Help section ============== */
.help { background: var(--cream); padding: clamp(36px, 6vw, 68px) 0; }
.help .section-head { text-align: center; max-width: 600px; margin: 0 auto 28px; }
.help .section-head h2 { margin-top: 18px; }
.help .section-head .lede { margin: 16px auto 0; }
.help-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .help-grid { grid-template-columns: repeat(4, 1fr); } }
.help-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); position: relative; }
@media (min-width: 600px) { .help-card { padding: 28px 24px 24px; gap: 12px; } }
.help-card:hover { transform: translateY(-2px); border-color: var(--green-700); box-shadow: 0 14px 30px -16px rgba(12,31,22,0.18); }
.help-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; }
.help-card-icon svg { width: 22px; height: 22px; }
.help-card h3 { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 0; color: var(--ink); font-variation-settings: "CASL" 0; }
@media (min-width: 600px) { .help-card h3 { font-size: 1.15rem; margin: 8px 0 0; } }
.help-card p { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 0; flex: 1; }
.help-card-action { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 600; font-size: 16px; }
@media (min-width: 600px) { .help-card-action { padding-top: 12px; } }
.help-card-action svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.help-card:hover .help-card-action svg { transform: translateX(3px); }
.help-card .coming-soon { position: absolute; top: 20px; right: 20px; background: var(--orange-tint); color: var(--orange-dark); font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }

/* ============== Footer ============== */
.footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: clamp(36px, 5vw, 72px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,0.10); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } }
.footer-brand .footer-logo { font-family: "Recursive", "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.02em; color: #fff; text-decoration: none; font-variation-settings: "CASL" 0; }
.footer-brand .footer-logo sup { font-size: 11px; vertical-align: super; opacity: 0.7; }
.footer-brand p { font-size: 16px; line-height: 1.6; margin: 14px 0 18px; color: rgba(255,255,255,0.65); max-width: 36ch; }
.footer-contact { display: flex; flex-direction: column; gap: 3px; font-size: 16px; }
.footer-contact a { color: #fff; text-decoration: none; opacity: 0.9; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-contact a:hover { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact strong { font-weight: 700; opacity: 0.7; min-width: 30px; }
.footer-col h4 { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .footer-col ul { gap: 12px; } }
.footer-col a { color: #fff; text-decoration: none; font-size: 16px; opacity: 0.85; transition: opacity 0.15s ease; min-height: 44px; display: inline-flex; align-items: center; }
.footer-col a:hover { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0 28px; font-size: 14px; color: rgba(255,255,255,0.55); flex-direction: column; }
@media (min-width: 600px) { .footer-bottom { flex-direction: row; padding: 22px 0 28px; } }
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-bottom-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; }
.footer-bottom-links a:hover { color: #fff; }
.footer-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.footer-badge { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.20); border-radius: 999px; color: rgba(255,255,255,0.7); }

/* ============== Mobile breakpoints ============== */
@media (max-width: 719px) {
  .bar-inner { display: none; }
  .menu { display: none; }
  .book-call { display: none; }
  .ham-btn { display: inline-flex; }
  .mobile-menu { display: block; }
  .hero h1 { max-width: none; }
  .slider-tabs { gap: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) and (max-width: 959px) {
  .bar-inner { display: grid; }
  .menu { display: none; }
  .book-call { display: none; }
  .ham-btn { display: inline-flex; }
  .mobile-menu { display: block; }
}
@media (min-width: 960px) {
  .ham-btn { display: none !important; }
  .mobile-menu { display: none !important; }
  .menu { display: flex; }
  .book-call { display: inline-flex; }
}

/* ============== Mega menu dropdown ============== */

/* Dropdown panel */
.mega-menu-saved-row-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 1040px;
  max-width: 96vw;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--green-700);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 48px -12px rgba(12,31,22,0.18);
  z-index: 200;
  overflow: hidden;
}

/* Strip BB's inline styles that can interfere with layout inside the dropdown */
.mega-menu-saved-row-container .fl-row-content-wrap { padding-top: 0 !important; }

/* 4-column layout */
.mega-panel-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--text);
}

.dx-mega4 {
  display: flex;
  min-height: 260px;
}
.dx-col { flex: 1; padding: 20px 16px; }

/* Col 1 — category list */
.dx-col-1 {
  flex: 0 0 280px; /* was 200px: range and product labels wrapped onto two lines */
  background: var(--green-050);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
}
.menusub-container { display: flex; flex-direction: column; gap: 2px; }
.menusub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.menusub:hover, .menusub.is-active { background: var(--green-100); }
.menusub.is-active a { color: var(--green-700); }
.menusub img { width: 26px; height: auto; flex-shrink: 0; opacity: 0.75; }
.menusub a { color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.menusub a span { color: inherit !important; }
.mega-panel .menusub a:hover { color: var(--green-700) !important; }
.mega-panel a:hover { text-decoration: none !important; }

/* Col 2 — sub-items */
.dx-col-2 {
  flex: 0 0 260px;
  border-right: 1px solid var(--border);
  padding: 20px 16px;
}
.subs { display: none; }
.menu-text-title { padding: 2px 0; }
.menu-text-title a {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega-panel .menu-text-title a:hover {
  background: var(--green-050);
  color: var(--green-700) !important;
  text-decoration: none !important;
}

/* Col 3 — child categories */
.dx-col-3 {
  flex: 1;
  border-right: 1px solid var(--border);
  padding: 20px 16px;
}
.dx-childcats-empty { display: none; }
.dx-childcats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-childcats-list li a {
  font-size: 13.5px;
  color: var(--text);
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dx-childcats-list li a:hover { background: var(--green-050); color: var(--green-700); }

/* Col 4 — preview image */
.dx-col-4 {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: 20px;
}
.mega-promo { width: 100%; display: flex; align-items: center; justify-content: center; }
.mega-promo a { display: block; width: 100%; }
.mega-promo img { display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }

/* ============== Menu search button ============== */
.menu-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.menu-search-btn .icon { fill: var(--text); }
.menu-search-btn:hover .icon,
.menu-search-btn:focus .icon { fill: var(--green-700); }
.menu-search-btn:focus { outline: 2px solid var(--green-700); outline-offset: 2px; }

/* ============== Mega nav — item + panel show/hide ============== */
.mega-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
.mega-item::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: -20px;
  right: -20px;
  height: 16px;
}
.mega-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.mega-item > a:hover { text-decoration: none !important; }
.mega-item > a::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.75;
  transition: transform var(--dur) var(--ease);
}
.mega-item.is-active > a::after { transform: rotate(180deg); }

.mega-panel {
  display: none;
  position: fixed;
  left: 0;
  width: 100vw;
  background: var(--white);
  border-top: 3px solid var(--green-700);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 48px -12px rgba(12,31,22,0.18);
  z-index: 9999;
  overflow: hidden;
}
.mega-panel.is-open { display: block; }

/* BB header containers clip dropdowns by default — force visible */
.fl-builder-content[data-type="header"] .fl-row-content-wrap,
.fl-builder-content[data-type="header"] .fl-col-content,
.fl-builder-content[data-type="header"] .fl-module-content {
  overflow: visible !important;
}

/* ============== Mega nav — item + panel show/hide ============== */
.nav { position: relative; }
.menu { position: static !important; overflow: visible; }

/* Product Categories theme layout — html module spacing */
.fl-node-nqm8l9uryc0a.fl-module-html {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

/* Shop template — sidebar search module spacing (different template, own node) */
.fl-node-t3orqha5ei7y.fl-module-html {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

/* ============================================================
   2026-08-31: Trade Log in demoted from pill to text.
   Ask Iris is the header's one button; the top bar link now
   matches the "Wholesale, trade-only." tag (700 / green-800).
   Applies to both states (#barAccountOut / #barAccountIn).
   Proper fix: strip the pill styles from the header module CSS.
   ============================================================ */
.bar a.account-btn {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--green-800, #0F824A) !important;
}
.bar a.account-btn svg {
  color: var(--green-800, #0F824A) !important;
}
.bar a.account-btn:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--green-800, #0F824A) !important;
  text-decoration: underline !important;
}

/* ============================================================
   2026-08-31: customer gallery was reading as a mockup library,
   not proof — flat artwork renders floating small on white.
   Zoom the artwork to fill each card, soften the card ground,
   and reveal the "Customer work" eyebrow as a Branded-purple
   pill (this section is Branded proof). Same reveal gotcha as
   the other section eyebrows: module ships display:none.
   ============================================================ */
.gallery .eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center;
  background: #2A52BE;
  border: 0 !important;
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.gallery .eyebrow::before { display: none !important; }
.g-case { background: #FDFBF7; overflow: hidden; }
/* Artwork PNGs (1000x500) carry ~20% empty margin; 1.25 makes the
   case content span the full card width without clipping. */
.g-case img { transform: scale(1.25); }

/* ============================================================
   2026-08-31: trust bar logos were blurry and small — the June
   uploads were 340x101 PNGs with ~40% padding baked in, shown
   at 175px. Files replaced in place (trimmed, upscaled 120px
   content height, sharpened; originals in scratchpad). Height-
   keyed sizing beats the module's inline width:175px. Proper
   fix: vector/hi-res exports from Grace's source files.
   ============================================================ */
.compare .compare-logo {
  width: auto !important;
  height: 52px !important;
}

/* Trust bar: more air between logos now they render larger
   (module gap is 10px 20px). */
.compare .compare-inner { gap: 12px 48px; }

/* 2026-09-01: retail + workshop section CTAs demoted from orange pill
   buttons to orange text links (Chris). Green/orange buttons stay the
   site's primary CTA everywhere else; these two are secondary browse
   links. Hover keeps the darker orange + underline for affordance. */
.subcat-section .subcat-head .btn.btn-primary {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--orange, #E8622C) !important;
  font-weight: 700;
  font-size: 22px !important; /* base .btn is 16px; text link carries the size instead of a pill */
}
.subcat-section .subcat-head .btn.btn-primary:hover,
.subcat-section .subcat-head .btn.btn-primary:focus,
.subcat-section .subcat-head .btn.btn-primary:active {
  background: transparent !important;
  color: var(--orange-dark, #D8551A) !important;
  text-decoration: underline !important;
}

/* Branded mega menu + mobile submenu: range group labels (2026-09-02) */
.menusub-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted, #68707e); padding: 8px 10px 2px; }
.menusub-label + .menusub { margin-top: 0; }
.mobile-submenu-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted, #68707e); padding: 10px 0 4px; }

/* Related cards on product pages: keep descriptions to three lines so the grid stays even (2026-09-02) */
.pdp-related .product-specs{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dx-col-1 .menusub a { white-space: nowrap; }

/* Mega menu type sizes (Chris, 2026-09-02): top nav 16, group labels 12, all three columns 15 */
.nav .menu > a, .nav .menu .mega-item > a { font-size: 16px; }
.menusub-label, .mobile-submenu-label { font-size: 12px; }
.dx-col-1 .menusub a { font-size: 15px; }
.dx-col-2 .menu-text-title a { font-size: 15px; }
.dx-col-3 .dx-childcats-list a, .dx-col-3 .dx-childcats-empty { font-size: 15px; }

/* ============================================================
   2026-09-09: Branded chapter band (Chris, "Branded band is the
   clear winner"). The 01 Branded pillar card opens into one
   lavender band that holds the three range cards and Customer
   work, so a browser reads them as one chapter. Retail and
   Workshop eyebrows carry 02 / 03. Mockup: scratchpad
   connect/branded-chapter-mockups.html. Chapter colour is the
   existing Branded cobalt #2A52BE from the range colour system.
   ============================================================ */
:root { --chapter: #2A52BE; --chapter-soft: #E4E9FA; --band: #E4E9FA; --band-line: #C9D3F0; } /* 2026-09-09 Chris: band is the chapter blue, not lavender (too close to Logo Luxe) */

/* The two Beaver Builder rows become one band. */
/* Specificity note: the Customizer CSS zeroes margins on
   .fl-row-full-width > .fl-row-content-wrap with !important and loads
   after this file, so these selectors carry the row classes too. */
.fl-row.fl-row-full-width.fl-node-rgd5ef2ht096 > .fl-row-content-wrap,
.fl-row.fl-row-full-width.fl-node-47k9d5qyr0jn > .fl-row-content-wrap {
  background-color: var(--band) !important;
  width: calc(100% - 24px); max-width: 1480px; margin-left: auto !important; margin-right: auto !important;
}
.fl-row.fl-row-full-width.fl-node-rgd5ef2ht096 > .fl-row-content-wrap { border-radius: 0; } /* 2026-09-09 Chris: square top, rounded top corners read as disconnected from the cards */
.fl-row.fl-row-full-width.fl-node-47k9d5qyr0jn > .fl-row-content-wrap { border-radius: 0 0 22px 22px; }
@media (min-width: 900px) {
  .fl-row.fl-row-full-width.fl-node-rgd5ef2ht096 > .fl-row-content-wrap,
  .fl-row.fl-row-full-width.fl-node-47k9d5qyr0jn > .fl-row-content-wrap { width: calc(100% - 44px); }
}
.fl-node-rgd5ef2ht096 .branded-ranges { background: transparent; padding-top: 40px; padding-bottom: 36px; }
.fl-node-47k9d5qyr0jn .gallery { background: transparent; padding-top: 8px; }
/* Space after the band before the green trust strip. */
.fl-node-47k9d5qyr0jn { margin-bottom: 26px; }

/* Chapter head: pill, hairline, the three stops. */
.chapter-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 0 32px; scroll-margin-top: 90px; }
.chapter-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--chapter); color: #fff; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; }
.chapter-pill em { font-style: normal; font-family: "Atkinson Hyperlegible Mono", ui-monospace, monospace; opacity: 0.85; }
.chapter-line { flex: 1 1 60px; height: 1px; background: var(--band-line); }
.chapter-stops { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--chapter); }
.chapter-stops a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.chapter-stops a:hover { border-bottom-color: currentColor; }
@media (max-width: 599px) { .chapter-stops { display: none; } .chapter-line { display: none; } }

/* Section eyebrow inside the band: soft chip, the chapter pill already says 01 Branded. */
.branded-ranges .eyebrow.eyebrow-soft,
.fl-node-47k9d5qyr0jn .gallery .eyebrow { background: #fff !important; color: var(--chapter) !important; } /* white chip on the blue band */

/* Pillar card: outlined, chips in range colours, CTA scrolls down. */
.category.branded.is-open { box-shadow: inset 0 0 0 3px var(--chapter); }
.category.branded.is-open:hover { box-shadow: inset 0 0 0 3px var(--chapter); }
.category.branded .cat-pills .pill.pill-ll { border-color: #6B4E9E; color: #6B4E9E; background: #F3EFF9; }
.category.branded .cat-pills .pill.pill-pp { border-color: #2E9E9C; color: #2E9E9C; background: #E9F6F5; }
.category.branded .cat-pills .pill.pill-bb { border-color: #B0276E; color: #B0276E; background: #F9E9F1; }
.category .meta-row .arrow.arrow-down { transform: none; }
.category.branded.is-open:hover .meta-row .arrow.arrow-down { transform: translateY(3px); }

/* Connector from the pillar card down into the band (three-column layout only).
   --connector-x is measured by the small script in the range module; the calc is the fallback. */
@media (min-width: 900px) {
  .fl-node-rgd5ef2ht096 > .fl-row-content-wrap::before {
    content: ""; position: absolute; top: -60px; height: 100px; width: 3px; background: var(--chapter); /* 60px of paper + 40px band padding, lands on the pill */
    left: var(--connector-x, calc(50% - min(1280px, 100% - 56px) / 3)); z-index: 3;
  }
  .fl-node-rgd5ef2ht096 > .fl-row-content-wrap { overflow: visible; }
}

/* Bridge row between the range cards and Customer work. */
.chapter-bridge { display: flex; align-items: center; gap: 18px; margin-top: 26px; background: #fff; border: 1px solid var(--band-line); border-radius: 14px; padding: 12px 18px; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.chapter-bridge:hover { box-shadow: 0 14px 30px -18px rgba(42,82,190,.45); transform: translateY(-1px); }
.chapter-bridge-thumbs { display: flex; flex-shrink: 0; }
.chapter-bridge-thumbs img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 2px solid #fff; background: #fff; margin-left: -10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chapter-bridge-thumbs img:first-child { margin-left: 0; }
.chapter-bridge-text { font-size: 15px; line-height: 1.4; color: var(--text-muted, #566963); }
.chapter-bridge-text strong { color: var(--ink, #0C1F16); }
.chapter-bridge-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; color: var(--green-800, #0F824A); font-size: 15px; }
.chapter-bridge-cta .arrow { width: 16px; height: 16px; }
@media (max-width: 720px) { .chapter-bridge { flex-wrap: wrap; } .chapter-bridge-cta { margin-left: 0; } }

/* Retail and Workshop eyebrows carry their chapter number. */
.subcat-section .eyebrow .chapter-num { font-style: normal; font-family: "Atkinson Hyperlegible Mono", ui-monospace, monospace; opacity: 0.85; margin-right: 9px; }

/* ============================================================
   2026-09-09: pillar cards as three separate cards (Chris, mockup):
   24px gap, 14px radius, 1px border, no coloured top bar or photo
   wash, short chip labels. Overrides the joined-grid rules above.
   ============================================================ */
.category-grid { gap: 24px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; } /* !important: the BB module ships an inline copy of the joined-grid rule after this file */
.category { border: 1px solid var(--border) !important; border-radius: 14px !important; overflow: hidden !important; }
.category .cat-visual { border-bottom: 1px solid var(--border); }
.category .cat-visual::before, .category .cat-visual::after { display: none; }
.category-grid .cat-visual-label .num { font-size: 13px !important; }
.category-grid .cat-visual-label::after { font-size: 13px; }
.category.branded  .cat-visual-label::after { content: "Custom-branded accessories"; }
.category.retail   .cat-visual-label::after { content: "Retail-ready accessories"; }
.category.workshop .cat-visual-label::after { content: "Workshop tools & parts"; }
.category.branded.is-open, .category.branded.is-open:hover { box-shadow: inset 0 0 0 3px var(--chapter); }

/* ============================================================
   2026-09-09 (Chris): no "The three ranges" chip inside the band, the
   chapter pill already names it. How it works slimmed to the mockup:
   no heading row, thin chapter-blue top edge, outlined number pills,
   one line per step.
   ============================================================ */
.branded-ranges .eyebrow.eyebrow-soft { display: none !important; }
.branded-ranges .process-bar { border: 1px solid var(--border) !important; border-top: 3px solid var(--chapter) !important; border-radius: 14px !important; padding: 16px 22px 18px !important; margin: 0 0 24px !important; }
.branded-ranges .process-bar-header { display: none !important; }
.branded-ranges .process-bar-steps { gap: 18px !important; }
.branded-ranges .process-step-mini { gap: 4px !important; }
.branded-ranges .process-step-mini:not(:last-child)::after { display: none !important; }
.branded-ranges .step-mini { width: auto !important; height: auto !important; padding: 1px 8px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid var(--chapter) !important; color: var(--chapter) !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; align-self: flex-start; margin-bottom: 4px; }
.branded-ranges .process-step-title { font-size: 14px !important; margin: 0 !important; }
.branded-ranges .process-step-desc { font-size: 14px !important; line-height: 1.45 !important; }

/* 2026-09-09: the chapter number is an em, and Code Snippet 15 paints every em grey; keep it white. */
.chapter-pill em { color: #fff !important; opacity: 1 !important; }

/* 2026-09-09 (Chris): no numbers on the three top-level ranges. Hides the 01/02/03 on the
   pillar chips, the Branded chapter pill and the Retail / Workshop eyebrows (markup lives in
   BB modules, so this is CSS until the modules are edited). */
.cat-visual-label .num, .chapter-pill em, .eyebrow .chapter-num { display: none !important; }

/* 2026-09-09 Chris: featured stand is a clean cutout on the section's own gradient, not a pasted store scene. */
.featured-visual img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; background: #F4F4F4; padding: 0 !important; } /* 2026-09-15: studio lineup render fills the box */
.featured-visual { aspect-ratio: 3 / 2 !important; } /* 2026-09-15: match the 3:2 lineup render */

/* 2026-09-09 Chris: the 50 years sentence sits alone on the third line of the hero lede. */
@media (min-width: 700px) { .ps-hero-lede-line { display: block; } }

/* 2026-09-11 Chris: each range card body carries a light tint of its own pill colour, photo stays clean.
   Branded uses the chapter band shade so the open card and its band read as one. */
.category.branded  .cat-body { background: var(--band); }
.category.retail   .cat-body { background: #FEF6E8; } /* marigold #F2A21B at ~10% */
.category.workshop .cat-body { background: #F0EEE8; } /* warm stone, steel pulled towards the paper tone so it does not read disabled */
.category .cat-pills .pill { background: #fff; }

/* 2026-09-11 Chris: custom-branded band reads ranges first, then How it works, then customer work,
   matching the chapter stops. Free artwork folded into step 2, callout removed. Steps read as a
   sequence: filled chapter-blue number pills on one connecting line, compact sub-header restored. */
.branded-ranges .technique-grid { margin-bottom: 28px; }
.branded-ranges .process-bar-header { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 14px !important; margin-bottom: 18px !important; border-bottom: 1px solid var(--band-line) !important; }
.branded-ranges .process-bar-label { font-size: 13px !important; letter-spacing: 0.14em; }
.branded-ranges .process-bar-meta { font-size: 15px !important; }
.branded-ranges .process-bar-steps { position: relative; }
.branded-ranges .process-step-mini { position: relative; }
@media (min-width: 760px) {
  .branded-ranges .process-step-mini:not(:last-child)::before { content: ""; position: absolute; top: 11px; left: 0; right: -18px; height: 1px; background: var(--band-line); }
}
.branded-ranges .step-mini { position: relative; z-index: 1; background: var(--chapter) !important; color: #fff !important; border-color: var(--chapter) !important; }

/* 2026-09-11 Chris: sprays, cloths and bags in the custom-branded band. The lede becomes a row of four
   linked product thumbs beside the heading, and each range card names what it carries. */
.brand-what { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .brand-what { justify-self: end; align-items: flex-end; } }
.brand-what-label { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chapter); }
.brand-what-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.brand-what-list a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; text-decoration: none; text-align: center; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.brand-what-list img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--band-line); box-shadow: 0 2px 8px rgba(42,82,190,0.12); transition: transform .2s ease, box-shadow .2s ease; }
.brand-what-list a:hover img { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(42,82,190,0.22); }
.brand-what-list a:hover span { color: var(--chapter); }
.technique-includes { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 13px; color: var(--text-muted); margin-top: -6px; letter-spacing: 0.01em; }
.brand-what-thumb { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--band-line); box-shadow: 0 2px 8px rgba(42,82,190,0.12); transition: transform .2s ease, box-shadow .2s ease; display: block; }
.brand-what-list img { width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none; transform: scale(1.45); transition: none; }
.brand-what-list a:hover img { transform: scale(1.45); box-shadow: none; }
.brand-what-list a:hover .brand-what-thumb { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(42,82,190,0.22); }
.brand-what-thumb { display: grid; place-items: center; color: var(--chapter); }
.brand-what-thumb svg { width: 34px; height: 34px; display: block; }
.brand-what-list a:hover .brand-what-thumb { background: var(--chapter); color: #fff; border-color: var(--chapter); }

/* 2026-09-13 Chris: product row back to photos, each one pre-cropped to fill its disc (uploads/2026/09/brand-what). */
.brand-what-thumb { display: block; overflow: hidden; }
.brand-what-list img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.brand-what-list a:hover img { transform: none; }
.brand-what-list a:hover .brand-what-thumb { background: #fff; border-color: var(--band-line); }

/* No dots in pills (Chris, 14 Sep 2026): eyebrow and range pills are text only.
   !important beats the same ::before dots in the page CSS files and the
   Customizer Additional CSS, which prints after this file. */
.eyebrow::before,
.ab-eyebrow::before,
.ct-eyebrow::before,
.lg-eyebrow::before,
.ma-eyebrow::before,
.range-pill::before { content: none !important; display: none !important; }

/* How it works header divider removed (Chris, 14 Sep 2026). Extra
   .process-bar in the selector outranks the Customizer rule, which prints later. */
.branded-ranges .process-bar .process-bar-header,
.process-bar .process-bar-header { border-bottom: 0 !important; }

/* Branded card tab (Chris, 14 Sep 2026, option A): the open Branded card runs
   straight down into the lavender band instead of a thin line. The homepage
   module script sets --connector-left / --connector-w from the card rect. */
@media (min-width: 900px) {
  .fl-node-rgd5ef2ht096 > .fl-row-content-wrap::before {
    left: var(--connector-left, calc(50% - min(1280px, 100% - 56px) / 2));
    width: var(--connector-w, calc(min(1280px, 100% - 56px) / 3));
    top: -76px; height: 77px;
    background: var(--chapter-soft, #E4E9FA);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    box-sizing: border-box;
  }
}

/* 2026-09-15: when the gallery falls back to contain (tall or wide photos), a white ground instead of the blue gradient so white-background photos do not float as a column. */
.pdp-main-image.is-contain { background: #fff !important; }

/* 2026-09-15: a product this visitor cannot buy shows only the "Not available in <market>" notice in the buy panel: no options, quantity or button. */
.pdp-order-card.is-restricted .pdp-section, .pdp-order-card.is-restricted .pdp-ctas, .pdp-order-card.is-restricted .pdp-noacct { display: none !important; }
.pdp-order-card.is-restricted .pdp-price { margin-bottom: 0 !important; }
/* 25 Sep 2026: bespoke and branded panels use the same notice; hide their buy sections too. */
.pdp-info.is-restricted .pdp-section, .pdp-info.is-restricted .pdp-ctas, .pdp-info.is-restricted .btn-sample, .pdp-info.is-restricted .moq-progress, .pdp-info.is-restricted .pdp-trust { display: none !important; }

/* product-search.css */
/* =============================================================
   Product search — header pill + hero variant.
   Tokens come from optica-bb.css / customizer.css. Selectors prefixed
   ps- to avoid BB conflicts. Shared .ps-results dropdown styling.
   ============================================================= */

/* ---- Header search (white pill on the green nav bar) ----
   Nav spacing (.nav-inner, .menu, .book-call, .cart) is tightened in
   customizer.css instead of here — that stylesheet is loaded from the
   DB later than this one and wins any !important tie, so overriding it
   here silently did nothing. See customizer.css for the real values. */
/* margin: 0 !important overrides a site-wide "form { margin-bottom: 25px
   !important }" base style (not from this theme's own CSS — source not
   found locally, likely WP core/parent theme) that was invisibly
   pulling this pill upward in the flex row, since it's the first
   <form> element ever placed in the nav bar. !important is required to
   beat the source rule's own !important; .ps-header-search (a class)
   still wins on specificity over the bare "form" element selector
   regardless of which file loads first. */
.ps-header-search { position: relative; flex: 1 1 auto; max-width: 340px; min-width: 180px; margin: 0 !important; }

/* Header search bar hidden sitewide per Dennis's request. !important beats
   both this file's own mobile-breakpoint rules below and any inline
   style="display:..." the JS toggle sets, so it can't be reopened. */
.ps-header-search, .ps-header-icon-btn { display: none !important; }
.ps-header-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 14px;
  background: #fff;
  border-radius: 999px;
  transition: box-shadow var(--dur) var(--ease);
}
.ps-header-field svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.ps-header-field .ps-input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-header-field .ps-input::placeholder { color: var(--text-muted); }
.ps-header-search.is-focused .ps-header-field { box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }

.ps-header-icon-btn {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ps-header-icon-btn svg { width: 19px; height: 19px; }

/* ---- Sidebar search (compact widget, no visible submit button) ---- */
.ps-sidebar-search { position: relative; width: 100%; margin-bottom: 20px !important; }
.ps-sidebar-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ps-sidebar-field svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.ps-sidebar-field .ps-input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  width: 100%;
  min-width: 0;
}
.ps-sidebar-field .ps-input::placeholder { color: var(--text-muted); }
.ps-sidebar-search.is-focused .ps-sidebar-field { border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-050); }

@media (max-width: 999px) {
  .ps-header-search { display: none; }
  .ps-header-icon-btn { display: inline-flex; }
  .ps-header-search.is-mobile-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: 12px 16px;
    background: var(--green-700, #13A35A);
  }
}

/* ---- Hero search (large centred bar) ---- */
.ps-hero-search { position: relative; max-width: 660px; margin: 0 auto; }
.ps-hero-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  margin-top: 20px;
  padding: 0 8px 0 22px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(12,31,22,0.06);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ps-hero-field > svg { width: 22px; height: 22px; color: var(--text-muted); flex: none; }
.ps-hero-field .ps-input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 17px; color: var(--text); width: 100%; }
.ps-hero-field .ps-input::placeholder { color: var(--text-muted); }
/* 2026-08-31: keep the input invisible in every state so nothing draws a
   faint inner box inside the pill (theme input rules, hover/focus, and
   Chrome autofill tint). */
.ps-hero-field .ps-input,
.ps-hero-field .ps-input:hover,
.ps-hero-field .ps-input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ps-hero-field .ps-input:-webkit-autofill,
.ps-hero-field .ps-input:-webkit-autofill:hover,
.ps-hero-field .ps-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
}
.ps-hero-field .ps-input::-webkit-search-decoration,
.ps-hero-field .ps-input::-webkit-search-results-button { display: none; }
.ps-hero-go {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* 8px read as a double space between "Search" and "products" */
  flex: none;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ps-hero-go:hover { background: var(--orange-dark); }
.ps-hero-search.is-focused .ps-hero-field { border-color: var(--green-700); box-shadow: 0 0 0 4px var(--green-050), var(--shadow); }

/* 2026-08-31: chips hidden per Chris. Restore by swapping display back to flex. */
.ps-hero-chips { display: none; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 20px auto 0; max-width: 720px; }
.ps-chip {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 15px;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.ps-chip:hover { border-color: var(--green-700); color: var(--green-800); background: var(--green-050); text-decoration: none; }

.ps-hero-chips .ps-chip:nth-child(1) { background: #8977C8; border-color: #8977C8; color: #fff; }
.ps-hero-chips .ps-chip:nth-child(2) { background: #13A35A; border-color: #13A35A; color: #fff; }
.ps-hero-chips .ps-chip:nth-child(3) { background: #B7552A; border-color: #B7552A; color: #fff; }
.ps-hero-chips .ps-chip:nth-child(1):hover { background: #7462b3; border-color: #7462b3; color: #fff; }
.ps-hero-chips .ps-chip:nth-child(2):hover { background: #0e8a4a; border-color: #0e8a4a; color: #fff; }
.ps-hero-chips .ps-chip:nth-child(3):hover { background: #9c4620; border-color: #9c4620; color: #fff; }

@media (max-width: 720px) {
  .ps-hero-go span { display: none; }
  .ps-hero-go { padding: 0 16px; }
}

/* ---- Hero section content (eyebrow, headline, lede, stats) ----
   Values match mockups/hero-search-design 1.html exactly. */
.ps-hero-section {
  position: relative;
  overflow: visible;
  padding: clamp(46px, 6vw, 44px) 28px clamp(52px, 6vw, 60px);
  text-align: center;
  background:
    radial-gradient(60% 55% at 20% 10%, #E8E0F4 0%, transparent 60%),
    radial-gradient(55% 50% at 85% 15%, #D7EFEE 0%, transparent 62%);
}
.ps-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-800);
}
.ps-hero-title {
  font-family: "Recursive", "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 6.6rem);
  line-height: 1.10;
  color: var(--green-700);
  max-width: none;
  margin: 18px auto 0;
}
@media (max-width: 720px) {
  .ps-hero-title {
    font-size: clamp(3.3rem, 5vw, 3.9rem) !important;
  }
}
.ps-hero-title em {
  display: block;
  font-family: "Recursive", "Atkinson Hyperlegible Next", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #1a1a1a;
}
.ps-hero-lede {
  font-size: clamp(17px, 2vw, 22px);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 56ch;
  margin: 20px auto 0;
}

.ps-hmeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 40px;
  margin: 38px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  max-width: 640px;
}
.ps-hmeta .m { display: flex; flex-direction: column; gap: 3px; }
.ps-hmeta .num { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.ps-hmeta .lab { font-size: 13px; color: var(--text-muted); }

/* ---- Shared predictive results dropdown ---- */
.ps-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 60;
  text-align: left;
}
.ps-results-head { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 6px; }
.ps-res { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; transition: background var(--dur); }
.ps-res:hover, .ps-res.is-active { background: var(--green-050); }
.ps-res-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--paper); border: 1px solid var(--border); flex: none; }
.ps-res-body { min-width: 0; }
.ps-res-name { font-size: 14.5px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-res-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.ps-res-sku { color: var(--green-700); font-weight: 700; }
.ps-res-cardmeta, .ps-res-pricerow { display: none; }

/* ---- Sidebar variant: live results replace the page's product grid
   directly (product-grid-cards.css .fl-post-grid-post styling), no
   dropdown. Plain CSS Grid — BB's own JS masonry positioning only runs on
   its server-rendered markup, not on content injected after the fact. ---- */
.fl-post-grid.ps-live-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  position: static !important;
  height: auto !important;
}
.fl-post-grid.ps-live-grid .fl-post-column { position: static !important; width: auto !important; }
.ps-live-wrap { margin-top: 8px; }
.ps-live-empty { padding: 24px 4px; font-size: 15px; color: var(--text-muted); text-align: center; }
.ps-live-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ps-live-pagination button:hover:not(:disabled) { background: var(--green-050); color: var(--green-800); }
.ps-live-pagination button.is-current { background: var(--green-700); color: #fff; }
.ps-live-pagination button:disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.ps-live-pagination .pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 40px; color: var(--text-muted); }
.ps-results-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  color: var(--green-800);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
}
.ps-results-foot:hover { background: var(--green-050); border-radius: 0 0 10px 10px; }
.ps-results-empty { padding: 14px 12px; font-size: 14px; color: var(--text-muted); }