/*
Theme Name:  Supply Co
Theme URI:   https://oswaldsupplies.co.za
Description: A clean, elegant WooCommerce theme for corporate & promotional suppliers. Inspired by Brandability.co.za. Full Customizer control over colours, typography, spacing and layout — no coding required.
Version:     1.0.0
Author:      Promptsol
Author URI:  https://promptsol.co.za
Text Domain: supply-co
WC tested up to: 9.0
Requires PHP: 8.0
*/

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--sc-topbar-h, 36px) + var(--sc-header-h) + 16px); }
body {
  font-family: var(--sc-font-body);
  font-size: var(--sc-font-size);
  line-height: var(--sc-lh-body);
  color: var(--sc-text);
  background: var(--sc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sc-primary); }
button { cursor: pointer; font-family: var(--sc-font-body); border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS  (all overridden by Customizer → Theme Settings)
═══════════════════════════════════════════════════════════════ */
:root {
  /* All these are overridden by Customizer → Theme Settings */
  --sc-primary:      #1284d0;
  --sc-primary-h:    #0e6aaa;
  --sc-accent:       #ae363e;
  --sc-accent-h:     #8f2a31;
  --sc-text:         #1e1e1e;
  --sc-text-muted:   #6b7280;
  --sc-text-light:   #9ca3af;
  --sc-bg:           #ffffff;
  --sc-bg-soft:      #f9fafb;
  --sc-bg-mid:       #f3f4f6;
  --sc-border:       #e5e7eb;
  --sc-border-dark:  #d1d5db;
  --sc-success:      #166534;
  --sc-success-bg:   #dcfce7;
  --sc-error:        #991b1b;
  --sc-error-bg:     #fee2e2;
  /* Typography */
  --sc-font-body:    'Inter', system-ui, sans-serif;
  --sc-font-head:    'Inter', system-ui, sans-serif;
  --sc-font-size:    15px;
  --sc-fw-body:      400;
  --sc-fw-heading:   700;
  --sc-lh-body:      1.65;
  --sc-lh-heading:   1.2;
  --sc-ls-heading:   -0.02em;
  /* Layout */
  --sc-max-width:    1340px;
  --sc-sidebar-w:    240px;
  --sc-radius:       6px;
  --sc-radius-lg:    10px;
  --sc-header-h:     68px;
  --sc-logo-h:       44px;
  /* Buttons (Customizer-driven) */
  --sc-btn-r:        6px;
  --sc-btn-pv:       11px;
  --sc-btn-ph:       24px;
  --sc-btn-fs:       14px;
  --sc-btn-fw:       600;
  --sc-btn-tt:       none;
  --sc-btn-ls:       0em;
  /* Nav */
  --sc-nav-bg:       #ffffff;
  --sc-nav-border:   #e5e7eb;  /* neutral grey — not primary-tinted */
  --sc-nav-text:     #1e1e1e;
  --sc-nav-hover:    #1284d0;
  --sc-nav-active:   #1284d0;
  --sc-nav-fs:       13.5px;
  --sc-nav-fw:       500;
  --sc-nav-tt:       none;
  /* Header */
  --sc-header-bg:    #ffffff;
  --sc-header-border:#e5e7eb;
  --sc-topbar-h:     36px;      /* topbar height — used in sticky chain calculations */
  --sc-topbar-bg:    #1284d0;
  --sc-topbar-text:  #ffffff;
  /* WooCommerce */
  --sc-img-h:        220px;
  --sc-shop-cols:    4;
  /* Footer */
  --sc-footer-bg:       #1e1e1e;
  --sc-footer-text:     #9ca3af;
  --sc-footer-heading:  #d1d5db;
  --sc-footer-link:     #6b7280;
  --sc-footer-link-hover:#ffffff;
  /* Shadows */
  --sc-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sc-shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --sc-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.sc-container { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 24px; }
.sc-section { padding: 64px 0; }
.sc-section--soft { background: var(--sc-bg-soft); }
.sc-section--dark { background: var(--sc-primary); }
.sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.sc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.sc-flex { display: flex; align-items: center; }
.sc-flex-between { display: flex; align-items: center; justify-content: space-between; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sc-font-head);
  font-weight: var(--sc-fw-heading);
  line-height: var(--sc-lh-heading);
  letter-spacing: var(--sc-ls-heading);
  color: var(--sc-text);
  letter-spacing: -.02em;
}
h1 { font-size: clamp(28px, 4vw, 46px); }
h2 { font-size: clamp(22px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 24px); }
h4 { font-size: 17px; }
p { color: var(--sc-text-muted); }
.sc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-accent);
  display: block;
  margin-bottom: 10px;
}
.sc-section-title { margin-bottom: 6px; }
.sc-section-subtitle { color: var(--sc-text-muted); font-size: 15px; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.sc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type="submit"],
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sc-font-body);
  font-size: var(--sc-btn-fs);
  font-weight: var(--sc-btn-fw);
  letter-spacing: var(--sc-btn-ls);
  padding: var(--sc-btn-pv) var(--sc-btn-ph);
  border-radius: var(--sc-btn-r);
  text-transform: var(--sc-btn-tt);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
  text-decoration: none;
  white-space: nowrap;
  background: var(--sc-primary);
  color: #fff;
}
.sc-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input[type="submit"]:hover { background: var(--sc-primary-h); color: #fff; }

.sc-btn--accent { background: var(--sc-accent); color: #fff; }
.sc-btn--accent:hover { background: var(--sc-accent-h); color: #fff; }

.sc-btn--outline {
  background: transparent;
  color: var(--sc-primary);
  border-color: var(--sc-border-dark);
}
.sc-btn--outline:hover { border-color: var(--sc-primary); background: var(--sc-bg-soft); }

.sc-btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.sc-btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }

.sc-btn--sm { padding: 8px 16px; font-size: 13px; }
.sc-btn--lg { padding: 14px 32px; font-size: 16px; }
.sc-btn--full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════ */
.sc-input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--sc-font-body);
  color: var(--sc-text);
  background: #fff;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.sc-input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px rgba(18,132,208,.08);
}
.sc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-text);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════════════════ */
.sc-topbar {
  background: var(--sc-topbar-bg);
  padding: 8px 0;
  font-size: 12.5px;
  position: sticky;   /* topbar also sticks so it doesn't leave a gap nav falls into */
  top: 0;
  z-index: 101;       /* above nav */
}
/* With WP admin bar the topbar sits below it */
.admin-bar .sc-topbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .sc-topbar { top: 46px; } }
.sc-topbar-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sc-topbar-message {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--sc-topbar-text);  
  font-weight: 500;
}
.sc-topbar-message strong { color: #fff; }
.sc-topbar-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sc-topbar-links a {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
}
.sc-topbar-links a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.sc-header {
  background: var(--sc-header-bg, #ffffff);
  border-bottom: 1px solid var(--sc-header-border);
  position: sticky;
  top: var(--sc-topbar-h, 36px);  /* sits directly below the sticky topbar */
  z-index: 100;
  transition: box-shadow .2s, top .2s;
}
/* With WP admin bar — chain all three: admin-bar(32) → topbar(36) → nav(68) */
.admin-bar .sc-header { top: calc(32px + var(--sc-topbar-h, 36px)); }
@media (max-width: 782px) { .admin-bar .sc-header { top: calc(46px + var(--sc-topbar-h, 36px)); } }
.sc-header.is-scrolled { box-shadow: var(--sc-shadow-md); }
.sc-header-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--sc-header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Logo placeholder — user sets via Customizer */
.sc-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
/* Logo image — every selector WP might use */
.sc-logo img,
.sc-logo .custom-logo,
.sc-logo-img,
.custom-logo-link img,
.custom-logo-link .custom-logo,
header .custom-logo,
img.custom-logo {
  height: var(--sc-logo-h) !important;
  width: auto !important;
  max-width: 280px !important;
  max-height: var(--sc-logo-h) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
}
/* Logo link wrapper — must NOT have a fixed height, only flex alignment */
.sc-logo,
.sc-logo a,
.sc-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  /* NO height here — it was clipping the image on narrower viewports */
  overflow: visible !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
/* Fallback text logo if no image set */
.sc-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-primary);
  letter-spacing: -.03em;
}

/* Search */
.sc-search {
  flex: 1;
  max-width: 440px;
}
.sc-search-form {
  display: flex;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.sc-search-form:focus-within {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px rgba(18,132,208,.08);
}
.sc-search-form input {
  flex: 1;
  border: none;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--sc-text);
  background: var(--sc-bg-soft);
  outline: none;
}
.sc-search-form button {
  background: var(--sc-primary);
  color: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  transition: background .15s;
}
.sc-search-form button:hover { background: var(--sc-primary-h); }

/* Header actions */
.sc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.sc-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  color: var(--sc-text);
  font-size: 11px;
  font-weight: 500;
  transition: color .15s;
  text-decoration: none;
  border-radius: var(--sc-radius);
}
.sc-icon-link:hover { color: var(--sc-primary); background: var(--sc-bg-soft); }
.sc-cart-link {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #6b7280;
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--sc-radius);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  transition: background .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.sc-cart-link:hover { background: #4b5563; color: #fff; }
.sc-cart-count {
  background: var(--sc-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Hamburger */
.sc-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: #fff;
  flex-shrink: 0;
}
.sc-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--sc-text);
  border-radius: 1px;
  transition: transform .25s, opacity .25s;
}
.sc-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sc-hamburger.open span:nth-child(2) { opacity: 0; }
.sc-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   NAV BAR  (below header — Brandability style)
═══════════════════════════════════════════════════════════════ */
.sc-navbar {
  background: var(--sc-nav-bg);
  border-bottom: 1px solid var(--sc-nav-border);
}
.sc-navbar-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sc-navbar-inner a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  font-size: var(--sc-nav-fs);
  font-weight: var(--sc-nav-fw);
  color: var(--sc-nav-text);
  text-transform: var(--sc-nav-tt);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.sc-navbar-inner a:hover,
.sc-navbar-inner a.active,
.sc-navbar-inner a.current-menu-item {
  color: var(--sc-nav-hover);
  border-bottom-color: var(--sc-nav-active);
}
/* All Products gets a filled style — like Brandability's category button */
.sc-navbar-inner .sc-nav-all {
  background: var(--sc-primary);
  color: #fff !important;
  padding: 12px 20px;
  font-weight: 600;
  border-bottom: 2px solid transparent !important;
  margin-right: 8px;
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}
.sc-navbar-inner .sc-nav-all:hover {
  background: var(--sc-primary-h);
  color: #fff !important;
  border-bottom-color: transparent !important;
}
/* Prevent active state bleeding onto the filled button */
.sc-navbar-inner a.sc-nav-all.active,
.sc-navbar-inner a.sc-nav-all.current-menu-item {
  color: #fff !important;
  border-bottom-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════════════════════════ */
.sc-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.sc-drawer.open { opacity: 1; pointer-events: all; display: block; }
.sc-drawer-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 300px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sc-drawer.open .sc-drawer-panel { transform: translateX(0); }
.sc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-primary);
  color: #fff;
  flex-shrink: 0;
}
.sc-drawer-head button { background: none; border: none; color: #fff; cursor: pointer; display: flex; }
.sc-drawer-search { padding: 12px 16px; border-bottom: 1px solid var(--sc-border); }
.sc-drawer-search form { display: flex; gap: 8px; }
.sc-drawer-search input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--sc-border); border-radius: var(--sc-radius); font-size: 14px; outline: none; }
.sc-drawer-search button { background: var(--sc-primary); color: #fff; border: none; border-radius: var(--sc-radius); padding: 8px 12px; cursor: pointer; display: flex; align-items: center; }
.sc-drawer-label { padding: 10px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sc-text-light); }
.sc-drawer-panel a,
.sc-drawer-panel button.sc-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-text);
  border-bottom: 1px solid var(--sc-border);
  transition: background .15s, color .15s;
  background: none;
  border-left: none; border-right: none; border-top: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none;
}
.sc-drawer-panel a:hover,
.sc-drawer-panel button.sc-drawer-link:hover { background: var(--sc-bg-soft); color: var(--sc-primary); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE CATEGORY PILLS
═══════════════════════════════════════════════════════════════ */
.sc-cat-pills {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--sc-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-cat-pills-inner {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  white-space: nowrap;
}
.sc-cat-pills-inner a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sc-text);
  border: 1.5px solid var(--sc-border);
  border-radius: 100px;
  transition: all .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.sc-cat-pills-inner a.active,
.sc-cat-pills-inner a:hover { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════════════ */
.sc-trust { background: #fff; border-top: 1px solid var(--sc-border); border-bottom: 1px solid var(--sc-border); }
.sc-trust-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sc-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid var(--sc-border);
}
.sc-trust-item:last-child { border-right: none; }
.sc-trust-icon { color: var(--sc-primary); flex-shrink: 0; }
.sc-trust-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--sc-text); }
.sc-trust-text span { font-size: 12px; color: var(--sc-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.sc-hero {
  background: var(--sc-primary);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
/* Dark overlay for when a background image is set — hidden by default */
.sc-hero-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
  pointer-events: none;
}
.sc-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.sc-hero-actions {
  justify-content: center;
}
.sc-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin-bottom: 14px;
}
.sc-hero h1 {
  color: #fff;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 20px;
}
.sc-hero p { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; margin-bottom: 36px; }
.sc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sc-hero-deco {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.sc-hero-deco2 {
  position: absolute;
  right: 60px;
  bottom: -180px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}


/* Promo strip */
.sc-promo {
  background: var(--sc-accent);
  padding: 10px 0;
}
.sc-promo-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.sc-promo-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.sc-promo-sep { color: rgba(255,255,255,.4); font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
   CATEGORY GRID
═══════════════════════════════════════════════════════════════ */
.sc-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sc-cat-card {
  display: block;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: box-shadow .2s, border-color .2s;
}
.sc-cat-card:hover { box-shadow: var(--sc-shadow-md); border-color: var(--sc-primary); }
.sc-cat-card:hover .sc-cat-card-icon-wrap::before { opacity: 1.4; }
.sc-cat-card-img {
  height: 160px;
  background: var(--sc-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sc-cat-card-img img,
.sc-cat-card-img .sc-cat-thumb-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .3s ease;
}
.sc-cat-card:hover .sc-cat-thumb-img {
  transform: scale(1.04);
}
.sc-cat-card-icon { color: var(--sc-primary); opacity: .5; }
.sc-cat-card-body {
  padding: 14px 16px;
  border-top: 1px solid var(--sc-border);
}
.sc-cat-card-name { font-size: 13.5px; font-weight: 600; color: var(--sc-text); }
.sc-cat-card-count { font-size: 12px; color: var(--sc-text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID & CARDS  (Brandability style)
═══════════════════════════════════════════════════════════════ */
.sc-prod-grid,
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--sc-shop-cols), 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/* WC <li> wrapper — this is what shows the card border + curves */
.woocommerce ul.products li.product,
ul.products li.product {
  background: #fff;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  box-shadow: var(--sc-shadow-md) !important;
  border-color: var(--sc-border-dark) !important;
  transform: translateY(-2px) !important;
}
.sc-li-wrap { display: contents; }
/* Our inner div — no separate border, just fills the li */
.sc-prod-card {
  background: #fff;
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sc-prod-card:hover {
  box-shadow: var(--sc-shadow-md);
  border-color: var(--sc-border-dark);
  transform: translateY(-2px);
}

/* Product image */
.sc-prod-img {
  position: relative;
  background: var(--sc-bg-soft);
  height: var(--sc-img-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sc-prod-img img,
.woocommerce ul.products li.product img {
  width: 100%;
  height: var(--sc-img-h);
  object-fit: contain;
  padding: 16px;
  transition: transform .3s;
}
.sc-prod-card:hover .sc-prod-img img,
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }
.sc-prod-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .05em;
  z-index: 1;
}
.sc-prod-badge--new { background: var(--sc-accent); color: #fff; }
.sc-prod-badge--sale { background: #e05c1a; color: #fff; }
.sc-prod-badge--eco { background: #166534; color: #fff; }
.woocommerce span.onsale { background: #e05c1a !important; border-radius: 100px !important; font-size: 10px !important; font-weight: 700 !important; min-height: auto !important; min-width: auto !important; padding: 3px 9px !important; }

/* Product body */
.sc-prod-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sc-prod-cat {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-primary);
  margin-bottom: 5px;
}
.sc-prod-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-text);
  line-height: 1.4;
  margin-bottom: 6px;
  flex: 1;
  padding: 0;
  font-family: var(--sc-font-body);
}
/* Name link wrapper — inherits colour, no underline */
.sc-prod-name-link,
.sc-prod-name-link:hover { color: inherit; text-decoration: none; }
.sc-prod-name-link:hover .sc-prod-name { color: var(--sc-primary); transition: color .15s; }
/* Image link wrapper */
.sc-prod-img-link { display: block; text-decoration: none; }
.sc-prod-sku { font-size: 11px; color: var(--sc-text-light); font-family: monospace; margin-bottom: 8px; }
.sc-prod-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-prod-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.sc-prod-pill--brand { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sc-prod-pill--moq   { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }

/* Product footer */
.sc-prod-footer {
  padding-top: 12px;
  border-top: 1px solid var(--sc-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.sc-prod-price,
.woocommerce ul.products li.product .price {
  font-size: 19px;
  font-weight: 700;
  color: var(--sc-primary);
  letter-spacing: -.01em;
  font-family: var(--sc-font-body);
}
.sc-prod-price small { font-size: 10.5px; color: var(--sc-text-muted); font-weight: 400; }
.woocommerce ul.products li.product .price .woocommerce-price-suffix { font-size: 10.5px; color: var(--sc-text-muted); font-weight: 400; }

/* Full-width Add to Cart — Brandability style */
.sc-prod-atc,
.woocommerce ul.products li.product a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: #6b7280;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--sc-radius);
  border: none;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  font-family: var(--sc-font-body);
}
.sc-prod-atc:hover,
.woocommerce ul.products li.product a.button:hover { background: #4b5563; color: #fff; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.sc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}
.sc-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sc-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
  white-space: nowrap;
}
.sc-view-all:hover { border-bottom-color: var(--sc-primary); }

/* ═══════════════════════════════════════════════════════════════
   SHOP PAGE
═══════════════════════════════════════════════════════════════ */
.sc-shop-hero {
  background: var(--sc-primary);
  padding: 36px 0;
}
.sc-shop-hero h1 { color: #fff; font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 4px; }
.sc-shop-hero p { color: rgba(255,255,255,.65); font-size: 14px; }
.sc-shop-layout {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: var(--sc-sidebar-w) 1fr;
  gap: 32px;
  align-items: start;
}
/* Sidebar */
.sc-sidebar {}
.sc-sidebar-block {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.sc-sidebar-title {
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sc-text);
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-soft);
}
.sc-sidebar-body {}
.sc-sidebar-body a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--sc-text-muted);
  border-bottom: 1px solid var(--sc-border);
  transition: background .15s, color .15s;
  text-decoration: none;
}
.sc-sidebar-body a:last-child { border-bottom: none; }
.sc-sidebar-body a:hover,
.sc-sidebar-body a.active { background: var(--sc-bg-soft); color: var(--sc-primary); font-weight: 600; }
.sc-sidebar-body a .sc-count {
  font-size: 11px;
  background: var(--sc-bg-mid);
  color: var(--sc-text-light);
  padding: 2px 8px;
  border-radius: 100px;
}
/* Shop toolbar */
.sc-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sc-border);
  gap: 12px;
  flex-wrap: wrap;
}
.sc-shop-count { font-size: 13.5px; color: var(--sc-text-muted); }
.sc-shop-sort { display: flex; align-items: center; gap: 8px; }
.sc-shop-sort select {
  padding: 7px 12px;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  font-size: 13px;
  color: var(--sc-text);
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.sc-shop-sort select:focus { border-color: var(--sc-primary); }

/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
═══════════════════════════════════════════════════════════════ */
.sc-breadcrumb {
  background: var(--sc-bg-soft);
  border-bottom: 1px solid var(--sc-border);
  padding: 12px 0;
  font-size: 12.5px;
  color: var(--sc-text-muted);
}
.sc-breadcrumb-inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-breadcrumb a { color: var(--sc-text-muted); text-decoration: none; transition: color .15s; }
.sc-breadcrumb a:hover { color: var(--sc-primary); }
.sc-breadcrumb-sep { color: var(--sc-border-dark); }

.sc-single-wrapper { max-width: var(--sc-max-width); margin: 0 auto; padding: 48px 24px 80px; }
.sc-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 56px;
  align-items: start;
}

/* ── Gallery ───────────────────────────────────────────────── */
.sc-gallery {
  position: sticky;
  /* topbar(36) + nav(68) + gap(20) = 124px below viewport top */
  top: calc(var(--sc-topbar-h, 36px) + var(--sc-header-h, 68px) + 20px);
  min-width: 0;
}
.admin-bar .sc-gallery {
  top: calc(32px + var(--sc-topbar-h, 36px) + var(--sc-header-h, 68px) + 20px);
}
.sc-gallery-main {
  background: #f8fafc;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  aspect-ratio: 1/1; width: 100%;
}
.sc-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 32px; display: block; }
.sc-gallery-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: 100px; text-transform: uppercase; letter-spacing: .05em; z-index: 2;
}
/* Thumbnail strip */
.sc-gallery-thumbs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 2px 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.sc-gallery-thumbs::-webkit-scrollbar { display: none; }
.sc-gallery-thumb {
  flex: 0 0 64px; height: 64px;
  border: 2px solid var(--sc-border); border-radius: var(--sc-radius);
  overflow: hidden; cursor: pointer; background: #f8fafc;
  transition: border-color .15s;
}
.sc-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sc-gallery-thumb:hover { border-color: #94a3b8; }
.sc-gallery-thumb.sc-thumb-active { border-color: var(--sc-primary); box-shadow: 0 0 0 1px var(--sc-primary); }

/* ── Info panel ────────────────────────────────────────────── */
.sc-single-info { min-width: 0; }
.sc-single-cat-link {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-primary); margin-bottom: 12px; text-decoration: none;
}
.sc-single-cat-link:hover { opacity: .75; }
.sc-single-title {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 800;
  color: var(--sc-text); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 6px;
}
.sc-single-sku {
  font-size: 12px; color: var(--sc-text-light); font-family: monospace;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--sc-border);
}
.sc-single-desc { font-size: 14px; color: var(--sc-text-muted); line-height: 1.75; margin-bottom: 20px; }

/* Price box */
.sc-single-price-box {
  background: #f8fafc; border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg); padding: 16px 20px; margin-bottom: 16px;
}
.sc-single-price { margin-bottom: 4px; }
.sc-single-price .woocommerce-Price-amount,
.sc-single-price ins .woocommerce-Price-amount { font-size: 32px; font-weight: 800; color: var(--sc-primary); }
.sc-single-price del { opacity: .5; margin-right: 8px; font-size: 18px; }
.sc-single-price-note { font-size: 12px; color: var(--sc-text-muted); }
.sc-single-moq { font-size: 12px; color: var(--sc-text-muted); margin-top: 4px; }
.sc-single-moq strong { color: var(--sc-text); }

/* WC screen-reader text — hide everywhere */
.screen-reader-text,
.woocommerce-visually-hidden,
.woocommerce-Price-range .screen-reader-text,
.wc-block-components-product-price__regular + .screen-reader-text,
.wp-reader-text {
  position: absolute !important;
  display: block !important;      /* keep accessible, not display:none */
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  pointer-events: none !important;
}
/* Extra: hide any span immediately after a price amount that contains range text */
.woocommerce-Price-range { display: none !important; }

/* Pills */
.sc-single-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.sc-single-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; }
.sc-single-pill--brand  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sc-single-pill--moq    { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }
.sc-single-pill--ship   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── WooCommerce form inside single product ────────────────── */
.woocommerce div.product form.cart { display: block !important; margin: 0; }

/* Variations table */
.woocommerce div.product form.cart table.variations {
  width: 100%; border-collapse: collapse; margin-bottom: 0;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  padding: 10px 0; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--sc-border);
}
.woocommerce div.product form.cart table.variations th {
  font-size: 13px; font-weight: 700; color: var(--sc-text);
  white-space: nowrap; padding-right: 20px; width: 70px; padding-top: 12px;
}
.woocommerce div.product form.cart table.variations td {
  overflow: visible !important; padding-bottom: 14px;
}
/* Size select dropdown */
.woocommerce div.product form.cart table.variations td select {
  min-width: 180px; max-width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--sc-border); border-radius: var(--sc-radius);
  font-size: 14px; font-family: var(--sc-font-body); color: var(--sc-text);
  background: #fff; appearance: auto; transition: border-color .15s;
}
.woocommerce div.product form.cart table.variations td select:focus { border-color: var(--sc-primary); outline: none; }
/* Hide reset/Clear link — also target inline style overrides */
.woocommerce div.product .reset_variations,
.woocommerce div.product a.reset_variations,
.variations_form .reset_variations,
a.reset_variations {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Quantity label — WC adds screen-reader label with product name, hide it */
.woocommerce div.product form.cart .quantity label,
.woocommerce div.product form.cart label[for*="quantity"],
.woocommerce div.product form.cart .qty-label { display: none !important; }

/* Variation single variation price update */
.woocommerce-variation-price { margin-bottom: 8px; }
.woocommerce-variation-price .price { font-size: 28px !important; font-weight: 800 !important; color: var(--sc-primary) !important; }

/* ATC row — qty + button */
.woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) .cart-qty-atc {
  display: flex !important; gap: 12px !important; align-items: center !important;
  margin-top: 16px !important;
}
/* Simple product: the whole form is the ATC row */
.woocommerce div.product form.cart:not(.variations_form) {
  display: flex !important; gap: 12px !important; align-items: center !important;
}
.woocommerce div.product form.cart .qty,
.woocommerce div.product form.cart input.qty {
  width: 76px !important; padding: 11px 12px !important;
  border: 1.5px solid var(--sc-border) !important; border-radius: var(--sc-radius) !important;
  font-size: 16px !important; text-align: center !important;
  font-family: var(--sc-font-body) !important; outline: none !important;
  transition: border-color .15s !important;
}
.woocommerce div.product form.cart .qty:focus,
.woocommerce div.product form.cart input.qty:focus { border-color: var(--sc-primary) !important; }
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  flex: 1 !important; background: #6b7280 !important; color: #fff !important;
  border: none !important; border-radius: var(--sc-radius) !important;
  padding: 13px 20px !important; font-size: 14px !important; font-weight: 700 !important;
  cursor: pointer !important; transition: background .15s !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  white-space: nowrap !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button[type="submit"]:hover { background: #4b5563 !important; }

/* Delivery notes */
.sc-single-meta { border-top: 1px solid var(--sc-border); padding-top: 20px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.sc-single-meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sc-text-muted); }
.sc-single-meta-row svg { color: var(--sc-primary); flex-shrink: 0; }

/* ATC container */
.sc-single-atc { margin-bottom: 20px; }

/* ── Tabs ──────────────────────────────────────────────────── */
.sc-single-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--sc-border) !important; padding: 0 !important; display: flex; gap: 0; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 14px !important; font-weight: 600 !important; color: var(--sc-text-muted) !important; padding: 12px 20px !important; display: block; border-bottom: 2px solid transparent !important; margin-bottom: -1px; transition: color .15s !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sc-primary) !important; border-bottom-color: var(--sc-primary) !important; }
.woocommerce div.product .woocommerce-tabs .panel { padding: 24px 0 !important; font-size: 14px !important; color: var(--sc-text-muted) !important; line-height: 1.75 !important; border: none !important; }

/* ── Related ───────────────────────────────────────────────── */
.sc-related { background: var(--sc-bg-soft); padding: 56px 0; }
.sc-related-inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 24px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sc-single-layout { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .sc-single-layout { grid-template-columns: 1fr; gap: 24px; }
  .sc-gallery { position: static; }
  .sc-gallery-thumb { flex: 0 0 52px; height: 52px; }
  .sc-single-title { font-size: clamp(20px, 6vw, 26px); }
}

/* ═══════════════════════════════════════════════════════════════
   CART
═══════════════════════════════════════════════════════════════ */
.sc-cart-page { max-width: var(--sc-max-width); margin: 0 auto; padding: 40px 24px 64px; }
.sc-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }

.woocommerce table.cart { width: 100%; border-collapse: collapse; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; }
.woocommerce table.cart th { background: var(--sc-bg-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 12px 16px; color: var(--sc-text-muted); border-bottom: 1px solid var(--sc-border); text-align: left; }
.woocommerce table.cart td { padding: 16px; border-bottom: 1px solid var(--sc-border); vertical-align: middle; font-size: 14px; }
.woocommerce table.cart td.product-thumbnail img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-bg-soft); }
.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal { font-weight: 700; color: var(--sc-primary); font-size: 16px; }
.woocommerce table.cart td.product-quantity input { width: 64px; padding: 7px 8px; border: 1.5px solid var(--sc-border); border-radius: var(--sc-radius); text-align: center; font-size: 14px; outline: none; }
.woocommerce table.cart td.product-remove a { color: var(--sc-text-light) !important; font-size: 20px; font-weight: 300; transition: color .15s; }
.woocommerce table.cart td.product-remove a:hover { color: #dc2626 !important; }

/* Cart totals */
.sc-cart-summary { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; position: sticky; top: calc(var(--sc-topbar-h, 36px) + var(--sc-header-h) + 20px); }
.sc-cart-summary-head { background: var(--sc-bg-soft); padding: 14px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-text); border-bottom: 1px solid var(--sc-border); }
.sc-cart-summary-body { padding: 20px; }
.woocommerce .cart_totals { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; }
.woocommerce .cart_totals h2 { background: var(--sc-bg-soft); padding: 14px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sc-text); border-bottom: 1px solid var(--sc-border); font-family: var(--sc-font-body); }
.woocommerce .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td { padding: 10px 20px; border-bottom: 1px solid var(--sc-border); font-size: 13.5px; }
.woocommerce .cart_totals table th { font-weight: 500; color: var(--sc-text-muted); width: 130px; }
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td { font-weight: 700; font-size: 15px; padding-top: 16px; border-bottom: none; }
.woocommerce .cart_totals .order-total .amount { font-size: 26px !important; font-weight: 700 !important; color: var(--sc-primary) !important; }
.woocommerce .wc-proceed-to-checkout { padding: 0 20px 20px; }
/* ── Cart: Proceed to Checkout button — classic + Blocks ────── */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout-order-summary-area a.wc-block-cart__submit-button,
a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--sc-primary) !important;
  color: #fff !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: var(--sc-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--sc-font-body) !important;
  border: none !important;
  text-decoration: none !important;
  transition: background .15s !important;
  cursor: pointer !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
a.checkout-button:hover {
  background: var(--sc-primary-h) !important;
  color: #fff !important;
}

/* ── Cart: Update cart button ───────────────────────────────── */
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions button[name="update_cart"],
.wc-block-cart__submit-container button[type="submit"] {
  background: var(--sc-bg-soft) !important;
  color: var(--sc-text) !important;
  border: 1.5px solid var(--sc-border) !important;
  padding: 10px 20px !important;
  border-radius: var(--sc-radius) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
}
.woocommerce table.cart td.actions .button:hover,
.woocommerce table.cart td.actions button[name="update_cart"]:hover {
  background: var(--sc-bg-mid) !important;
  border-color: var(--sc-border-dark) !important;
  color: var(--sc-text) !important;
}

/* ── Cart: Apply coupon button ──────────────────────────────── */
.woocommerce table.cart td.actions .coupon .button,
.woocommerce #coupon_code + .button,
.wc-block-components-totals-coupon__button {
  background: var(--sc-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: var(--sc-radius) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.woocommerce table.cart td.actions .coupon .button:hover,
.wc-block-components-totals-coupon__button:hover {
  background: var(--sc-primary-h) !important;
}

/* ── WC Blocks cart: general button override ────────────────── */
.wc-block-components-button,
.wc-block-cart .wc-block-components-button:not(.wc-block-components-button--outline) {
  background-color: var(--sc-primary) !important;
  color: #fff !important;
  border-radius: var(--sc-radius) !important;
}
.wc-block-components-button:hover {
  background-color: var(--sc-primary-h) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════════════════════ */
.sc-checkout-page { max-width: var(--sc-max-width); margin: 0 auto; padding: 40px 24px 64px; }
.sc-checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
.sc-checkout-card {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.sc-checkout-card-head {
  background: var(--sc-bg-soft);
  padding: 14px 20px;
  border-bottom: 1px solid var(--sc-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-checkout-card-head h3 { font-size: 14px; font-weight: 700; color: var(--sc-text); }
.sc-step-num {
  width: 24px; height: 24px;
  background: var(--sc-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.sc-checkout-card-body { padding: 24px; }
.sc-form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { font-size: 13px; font-weight: 600; color: var(--sc-text); margin-bottom: 6px; display: block; }
.woocommerce form .form-row .required { color: #dc2626; }
.woocommerce form .form-row.woocommerce-invalid input { border-color: #dc2626 !important; }
.woocommerce form .form-row.woocommerce-validated input { border-color: #16a34a !important; }
.sc-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-form-3col { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 14px; }

.woocommerce-checkout #payment { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: 24px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.woocommerce-checkout #payment ul.payment_methods li { border: 1.5px solid var(--sc-border); border-radius: var(--sc-radius); padding: 14px 16px; transition: border-color .15s; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--sc-primary); }
.woocommerce-checkout #payment ul.payment_methods li label { font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.woocommerce-checkout #payment div.payment_box { background: var(--sc-bg-soft); border-radius: var(--sc-radius); padding: 12px 14px; font-size: 13px; color: var(--sc-text-muted); margin-top: 10px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment #place_order {
  width: 100% !important; background: var(--sc-primary) !important; color: #fff !important;
  padding: 15px !important; font-size: 15px !important; font-weight: 600 !important;
  border-radius: var(--sc-radius) !important; border: none !important; cursor: pointer !important;
  transition: background .15s !important;
}
.woocommerce-checkout #payment #place_order:hover { background: var(--sc-primary-h) !important; }

/* Order review box */
.sc-order-review-card { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; position: sticky; top: calc(var(--sc-topbar-h, 36px) + var(--sc-header-h) + 20px); }
.woocommerce-checkout #order_review { padding: 0; border: none; }

/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE NOTICES
═══════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--sc-radius) !important;
  border-top: none !important;
  margin: 0 0 20px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  font-size: 14px !important;
}
.woocommerce-message { background: var(--sc-success-bg) !important; color: var(--sc-success) !important; border-left: 4px solid #16a34a !important; }
.woocommerce-error   { background: var(--sc-error-bg) !important;   color: var(--sc-error) !important;   border-left: 4px solid #dc2626 !important; }
.woocommerce-info    { background: #eff6ff !important; color: #1e40af !important; border-left: 4px solid #3b82f6 !important; }
.woocommerce-message::before, .woocommerce-info::before { display: none !important; }
.woocommerce-error li { background: none !important; padding: 0 !important; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 36px; }
.woocommerce nav.woocommerce-pagination ul { list-style: none; display: flex; justify-content: center; gap: 6px; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--sc-border); border-radius: var(--sc-radius);
  font-size: 13.5px; font-weight: 500; color: var(--sc-text-muted);
  text-decoration: none; transition: all .15s;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   WHY US / FEATURE CARDS
═══════════════════════════════════════════════════════════════ */
.sc-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sc-why-card { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: 28px 24px; }
.sc-why-icon { width: 48px; height: 48px; background: var(--sc-bg-soft); border-radius: var(--sc-radius); display: flex; align-items: center; justify-content: center; color: var(--sc-primary); margin-bottom: 18px; }
.sc-why-card h3 { font-size: 16px; font-weight: 700; color: var(--sc-text); margin-bottom: 8px; }
.sc-why-card p { font-size: 13.5px; color: var(--sc-text-muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════════ */
.sc-cta { background: var(--sc-primary); padding: 72px 0; }
.sc-cta-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sc-cta h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.sc-cta p { color: rgba(255,255,255,.7); font-size: 16px; margin-bottom: 32px; }
.sc-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.sc-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc-testi-card { background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); padding: 28px 24px; }
.sc-testi-stars { color: var(--sc-accent); margin-bottom: 14px; font-size: 14px; }
.sc-testi-quote { font-size: 14px; color: var(--sc-text-muted); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.sc-testi-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--sc-border); }
.sc-testi-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sc-testi-name { font-size: 13.5px; font-weight: 700; color: var(--sc-text); }
.sc-testi-company { font-size: 12px; color: var(--sc-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.sc-footer { background: var(--sc-footer-bg); color: var(--sc-footer-text); padding: 48px 0 0; }
.sc-footer-inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 24px; }
.sc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sc-footer-brand p { font-size: 13.5px; line-height: 1.7; margin-top: 18px; margin-bottom: 20px; color: #6b7280; }
.sc-footer-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.sc-footer-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #6b7280; border: 1px solid #374151; padding: 3px 10px; border-radius: 100px; }
.sc-footer-social { display: flex; gap: 8px; }
.sc-footer-social a { width: 34px; height: 34px; border: 1px solid #374151; border-radius: var(--sc-radius); display: flex; align-items: center; justify-content: center; color: #6b7280; transition: all .15s; text-decoration: none; }
.sc-footer-social a:hover { border-color: var(--sc-primary); color: var(--sc-primary); }
.sc-footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #d1d5db; margin-bottom: 16px; }
.sc-footer-col a { display: block; font-size: 13.5px; color: #6b7280; margin-bottom: 10px; transition: color .15s; text-decoration: none; }
.sc-footer-col a:hover { color: #fff; }
.sc-footer-contact { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.sc-footer-contact svg { margin-top: 2px; flex-shrink: 0; opacity: .6; }
.sc-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; margin-top: 0; gap: 16px; flex-wrap: wrap; }
.sc-footer-bottom p { font-size: 12px; color: #4b5563; }
.sc-footer-bottom-links { display: flex; gap: 18px; }
.sc-footer-bottom-links a { font-size: 12px; color: #4b5563; text-decoration: none; transition: color .15s; }
.sc-footer-bottom-links a:hover { color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* Safety net: every possible WC wrapper gets our radius */
.woocommerce ul.products li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
ul.products li.product,
.wc-block-grid .wc-block-grid__product,
.wc-block-grid__products .wc-block-grid__product,
.woocommerce-page ul.products li.product,
.home ul.products li.product {
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The inner sc-prod-card div must also clip its children */
.sc-prod-card {
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
}
/* Specifically clip the product image area top corners */
.sc-prod-img {
  border-radius: 0 !important;          /* no radius on image itself */
  overflow: hidden !important;
}
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL OVERFLOW PREVENTION
═══════════════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
/* Every direct section must not overflow */
.sc-topbar, .sc-header, .sc-navbar, .sc-cat-pills,
.sc-hero, .sc-promo, .sc-section, .sc-footer,
.sc-trust, .sc-related { max-width: 100vw; }

/* Hide on mobile utility */
.sc-hide-mobile { display: flex; }

/* ═══════════════════════════════════════════════════════════════
   HIDE QUANTITY LABEL (shows product name before "quantity")
═══════════════════════════════════════════════════════════════ */
.woocommerce div.product form.cart .quantity label,
.woocommerce-page div.product form.cart .quantity label {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD: ensure sc-prod-card itself has radius + clip
   (used on homepage and related — no WC <li> wrapper)
═══════════════════════════════════════════════════════════════ */
.sc-prod-card {
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--sc-border) !important;
}
.sc-prod-card:hover {
  box-shadow: var(--sc-shadow-md);
  border-color: var(--sc-border-dark) !important;
  transform: translateY(-2px);
}
/* Card image area clips top corners */
.sc-prod-card .sc-prod-img {
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT: ≤1024px
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP: ≥1200px — enhanced multi-column
═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* Category grid: 5 cols on wide screens */
  .sc-cat-grid { grid-template-columns: repeat(5, 1fr); }
  /* Footer: 4 cols */
  .sc-footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   TABLET/LAPTOP BREAKPOINT: ≤1024px
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Show hamburger, hide desktop nav */
  .sc-hamburger { display: flex !important; }
  .sc-navbar    { display: none !important; }
  .sc-hide-mobile { display: none !important; }
  .sc-header-inner { padding: 0 16px; gap: 12px; }
  .sc-search { display: none !important; }
  /* Cat pill bar */
  .sc-cat-pills { display: block; }
  .sc-cat-pills-inner {
    display: flex; gap: 8px; padding: 10px 16px;
    overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sc-cat-pills-inner::-webkit-scrollbar { display: none; }
  /* Topbar */
  .sc-topbar-links { display: none; }
  .sc-topbar-inner { justify-content: center; }
  .sc-topbar-message { font-size: 12px; justify-content: center; text-align: center; }
  /* Hero */
  .sc-hero { padding: 48px 0; }
  .sc-hero-inner { padding: 0 20px; }
  .sc-hero h1 { font-size: clamp(28px, 5vw, 48px); }
  /* Promo strip */
  .sc-promo-inner { gap: 16px; padding: 0 16px; }
  .sc-promo-sep { display: none; }
  .sc-promo-item { font-size: 12px; }
  /* Product grid: 3 cols on tablet */
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  /* Category grid: 4 cols on tablet */
  .sc-cat-grid { grid-template-columns: repeat(4, 1fr); }
  /* Trust bar: 2 col */
  .sc-trust-inner { grid-template-columns: repeat(2, 1fr); }
  .sc-trust-item:nth-child(2) { border-right: none; }
  .sc-trust-item { padding: 14px 16px; }
  /* Shop layout */
  .sc-shop-layout { grid-template-columns: 1fr; padding: 20px 16px; }
  .sc-sidebar { display: none; }
  /* Cart + checkout */
  .sc-cart-layout, .sc-checkout-layout { grid-template-columns: 1fr; }
  .sc-cart-summary { position: static; }
  /* Footer: 3 cols on large tablet */
  .sc-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .sc-container { padding: 0 16px; }
  .sc-section { padding: 48px 0; }
}

/* ═══════════════════════════════════════════════════════════
   MEDIUM TABLET BREAKPOINT: ≤900px
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Product grid: 2 cols on medium tablet */
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  /* Category grid: 3 cols */
  .sc-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  /* Why grid: 2 cols */
  .sc-why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Hero: tighten */
  .sc-hero h1 { font-size: clamp(26px, 5vw, 40px); }
  .sc-hero p { font-size: 15px; }
  /* Footer: 2 cols */
  .sc-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  /* Trust bar: 2 col */
  .sc-trust-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT: ≤768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Product grid: 1 col on mobile — centred */
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sc-prod-card,
  .woocommerce ul.products li.product,
  ul.products li.product { width: 100% !important; }

  .woocommerce ul.products li.product,
  ul.products li.product {
    border-radius: var(--sc-radius-lg) !important;
    overflow: hidden !important;
    padding: 0 !important; margin: 0 !important;
  }

  /* Card compact mode */
  .sc-prod-img { height: 180px !important; }
  .sc-prod-img img,
  .woocommerce ul.products li.product img { height: 180px !important; }
  .sc-prod-body { padding: 10px 10px 12px !important; }
  .sc-prod-name,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12.5px !important; line-height: 1.35 !important;
  }
  .sc-prod-price,
  .woocommerce ul.products li.product .price { font-size: 15px !important; }
  .sc-prod-atc,
  .woocommerce ul.products li.product a.button {
    font-size: 11px !important; padding: 8px 6px !important; gap: 4px !important;
  }
  .sc-prod-cat { font-size: 10px !important; }
  .sc-prod-pills { margin-bottom: 6px !important; gap: 3px !important; }
  .sc-prod-pill { font-size: 9px !important; padding: 2px 5px !important; }
  .sc-prod-footer { padding-top: 8px !important; gap: 6px !important; }

  /* Category grid: 3 cols */
  .sc-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sc-cat-card-img, .sc-cat-card-icon-wrap { height: 100px !important; }

  /* Section head */
  .sc-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sc-section-head h2 { font-size: clamp(20px, 5vw, 28px); }

  /* Why grid: 2 cols */
  .sc-why-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sc-why-card { padding: 18px 14px; }
  .sc-why-title { font-size: 14px; }
  .sc-why-body { font-size: 13px; }

  /* Testimonials */
  .sc-testi-grid { grid-template-columns: 1fr; }


  /* Cart table */
  .woocommerce table.cart th,
  .woocommerce table.cart td { padding: 10px 8px; font-size: 13px; }
  .woocommerce table.cart .product-name { min-width: 100px; }

  /* Checkout forms → 1 col */
  .sc-form-2col, .sc-form-3col { grid-template-columns: 1fr !important; }

  /* Footer: 2 cols on mobile */
  .sc-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sc-footer { padding: 36px 0 0; }

  /* Trust bar: keep 2 cols */
  .sc-trust-inner { grid-template-columns: repeat(2, 1fr); }
  .sc-trust-item:nth-child(2) { border-right: none; }

  /* Hero */
  .sc-hero { padding: 40px 0; }
  .sc-hero h1 { font-size: clamp(24px, 7vw, 34px); letter-spacing: -.02em; }
  .sc-hero p { font-size: 14px; max-width: 100%; }
  .sc-hero-actions { flex-direction: column; gap: 10px; }
  .sc-hero-actions .sc-btn { width: 100%; justify-content: center; }

  /* Promo strip */
  .sc-promo-inner { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }

  .sc-container { padding: 0 12px; }
  .sc-section { padding: 36px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE BREAKPOINT: ≤480px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 1 column, centred */
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(1, 1fr) !important; gap: 8px !important; max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; }
  .sc-prod-img { height: 140px !important; }
  .sc-prod-img img,
  .woocommerce ul.products li.product img { height: 140px !important; }
  .sc-prod-body { padding: 7px 8px 10px !important; }
  .sc-prod-name { font-size: 11.5px !important; }
  .sc-prod-price { font-size: 14px !important; }
  .sc-prod-atc { font-size: 10.5px !important; padding: 7px 5px !important; letter-spacing: 0 !important; }
  .sc-prod-sku { display: none !important; }

  /* Category grid: 2 cols on smallest screens */
  .sc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sc-cat-card-img { height: 90px !important; }
  .sc-cat-card-icon-wrap { height: 80px !important; }

  /* Header */
  .sc-header-inner { height: 60px !important; padding: 0 12px !important; gap: 8px !important; }
  .sc-cart-link { padding: 8px 12px !important; font-size: 12px !important; gap: 6px !important; }

  /* Hero */
  .sc-hero { padding: 32px 0; }
  .sc-hero-inner { padding: 0 14px; }
  .sc-hero h1 { font-size: clamp(22px, 8vw, 30px); }

  /* Why grid: 1 col */
  .sc-why-grid { grid-template-columns: 1fr; }

  /* Page sections */
  .sc-section { padding: 32px 0; }
  .sc-container { padding: 0 12px; }

  /* CTA section */
  .sc-cta { padding: 48px 0; }
  .sc-cta h2 { font-size: clamp(22px, 7vw, 32px); }
}


/**
 * sc-patch.css — paste into Appearance → Customize → Additional CSS
 * Fixes: card radius, quantity label, mobile layout, logo sizing, category icons
 */

/* ── Card renderer: sc-prod-card (used on homepage + related) ── */
.sc-prod-card {
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sc-prod-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  border-color: var(--sc-border-dark) !important;
  transform: translateY(-2px);
}

/* ── WC <li> wrapper on shop/archive page ───────────────────── */
.woocommerce ul.products li.product,
ul.products li.product {
  border-radius: var(--sc-radius-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}

/* ── Product grid (our div) ─────────────────────────────────── */
.sc-prod-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--sc-shop-cols, 4), 1fr) !important;
  gap: 16px !important;
}

/* ── Product image link — block, no underline ───────────────── */
.sc-prod-img-link { display: block !important; text-decoration: none !important; }
.sc-prod-img { overflow: hidden !important; }

/* ── Product name link ──────────────────────────────────────── */
.sc-prod-name-link { text-decoration: none !important; color: inherit !important; display: block !important; }
.sc-prod-name-link:hover .sc-prod-name { color: var(--sc-primary) !important; }

/* ── Quantity label (shows product title before "quantity") ─── */
.woocommerce div.product form.cart .quantity label,
.woocommerce-page div.product form.cart .quantity label { display: none !important; }

/* ── Logo sizing (all WP custom logo markup layers) ─────────── */
.sc-logo img,
.sc-logo .custom-logo,
.sc-logo-img,
.custom-logo-link img,
img.custom-logo,
header .custom-logo {
  height: var(--sc-logo-h, 44px) !important;
  width: auto !important;
  max-width: 280px !important;
  max-height: var(--sc-logo-h, 44px) !important;
  object-fit: contain !important;
  display: block !important;
}
.sc-logo a,
.sc-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* ── Category card icon ─────────────────────────────────────── */
.sc-cat-card-icon-wrap {
  width: 100%;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-bg-soft);
  position: relative;
  overflow: hidden;
}
.sc-cat-card-icon-wrap::before { display: none; }
.sc-cat-card-icon-wrap svg {
  width: 80px;
  height: 80px;
  display: block;
  transition: transform .2s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.sc-cat-card:hover .sc-cat-card-icon-wrap svg {
  transform: translateY(-4px) scale(1.07);
}
.sc-cat-card-icon { color: var(--sc-primary); opacity: .6; position: relative; z-index: 1; }
.sc-cat-card:hover .sc-cat-card-icon { opacity: 1; transform: translateY(-2px); transition: all .2s; }

/* ── Mobile overflow guard ──────────────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
}

/* ── Promo strip separators ─────────────────────────────────── */
.sc-promo-sep { color: rgba(255,255,255,.35); }


/* ═══════════════════════════════════════════════════════════════
   STATIC PAGES (privacy, terms, returns, about, contact, faq)
═══════════════════════════════════════════════════════════════ */
.sc-page-content-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.sc-page-content-inner {
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  padding: 40px 48px;
  font-size: 15px;
  color: var(--sc-text-muted);
  line-height: 1.85;
}
/* Typography inside page content */
.sc-page-content-inner h1,
.sc-page-content-inner h2,
.sc-page-content-inner h3,
.sc-page-content-inner h4 {
  color: var(--sc-text);
  margin-top: 32px;
  margin-bottom: 12px;
  line-height: 1.25;
}
.sc-page-content-inner h1 { font-size: 26px; margin-top: 0; }
.sc-page-content-inner h2 { font-size: 20px; }
.sc-page-content-inner h3 { font-size: 17px; }
.sc-page-content-inner p  { margin-bottom: 16px; }
.sc-page-content-inner ul,
.sc-page-content-inner ol { padding-left: 22px; margin-bottom: 16px; }
.sc-page-content-inner ul li { list-style: disc; margin-bottom: 6px; }
.sc-page-content-inner ol li { list-style: decimal; margin-bottom: 6px; }
.sc-page-content-inner a  { color: var(--sc-primary); text-decoration: underline; }
.sc-page-content-inner a:hover { opacity: .75; }
.sc-page-content-inner strong { color: var(--sc-text); font-weight: 600; }
.sc-page-content-inner hr {
  border: none;
  border-top: 1px solid var(--sc-border);
  margin: 28px 0;
}

/* Mobile */
@media (max-width: 768px) {
  .sc-page-content-wrap { padding: 24px 14px 48px; }
  .sc-page-content-inner { padding: 24px 18px; font-size: 14px; }
  .sc-page-content-inner h1 { font-size: 22px; }
  .sc-page-content-inner h2 { font-size: 17px; }
}
@media (max-width: 480px) {
  .sc-page-content-wrap { padding: 16px 12px 40px; }
  .sc-page-content-inner { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE CONTENT: FORM MOBILE FIX
   Targets any form inside page.php content area —
   WP default form, WPForms, CF7, Gravity Forms
═══════════════════════════════════════════════════════════════ */

/* All inputs must respect their container width */
.sc-page-content-inner input,
.sc-page-content-inner input[type="text"],
.sc-page-content-inner input[type="email"],
.sc-page-content-inner input[type="tel"],
.sc-page-content-inner input[type="number"],
.sc-page-content-inner input[type="url"],
.sc-page-content-inner select,
.sc-page-content-inner textarea,
.sc-page-content-inner .wpforms-field-container input,
.sc-page-content-inner .wpforms-field-container select,
.sc-page-content-inner .wpforms-field-container textarea,
.sc-page-content-inner .wpcf7-form input,
.sc-page-content-inner .wpcf7-form select,
.sc-page-content-inner .wpcf7-form textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* WPForms multi-column layout → stack on mobile */
@media (max-width: 768px) {
  .sc-page-content-inner .wpforms-field,
  .sc-page-content-inner .wpforms-one-half,
  .sc-page-content-inner .wpforms-one-third,
  .sc-page-content-inner .wpforms-two-thirds,
  .sc-page-content-inner .wpforms-field-row {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* CF7 columns → stack */
  .sc-page-content-inner .wpcf7-form .half,
  .sc-page-content-inner .wpcf7-form .third,
  .sc-page-content-inner .wpcf7-form .two-thirds {
    width: 100% !important;
    float: none !important;
  }

  /* Any table-based form layout (WP default comment/contact) */
  .sc-page-content-inner table,
  .sc-page-content-inner table td,
  .sc-page-content-inner table th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Submit button full-width on mobile */
  .sc-page-content-inner input[type="submit"],
  .sc-page-content-inner button[type="submit"],
  .sc-page-content-inner .wpforms-submit,
  .sc-page-content-inner .wpcf7-submit {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Trust/feature grid inside page content → 1 col */
  .sc-page-content-inner .wp-block-columns,
  .sc-page-content-inner .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   CART PAGE — empty state, cross-sells, return button
═══════════════════════════════════════════════════════════════ */

/* Empty cart message */
.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 48px 24px;
  font-size: 16px;
  color: var(--sc-text-muted);
  background: var(--sc-bg-soft);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  margin-bottom: 20px;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-bottom: 32px;
}
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .return-to-shop a.button {
  background: var(--sc-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: var(--sc-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background .15s !important;
}
.woocommerce-cart .return-to-shop .button:hover { background: var(--sc-primary-h) !important; }

/* Cross-sells wrapper */
.sc-cross-sells { margin-top: 48px; }
.sc-prod-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px) {
  .sc-prod-grid--3 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PAGE — full styling for both Classic and Blocks
═══════════════════════════════════════════════════════════════ */

/* ── Classic checkout layout ────────────────────────────────── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading { margin-bottom: 0; }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--sc-text) !important;
  padding: 14px 20px !important;
  background: var(--sc-bg-soft) !important;
  border: 1px solid var(--sc-border) !important;
  border-bottom: none !important;
  border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0 !important;
  margin: 0 !important;
  font-family: var(--sc-font-body) !important;
}

/* Form fields */
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce form .form-row { margin-bottom: 14px !important; }

.woocommerce-checkout label,
.woocommerce form .form-row label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.woocommerce-checkout .required { color: #dc2626 !important; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  background: #fff !important;
  color: var(--sc-text) !important;
  transition: border-color .18s !important;
  font-family: var(--sc-font-body) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--sc-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(18,132,208,.07) !important;
}
.woocommerce form .form-row.woocommerce-invalid input { border-color: #dc2626 !important; }
.woocommerce form .form-row.woocommerce-validated input { border-color: #16a34a !important; }

/* Order review / payment box */
.woocommerce-checkout #order_review { padding: 0 !important; }
.woocommerce-checkout #payment {
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-lg) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--sc-bg-soft) !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--sc-text-muted) !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment ul.payment_methods {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--sc-border) !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1.5px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  padding: 12px 14px !important;
  transition: border-color .15s !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--sc-primary) !important;
  background: rgba(18,132,208,.04) !important;
}

/* Payment method label — radio + text side by side, no squeeze */
.woocommerce-checkout #payment ul.payment_methods li label {
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
}

/* Radio input — always a circle, never squashed */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  appearance: auto !important;
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  accent-color: var(--sc-primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Yoco inline card form — reset any squeeze */
.woocommerce-checkout #payment .payment_box.payment_method_yoco,
#payment .payment_method_yoco .payment_box {
  overflow: visible !important;
}
#yoco-payment-form,
.yoco-payment-form,
[id*="yoco"] iframe,
[id*="yoco"] input {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Place Order button */
.woocommerce-checkout #payment #place_order,
.woocommerce #payment #place_order {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 16px !important;
  background: var(--sc-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 15px !important;
  border-radius: var(--sc-radius) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  font-family: var(--sc-font-body) !important;
  text-align: center !important;
}
.woocommerce-checkout #payment #place_order:hover { background: var(--sc-primary-h) !important; }

/* Checkout form fields — prevent label/input squeeze on all form rows */
.woocommerce-checkout .form-row {
  overflow: visible !important;
}
.woocommerce-checkout .form-row label {
  white-space: normal !important;
  word-break: normal !important;
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
/* Two-col checkout form rows */
.woocommerce-checkout .col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
@media (max-width: 768px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr !important; }
}

/* WC Blocks payment methods — do NOT override radio appearance (Yoco uses custom SVG) */
.wc-block-components-payment-method-label,
.wc-block-components-payment-method-label__label {
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.wc-block-components-payment-method-icons {
  flex-shrink: 0 !important;
}



/* WC Blocks checkout: native WooCommerce styles — no theme overrides */

/* ═══════════════════════════════════════════════════════════════
   VERY SMALL MOBILE: ≤360px (iPhone SE, Galaxy S)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  /* Switch to 1 column only on the smallest devices */
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr !important; max-width: 320px !important; margin: 0 auto !important; }
  .sc-prod-img { height: 220px !important; }
  .sc-prod-img img { height: 220px !important; }
  /* 2 col categories still fit fine at 360px */
  .sc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* Footer: 1 col */
  .sc-footer-grid { grid-template-columns: 1fr; }
  /* Hero */
  .sc-hero h1 { font-size: clamp(20px, 9vw, 26px); }
  .sc-container { padding: 0 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   BRANDING OPTIONS SECTION — single product page
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   BRANDING SECTION — on-theme navy/gold
═══════════════════════════════════════════════════════════════ */
.sc-branding-box {
  border: 1.5px solid var(--sc-border);
  border-top: 3px solid var(--sc-accent);
  border-radius: var(--sc-radius-lg);
  padding: 22px 20px 18px;
  margin-bottom: 24px;
  background: var(--sc-bg-soft);
}
.sc-branding-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sc-primary);
  margin-bottom: 16px;
}
.sc-branding-header svg { color: var(--sc-accent); flex-shrink: 0; }
.sc-branding-badge {
  margin-left: auto;
  background: var(--sc-accent);
  color: #fff;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  text-transform: none;
}

/* ── Method tiles ───────────────────────────────────────────── */
.sc-branding-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.sc-branding-method { display: none; }

.sc-branding-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;
  outline: none;
}
.sc-branding-tile:hover {
  border-color: var(--sc-primary);
  background: var(--sc-bg);
}
.sc-branding-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(18,132,208,.18);
  border-color: var(--sc-primary);
}
.sc-branding-tile--active {
  border-color: var(--sc-accent) !important;
  background: var(--sc-bg) !important;
  box-shadow: 0 0 0 2px rgba(174,54,62,.18) !important;
}
.sc-branding-tile--active .sc-branding-method-text strong {
  color: var(--sc-accent) !important;
}

.sc-branding-method-inner { display: none; }

.sc-branding-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-branding-method-text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sc-text);
  line-height: 1.2;
}
.sc-branding-method-text small {
  font-size: 10.5px;
  color: var(--sc-text-muted);
  line-height: 1.2;
}

/* ── Fields ─────────────────────────────────────────────────── */
.sc-branding-position { margin-bottom: 14px; }
.sc-branding-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sc-primary);
  margin-bottom: 6px;
}
.sc-branding-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  font-size: 13.5px;
  font-family: var(--sc-font-body);
  color: var(--sc-text);
  background: var(--sc-bg);
  appearance: auto;
  transition: border-color .15s, box-shadow .15s;
}
.sc-branding-select:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(174,54,62,.12);
  outline: none;
}
.sc-branding-notes-wrap { margin-bottom: 14px; }
.sc-branding-notes {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  font-size: 13.5px;
  font-family: var(--sc-font-body);
  color: var(--sc-text);
  background: var(--sc-bg);
  resize: vertical;
  min-height: 80px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.sc-branding-notes:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(174,54,62,.12);
  outline: none;
}
.sc-branding-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.sc-branding-hint svg { color: var(--sc-accent); flex-shrink: 0; margin-top: 2px; }

/* ── Logo upload ─────────────────────────────────────────────── */
.sc-branding-logo-upload { margin-bottom: 14px; }
.sc-branding-file-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.sc-branding-file {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  z-index: -1;
}
.sc-branding-logo-upload label[for="sc_branding_logo"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--sc-primary);
  color: #fff;
  border: 1.5px solid var(--sc-primary);
  border-radius: var(--sc-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-bottom: 0;
  white-space: nowrap;
}
.sc-branding-logo-upload label[for="sc_branding_logo"] svg { color: #fff; }
.sc-branding-logo-upload label[for="sc_branding_logo"]:hover {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
}
.sc-branding-file-label {
  font-size: 12.5px;
  color: var(--sc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── Footer quote link ────────────────────────────────────────── */
.sc-branding-artwork {
  border-top: 1px solid var(--sc-border);
  padding-top: 14px;
  margin-top: 4px;
}
.sc-branding-quote-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-accent);
  text-decoration: none;
  transition: color .15s;
}
.sc-branding-quote-link:hover { color: var(--sc-primary); }
.sc-branding-quote-link svg { color: inherit; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sc-branding-methods { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .sc-branding-badge { display: none; }
  .sc-branding-box { padding: 16px 14px; }
}
@media (max-width: 480px) {
  .sc-branding-methods { grid-template-columns: 1fr 1fr; }
}

/* WC form placement */
.woocommerce div.product form.cart .sc-branding-box,
form.cart .sc-branding-box {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}
.variations_form .sc-branding-box,
form.cart .sc-branding-box { display: block; }

/* ── Product gallery thumbnail strip ───────────────────────── */
.sc-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.sc-gallery-thumbs::-webkit-scrollbar { display: none; }
.sc-gallery-thumb {
  flex: 0 0 64px;
  height: 64px;
  border: 2px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--sc-bg-soft);
  transition: border-color .15s;
}
.sc-gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
.sc-gallery-thumb:hover { border-color: #94a3b8; }
.sc-gallery-thumb.sc-thumb-active { border-color: var(--sc-primary); box-shadow: 0 0 0 1px var(--sc-primary); }

/* ── Variable product ATC row ──────────────────────────────── */
.woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Single (non-variable) product form still needs flex */
.woocommerce div.product form.cart.cart:not(.variations_form) {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
/* Hide "Choose an option" reset link — we use our own deselect */
.woocommerce div.product .reset_variations { display: none !important; }

/* Gallery thumb responsive */
@media (max-width: 768px) {
  .sc-gallery-thumb { flex: 0 0 52px; height: 52px; }
}


/* ═══════════════════════════════════════════════════
   FIXES: Screen reader text, product grid mobile,
   checkout layout, and category display
═══════════════════════════════════════════════════ */

/* Hide WC verbose screen reader text */
.screen-reader-text,
.woocommerce-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Product grid — ensure 2 cols on mobile regardless of Customizer */
@media (max-width: 900px) {
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 480px) {
  .sc-prod-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .sc-prod-img { height: 140px !important; }
  .sc-prod-img img { height: 140px !important; object-fit: contain !important; }
  .sc-prod-body { padding: 8px 8px 10px !important; }
  .sc-prod-name { font-size: 11.5px !important; }
  .sc-prod-price .amount { font-size: 13px !important; }
  .sc-prod-atc { font-size: 10.5px !important; padding: 7px 5px !important; }
}

/* WC checkout: native WooCommerce styles handle this section */

/* WC checkout: all order summary styles handled natively by WooCommerce */

/* Place Order button */
.wc-block-components-checkout-place-order-button {
  background: var(--sc-primary) !important;
  color: #fff !important;
  border-radius: var(--sc-radius) !important;
  font-weight: 700 !important;
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: var(--sc-primary-dark) !important;
}

/* Checkout form fields */
.wc-block-components-text-input input,
.wc-block-components-select select {
  border: 1.5px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  font-size: 14px !important;
  font-family: var(--sc-font-body) !important;
  padding: 10px 14px !important;
  transition: border-color .15s !important;
  width: 100% !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  border-color: var(--sc-primary) !important;
  outline: none !important;
}

/* WC Blocks cart */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--sc-primary) !important;
  color: #fff !important;
  border-radius: var(--sc-radius) !important;
}
.wc-block-cart__submit-button:hover {
  background: var(--sc-primary-dark) !important;
}

/* Category grid on mobile */
@media (max-width: 480px) {
  .sc-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .sc-cat-card-icon-wrap { height: 80px !important; }
}

/* Quantity label hide */
.woocommerce div.product form.cart label[for*="quantity"],
.woocommerce div.product form.cart .quantity label {
  display: none !important;
}

/* Reset link hide */
.woocommerce div.product .reset_variations {
  display: none !important;
}

/* Footer social TikTok */
.sc-footer-social a[aria-label="TikTok"] svg {
  fill: currentColor;
  stroke: none;
}

/* ── Colour Image Swatches (CIS plugin) — theme integration ── */

/* Ensure td.value doesn't clip the swatch slider */
.woocommerce div.product form.cart table.variations td.value {
  overflow: visible !important;
  min-width: 0;
}

/* CIS wrapper — full width, no clip */
.cis-wrap,
.cis-slider-wrap {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible !important;
}

/* CIS scrollable track */
.cis-track {
  display: flex !important;
  flex-wrap: nowrap !important; /* single row — scroll, not wrap */
  overflow-x: auto !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding: 4px 2px 10px !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Fade edges to hint scrollability */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%);
  cursor: grab;
  width: 100%;
}
.cis-track::-webkit-scrollbar { display: none !important; }
.cis-track.cis-dragging { cursor: grabbing; }

/* Individual swatch button */
.cis-swatch {
  flex: 0 0 auto !important; /* never shrink — scroll instead */
  width: 64px !important;
  height: 64px !important;
  padding: 2px !important;
  border: 2px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .15s, transform .15s !important;
  overflow: hidden !important;
}
.cis-swatch img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 4px !important;
  display: block !important; pointer-events: none !important;
}
.cis-swatch:hover { border-color: #94a3b8 !important; transform: translateY(-1px) !important; }
.cis-swatch.cis-active {
  border-color: var(--sc-primary) !important;
  box-shadow: 0 0 0 2px var(--sc-primary) !important;
  transform: translateY(-1px) !important;
}

/* CIS nav arrows */
.cis-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.cis-btn {
  width: 34px !important;
  height: 30px !important;
  background: #fff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  font-size: 18px !important;
  color: var(--sc-primary) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  transition: background .15s !important;
  user-select: none !important;
}
.cis-btn:hover { background: var(--sc-bg-soft) !important; }
.cis-btn[disabled] { opacity: .25 !important; cursor: default !important; }

/* Colour label */
.cis-chosen-label, .cis-label {
  font-size: .85rem !important;
  color: var(--sc-text-muted) !important;
  margin: 4px 0 8px !important;
}
.cis-chosen-label strong, .cis-chosen-name {
  font-weight: 600 !important;
  color: var(--sc-primary) !important;
}

@media (max-width: 768px) {
  .cis-swatch { width: 56px !important; height: 56px !important; }
}


/* CIS swatch images — displayed at 64px, loaded at 600px (plugin limitation)
   Use object-fit:cover and contain the visual to 64x64 */
.cis-swatch img {
  image-rendering: auto;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
}

/* Ensure swatch doesn't stretch the table cell */
table.variations td.value {
  max-width: min(calc(100vw - 120px), 480px);
  overflow: visible !important;
  word-break: normal !important;
}

/* Mobile: topbar hides on scroll to save space — not sticky below tablet */
@media (max-width: 768px) {
  .sc-topbar { position: static; }
  .sc-header  { top: 0; }
  .admin-bar .sc-header { top: 46px; }
  .sc-gallery { top: calc(var(--sc-header-h, 68px) + 16px) !important; }
}

/* ── Branding logo upload ───────────────────────────────────── */
/* WC checkout: native WooCommerce styles handle this section */


/* ═══════════════════════════════════════════════════════════════
   QUOTE PAGE — page-get-a-quote.php
═══════════════════════════════════════════════════════════════ */

/* Banner */
.sc-quote-banner {
  background: var(--sc-primary);
  padding: 48px 0 42px;
}
.sc-quote-banner-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sc-quote-banner-text h1 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.15;
}
.sc-quote-banner-text p {
  color: rgba(255,255,255,.75);
  font-size: 15px;
  margin: 0;
}
.sc-quote-banner-text p strong { color: var(--sc-accent); font-weight: 700; }
.sc-quote-banner-trust {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.sc-quote-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.sc-quote-trust-item svg { color: var(--sc-accent); }

/* Outer wrap */
.sc-quote-wrap {
  background: var(--sc-bg-soft);
  padding: 40px 0 64px;
}
.sc-quote-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Two-col layout */
.sc-quote-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.sc-quote-form-col { min-width: 0; }

/* Form card */
.sc-quote-card {
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-top: 3px solid var(--sc-accent);
  border-radius: var(--sc-radius-lg);
  padding: 28px 28px 24px;
}
.sc-quote-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-primary);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sc-border);
}
.sc-quote-card-head svg { color: var(--sc-accent); }

/* Section labels */
.sc-quote-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
  margin-bottom: 12px;
}

/* Divider */
.sc-qf-divider {
  border: none;
  border-top: 1px solid var(--sc-border);
  margin: 20px 0 20px;
}

/* Error banner */
.sc-quote-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--sc-radius);
  padding: 12px 14px;
  font-size: 13.5px;
  color: #991b1b;
  margin-bottom: 20px;
}
.sc-quote-error svg { color: #dc2626; flex-shrink: 0; }

/* 2-col field row */
.sc-qf-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}
.sc-qf-field { margin-bottom: 16px; }
.sc-qf-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sc-primary);
  margin-bottom: 6px;
}
.sc-qf-req { color: var(--sc-accent); }
.sc-qf-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--sc-font-body);
  color: var(--sc-text);
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.sc-qf-input:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(174,54,62,.12);
}
.sc-qf-select { appearance: auto; cursor: pointer; }
.sc-qf-textarea { resize: vertical; min-height: 110px; }

/* Submit */
.sc-quote-submit {
  margin-top: 4px;
  gap: 8px;
  font-size: 15px;
  justify-content: center;
}
.sc-qf-privacy {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  font-size: 12px;
  color: var(--sc-text-muted);
  margin-top: 12px;
  margin-bottom: 0;
}
.sc-qf-privacy svg { color: var(--sc-text-light); flex-shrink: 0; }

/* Sidebar */
.sc-quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--sc-header-h, 68px) + 20px);
}
.sc-quote-info-card,
.sc-quote-contact-card {
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  padding: 20px 20px 18px;
}
.sc-quote-info-card { border-top: 3px solid var(--sc-primary); }
.sc-quote-contact-card { border-top: 3px solid var(--sc-accent); }

.sc-quote-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 16px;
}
.sc-quote-info-head svg { color: var(--sc-accent); }

/* Steps list */
.sc-quote-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sc-quote-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sc-quote-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--sc-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sc-quote-steps li div strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-text);
  margin-bottom: 2px;
}
.sc-quote-steps li div p {
  font-size: 12.5px;
  color: var(--sc-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Contact card */
.sc-quote-contact-card p {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin: 0 0 12px;
}
.sc-quote-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--sc-primary);
  border-radius: var(--sc-radius);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sc-primary);
  text-decoration: none;
  transition: background .15s, color .15s;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.sc-quote-contact-btn:hover { background: var(--sc-primary); color: #fff; }
.sc-quote-contact-btn svg { color: inherit; }
.sc-quote-contact-btn--wa {
  border-color: #25D366;
  color: #16a34a;
}
.sc-quote-contact-btn--wa:hover { background: #25D366; color: #fff; }

/* Success state */
.sc-quote-success {
  text-align: center;
  padding: 64px 24px;
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
}
.sc-quote-success-icon { color: var(--sc-accent); margin-bottom: 20px; }
.sc-quote-success h2 { font-size: 24px; font-weight: 800; color: var(--sc-text); margin-bottom: 12px; }
.sc-quote-success p { color: var(--sc-text-muted); font-size: 15px; margin-bottom: 28px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sc-quote-layout { grid-template-columns: 1fr; }
  .sc-quote-sidebar { position: static; }
  .sc-quote-banner-trust { display: none; }
}
@media (max-width: 768px) {
  .sc-quote-banner { padding: 32px 0; }
  .sc-quote-wrap { padding: 24px 0 48px; }
  .sc-quote-card { padding: 20px 16px 18px; }
  .sc-qf-2col { grid-template-columns: 1fr; gap: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE IMPROVEMENTS — Get a Quote / About / Contact
   Targets page.php rendered content via .sc-page-content-inner
   and the page title bar via .sc-page-title
═══════════════════════════════════════════════════════════════ */

/* ── Page title bar (h1 above breadcrumb) ──────────────────── */
.sc-page-title {
  background: var(--sc-primary);
  padding: 40px 0 36px;
  border-bottom: 3px solid var(--sc-accent);
}
.sc-page-title-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.sc-page-title h1 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ── Wider content wrap for these pages ────────────────────── */
.page-template-default .sc-page-content-wrap {
  max-width: 1000px;
  padding: 40px 24px 72px;
}
.page-template-default .sc-page-content-inner {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ── Inner content card ─────────────────────────────────────── */
.sc-page-content-inner .wp-block-group,
.sc-page-content-inner > *:not(.wp-block-columns):not(h1):not(h2):not(h3) {
  /* let individual blocks breathe without card wrapping */
}

/* ── Leading description paragraph ────────────────────────── */
.sc-page-content-inner > p:first-of-type,
.sc-page-content-inner .wp-block-paragraph:first-of-type p,
.sc-page-content-inner > .wp-block-paragraph:first-child {
  font-size: 16px;
  color: var(--sc-text-muted);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* ── H2 section headers ────────────────────────────────────── */
.sc-page-content-inner h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--sc-primary);
  margin-top: 40px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sc-accent);
  display: inline-block;
}
.sc-page-content-inner h2:first-child { margin-top: 0; }

/* ── H3 sub-headers ────────────────────────────────────────── */
.sc-page-content-inner h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* ── WP block columns (stats row on About, contact details) ── */
.sc-page-content-inner .wp-block-columns {
  display: flex;
  gap: 20px;
  margin: 28px 0 !important;
  flex-wrap: wrap;
}
.sc-page-content-inner .wp-block-column {
  flex: 1 1 160px;
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-top: 3px solid var(--sc-accent);
  border-radius: var(--sc-radius-lg);
  padding: 20px 20px 18px;
  min-width: 0;
}
.sc-page-content-inner .wp-block-column p {
  margin: 0;
  font-size: 13.5px;
  color: var(--sc-text-muted);
  line-height: 1.5;
}
.sc-page-content-inner .wp-block-column h3,
.sc-page-content-inner .wp-block-column h4 {
  font-size: 28px;
  font-weight: 900;
  color: var(--sc-accent);
  margin: 0 0 4px;
  letter-spacing: -.02em;
  text-transform: none;
}
.sc-page-content-inner .wp-block-column strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-text-muted);
  margin-bottom: 6px;
}

/* ── Contact detail items (emoji + label pattern) ───────────── */
.sc-page-content-inner .wp-block-group {
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  padding: 28px 28px 24px;
  margin: 24px 0;
}
.sc-page-content-inner .wp-block-group h2 {
  border-bottom-color: var(--sc-accent);
  margin-top: 0;
}

/* Contact row: icon + strong (heading) + p (value) */
.sc-page-content-inner p:has(> strong:first-child) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sc-border);
  margin: 0 !important;
}
.sc-page-content-inner p:has(> strong:first-child):last-of-type {
  border-bottom: none;
}
.sc-page-content-inner p strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sc-text-muted);
}
.sc-page-content-inner p > a {
  font-weight: 600;
  font-size: 15px;
  color: var(--sc-primary);
}
.sc-page-content-inner p > a:hover { color: var(--sc-accent); text-decoration: none; }

/* ── Quote / Contact form inside .sc-page-content-inner ─────── */
.sc-page-content-inner .wpcf7,
.sc-page-content-inner .wpforms-container,
.sc-page-content-inner form:not([class*="woocommerce"]) {
  background: var(--sc-bg);
  border: 1.5px solid var(--sc-border);
  border-top: 3px solid var(--sc-accent);
  border-radius: var(--sc-radius-lg);
  padding: 28px 28px 24px;
  margin: 24px 0 0;
}

/* Labels */
.sc-page-content-inner label,
.sc-page-content-inner .wpforms-field-label,
.sc-page-content-inner .wpcf7 label {
  display: block;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-primary) !important;
  margin-bottom: 6px !important;
}

/* Inputs */
.sc-page-content-inner input[type="text"],
.sc-page-content-inner input[type="email"],
.sc-page-content-inner input[type="tel"],
.sc-page-content-inner input[type="url"],
.sc-page-content-inner input[type="number"],
.sc-page-content-inner select,
.sc-page-content-inner textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--sc-font-body) !important;
  color: var(--sc-text) !important;
  background: var(--sc-bg) !important;
  border: 1.5px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  box-sizing: border-box !important;
  transition: border-color .18s, box-shadow .18s !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}
.sc-page-content-inner input[type="text"]:focus,
.sc-page-content-inner input[type="email"]:focus,
.sc-page-content-inner input[type="tel"]:focus,
.sc-page-content-inner input[type="url"]:focus,
.sc-page-content-inner input[type="number"]:focus,
.sc-page-content-inner select:focus,
.sc-page-content-inner textarea:focus {
  border-color: var(--sc-accent) !important;
  box-shadow: 0 0 0 3px rgba(174,54,62,.12) !important;
}
.sc-page-content-inner textarea { min-height: 120px; resize: vertical; }

/* Submit button */
.sc-page-content-inner input[type="submit"],
.sc-page-content-inner button[type="submit"],
.sc-page-content-inner .wpforms-submit,
.sc-page-content-inner .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  background: var(--sc-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sc-radius) !important;
  font-size: 14px !important;
  font-family: var(--sc-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  transition: background .18s, transform .1s !important;
  box-shadow: none !important;
  margin-top: 8px !important;
}
.sc-page-content-inner input[type="submit"]:hover,
.sc-page-content-inner button[type="submit"]:hover,
.sc-page-content-inner .wpforms-submit:hover,
.sc-page-content-inner .wpcf7-submit:hover {
  background: var(--sc-primary) !important;
}

/* Field spacing */
.sc-page-content-inner p:has(> input),
.sc-page-content-inner p:has(> textarea),
.sc-page-content-inner p:has(> select),
.sc-page-content-inner .wpforms-field,
.sc-page-content-inner .wpcf7 p {
  margin-bottom: 16px !important;
}

/* ── Quote page direct contact strip ────────────────────────── */
.sc-page-content-inner p:has(> a[href^="mailto"]),
.sc-page-content-inner p:has(> a[href^="tel"]) {
  background: var(--sc-bg-soft);
  border: 1px solid var(--sc-border);
  border-left: 3px solid var(--sc-accent);
  border-radius: var(--sc-radius);
  padding: 12px 16px !important;
  font-size: 13.5px;
  color: var(--sc-text-muted);
  display: block !important;
  margin: 16px 0 !important;
}

/* ── Trust strip (4 columns: Free Delivery / Branding / PPE / Support) */
.sc-page-content-inner .wp-block-columns:last-of-type .wp-block-column {
  border-top-color: var(--sc-primary);
  text-align: center;
}
.sc-page-content-inner .wp-block-columns:last-of-type .wp-block-column p strong {
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sc-text);
  display: block;
  margin-bottom: 4px;
}
.sc-page-content-inner .wp-block-columns:last-of-type .wp-block-column p {
  font-size: 13px;
  color: var(--sc-text-muted);
}

/* ── About page stat numbers ─────────────────────────────────── */
.page-id-about .sc-page-content-inner .wp-block-column p:first-child,
body[class*="page-id-"] .sc-page-content-inner .wp-block-column > p:first-of-type {
  font-size: 32px;
  font-weight: 900;
  color: var(--sc-accent);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}

/* ── CTA link button ─────────────────────────────────────────── */
.sc-page-content-inner a.wp-block-button__link,
.sc-page-content-inner .wp-block-button__link {
  background: var(--sc-accent) !important;
  color: #fff !important;
  padding: 11px 24px !important;
  border-radius: var(--sc-radius) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background .15s !important;
  display: inline-block !important;
}
.sc-page-content-inner a.wp-block-button__link:hover {
  background: var(--sc-primary) !important;
}

/* ── "Request a Quote →" arrow link ─────────────────────────── */
.sc-page-content-inner p > a:only-child {
  font-weight: 700;
  color: var(--sc-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  transition: color .15s, gap .15s;
}
.sc-page-content-inner p > a:only-child:hover {
  color: var(--sc-primary);
  gap: 8px;
  text-decoration: none;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-template-default .sc-page-content-wrap { max-width: 100%; padding: 32px 20px 60px; }
}
@media (max-width: 768px) {
  .sc-page-title { padding: 28px 0 24px; }
  .sc-page-title h1 { font-size: 22px; }
  .page-template-default .sc-page-content-wrap { padding: 24px 16px 48px; }
  .sc-page-content-inner .wp-block-columns { flex-direction: column; gap: 12px; }
  .sc-page-content-inner .wp-block-column { flex: none; width: 100%; }
  .sc-page-content-inner .wpcf7,
  .sc-page-content-inner .wpforms-container,
  .sc-page-content-inner form:not([class*="woocommerce"]) { padding: 20px 16px; }
  .sc-page-content-inner .wp-block-group { padding: 20px 16px; }
  .sc-page-content-inner h2 { font-size: 18px; }
}
@media (max-width: 480px) {
  .page-template-default .sc-page-content-wrap { padding: 16px 12px 40px; }
}


/* ═══════════════════════════════════════════════════════════════
   SUBCATEGORY PILL BAR — Barron-style
═══════════════════════════════════════════════════════════════ */
.sc-subcat-bar {
  background: var(--sc-bg);
  border-bottom: 1px solid var(--sc-border);
  position: sticky;
  top: var(--sc-header-h, 68px);
  z-index: 40;
}
.sc-subcat-bar-inner {
  max-width: var(--sc-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  min-height: 48px;
}
.sc-subcat-bar-inner::-webkit-scrollbar { display: none; }

.sc-subcat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sc-text-muted);
  background: var(--sc-bg-soft);
  border: 1.5px solid var(--sc-border);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.sc-subcat-pill:hover {
  border-color: var(--sc-primary);
  color: var(--sc-primary);
  background: var(--sc-bg);
}
.sc-subcat-pill--active {
  background: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  color: #fff !important;
}
.sc-subcat-pill-count {
  background: rgba(255,255,255,.25);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.sc-subcat-pill:not(.sc-subcat-pill--active) .sc-subcat-pill-count {
  background: var(--sc-border);
  color: var(--sc-text-muted);
}

/* ── Sidebar subcategory tree ───────────────────────────────── */
.sc-sidebar-subcats {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  border-left: 2px solid var(--sc-border);
  margin: 4px 0 6px 12px;
  gap: 0;
}
.sc-sidebar-subcat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--sc-text-muted);
  text-decoration: none;
  border-radius: var(--sc-radius);
  transition: background .12s, color .12s;
}
.sc-sidebar-subcat:hover {
  background: var(--sc-bg-soft);
  color: var(--sc-primary);
}
.sc-sidebar-subcat.active {
  color: var(--sc-primary);
  font-weight: 700;
  background: var(--sc-bg-soft);
}
.sc-sidebar-subcat.active .sc-sidebar-subcat-dot {
  background: var(--sc-primary);
}
.sc-sidebar-subcat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-border);
  flex-shrink: 0;
  transition: background .12s;
}
.sc-sidebar-subcat .sc-count {
  margin-left: auto;
}

/* ── Mobile: pill bar adjusts ────────────────────────────────── */
@media (max-width: 768px) {
  .sc-subcat-bar { top: var(--sc-header-h, 58px); }
  .sc-subcat-bar-inner { padding: 0 12px; min-height: 44px; gap: 5px; }
  .sc-subcat-pill { font-size: 12px; padding: 4px 12px; }
}

/* ── Subcategory ancestor breadcrumb pill ─────────────────── */
.sc-subcat-pill--ancestor {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--sc-text-muted) !important;
  padding-right: 4px !important;
  font-weight: 400 !important;
}
.sc-subcat-pill--ancestor:hover {
  color: var(--sc-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY NAV DROPDOWN
═══════════════════════════════════════════════════════════════ */
.sc-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Caret arrow */
.sc-nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  opacity: .6;
  transition: transform .2s;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sc-nav-item--drop:hover .sc-nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.sc-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 520px;
  max-width: 720px;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 9999;
  animation: sc-drop-in .15s ease;
}
@keyframes sc-drop-in {
  from { opacity:0; transform:translateX(-50%) translateY(-6px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Keep panel open while hovering */
.sc-nav-item--drop:hover .sc-dropdown { display: block; }

/* Nudge panels near edges to stay in viewport */
.sc-nav-item--drop:last-of-type .sc-dropdown { left:auto; right:0; transform:none; }
.sc-nav-item--drop:first-of-type .sc-dropdown { left:0; transform:none; }

.sc-dropdown-inner {
  padding: 16px 20px 18px;
}

/* "All [Category]" link at top */
.sc-dropdown-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--sc-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-primary);
  text-decoration: none;
  border-radius: var(--sc-radius);
  transition: background .12s;
}
.sc-dropdown-all:hover { background: var(--sc-bg-soft); }

/* Column grid */
.sc-dropdown-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 16px;
}

/* Subcategory group heading */
.sc-dropdown-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sc-text);
  text-decoration: none;
  border-radius: var(--sc-radius);
  transition: background .12s, color .12s;
  gap: 6px;
}
.sc-dropdown-heading:hover,
.sc-dropdown-heading.active { color: var(--sc-primary); background: var(--sc-bg-soft); }

/* Grandchild links */
.sc-dropdown-subs {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.sc-dropdown-sub {
  display: block;
  padding: 3px 8px 3px 16px;
  font-size: 12px;
  color: var(--sc-text-muted);
  text-decoration: none;
  border-radius: var(--sc-radius);
  transition: color .12s, background .12s;
  position: relative;
}
.sc-dropdown-sub::before {
  content: '–';
  position: absolute;
  left: 6px;
  color: var(--sc-border);
  font-size: 10px;
}
.sc-dropdown-sub:hover,
.sc-dropdown-sub.active {
  color: var(--sc-primary);
  background: var(--sc-bg-soft);
}

/* Count badge */
.sc-dropdown-count {
  font-size: 10px;
  color: var(--sc-text-light, #9ca3af);
  font-weight: 400;
  flex-shrink: 0;
}

/* Hide dropdown on mobile — pill bar handles subcats there */
@media (max-width: 1024px) {
  .sc-nav-item--drop .sc-dropdown { display: none !important; }
  .sc-nav-caret { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY — ZOOM BUTTON + LIGHTBOX
═══════════════════════════════════════════════════════════════ */

/* Zoom button on main image */
.sc-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--sc-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s, box-shadow .15s;
  color: var(--sc-text);
}
.sc-zoom-btn:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Main image cursor */
.sc-gallery-main img { cursor: zoom-in; }

/* ── Lightbox ────────────────────────────────────────────── */
.sc-lightbox-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 99998;
}
.sc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sc-lightbox-img-wrap {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-lightbox-img-wrap img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--sc-radius);
  transition: opacity .2s;
  user-select: none;
}
.sc-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 100000;
  transition: background .15s;
}
.sc-lightbox-close:hover { background: rgba(255,255,255,.2); }

.sc-lightbox-prev,
.sc-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 100000;
  transition: background .15s;
  user-select: none;
}
.sc-lightbox-prev { left: 16px; }
.sc-lightbox-next { right: 16px; }
.sc-lightbox-prev:hover,
.sc-lightbox-next:hover { background: rgba(255,255,255,.2); }

.sc-lightbox-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.8);
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 100px;
  z-index: 100000;
}

/* ── Gallery placeholder (no image) ─────────────────────── */
.sc-gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--sc-text-muted);
  padding: 40px;
  text-align: center;
}
.sc-gallery-placeholder p { font-size: 13px; margin: 0; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sc-lightbox-prev { left: 8px; }
  .sc-lightbox-next { right: 8px; }
  .sc-lightbox-img-wrap { max-width: 96vw; }
  .sc-lightbox-img-wrap img { max-width: 96vw; max-height: 80vh; }
}