/* ============================================================
   SS HANSEN EMBROIDERY — BRAND DESIGN SYSTEM
   Child theme: hello-elementor-child  |  v2.7  |  2026
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

/* ================================================================
   SECTION 1 — DESIGN TOKENS
   ================================================================ */
:root {

  /* ── Color Palette ── */
  --ssh-black:       #1C1C1C;   /* logo letterforms / headlines  */
  --ssh-thread:      #B8291C;   /* needle thread — primary accent */
  --ssh-thread-dark: #8E1F14;   /* thread hover / pressed         */
  --ssh-thread-tint: #F7EEEC;   /* thread tint — subtle bg fill   */
  --ssh-dark:        #252525;   /* near-black body text           */
  --ssh-slate:       #444444;   /* secondary body text            */
  --ssh-fog:         #949492;   /* tertiary / meta text           */
  --ssh-mist:        #E2E2E0;   /* dividers / borders             */
  --ssh-canvas:      #F5F5F3;   /* page background                */
  --ssh-white:       #FFFFFF;   /* cards / panels                 */

  /* ── Typography ── */
  --ssh-font-display: 'Barlow Condensed', sans-serif;
  --ssh-font-body:    'Inter', sans-serif;
  --ssh-font-ui:      'Barlow', sans-serif;

  /* ── Type Scale ── */
  --ssh-text-xs:   0.75rem;   /*  12px  */
  --ssh-text-sm:   0.875rem;  /*  14px  */
  --ssh-text-base: 1rem;      /*  16px  */
  --ssh-text-md:   1.125rem;  /*  18px  */
  --ssh-text-lg:   1.25rem;   /*  20px  */
  --ssh-text-xl:   1.5rem;    /*  24px  */
  --ssh-text-2xl:  2rem;      /*  32px  */
  --ssh-text-3xl:  2.75rem;   /*  44px  */
  --ssh-text-4xl:  3.5rem;    /*  56px  */
  --ssh-text-hero: clamp(3rem, 6vw, 5rem);

  /* ── Spacing ── */
  --ssh-sp-1:  4px;
  --ssh-sp-2:  8px;
  --ssh-sp-3:  12px;
  --ssh-sp-4:  16px;
  --ssh-sp-5:  24px;
  --ssh-sp-6:  32px;
  --ssh-sp-7:  40px;
  --ssh-sp-8:  56px;
  --ssh-sp-9:  80px;
  --ssh-sp-10: 120px;

  /* ── Border Radius ── */
  --ssh-radius-sm:   3px;
  --ssh-radius-md:   6px;
  --ssh-radius-lg:   10px;
  --ssh-radius-pill: 100px;

  /* ── Shadows ── */
  --ssh-shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.06);
  --ssh-shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --ssh-shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --ssh-shadow-xl:  0 20px 50px rgba(0,0,0,0.12);

  /* ── Transitions ── */
  --ssh-transition:      all 0.18s ease;
  --ssh-transition-slow: all 0.35s ease;

  /* ── Container / Layout ── */
  --ssh-container-max: 1200px;
  --ssh-container-pad: clamp(20px, 4vw, 60px);
  --ssh-section-gap:   clamp(60px, 8vw, 120px);
}

/* ================================================================
   SECTION 2 — GLOBAL BASE
   ================================================================ */

body {
  background-color: var(--ssh-canvas);
  color: var(--ssh-dark);
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ssh-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ssh-black);
}

h1, .ssh-h1 { font-size: var(--ssh-text-hero); }
h2, .ssh-h2 { font-size: var(--ssh-text-3xl); }
h3, .ssh-h3 { font-size: var(--ssh-text-2xl); }
h4, .ssh-h4 { font-size: var(--ssh-text-xl);  font-weight: 700; }
h5, .ssh-h5 { font-size: var(--ssh-text-lg);  font-weight: 600; font-family: var(--ssh-font-ui); }
h6, .ssh-h6 { font-size: var(--ssh-text-md);  font-weight: 600; font-family: var(--ssh-font-ui); }

p { margin-bottom: 1em; color: var(--ssh-slate); }

a {
  color: var(--ssh-thread);
  text-decoration: none;
  transition: var(--ssh-transition);
}
a:hover { color: var(--ssh-thread-dark); }

/* ── Eyebrow label above headlines ── */
.ssh-eyebrow {
  display: inline-block;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ssh-thread);
  margin-bottom: var(--ssh-sp-3);
}

/* ── Lead text ── */
.ssh-lead {
  font-size: var(--ssh-text-md);
  color: var(--ssh-slate);
  line-height: 1.75;
}

/* ================================================================
   SECTION 3 — BUTTONS
   ================================================================ */

/* Base button reset */
.ssh-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ssh-sp-2);
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--ssh-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--ssh-transition);
  line-height: 1;
  white-space: nowrap;
}

/* Primary — Thread Red fill */
.ssh-btn-primary,
.elementor-button-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--ssh-thread);
  color: var(--ssh-white) !important;
  border-color: var(--ssh-thread);
}
.ssh-btn-primary:hover,
.elementor-button-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--ssh-thread-dark);
  border-color: var(--ssh-thread-dark);
  color: var(--ssh-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--ssh-shadow-md);
}

/* Secondary — Black fill */
.ssh-btn-secondary {
  background-color: var(--ssh-black);
  color: var(--ssh-white);
  border-color: var(--ssh-black);
}
.ssh-btn-secondary:hover {
  background-color: var(--ssh-dark);
  color: var(--ssh-white);
  transform: translateY(-1px);
}

/* Outline — Thread Red border */
.ssh-btn-outline {
  background-color: transparent;
  color: var(--ssh-thread);
  border-color: var(--ssh-thread);
}
.ssh-btn-outline:hover {
  background-color: var(--ssh-thread);
  color: var(--ssh-white);
}

/* Outline — Black border */
.ssh-btn-outline-dark {
  background-color: transparent;
  color: var(--ssh-black);
  border-color: var(--ssh-black);
}
.ssh-btn-outline-dark:hover {
  background-color: var(--ssh-black);
  color: var(--ssh-white);
}

/* Ghost — on dark backgrounds */
.ssh-btn-ghost {
  background-color: transparent;
  color: var(--ssh-white);
  border-color: rgba(255,255,255,0.5);
}
.ssh-btn-ghost:hover {
  background-color: var(--ssh-white);
  color: var(--ssh-black);
  border-color: var(--ssh-white);
}

/* Sizes */
.ssh-btn-sm { font-size: var(--ssh-text-sm); padding: 9px 18px; }
.ssh-btn-lg { font-size: var(--ssh-text-md);  padding: 16px 36px; }

/* ================================================================
   SECTION 4 — HEADER & NAVIGATION
   ================================================================ */

/* ── Site Header ── */
.site-header,
header.entry-header,
.elementor-location-header {
  background-color: var(--ssh-white);
  border-bottom: 1px solid var(--ssh-mist);
  position: sticky;
  top: 0;
  z-index: 10000; /* above WooCommerce Select2 dropdowns (z-index: 9999) */
  box-shadow: var(--ssh-shadow-sm);
  /* Explicit stacking context so z-index is honoured on all devices */
  isolation: isolate;
  transform: translateZ(0);
}

/* ── Force WooCommerce dropdowns to stay below the sticky header ── */
/* Select2 (state/country selectors) */
.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-results__options {
  z-index: 9000 !important;
}
/* WooCommerce Chosen (legacy fallback) */
.chosen-container-active .chosen-drop,
.chosen-with-drop .chosen-drop {
  z-index: 9000 !important;
}
/* Generic WC field dropdowns */
.woocommerce-checkout .select2-container,
.woocommerce-checkout .chosen-container,
.woocommerce-cart    .select2-container,
.woocommerce-cart    .chosen-container {
  z-index: 9000 !important;
}

/* ── Nav links ── */
.site-header nav a,
.elementor-nav-menu a {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ssh-black);
  padding: 6px 0;
  position: relative;
}
.site-header nav a::after,
.elementor-nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ssh-thread);
  transition: width 0.2s ease;
}
.site-header nav a:hover::after,
.site-header nav a.current-menu-item::after {
  width: 100%;
}
.site-header nav a:hover,
.elementor-nav-menu a:hover {
  color: var(--ssh-thread);
}

/* ── Corporate Login nav item — stand out ── */
.nav-corporate-login > a,
.menu-item-corporate-login > a {
  color: var(--ssh-white) !important;
  background-color: var(--ssh-thread);
  padding: 8px 16px !important;
  border-radius: var(--ssh-radius-sm);
}
.nav-corporate-login > a:hover,
.menu-item-corporate-login > a:hover {
  background-color: var(--ssh-thread-dark) !important;
  color: var(--ssh-white) !important;
}
.nav-corporate-login > a::after,
.menu-item-corporate-login > a::after { display: none; }

/* ================================================================
   SECTION 5 — HERO SECTION
   ================================================================ */

.ssh-hero {
  background-color: var(--ssh-black);
  color: var(--ssh-white);
  padding: var(--ssh-sp-10) var(--ssh-container-pad);
  position: relative;
  overflow: hidden;
}

/* Subtle stitch texture on dark backgrounds */
.ssh-hero::before,
.ssh-section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(184,41,28,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.ssh-hero > *,
.ssh-section-dark > * { position: relative; z-index: 1; }

.ssh-hero h1 {
  color: var(--ssh-white);
  font-size: var(--ssh-text-hero);
  max-width: 800px;
}

.ssh-hero h1 em {
  color: var(--ssh-thread);
  font-style: normal;
}

/* ── Thread accent line (mimics logo rule) ── */
.ssh-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--ssh-thread);
  margin-bottom: var(--ssh-sp-5);
}
.ssh-rule-lg {
  width: 80px;
  height: 4px;
}

/* ================================================================
   SECTION 6 — CONTENT SECTIONS
   ================================================================ */

.ssh-section {
  padding: var(--ssh-section-gap) var(--ssh-container-pad);
}

.ssh-section-white  { background-color: var(--ssh-white);  }
.ssh-section-canvas { background-color: var(--ssh-canvas); }
.ssh-section-dark   { background-color: var(--ssh-black); color: var(--ssh-white); }
.ssh-section-thread { background-color: var(--ssh-thread); color: var(--ssh-white); }

/* On dark sections, headings go white */
.ssh-section-dark h1,
.ssh-section-dark h2,
.ssh-section-dark h3,
.ssh-section-dark h4,
.ssh-section-dark p { color: var(--ssh-white); }

.ssh-section-thread h1,
.ssh-section-thread h2,
.ssh-section-thread h3,
.ssh-section-thread p { color: var(--ssh-white); }

/* ── Column layout helpers ── */
.ssh-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ssh-sp-6); }
.ssh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ssh-sp-6); }
.ssh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ssh-sp-5); }

@media (max-width: 900px) {
  .ssh-grid-3, .ssh-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ssh-grid-2, .ssh-grid-3, .ssh-grid-4 { grid-template-columns: 1fr; }
}

/* ================================================================
   SECTION 7 — CARDS
   ================================================================ */

.ssh-card {
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  padding: var(--ssh-sp-6);
  box-shadow: var(--ssh-shadow-sm);
  transition: var(--ssh-transition);
}
.ssh-card:hover {
  box-shadow: var(--ssh-shadow-lg);
  transform: translateY(-3px);
  border-color: transparent;
}

/* Feature card — with icon bubble */
.ssh-feature-card {
  text-align: left;
}
.ssh-feature-card .ssh-icon-bubble {
  width: 52px;
  height: 52px;
  background: var(--ssh-thread-tint);
  border-radius: var(--ssh-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ssh-sp-4);
}
.ssh-feature-card .ssh-icon-bubble svg {
  width: 26px;
  height: 26px;
  stroke: var(--ssh-thread);
}
.ssh-feature-card h4 {
  margin-bottom: var(--ssh-sp-2);
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-lg);
  font-weight: 600;
}
.ssh-feature-card p { color: var(--ssh-fog); font-size: var(--ssh-text-sm); }

/* Product card */
.ssh-product-card .ssh-card-img {
  border-radius: var(--ssh-radius-md) var(--ssh-radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ssh-canvas);
}
.ssh-product-card .ssh-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ssh-product-card:hover .ssh-card-img img { transform: scale(1.04); }
.ssh-product-card .ssh-card-body { padding: var(--ssh-sp-4) var(--ssh-sp-5); }

/* ================================================================
   SECTION 8 — BADGES & LABELS
   ================================================================ */

.ssh-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ssh-radius-sm);
  line-height: 1;
}
.ssh-badge-thread  { background: var(--ssh-thread);      color: var(--ssh-white); }
.ssh-badge-dark    { background: var(--ssh-black);        color: var(--ssh-white); }
.ssh-badge-outline { border: 1.5px solid var(--ssh-mist); color: var(--ssh-slate); }
.ssh-badge-tint    { background: var(--ssh-thread-tint);  color: var(--ssh-thread); }
.ssh-badge-canvas  { background: var(--ssh-canvas);       color: var(--ssh-fog);   }

/* ================================================================
   SECTION 9 — FORMS
   ================================================================ */

.ssh-input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  width: 100%;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-dark);
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 11px 14px;
  transition: var(--ssh-transition);
  outline: none;
}
.ssh-input:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10);
}

label,
.ssh-label {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  color: var(--ssh-black);
  margin-bottom: var(--ssh-sp-1);
  display: block;
}

/* ================================================================
   SECTION 10 — WOOCOMMERCE STOREFRONT OVERRIDES
   ================================================================ */

/* ── Shop page ── */
.woocommerce ul.products li.product a img {
  border-radius: var(--ssh-radius-md);
  transition: var(--ssh-transition-slow);
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-md);
  font-weight: 600;
  color: var(--ssh-black);
}
.woocommerce ul.products li.product .price {
  color: var(--ssh-thread);
  font-family: var(--ssh-font-ui);
  font-weight: 600;
}
.woocommerce ul.products li.product .price ins {
  color: var(--ssh-thread);
  text-decoration: none;
}
.woocommerce ul.products li.product .price del {
  color: var(--ssh-fog);
  font-size: 0.9em;
}

/* ── Sale badge ── */
.woocommerce span.onsale {
  background-color: var(--ssh-thread);
  border-radius: var(--ssh-radius-sm);
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  min-width: 48px;
  min-height: 0;
  line-height: 1;
  padding: 6px 10px;
  top: 10px;
  left: 10px;
}

/* ── Single product page ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ssh-thread);
  border-bottom: 2px solid var(--ssh-thread);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ssh-font-ui);
  font-weight: 600;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ssh-thread);
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-2xl);
  font-weight: 700;
}

/* ── Cart & Checkout ── */
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-color: var(--ssh-mist);
}
.woocommerce #payment div.payment_box {
  background: var(--ssh-canvas);
}

/* ── Order received / Thank you ── */
.woocommerce .woocommerce-order-received h2,
.woocommerce .woocommerce-thankyou-section h2 {
  color: var(--ssh-thread);
}

/* ── WooCommerce notices ── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--ssh-thread) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--ssh-thread) !important;
}
.woocommerce-error { border-top-color: var(--ssh-black) !important; }

/* ── Password-protected page (B2B corporate store) ── */
.post-password-form label {
  font-family: var(--ssh-font-ui);
  font-weight: 600;
  color: var(--ssh-black);
}
.post-password-form input[type="password"] {
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 11px 14px;
  font-family: var(--ssh-font-body);
}
.post-password-form input[type="submit"] {
  font-family: var(--ssh-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--ssh-thread);
  color: var(--ssh-white);
  border: none;
  border-radius: var(--ssh-radius-sm);
  padding: 12px 28px;
  cursor: pointer;
  transition: var(--ssh-transition);
}
.post-password-form input[type="submit"]:hover {
  background-color: var(--ssh-thread-dark);
}

/* ── B2B Corporate Store banner ── */
.ssh-b2b-banner {
  background: var(--ssh-black);
  color: var(--ssh-white);
  padding: var(--ssh-sp-2) var(--ssh-container-pad);
  text-align: center;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ssh-b2b-banner span { color: var(--ssh-thread); }

/* ================================================================
   SECTION 11 — FOOTER
   ================================================================ */

.site-footer,
.elementor-location-footer {
  background-color: var(--ssh-black);
  color: rgba(255,255,255,0.7);
  padding: var(--ssh-sp-9) var(--ssh-container-pad) var(--ssh-sp-6);
}
.site-footer h4,
.site-footer h5,
.site-footer .widget-title {
  color: var(--ssh-white);
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: var(--ssh-sp-4);
}
.site-footer a {
  color: rgba(255,255,255,0.65);
  font-size: var(--ssh-text-sm);
  transition: var(--ssh-transition);
}
.site-footer a:hover { color: var(--ssh-white); }

.ssh-footer-rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: var(--ssh-sp-6) 0;
}

/* Thread accent in footer */
.ssh-footer-logo-rule {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--ssh-thread);
  margin-bottom: var(--ssh-sp-5);
}

/* ================================================================
   SECTION 12 — UTILITY CLASSES
   ================================================================ */

/* Text colors */
.text-thread  { color: var(--ssh-thread) !important; }
.text-black   { color: var(--ssh-black)  !important; }
.text-white   { color: var(--ssh-white)  !important; }
.text-fog     { color: var(--ssh-fog)    !important; }
.text-slate   { color: var(--ssh-slate)  !important; }

/* Background fills */
.bg-thread    { background-color: var(--ssh-thread);     }
.bg-black     { background-color: var(--ssh-black);      }
.bg-canvas    { background-color: var(--ssh-canvas);     }
.bg-white     { background-color: var(--ssh-white);      }
.bg-tint      { background-color: var(--ssh-thread-tint);}

/* Spacing helpers */
.mt-section { margin-top: var(--ssh-section-gap); }
.mb-section { margin-bottom: var(--ssh-section-gap); }

/* Divider */
.ssh-divider {
  border: none;
  border-top: 1px solid var(--ssh-mist);
  margin: var(--ssh-sp-8) 0;
}

/* Centered content max-width */
.ssh-content-narrow { max-width: 640px;  margin-left: auto; margin-right: auto; }
.ssh-content-mid    { max-width: 860px;  margin-left: auto; margin-right: auto; }
.ssh-content-wide   { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* Aspect ratios for imagery */
.ssh-ratio-product  { aspect-ratio: 4 / 5; }
.ssh-ratio-hero     { aspect-ratio: 16 / 7; }
.ssh-ratio-feature  { aspect-ratio: 3 / 2; }
.ssh-ratio-square   { aspect-ratio: 1 / 1; }
img.ssh-cover       { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================================
   SECTION 13 — ELEMENTOR WIDGET OVERRIDES
   ================================================================ */

/* ── Icon Box widget ── */
.elementor-icon-box-icon .elementor-icon {
  color: var(--ssh-thread) !important;
}
.elementor-icon-box-title {
  font-family: var(--ssh-font-ui) !important;
  font-weight: 600 !important;
}

/* ── Testimonial widget ── */
.elementor-testimonial-content {
  font-family: var(--ssh-font-body) !important;
  color: var(--ssh-slate) !important;
}
.elementor-testimonial-name {
  font-family: var(--ssh-font-ui) !important;
  font-weight: 600 !important;
  color: var(--ssh-black) !important;
}

/* ── Image widget ── */
.elementor-widget-image img {
  border-radius: var(--ssh-radius-md);
}

/* ── Divider widget ── */
.elementor-divider-separator {
  border-color: var(--ssh-mist) !important;
}
.elementor-widget-divider.ssh-thread-divider .elementor-divider-separator {
  border-color: var(--ssh-thread) !important;
}

/* ── Counter widget (stats section) ── */
.elementor-counter-number-wrapper {
  font-family: var(--ssh-font-display) !important;
  font-weight: 800 !important;
  color: var(--ssh-thread) !important;
}
.elementor-counter-title {
  font-family: var(--ssh-font-ui) !important;
  color: var(--ssh-slate) !important;
}

/* ── Carousel navigation ── */
.elementor-swiper-button svg { color: var(--ssh-thread); }

/* ================================================================
   SECTION 14 — RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
  :root {
    --ssh-section-gap: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --ssh-section-gap: 60px;
    --ssh-text-hero:   2.6rem;
    --ssh-text-3xl:    2rem;
    --ssh-text-2xl:    1.6rem;
  }
  .ssh-btn-lg { padding: 13px 24px; }
}

@media (max-width: 480px) {
  :root {
    --ssh-section-gap: 48px;
    --ssh-text-hero:   2rem;
  }
}

/* ================================================================
   SECTION 14b — ELEMENTOR THEME BUILDER LAYOUT FIX (v2.2)
   Both the archive and single-product Theme Builder templates
   generate  display:grid; grid-template-columns: ~780px ~780px
   on their wrapper when the template has 2+ top-level containers.
   Override to block so containers always stack vertically.
   ================================================================ */

.elementor-location-archive.product,
.elementor-location-single.product {
  display: block !important;
}

/* Constrain the single-product template wrapper so the page content
   doesn't stretch to full viewport width on wide screens. */
.elementor-location-single.product {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   SECTION 15 — WOOCOMMERCE SHOP PAGES (B2B CORPORATE STORE)
   4-column grid · product cards · single product · cart ·
   checkout · my account · Barn2 login form
   ================================================================ */

/* ── Shop container ── */
.woocommerce-page .woocommerce,
body.ssh-woo .woocommerce {
  max-width: var(--ssh-container-max);
  margin: 0 auto;
  padding: 40px var(--ssh-container-pad) 80px;
}

/* ── Shop archive header strip ── */
.ssh-shop-header {
  background: var(--ssh-black);
  padding: 48px 40px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.ssh-shop-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(184,41,28,0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.ssh-shop-header h1,
.ssh-shop-header h2 {
  color: var(--ssh-white);
  font-size: var(--ssh-text-3xl);
  margin: 0;
  position: relative;
  z-index: 1;
}
.ssh-shop-header .ssh-eyebrow {
  position: relative;
  z-index: 1;
}

/* ── Shop toolbar: category pills (left) + search + sort (right) ── */
.ssh-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  padding: 12px 20px;
}
.ssh-shop-toolbar-left  { flex: 1; min-width: 0; }
.ssh-shop-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Category filter pills ── */
.ssh-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ssh-cat-pill {
  display: inline-block;
  font-family: var(--ssh-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ssh-slate);
  background: var(--ssh-canvas);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
  transition: var(--ssh-transition);
}
.ssh-cat-pill:hover {
  color: var(--ssh-thread);
  border-color: var(--ssh-thread);
  background: var(--ssh-thread-tint);
}
.ssh-cat-pill.is-active {
  color: var(--ssh-white);
  background: var(--ssh-thread);
  border-color: var(--ssh-thread);
}

/* ── Product search form ── */
.ssh-shop-search {
  margin: 0;
  padding: 0;
}
.ssh-shop-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.ssh-search-icon {
  position: absolute;
  left: 11px;
  color: var(--ssh-fog);
  pointer-events: none;
  flex-shrink: 0;
}
.ssh-shop-search-input {
  font-family: var(--ssh-font-body) !important;
  font-size: 13px !important;
  color: var(--ssh-black) !important;
  background: var(--ssh-canvas) !important;
  border: 1.5px solid var(--ssh-mist) !important;
  border-radius: var(--ssh-radius-md) !important;
  padding: 8px 12px 8px 33px !important;
  width: 200px;
  outline: none;
  transition: width 0.2s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.ssh-shop-search-input:focus {
  border-color: var(--ssh-thread) !important;
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10) !important;
  width: 240px;
  background: var(--ssh-white) !important;
}
.ssh-shop-search-input::placeholder { color: var(--ssh-fog); }

/* Inline WooCommerce sort — inherit our toolbar styling */
.ssh-shop-toolbar .woocommerce-ordering {
  margin: 0 !important;
  float: none !important;
}
.ssh-shop-toolbar .woocommerce-ordering select {
  padding: 8px 32px 8px 12px;
  font-size: 12px;
}

/* Category description on category archive pages */
.ssh-cat-desc {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: rgba(255,255,255,0.55);
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
  max-width: 520px;
  line-height: 1.65;
}

/* ── Responsive: stack toolbar on smaller screens ── */
@media (max-width: 900px) {
  .ssh-shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .ssh-shop-toolbar-left { width: 100%; }
  .ssh-shop-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .ssh-shop-search-input { width: 160px; }
  .ssh-shop-search-input:focus { width: 190px; }
}
@media (max-width: 480px) {
  .ssh-shop-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ssh-shop-search-inner,
  .ssh-shop-toolbar .woocommerce-ordering,
  .ssh-shop-toolbar .woocommerce-ordering select { width: 100%; }
  .ssh-shop-search-input,
  .ssh-shop-search-input:focus { width: 100% !important; }
}

/* ── Ordering dropdown ── */
.woocommerce-ordering select {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 500;
  color: var(--ssh-black);
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 8px 32px 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23949492'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ── 4-Column product grid ── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  overflow: hidden;
  transition: var(--ssh-transition);
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--ssh-shadow-lg);
  border-color: transparent;
  transform: translateY(-2px);
}

/* Product thumbnail */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.35s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}

/* Card body (injected by functions.php) */
.ssh-product-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-base) !important;
  font-weight: 600 !important;
  color: var(--ssh-black) !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-lg) !important;
  font-weight: 700 !important;
  color: var(--ssh-thread) !important;
  margin: auto 0 12px !important;
  display: block;
}
.woocommerce ul.products li.product .price del {
  color: var(--ssh-fog) !important;
  font-size: 0.85em !important;
  margin-right: 4px;
}

/* Add to cart button on loop */
.woocommerce ul.products li.product .button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  background: var(--ssh-black) !important;
  color: var(--ssh-white) !important;
  border: none !important;
  border-radius: var(--ssh-radius-sm) !important;
  transition: var(--ssh-transition) !important;
  margin-top: auto !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  transform: none !important;
}

/* Responsive grid */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ── Single Product Page ── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 32px; }
}

/* Product images */
.woocommerce div.product div.images {
  border-radius: var(--ssh-radius-lg);
  overflow: hidden;
}
.woocommerce div.product div.images img {
  border-radius: var(--ssh-radius-lg);
}

/* Product summary */
.woocommerce div.product div.summary {
  padding: 0;
}
.woocommerce div.product .product_title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-3xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  line-height: 1.05 !important;
  margin: 0 0 12px !important;
}
.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: 16px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-thread) !important;
  margin-bottom: 20px !important;
  display: block;
}

/* Product short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-slate);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ssh-mist);
}

/* Quantity input */
.woocommerce div.product .quantity input.qty {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  font-weight: 600;
  color: var(--ssh-black);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 10px 14px;
  width: 80px;
  text-align: center;
}
.woocommerce div.product .quantity input.qty:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10);
  outline: none;
}

/* Single product Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  border: none !important;
  border-radius: var(--ssh-radius-sm) !important;
  padding: 14px 32px !important;
  transition: var(--ssh-transition) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--ssh-thread-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--ssh-shadow-md);
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--ssh-mist);
  padding: 0;
  margin: 40px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  border-radius: 0 !important;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ssh-fog) !important;
  padding: 12px 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--ssh-thread) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ssh-thread) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 28px 0 0;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-slate);
  line-height: 1.7;
}

/* ── Cart ── */
.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}
.woocommerce-cart table.cart th {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ssh-fog);
  padding: 12px 16px;
  border-bottom: 2px solid var(--ssh-mist);
  text-align: left;
}
.woocommerce-cart table.cart td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--ssh-mist);
  vertical-align: middle;
}
.woocommerce-cart table.cart td.product-name a {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-base);
  font-weight: 600;
  color: var(--ssh-black);
}
.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--ssh-thread);
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-lg);
  font-weight: 700;
  color: var(--ssh-thread);
}
.woocommerce-cart table.cart img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--ssh-radius-md);
}
.woocommerce-cart table.cart .product-remove a {
  color: var(--ssh-fog) !important;
  font-size: 20px;
  line-height: 1;
}
.woocommerce-cart table.cart .product-remove a:hover {
  color: var(--ssh-thread) !important;
}

/* Cart totals box */
.woocommerce-cart .cart_totals {
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  padding: 32px;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin-bottom: 20px !important;
}
.woocommerce-cart .cart_totals table th {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  color: var(--ssh-black);
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ssh-mist);
}
.woocommerce-cart .cart_totals table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--ssh-mist);
  font-family: var(--ssh-font-body);
  color: var(--ssh-slate);
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-bottom: none;
  font-weight: 700;
  font-size: var(--ssh-text-lg);
  color: var(--ssh-black);
}
.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--ssh-thread) !important;
}

/* Coupon field */
.woocommerce-cart .coupon input.input-text {
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 10px 14px;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
}
.woocommerce-cart .coupon .button {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--ssh-black) !important;
  color: var(--ssh-white) !important;
  border-radius: var(--ssh-radius-sm) !important;
}
.woocommerce-cart .coupon .button:hover {
  background: var(--ssh-thread) !important;
}

/* ── Checkout ── */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ssh-mist);
}

.woocommerce-checkout #order_review {
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  padding: 28px;
}
.woocommerce-checkout table.shop_table th {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ssh-fog);
}
.woocommerce-checkout table.shop_table .order-total .amount {
  color: var(--ssh-thread) !important;
  font-family: var(--ssh-font-display);
  font-weight: 800;
  font-size: var(--ssh-text-lg);
}

/* Payment box */
.woocommerce-checkout #payment {
  background: var(--ssh-canvas);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-lg);
  padding: 24px;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--ssh-font-ui);
  font-weight: 500;
  color: var(--ssh-black);
}

/* ================================================================
   MY ACCOUNT — FULL LAYOUT
   ================================================================ */

/* ── Outer wrapper: centred container, wraps so header spans full row ── */
.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;          /* lets the header take its own full-width row */
  align-items: flex-start;
  gap: 0 40px;              /* row-gap: 0 (header handles its own bottom space), col-gap: 40px */
  max-width: var(--ssh-container-max);
  margin-left:  auto;
  margin-right: auto;
  padding: 0 var(--ssh-container-pad) 96px;
  box-sizing: border-box;
}

/* ── Account header: hidden while displaced inside content, shown once JS moves it ──
   Elementor fires woocommerce_before_my_account inside the content wrapper, not before
   the nav. A wp_footer script moves .ssh-account-header to be a direct child of
   .woocommerce. Hide at the wrong spot; reveal at the right one. */
.woocommerce-account .woocommerce-MyAccount-content .ssh-account-header,
.woocommerce-account .woocommerce-MyAccount-content-wrapper .ssh-account-header {
  display: none !important;
}

/* ── Dark header: full-width strip spanning the entire first row ── */
.woocommerce-account .woocommerce > .ssh-shop-header {
  flex: 0 0 100%;           /* force to its own row */
  display: block !important;
  /* bleed to the container edges by cancelling the container's padding */
  margin-left:  calc(-1 * var(--ssh-container-pad));
  margin-right: calc(-1 * var(--ssh-container-pad));
  margin-bottom: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
  padding-left:  var(--ssh-container-pad);
  padding-right: var(--ssh-container-pad);
}

/* ── Sidebar navigation ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 120px; /* clears compact header */
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account nav.woocommerce-MyAccount-navigation {
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--ssh-mist) !important;
  border-radius: var(--ssh-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  background: transparent !important;
  border-bottom: 1px solid var(--ssh-mist) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 13px 18px 13px 20px !important;
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--ssh-slate) !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: var(--ssh-transition) !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--ssh-thread) !important;
  border-left-color: var(--ssh-thread) !important;
  background: var(--ssh-thread-tint) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--ssh-thread) !important;
  border-left-color: var(--ssh-thread) !important;
  background: var(--ssh-thread-tint) !important;
  font-weight: 700 !important;
}
/* Logout — subtle, smaller text */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--ssh-fog) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--ssh-thread) !important;
  background: #fef2f2 !important;
  border-left-color: var(--ssh-thread) !important;
}

/* ── Content area ────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin: 0 0 24px !important;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ssh-mist);
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin: 32px 0 16px !important;
}
/* Dashboard intro paragraph */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-slate);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* ── Orders table ────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  overflow: hidden;
}
.woocommerce-account .woocommerce-orders-table th {
  font-family: var(--ssh-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ssh-fog);
  background: var(--ssh-canvas);
  padding: 12px 16px;
  border-bottom: 2px solid var(--ssh-mist);
  text-align: left;
}
.woocommerce-account .woocommerce-orders-table td {
  padding: 16px;
  border-bottom: 1px solid var(--ssh-mist);
  font-family: var(--ssh-font-body);
  color: var(--ssh-slate);
  font-size: var(--ssh-text-sm);
  vertical-align: middle;
}
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
  font-weight: 700;
  color: var(--ssh-black);
}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ssh-radius-pill);
  font-family: var(--ssh-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ssh-canvas);
  color: var(--ssh-slate);
  border: 1px solid var(--ssh-mist);
}
.woocommerce-account .woocommerce-orders-table .woocommerce-button {
  display: inline-block;
  font-family: var(--ssh-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  border-radius: var(--ssh-radius-sm) !important;
  padding: 7px 16px !important;
  text-decoration: none !important;
  transition: background var(--ssh-transition) !important;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
  background: var(--ssh-thread-dark) !important;
}

/* ── Edit account / address forms ────────────────────────────────── */
.woocommerce-account fieldset {
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 24px 28px;
  margin: 24px 0 0;
}
.woocommerce-account fieldset legend {
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-lg);
  font-weight: 800;
  color: var(--ssh-black);
  padding: 0 8px;
}
.woocommerce-account .woocommerce-address-fields h3,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row label,
.woocommerce-account .woocommerce-address-fields__field-wrapper label {
  font-family: var(--ssh-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ssh-slate);
  margin-bottom: 4px;
  display: block;
}
/* Address cards on dashboard */
.woocommerce-account .woocommerce-MyAccount-content address {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.8;
  font-style: normal;
  background: var(--ssh-canvas);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 20px 24px;
}

/* ── Tablet: tighten sidebar so content has more room ────────────── */
@media (max-width: 960px) {
  .woocommerce-account .woocommerce {
    gap: 0 28px;
    padding: 0 var(--ssh-container-pad) 72px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 180px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 12px 14px 12px 14px !important;
    font-size: 11px !important;
  }
  /* Orders table: allow horizontal scroll rather than squishing columns */
  .woocommerce-account .woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── Mobile: stack nav above content ─────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    gap: 0;
    padding: 0 var(--ssh-container-pad) 56px;
  }

  /* Dark header — tighter on mobile */
  .woocommerce-account .woocommerce > .ssh-shop-header {
    padding-top: 28px;
    padding-bottom: 28px;
    margin-bottom: 20px;
  }
  .woocommerce-account .woocommerce > .ssh-shop-header h1 {
    font-size: var(--ssh-text-2xl) !important;
  }

  /* Nav: full-width vertical card — same look as desktop, just wider.
     Re-declare every background explicitly because Elementor's mobile
     CSS can inject dark overrides that beat inherited values. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account nav.woocommerce-MyAccount-navigation {
    flex: 0 0 100% !important;
    width: 100% !important;
    position: static !important;
    margin-bottom: 20px !important;
    background: transparent !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: block !important;          /* vertical list, matches desktop */
    background: #ffffff !important;
    border: 1px solid #E2E2E0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    background: transparent !important;
    border-bottom: 1px solid #E2E2E0 !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    background: transparent !important;
    color: #4A4A48 !important;
    padding: 13px 18px 13px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    border-bottom: none !important;
    white-space: normal !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #B8291C !important;
    background: #F7EEEC !important;
    border-left-color: #B8291C !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #B8291C !important;
    background: #F7EEEC !important;
    border-left-color: #B8291C !important;
    font-weight: 700 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #949492 !important;
    font-size: 11px !important;
  }

  /* Content: full width */
  .woocommerce-account .woocommerce-MyAccount-content {
    flex: 0 0 100%;
    min-width: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: var(--ssh-text-xl) !important;
  }

  /* Orders table: horizontal scroll */
  .woocommerce-account .woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 13px;
  }
  .woocommerce-account .woocommerce-orders-table th,
  .woocommerce-account .woocommerce-orders-table td {
    padding: 10px 12px;
    white-space: nowrap;
  }
  /* Un-nowrap the product name cell so it wraps naturally */
  .woocommerce-account .woocommerce-orders-table
    .woocommerce-orders-table__cell-order-number,
  .woocommerce-account .woocommerce-orders-table
    td.woocommerce-orders-table__cell-order-status {
    white-space: normal;
    min-width: 80px;
  }

  /* Address page: stack billing + shipping cards */
  .woocommerce-account .woocommerce-Addresses {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .woocommerce-account .woocommerce-Address {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Forms: full-width inputs */
  .woocommerce-account .woocommerce-MyAccount-content .form-row {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content input[type="text"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="email"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="password"],
  .woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
  .woocommerce-account .woocommerce-MyAccount-content select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fieldset: reduce padding */
  .woocommerce-account fieldset {
    padding: 16px 18px;
  }
}

/* ── Barn2 WooCommerce Protected Categories Login Form ── */
.wpc-login-form-container,
.wpc-protected-category-form {
  max-width: 440px;
  margin: 0 auto;
}
.wpc-login-form-container p,
.wpc-protected-category-form p {
  font-family: var(--ssh-font-body);
  color: var(--ssh-slate);
  line-height: 1.65;
}
.wpc-login-form-container label,
.wpc-protected-category-form label {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ssh-black);
  margin-bottom: var(--ssh-sp-1);
  display: block;
}
.wpc-login-form-container input[type="password"],
.wpc-protected-category-form input[type="password"] {
  width: 100%;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-dark);
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 12px 14px;
  transition: var(--ssh-transition);
  outline: none;
  margin-bottom: var(--ssh-sp-4);
}
.wpc-login-form-container input[type="password"]:focus,
.wpc-protected-category-form input[type="password"]:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10);
}
.wpc-login-form-container input[type="submit"],
.wpc-protected-category-form input[type="submit"],
.wpc-login-form-container button[type="submit"],
.wpc-protected-category-form button[type="submit"] {
  width: 100%;
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  border: none !important;
  border-radius: var(--ssh-radius-sm) !important;
  padding: 14px 28px !important;
  cursor: pointer;
  transition: var(--ssh-transition);
}
.wpc-login-form-container input[type="submit"]:hover,
.wpc-protected-category-form input[type="submit"]:hover {
  background: var(--ssh-thread-dark) !important;
}

/* ── Cart page: single-column full-width layout ── */
/* Grid removed — everything stacks vertically at full width.
   The cart table fills the content column; totals sit below,
   right-aligned via margin-left: auto. */

/* ── Empty cart ── */
.woocommerce-cart .woocommerce-info {
  border-top: 3px solid var(--ssh-thread) !important;
  background: var(--ssh-thread-tint) !important;
  padding: 20px 24px !important;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  border-radius: 0 var(--ssh-radius-md) var(--ssh-radius-md) 0;
  margin-bottom: 24px !important;
}
.woocommerce-cart .woocommerce-info::before {
  color: var(--ssh-thread) !important;
}
.woocommerce-cart .return-to-shop {
  margin-top: 24px;
  text-align: center;
}
.woocommerce-cart .return-to-shop a.button {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: var(--ssh-black) !important;
  color: var(--ssh-white) !important;
  border-radius: var(--ssh-radius-sm) !important;
  padding: 12px 24px !important;
}
.woocommerce-cart .return-to-shop a.button:hover {
  background: var(--ssh-thread) !important;
}

/* ── Checkout: single-column full-width layout ── */
/* Grid removed — billing details and order review stack vertically.
   Each section fills the full content width. */
.woocommerce-checkout form.woocommerce-checkout {
  display: block;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  display: block;
  width: 100%;
  float: none;
}

/* ── Checkout form rows ── */
.woocommerce form .form-row {
  margin: 0 0 16px;
  padding: 0;
}
.woocommerce form .form-row label {
  font-family: var(--ssh-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ssh-black);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row .required {
  color: var(--ssh-thread);
  font-size: 14px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-dark);
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 11px 14px;
  outline: none;
  transition: var(--ssh-transition);
  box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10);
}
/* Validation error state */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: #C0392B;
}
.woocommerce form .form-row.woocommerce-invalid label {
  color: #C0392B;
}
/* Side-by-side half fields */
@media (min-width: 769px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }
  .woocommerce form .form-row-first { margin-right: 16px; }
}

/* ── WooCommerce notices (info / success / error) ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--ssh-font-body) !important;
  font-size: var(--ssh-text-sm) !important;
  padding: 16px 20px 16px 52px !important;
  margin-bottom: 24px !important;
  border-radius: 0 var(--ssh-radius-md) var(--ssh-radius-md) 0;
  list-style: none !important;
}
.woocommerce-message {
  border-top: 3px solid var(--ssh-thread) !important;
  background: var(--ssh-thread-tint) !important;
}
.woocommerce-message::before {
  color: var(--ssh-thread) !important;
}
.woocommerce-info {
  border-top-color: var(--ssh-black) !important;
  background: var(--ssh-canvas) !important;
}
.woocommerce-info::before {
  color: var(--ssh-black) !important;
}
.woocommerce-error {
  border-top: 3px solid #C0392B !important;
  background: #FDF2F2 !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
  font-family: var(--ssh-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: var(--ssh-black) !important;
  color: var(--ssh-white) !important;
  border-radius: var(--ssh-radius-sm) !important;
  padding: 8px 16px !important;
  float: right;
  margin-top: -4px;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background: var(--ssh-thread) !important;
}

/* ── Order received / Thank you page ── */
/* ── Suppress default WC "thank you" text (our header replaces it) ── */
.woocommerce-order-received .woocommerce-thankyou-order-received { display: none !important; }
/* ── Hide duplicate page-header title ─────────────────────────────── */
.woocommerce-order-received .page-header { display: none !important; }

/* ── Order content: centred, padded container ──────────────────────── */
.woocommerce-order-received .woocommerce-order {
  max-width: var(--ssh-container-max);
  margin-left:  auto;
  margin-right: auto;
  padding: 40px var(--ssh-container-pad) 80px;
  box-sizing: border-box;
}

/* ── Order overview strip (Order # · Date · Email · Total) ─────────── */
.woocommerce-order-received ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--ssh-black);
  border-radius: var(--ssh-radius-md);
  overflow: hidden;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 0 48px !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
  flex: 1;
  min-width: 140px;
  padding: 22px 28px !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  font-family: var(--ssh-font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child { border-right: none; }
.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-lg);
  font-weight: 800;
  color: var(--ssh-white);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 5px;
}
@media (max-width: 600px) {
  .woocommerce-order-received ul.woocommerce-order-overview li {
    flex: 0 0 50%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}

/* ── Section headings (Order details · Billing address) ────────────── */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  border-bottom: 2px solid var(--ssh-mist) !important;
  padding-bottom: 12px !important;
  margin: 0 0 24px !important;
}

/* ── Order details table ────────────────────────────────────────────── */
.woocommerce-order-received .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 48px;
  border-radius: var(--ssh-radius-md);
  overflow: hidden;
  border: 1px solid var(--ssh-mist);
}
.woocommerce-order-received .woocommerce-table--order-details thead th {
  font-family: var(--ssh-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ssh-fog);
  padding: 12px 20px;
  background: var(--ssh-canvas);
  border-bottom: 2px solid var(--ssh-mist);
  text-align: left;
}
/* Product body rows */
.woocommerce-order-received .woocommerce-table--order-details tbody tr td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ssh-mist);
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  vertical-align: top;
}
.woocommerce-order-received .woocommerce-table--order-details tbody .product-name {
  font-weight: 600;
  color: var(--ssh-black);
}
.woocommerce-order-received .woocommerce-table--order-details tbody .product-name a {
  color: var(--ssh-black);
  text-decoration: none;
}
.woocommerce-order-received .woocommerce-table--order-details tbody .product-name a:hover {
  color: var(--ssh-thread);
}
.woocommerce-order-received .woocommerce-table--order-details tbody .product-total {
  text-align: right;
  font-weight: 600;
  color: var(--ssh-black);
  white-space: nowrap;
}
/* Totals footer rows */
.woocommerce-order-received .woocommerce-table--order-details tfoot tr th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
  padding: 12px 20px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  border-bottom: 1px solid var(--ssh-mist);
  background: var(--ssh-canvas);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr th {
  font-weight: 600;
  color: var(--ssh-fog);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
  text-align: right;
  font-weight: 600;
  color: var(--ssh-slate);
}
/* Grand total row — stands out */
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td {
  background: var(--ssh-black) !important;
  border-bottom: none;
  padding-top: 16px;
  padding-bottom: 16px;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th {
  color: rgba(255,255,255,0.55) !important;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td,
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total .amount {
  color: var(--ssh-white) !important;
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
}

/* ── Customer address section ───────────────────────────────────────── */
.woocommerce-order-received .woocommerce-customer-details { margin-top: 16px; }
@media (min-width: 769px) {
  .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.woocommerce-order-received address {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.8;
  font-style: normal;
  background: var(--ssh-canvas);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 24px 28px;
  margin-top: 0 !important;
}

/* ── "Continue Shopping" CTA ─────────────────────────────────────────── */
.ssh-thankyou-cta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--ssh-mist);
  text-align: center;
}
.ssh-thankyou-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--ssh-black);
  color: var(--ssh-white) !important;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ssh-radius-sm);
  text-decoration: none !important;
  transition: background var(--ssh-transition);
}
.ssh-thankyou-btn:hover {
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
}

/* ================================================================
   SECTION 15 — PRINT STYLES
   (preserves WooCommerce invoice / packing list quality)
   ================================================================ */

@media print {
  .site-header,
  .site-footer,
  .elementor-location-header,
  .elementor-location-footer,
  .ssh-b2b-banner { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    font-family: Georgia, serif;
  }
  a { text-decoration: none; color: #000; }
}

/* ================================================================
   SECTION 16 — AGENCY POLISH
   v2.1 — 2026
   The extra 20% that makes it look like the real thing.
   ================================================================ */

/* ── FIX 1: Nav font size ──────────────────────────────────────
   Elementor hardcodes 12px inline; we override with specificity.
   ─────────────────────────────────────────────────────────────── */
.elementor-nav-menu--main .elementor-nav-menu > li > a,
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.elementor-nav-menu--main .elementor-nav-menu > li > a:focus {
  font-size: 14px !important;
  font-family: var(--ssh-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* ── FIX 2: Footer — enforce dark background ──────────────────
   Hello Elementor parent can bleed through; lock it here.
   ─────────────────────────────────────────────────────────────── */
.elementor-location-footer,
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-section {
  background-color: var(--ssh-black) !important;
}
.elementor-location-footer {
  border-top: 3px solid var(--ssh-thread);
}
/* Ensure footer text is always visible */
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer li {
  color: rgba(255,255,255,0.65);
}
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
  color: var(--ssh-white) !important;
}
.elementor-location-footer a {
  color: rgba(255,255,255,0.60) !important;
  transition: color 0.18s ease;
}
.elementor-location-footer a:hover {
  color: var(--ssh-white) !important;
}
/* Copyright bar — slightly darker */
.elementor-location-footer .elementor-section:last-child {
  background-color: #141414 !important;
}

/* ── HEADER: Scroll state ─────────────────────────────────────
   .ssh-scrolled toggled via scroll.js at 60px scroll depth
   ─────────────────────────────────────────────────────────────── */
.elementor-location-header {
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.elementor-location-header.ssh-scrolled {
  box-shadow: 0 4px 28px rgba(0,0,0,0.13), 0 1px 6px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── HERO: Full-bleed image overlay system ────────────────────
   Set hero section background image in Elementor.
   The overlay gradient handles text legibility automatically.
   ─────────────────────────────────────────────────────────────── */
#home-hero .elementor-background-overlay,
.ssh-hero-overlay .elementor-background-overlay {
  background: linear-gradient(
    110deg,
    rgba(28,28,28,0.90) 0%,
    rgba(28,28,28,0.70) 52%,
    rgba(28,28,28,0.50) 100%
  ) !important;
  opacity: 1 !important;
}

/* Hero headline boost — make it fill the screen on desktop */
#home-hero .elementor-heading-title,
.ssh-hero-overlay .elementor-heading-title {
  font-size: clamp(2.8rem, 7.5vw, 5.5rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
}

/* ── CATEGORY CARDS: Image overlay system ────────────────────
   Convert each card to an Elementor section with background
   image. Add CSS class "ssh-cat-card" to the section wrapper.
   ─────────────────────────────────────────────────────────────── */
.ssh-cat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ssh-radius-lg) !important;
  min-height: 320px;
}
.ssh-cat-card .elementor-background-overlay {
  background: linear-gradient(
    to top,
    rgba(28,28,28,0.88) 0%,
    rgba(28,28,28,0.35) 55%,
    rgba(28,28,28,0.10) 100%
  ) !important;
  opacity: 1 !important;
}
.ssh-cat-card:hover .elementor-background-video-hosted,
.ssh-cat-card:hover .elementor-background-image {
  transform: scale(1.04);
  transition: transform 0.55s ease;
}
/* Text at bottom of card */
.ssh-cat-card .elementor-column-wrap,
.ssh-cat-card .e-con-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
}

/* ── STITCH / ORNAMENTAL DIVIDERS ────────────────────────────
   Add class "ssh-stitch-divider" to any Elementor Divider widget
   or HTML widget for the dashed stitch treatment.
   ─────────────────────────────────────────────────────────────── */
.ssh-stitched-rule {
  width: 100%;
  height: 0;
  border: none;
  border-top: 2px dashed var(--ssh-mist);
  margin: var(--ssh-sp-8) 0;
}
.ssh-stitched-rule-thread {
  border-top-color: var(--ssh-thread);
  opacity: 0.30;
}

/* ── SCROLL REVEAL ────────────────────────────────────────────
   Add data-ssh-reveal attribute to any Elementor widget via
   Advanced → Custom Attributes → data-ssh-reveal | fade-up
   scroll.js triggers .ssh-revealed via IntersectionObserver
   ─────────────────────────────────────────────────────────────── */
[data-ssh-reveal] {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-ssh-reveal="fade-up"]    { transform: translateY(28px); }
[data-ssh-reveal="fade-right"] { transform: translateX(-28px); }
[data-ssh-reveal="fade-left"]  { transform: translateX(28px); }
[data-ssh-reveal="scale"]      { transform: scale(0.94); opacity: 0; }
[data-ssh-reveal="none"]       { transform: none; }

[data-ssh-reveal].ssh-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered children — add data-ssh-stagger to a container */
[data-ssh-stagger] > .elementor-widget,
[data-ssh-stagger] > .elementor-column,
[data-ssh-stagger] > li,
[data-ssh-stagger] > div {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-ssh-stagger].ssh-revealed > .elementor-widget:nth-child(1),
[data-ssh-stagger].ssh-revealed > .elementor-column:nth-child(1),
[data-ssh-stagger].ssh-revealed > li:nth-child(1),
[data-ssh-stagger].ssh-revealed > div:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
[data-ssh-stagger].ssh-revealed > .elementor-widget:nth-child(2),
[data-ssh-stagger].ssh-revealed > .elementor-column:nth-child(2),
[data-ssh-stagger].ssh-revealed > li:nth-child(2),
[data-ssh-stagger].ssh-revealed > div:nth-child(2) { opacity:1; transform:none; transition-delay:0.13s; }
[data-ssh-stagger].ssh-revealed > .elementor-widget:nth-child(3),
[data-ssh-stagger].ssh-revealed > .elementor-column:nth-child(3),
[data-ssh-stagger].ssh-revealed > li:nth-child(3),
[data-ssh-stagger].ssh-revealed > div:nth-child(3) { opacity:1; transform:none; transition-delay:0.21s; }
[data-ssh-stagger].ssh-revealed > .elementor-widget:nth-child(4),
[data-ssh-stagger].ssh-revealed > .elementor-column:nth-child(4),
[data-ssh-stagger].ssh-revealed > li:nth-child(4),
[data-ssh-stagger].ssh-revealed > div:nth-child(4) { opacity:1; transform:none; transition-delay:0.29s; }

/* ── THREAD RULE: Entrance animation ─────────────────────────
   .ssh-rule and .ssh-rule-lg grow from 0 → full width on reveal
   ─────────────────────────────────────────────────────────────── */
@keyframes thread-draw {
  from { width: 0; opacity: 0; }
  to   { width: 48px; opacity: 1; }
}
@keyframes thread-draw-lg {
  from { width: 0; opacity: 0; }
  to   { width: 80px; opacity: 1; }
}
.ssh-rule {
  animation: thread-draw 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-play-state: paused;
}
.ssh-rule-lg {
  animation: thread-draw-lg 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-play-state: paused;
}
.ssh-rule.ssh-revealed,
.ssh-rule-lg.ssh-revealed {
  animation-play-state: running;
}

/* ── DOT-GRID TEXTURE: Section helper ───────────────────────
   Add CSS class "ssh-dot-grid" to any Elementor section.
   On dark sections the dots are thread-red tinted.
   On light sections use "ssh-dot-grid-light" for subtlety.
   ─────────────────────────────────────────────────────────────── */
.ssh-dot-grid { position: relative; }
.ssh-dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(184,41,28,0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.ssh-dot-grid > .elementor-container,
.ssh-dot-grid > .e-con-inner { position: relative; z-index: 1; }
.ssh-dot-grid-light::before {
  background-image: radial-gradient(circle, rgba(28,28,28,0.05) 1px, transparent 1px);
}

/* ── STATS: Enhanced number presentation ─────────────────────
   Override Elementor Counter widget for premium look
   ─────────────────────────────────────────────────────────────── */
.elementor-counter-number-wrapper {
  font-family: var(--ssh-font-display) !important;
  font-size: clamp(44px, 5.5vw, 68px) !important;
  font-weight: 800 !important;
  color: var(--ssh-thread) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}
.elementor-counter-number-prefix,
.elementor-counter-number-suffix {
  font-size: 0.65em !important;
  vertical-align: super;
  opacity: 0.7;
}
.elementor-counter-title {
  font-family: var(--ssh-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--ssh-fog) !important;
  margin-top: 10px !important;
}

/* ── QUOTE / TESTIMONIAL CARDS ───────────────────────────────
   Add CSS class "ssh-quote-card" to any Elementor inner section
   ─────────────────────────────────────────────────────────────── */
.ssh-quote-card {
  position: relative;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: var(--ssh-radius-lg) !important;
  padding: 40px 36px 32px !important;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.ssh-quote-card:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(184,41,28,0.35) !important;
}
.ssh-quote-card::before {
  content: '\201C';
  position: absolute;
  top: 14px;
  left: 24px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 80px;
  line-height: 1;
  color: var(--ssh-thread);
  opacity: 0.20;
  pointer-events: none;
}

/* ── ABOUT: Image corner accent ──────────────────────────────
   Add "ssh-img-accent" to an Elementor Image widget wrapper
   ─────────────────────────────────────────────────────────────── */
.ssh-img-accent {
  position: relative;
  display: inline-block;
}
.ssh-img-accent::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 72px;
  height: 72px;
  border-bottom: 4px solid var(--ssh-thread);
  border-right: 4px solid var(--ssh-thread);
  border-radius: 0 0 var(--ssh-radius-md) 0;
  pointer-events: none;
}
.ssh-img-accent .elementor-widget-image img {
  border-radius: var(--ssh-radius-lg) !important;
  display: block;
}

/* ── PHOTO STRIP: Gallery layout ────────────────────────────
   Use as an HTML widget or inner section with 3 image columns.
   CSS class: ssh-photo-strip on the container section.
   ─────────────────────────────────────────────────────────────── */
.ssh-photo-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 6px;
  overflow: hidden;
  border-radius: var(--ssh-radius-lg);
}
.ssh-photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ssh-photo-strip img:hover { transform: scale(1.04); }
@media (max-width: 600px) {
  .ssh-photo-strip { grid-template-columns: 1fr 1fr; }
  .ssh-photo-strip > *:nth-child(3) { display: none; }
}

/* ── PROCESS STEPS ───────────────────────────────────────────
   Use CSS class "ssh-step-list" on a container
   ─────────────────────────────────────────────────────────────── */
.ssh-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ssh-step-number {
  font-family: var(--ssh-font-display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  color: var(--ssh-thread);
  opacity: 0.18;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  text-align: right;
  letter-spacing: -0.04em;
}

/* ── MOBILE NAV: Dropdown refinement ─────────────────────────
   ─────────────────────────────────────────────────────────────── */
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown-mobile a {
  font-family: var(--ssh-font-ui) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--ssh-mist) !important;
  color: var(--ssh-black) !important;
}
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown-mobile a:hover {
  color: var(--ssh-thread) !important;
  background: var(--ssh-thread-tint) !important;
}
/* Hamburger toggle color */
.elementor-nav-menu__toggle .elementor-nav-menu__icon {
  color: var(--ssh-black) !important;
}

/* ── INTERIOR PAGE HERO ──────────────────────────────────────
   Add CSS class "ssh-page-hero" to any full-width dark section
   on interior pages (About, Contact, etc.)
   ─────────────────────────────────────────────────────────────── */
.ssh-page-hero {
  background-color: var(--ssh-black) !important;
  position: relative;
  overflow: hidden;
}
.ssh-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(184,41,28,0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.ssh-page-hero > .elementor-container,
.ssh-page-hero > .e-con-inner { position: relative; z-index: 1; }
.ssh-page-hero .elementor-heading-title {
  color: var(--ssh-white) !important;
}
.ssh-page-hero p { color: rgba(255,255,255,0.65) !important; }

/* ── BRAND LOGO STRIP ────────────────────────────────────────
   For "brands we carry" row. Add "ssh-brand-strip" to section.
   ─────────────────────────────────────────────────────────────── */
.ssh-brand-strip .elementor-image-box-img img,
.ssh-brand-strip .elementor-widget-image img,
.ssh-brand-strip img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(1) !important;
  opacity: 0.45 !important;
  border-radius: 0 !important;
  transition: filter 0.2s ease, opacity 0.2s ease !important;
}
.ssh-brand-strip .elementor-widget:hover img {
  filter: none !important;
  opacity: 0.85 !important;
}

/* ── SHOP HEADER: Category page enhancement ─────────────────
   Already in Section 15 — adding image overlay capability
   ─────────────────────────────────────────────────────────────── */
.ssh-shop-header .elementor-background-overlay {
  background: linear-gradient(
    105deg,
    rgba(28,28,28,0.92) 0%,
    rgba(28,28,28,0.65) 100%
  ) !important;
  opacity: 1 !important;
}

/* ── GLOBAL: Elementor section hover / transition polish ─────
   ─────────────────────────────────────────────────────────────── */
/* Smooth all Elementor column transitions */
.elementor-column,
.e-con {
  transition: box-shadow var(--ssh-transition-slow);
}

/* Intentionally removed — was too broad, broke WooCommerce shop spacing */

/* Ensure images in widgets never overflow their container */
.elementor-widget-image img {
  max-width: 100%;
  height: auto;
}

/* ── APPAREL BANNER CAROUSEL ─────────────────────────────────
   For the 763×443 distributor lifestyle banners.
   Add "ssh-banner-carousel" to Elementor Slides section.
   ─────────────────────────────────────────────────────────────── */
.ssh-banner-carousel .elementor-slides-wrapper .swiper-slide {
  border-radius: var(--ssh-radius-lg);
  overflow: hidden;
}
.ssh-banner-carousel .swiper-pagination-bullet-active {
  background: var(--ssh-thread) !important;
}
.ssh-banner-carousel .elementor-swiper-button {
  color: var(--ssh-white) !important;
  background: rgba(28,28,28,0.55);
  border-radius: var(--ssh-radius-md);
  padding: 10px;
  transition: background 0.18s ease;
}
.ssh-banner-carousel .elementor-swiper-button:hover {
  background: var(--ssh-thread);
}

/* ── FOCUS / ACCESSIBILITY ───────────────────────────────────
   Visible focus rings using brand color
   ─────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ssh-thread);
  outline-offset: 3px;
}

/* ── SELECTION HIGHLIGHT ─────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(184,41,28,0.18);
  color: var(--ssh-black);
}

/* ── SMOOTH SCROLL ───────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ================================================================
   SECTION 17 — COMPONENT FIXES
   Footer logo · Elementor form · Stats alignment
   ================================================================ */

/* ── FOOTER LOGO — invert to white on dark background ─────────
   Logo is a dark/colored PNG — invert makes it clean white.
   Targets only image widgets inside the footer.
   ─────────────────────────────────────────────────────────────── */
.elementor-location-footer .elementor-widget-image img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.82 !important;
}

/* ── ELEMENTOR FORM — full brand styling ─────────────────────
   Targets the native Elementor Form widget on Contact page.
   ─────────────────────────────────────────────────────────────── */

/* Labels */
.elementor-form .elementor-field-label {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 600 !important;
  color: var(--ssh-black) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* All text inputs + textarea */
.elementor-form .elementor-field-textual {
  font-family: var(--ssh-font-body) !important;
  font-size: var(--ssh-text-base) !important;
  color: var(--ssh-dark) !important;
  background-color: var(--ssh-white) !important;
  border: 1.5px solid var(--ssh-mist) !important;
  border-radius: var(--ssh-radius-md) !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  -webkit-appearance: none !important;
  line-height: 1.5 !important;
}
.elementor-form .elementor-field-textual:focus {
  border-color: var(--ssh-thread) !important;
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10) !important;
  outline: none !important;
}
.elementor-form .elementor-field-textual::placeholder {
  color: var(--ssh-fog) !important;
  opacity: 1 !important;
}
.elementor-form textarea.elementor-field-textual {
  resize: vertical !important;
  min-height: 130px !important;
}

/* Field group spacing */
.elementor-form .elementor-field-group {
  padding-left: 0 !important;
  padding-right: 12px !important;
  margin-bottom: 4px !important;
}
.elementor-form .elementor-field-type-submit {
  padding-right: 0 !important;
  margin-top: 8px !important;
}

/* Submit button */
.elementor-form .elementor-button[type="submit"],
.elementor-form .e-form__buttons .elementor-button {
  background-color: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-base) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 14px 42px !important;
  border-radius: var(--ssh-radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.elementor-form .elementor-button[type="submit"]:hover,
.elementor-form .e-form__buttons .elementor-button:hover {
  background-color: var(--ssh-thread-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ssh-shadow-md) !important;
}

/* Success / error messages */
.elementor-message.elementor-message-success {
  background: var(--ssh-thread-tint) !important;
  color: var(--ssh-thread-dark) !important;
  border-left: 3px solid var(--ssh-thread) !important;
  border-radius: var(--ssh-radius-md) !important;
  font-family: var(--ssh-font-ui) !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}
.elementor-message.elementor-message-danger {
  border-left-color: var(--ssh-black) !important;
}

/* ── STATS: Counter widget alignment fix ─────────────────────
   The Elementor counter widget puts .elementor-counter-title
   ABOVE the number. Override to match the custom HTML widget
   layout (number on top, label below) used in the 3rd column.
   Better fix: replace all 3 with the new ssh-stats HTML widget.
   ─────────────────────────────────────────────────────────────── */
.elementor-counter {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.elementor-counter-number-wrapper {
  order: 1 !important;
}
.elementor-counter-title {
  order: 2 !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* ── SSH-STATS: Custom stats HTML widget styles ───────────────
   Used by the replacement stats widget (paste into HTML widget).
   Self-contained but also referenced here for any overrides.
   ─────────────────────────────────────────────────────────────── */
.ssh-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--ssh-white);
  gap: 0;
  width: 100%;
}
.ssh-stat-col {
  flex: 1;
  text-align: center;
  padding: 0 32px;
}
.ssh-stat-divider {
  width: 1px;
  height: 72px;
  background: var(--ssh-mist);
  flex-shrink: 0;
}
.ssh-stat-num {
  font-family: var(--ssh-font-display);
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 800;
  color: var(--ssh-thread);
  line-height: 1;
  letter-spacing: -0.025em;
  display: block;
}
.ssh-stat-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ssh-range-lo,
.ssh-range-hi {
  font-family: var(--ssh-font-display);
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 800;
  color: var(--ssh-thread);
  line-height: 1;
  letter-spacing: -0.025em;
}
.ssh-stat-label {
  font-family: var(--ssh-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ssh-fog);
  margin-top: 10px;
  display: block;
}
.ssh-stat-note {
  font-family: var(--ssh-font-body);
  font-size: 13px;
  color: #C8C8C6;
  margin-top: 5px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .ssh-stats {
    flex-direction: column;
    gap: 32px;
    padding: 40px 24px;
  }
  .ssh-stat-divider {
    width: 60px;
    height: 1px;
  }
  .ssh-stat-col { padding: 0; }
}

/* ================================================================
   SECTION 18 — CAROUSEL & TESTIMONIALS FIXES
   ================================================================ */

/* ── BANNER CAROUSEL: Full-bleed sizing fixes ─────────────────
   The Elementor HTML widget column adds side padding by default.
   Force the carousel stage to break out and fill edge-to-edge.
   Also override the inline height for better proportions.
   ─────────────────────────────────────────────────────────────── */

/* The section containing the carousel should be set to:
   Elementor → Edit Section → Layout → Content Width: Full Width
   Elementor → Edit Section → Layout → Column Gap: No Gap
   Elementor → Edit Column → padding: 0 on all sides
   This CSS handles the rest. */

.ssh-bcr {
  width: 100%;
  overflow: hidden;           /* contain the stage rounding */
}

/* Stage fills its container, remove border-radius for full bleed */
.ssh-bcr-stage {
  border-radius: 0 !important;
}

/* Image height — use aspect-ratio so it scales naturally with
   the banner's native 763×443 proportions, capped at 440px */
.ssh-slide img {
  height: auto !important;
  aspect-ratio: 763 / 443 !important;
  max-height: 440px !important;
  object-fit: cover !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .ssh-slide img {
    max-height: 260px !important;
  }
}
@media (max-width: 480px) {
  .ssh-slide img {
    max-height: 200px !important;
  }
}

/* The eyebrow + CTA lines — add breathing room */
.ssh-bcr-eyebrow {
  padding-top: 0;
  margin-bottom: 16px !important;
}
.ssh-bcr-cta {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* ── TESTIMONIALS SECTION: Dark wrapper ───────────────────────
   Add CSS class "ssh-testimonials" to the outer Elementor
   section that wraps the testimonials HTML widget.
   This enforces the dark background + dot texture.
   ─────────────────────────────────────────────────────────────── */
.ssh-testimonials {
  background-color: var(--ssh-black) !important;
  position: relative;
  overflow: hidden;
}
.ssh-testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(184,41,28,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.ssh-testimonials > .elementor-container,
.ssh-testimonials > .e-con-inner {
  position: relative;
  z-index: 1;
}
/* The section heading above the cards (Done Right. Every Time.) */
.ssh-testimonials .elementor-heading-title {
  color: var(--ssh-white) !important;
}
.ssh-testimonials .ssh-eyebrow {
  color: var(--ssh-thread) !important;
}
/* Body text in the section goes white */
.ssh-testimonials p:not(.ssh-testi-text):not(.ssh-bcr-cta) {
  color: rgba(255,255,255,0.65) !important;
}

/* ── PERFORMANCE: Reduce video hero paint on scroll ───────────
   Hint to browser to composite the hero separately           */
#home-hero,
.ssh-hero-overlay {
  will-change: auto;          /* don't hint if not animating */
  contain: layout style;
}

/* ── SHOP: Restore WooCommerce widget spacing ─────────────────
   Counter the removed global margin rule — give back natural
   spacing inside WooCommerce pages.
   ─────────────────────────────────────────────────────────────── */
.ssh-woo .elementor-widget-wrap > .elementor-widget,
.woocommerce-page .elementor-widget-wrap > .elementor-widget {
  margin-bottom: inherit;
}

/* Ensure the shop header section still gets its dot texture */
.ssh-shop-header {
  overflow: hidden;
}

/* ================================================================
   SECTION 19 — CART & CHECKOUT PAGE ENHANCEMENTS
   Branded page headers · 3-step progress indicator · form polish
   ================================================================ */

/* ── Cart header: full-width (no grid, no grid-column needed) ── */

/* ── Page header metadata line (item count / order number) ── */
.ssh-page-header-meta {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  margin: 8px 0 0;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}

/* ── Checkout 3-step progress indicator ─────────────────────── */
.ssh-checkout-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  max-width: 360px;
}

.ssh-cstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ssh-cstep-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ssh-font-display);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.30);
  background: transparent;
  transition: var(--ssh-transition);
}

.ssh-cstep-label {
  font-family: var(--ssh-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
}

/* Connector line between steps */
.ssh-cstep-line {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.14);
  margin-top: 18px;    /* half of 36px dot — vertically centers the line */
  margin-bottom: 24px; /* offset to account for the label below the dot   */
  min-width: 40px;
}
.ssh-cstep-line-done {
  background: var(--ssh-thread);
}

/* Active step: thread-red circle */
.ssh-cstep-active .ssh-cstep-dot {
  background: var(--ssh-thread);
  border-color: var(--ssh-thread);
  color: var(--ssh-white);
}
.ssh-cstep-active .ssh-cstep-label {
  color: var(--ssh-white);
  font-weight: 700;
}

/* Done step: thread-red circle + CSS checkmark */
.ssh-cstep-done .ssh-cstep-dot {
  background: var(--ssh-thread);
  border-color: var(--ssh-thread);
  font-size: 0;         /* hide the number */
  color: transparent;
}
.ssh-cstep-done .ssh-cstep-dot::before {
  content: '\2713';     /* ✓ */
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ssh-white);
}
.ssh-cstep-done .ssh-cstep-label {
  color: rgba(255,255,255,0.55);
}

/* ── Order received: replace the WooCommerce default heading ────
   Our ssh-shop-header provides a branded "Order Confirmed" h1,
   so the WooCommerce "Thank you. Your order has been received." h2
   is suppressed to avoid redundancy.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  display: none !important;
}

/* ── Cart: "Update Cart" button — muted secondary style ─────── */
.woocommerce-cart-form .actions .button[name="update_cart"] {
  background: transparent !important;
  color: var(--ssh-fog) !important;
  border: 1.5px solid var(--ssh-mist) !important;
  font-size: var(--ssh-text-xs) !important;
  letter-spacing: 0.05em !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
  transform: none !important;
}
.woocommerce-cart-form .actions .button[name="update_cart"]:not([disabled]):hover {
  background: var(--ssh-canvas) !important;
  color: var(--ssh-black) !important;
  border-color: var(--ssh-slate) !important;
}
.woocommerce-cart-form .actions .button[name="update_cart"][disabled] {
  opacity: 0.30 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Cart: Actions row (coupon + update button) ── */
.woocommerce-cart-form table.cart .actions {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.woocommerce-cart-form table.cart .actions .coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Cart: Cross-sells ("You May Also Like") ── */
.woocommerce-cart .cross-sells {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ssh-mist);
}
.woocommerce-cart .cross-sells h2 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin-bottom: 28px !important;
}

/* ── Cart: Shipping calculator toggle ── */
a.shipping-calculator-button {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 600 !important;
  color: var(--ssh-thread) !important;
  text-decoration: none;
}
a.shipping-calculator-button:hover {
  color: var(--ssh-thread-dark) !important;
}
.shipping-calculator-form {
  margin-top: 16px;
  padding: 20px;
  background: var(--ssh-canvas);
  border-radius: var(--ssh-radius-md);
  border: 1px solid var(--ssh-mist);
}
.shipping-calculator-form p { margin-bottom: 12px !important; }

/* ── Checkout: "Ship to a different address" toggle ── */
#ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 20px;
  padding: 14px 18px;
  background: var(--ssh-canvas);
  border-radius: var(--ssh-radius-md);
  border: 1px solid var(--ssh-mist);
  cursor: pointer;
  transition: var(--ssh-transition);
}
#ship-to-different-address:hover {
  border-color: var(--ssh-thread);
}
#ship-to-different-address input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  accent-color: var(--ssh-thread);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 !important;
}
#ship-to-different-address label {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-base) !important;
  font-weight: 600 !important;
  color: var(--ssh-black) !important;
  cursor: pointer;
  margin: 0 !important;
}

/* ── Checkout: Additional fields / order notes heading ── */
.woocommerce-additional-fields > h3 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin: 32px 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ssh-mist);
}

/* ── Checkout: Payment methods list ── */
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  list-style: none;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ssh-mist);
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 4px;
  border-bottom: 1px solid var(--ssh-mist);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--ssh-thread);
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  font-weight: 600 !important;
  color: var(--ssh-black) !important;
  cursor: pointer;
}
.woocommerce-checkout #payment .payment_box {
  background: var(--ssh-white) !important;
  border-radius: var(--ssh-radius-md);
  border: 1px solid var(--ssh-mist);
  padding: 16px 20px;
  margin: 8px 0 4px;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
}

/* ── Checkout: Place Order — full-width block button ── */
.woocommerce #place_order {
  width: 100% !important;
  padding: 16px 32px !important;
  font-size: var(--ssh-text-md) !important;
}

/* ── Checkout: Terms and conditions checkbox ── */
.woocommerce-terms-and-conditions-wrapper {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--ssh-canvas);
  border-radius: var(--ssh-radius-md);
  border: 1px solid var(--ssh-mist);
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: var(--ssh-font-body) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 400 !important;
  color: var(--ssh-slate) !important;
  cursor: pointer;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  accent-color: var(--ssh-thread);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Checkout order review: product name/total cells ── */
.woocommerce-checkout table.shop_table .cart_item td.product-name {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-black);
  font-weight: 500;
}
.woocommerce-checkout table.shop_table .cart_item td.product-total {
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-base);
  font-weight: 700;
  color: var(--ssh-thread);
  text-align: right;
}

/* ── Responsive: step indicator on small screens ── */
@media (max-width: 480px) {
  .ssh-checkout-steps { max-width: 100%; }
  .ssh-cstep-dot      { width: 30px; height: 30px; font-size: 13px; }
  .ssh-cstep-label    { font-size: 9px; letter-spacing: 0.06em; }
  .ssh-cstep-line     { min-width: 20px; margin-top: 15px; }
}

/* ================================================================
   SECTION 20 — SHOP ARCHIVE & SINGLE PRODUCT ENHANCEMENTS
   Back link · grid bug fixes · gallery · variations · stock ·
   product meta · related products · pagination
   ================================================================ */

/* ── CRITICAL FIX: Single product grid — full-width children ────
   .woocommerce div.product is a 2-col CSS grid. Without explicit
   grid-column, tabs/upsells/related auto-place into col 1 only
   (half width). Force them to span both columns.
   ─────────────────────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .up-sells,
.woocommerce div.product .related.products {
  grid-column: 1 / -1;
}

/* ── Single product: "← Back to Store" link ── */
.ssh-back-link {
  grid-column: 1 / -1;   /* span above the 2-col image/summary grid */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  color: var(--ssh-fog);
  letter-spacing: 0.03em;
  margin-top: 4px;
  margin-bottom: 20px;
  transition: var(--ssh-transition);
  text-decoration: none;
}
.ssh-back-link:hover { color: var(--ssh-thread); }

/* ── Single product: Add to cart form — qty + button in a row ── */
.woocommerce div.product form.cart:not(.grouped_form):not(.variations_form) {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity { flex-shrink: 0; }

/* ── Single product: Product gallery thumbnails ── */
.woocommerce-product-gallery .flex-viewport {
  border-radius: var(--ssh-radius-lg);
  overflow: hidden;
}
.woocommerce-product-gallery ol.flex-control-thumbs {
  display: flex !important;
  gap: 8px;
  margin-top: 12px !important;
  flex-wrap: wrap;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs li img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover;
  border-radius: var(--ssh-radius-md);
  border: 2px solid transparent;
  opacity: 0.60;
  transition: var(--ssh-transition);
  cursor: pointer;
}
.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
  border-color: var(--ssh-thread);
  opacity: 1;
}

/* ── Single product: Stock status pill ── */
.woocommerce div.product p.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: var(--ssh-radius-pill);
  margin-bottom: 20px;
}
.woocommerce div.product p.stock::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.woocommerce div.product p.stock.in-stock {
  background: rgba(22,163,74,0.08);
  color: #16A34A;
}
.woocommerce div.product p.stock.out-of-stock {
  background: rgba(184,41,28,0.08);
  color: var(--ssh-thread);
}

/* ── Single product: Variable product attribute selectors ── */
.woocommerce div.product .variations_form .variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.woocommerce div.product .variations_form .variations tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.woocommerce div.product .variations_form .variations .label label {
  font-family: var(--ssh-font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ssh-black) !important;
}
.woocommerce div.product .variations_form .variations .value select {
  width: 100%;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-dark);
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 11px 40px 11px 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23949492'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: var(--ssh-transition);
  outline: none;
}
.woocommerce div.product .variations_form .variations .value select:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(184,41,28,0.10);
}
.woocommerce div.product .variations_form .variations .value .reset_variations {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  color: var(--ssh-fog);
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
}
.woocommerce div.product .variations_form .variations .value .reset_variations:hover {
  color: var(--ssh-thread);
}
/* Variation price + availability update */
.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-thread) !important;
}
.woocommerce div.product .woocommerce-variation-availability { margin-bottom: 12px; }

/* ── Single product: Product meta (SKU, categories, tags) ── */
.woocommerce div.product .product_meta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ssh-mist);
}
.woocommerce div.product .product_meta > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  color: var(--ssh-fog);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  font-weight: 400;
}
.woocommerce div.product .product_meta .sku_wrapper span:first-child,
.woocommerce div.product .product_meta .posted_in span:first-child,
.woocommerce div.product .product_meta .tagged_as span:first-child {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ssh-black);
  flex-shrink: 0;
}
.woocommerce div.product .product_meta a {
  color: var(--ssh-thread);
  font-size: var(--ssh-text-xs);
}
.woocommerce div.product .product_meta a:hover { color: var(--ssh-thread-dark); }

/* ── Single product: Related products & upsells ── */
.woocommerce .related.products,
.woocommerce .up-sells {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--ssh-mist);
}
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin-bottom: 28px !important;
}
/* Related grid — 4 cols matching the shop archive */
.woocommerce .related.products ul.products,
.woocommerce .up-sells ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) {
  .woocommerce .related.products ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Shop archive: Pagination ── */
.woocommerce-pagination {
  margin-top: 48px;
  text-align: center;
}
.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-pagination ul.page-numbers li { display: inline-flex; }
.woocommerce-pagination ul.page-numbers .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ssh-radius-md);
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 600;
  color: var(--ssh-slate);
  border: 1.5px solid var(--ssh-mist);
  background: var(--ssh-white);
  transition: var(--ssh-transition);
  text-decoration: none;
}
.woocommerce-pagination ul.page-numbers .page-numbers:hover {
  border-color: var(--ssh-thread);
  color: var(--ssh-thread);
  background: var(--ssh-thread-tint);
}
.woocommerce-pagination ul.page-numbers .page-numbers.current {
  background: var(--ssh-thread);
  border-color: var(--ssh-thread);
  color: var(--ssh-white);
}
.woocommerce-pagination ul.page-numbers .prev,
.woocommerce-pagination ul.page-numbers .next {
  width: auto;
  padding: 0 16px;
  font-size: var(--ssh-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Shop archive: Subcategory (category card) display ── */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  padding: 16px 18px 4px !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product-category mark {
  background: none;
  color: var(--ssh-fog);
  font-size: 0.75em;
  font-family: var(--ssh-font-ui);
  font-weight: 500;
}
.woocommerce ul.products li.product-category a img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

/* ── Shop archive: "Added to cart" animation ── */
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  color: var(--ssh-fog);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ── Single product: Responsive refinements ── */
@media (max-width: 768px) {
  .woocommerce div.product form.cart:not(.grouped_form):not(.variations_form) {
    flex-direction: column;
    align-items: flex-start;
  }
  .woocommerce-product-gallery ol.flex-control-thumbs li img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ================================================================
   SECTION 21 — CART & CHECKOUT FULL-WIDTH SINGLE-COLUMN LAYOUT
   v2.5 clean-slate: no side-by-side columns anywhere.
   Architecture:
     • Elementor e-con-inner expanded to full viewport width
     • .woocommerce wrapper: no max-width, no padding (full width)
     • ssh-shop-header fills edge-to-edge naturally
     • Content (forms, notices, totals) get their own centered padding
   ================================================================ */

/* ── 1. Expand Elementor containers on transactional pages ──────
   Both Cart and Checkout pages use a Flex Container in Elementor
   whose e-con-inner defaults to a fixed max-width. Override both
   so the .woocommerce inside them can fill the full viewport.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart     .e-con-inner,
.woocommerce-checkout .e-con-inner {
  max-width: 100% !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* ── 2. Strip .woocommerce wrapper constraints ───────────────────
   The default rule gives max-width:1200px + 60px side padding.
   On cart/checkout we want the wrapper to be full viewport width
   so the dark header can run edge to edge. Form content below
   re-introduces its own centered padding (see below).
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart     .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* ── 3. Dark header — full viewport width, no negative margins ──
   Now that the wrapper has no padding, the header fills naturally.
   Restore consistent internal padding for text alignment.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart           .woocommerce > .ssh-shop-header,
.woocommerce-checkout       .woocommerce > .ssh-shop-header,
.woocommerce-order-received .woocommerce > .ssh-shop-header {
  margin: 0;
  padding-left:  var(--ssh-container-pad);
  padding-right: var(--ssh-container-pad);
}

/* ── 4. Content sections — centered, readable width ─────────────
   All content below the header (notices, form, cart table, totals)
   is constrained to the site container width and centered.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart  .woocommerce-notices-wrapper,
.woocommerce-cart  .woocommerce-cart-form,
.woocommerce-cart  .cart-collaterals,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout .ssh-checkout-notice,
.woocommerce-checkout form.woocommerce-checkout {
  max-width: var(--ssh-container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--ssh-container-pad);
  padding-right: var(--ssh-container-pad);
  box-sizing: border-box;
}
/* Add vertical breathing room */
.woocommerce-cart .woocommerce-cart-form  { padding-top: 40px; }
.woocommerce-cart .cart-collaterals       { padding-bottom: 80px; }
.woocommerce-checkout form.woocommerce-checkout { padding-top: 8px; padding-bottom: 80px; }

/* ── 5. Cart totals — full width, right-aligned box ─────────────
   WooCommerce's own CSS sets width:48%; float:right on .cart_totals.
   Override to fill the collaterals column and sit neatly below
   the cart table. Max-width caps it at a comfortable read width.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart .cart-collaterals { clear: both; }
.woocommerce-cart .cart_totals {
  float: none !important;
  width: 100% !important;
  max-width: 480px;
  margin-left: auto;
}

/* ── 6. Checkout notice (info box below dark header) ─────────────
   Styled card with brand red left-border accent.
   ─────────────────────────────────────────────────────────────── */
.ssh-checkout-notice {
  background: var(--ssh-snow);
  border: 1.5px solid var(--ssh-mist);
  border-left: 4px solid var(--ssh-thread);
  border-radius: var(--ssh-radius-md);
  padding: 16px 20px;
  margin-top: 32px;
  margin-bottom: 8px;
}
.ssh-checkout-notice p,
.ssh-checkout-notice li {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.65;
  margin: 0;
}
.ssh-checkout-notice a { color: var(--ssh-thread); text-decoration: underline; }
.ssh-checkout-notice a:hover { color: var(--ssh-thread-dark); }

/* ── 7. Hide duplicate WP page-header title ─────────────────────
   Hello Elementor renders a .page-header > h1 for non-templated
   WP pages. Our ssh-shop-header already shows the correct heading.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-cart     .page-header,
.woocommerce-checkout .page-header,
.woocommerce-account  .page-header {
  display: none !important;
}

/* ── 8. FIX: WooCommerce ordering dropdown float ────────────────
   WC's stylesheet floats .woocommerce-ordering right; without a
   clearfix the product grid starts beside it.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-ordering {
  float: none !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px !important;
}
.woocommerce-result-count { float: none !important; display: block; margin-bottom: 8px; }
.woocommerce ul.products { clear: both; }

/* ── 9. Elementor archive widget — strip double padding ──────────
   The archive products Elementor widget provides its own padding;
   the .woocommerce inside it must not double-up.
   ─────────────────────────────────────────────────────────────── */
.elementor-wc-products .woocommerce {
  padding: 0 !important;
  max-width: none !important;
}

/* ================================================================
   SECTION 22 — PRODUCT ARCHIVE SIDEBAR
   Layout: 260px sidebar | 1fr products grid
   Sidebar contains: product search + BeRocket filter group 10656
   (Category · Price · Size · Tag)
   ================================================================ */

/* ── 1. Turn the archive .woocommerce wrapper into a 2-col grid ──
   DOM order (priority order from functions.php):
     Row 1: .ssh-shop-header  (full-width, spans both columns)
     Row 2: .ssh-shop-toolbar (full-width, spans both columns)
     Rows 3+: sidebar (col 1, sticky) + products/pagination (col 2)
   ─────────────────────────────────────────────────────────────── */
.elementor-wc-products .woocommerce {
  display: grid !important;
  grid-template-columns: 260px 1fr;
  column-gap: 48px;
  align-items: start;
  padding-bottom: 96px; /* breathing room when there's no pagination */
}
/* Shop header and toolbar span both columns at the top */
.elementor-wc-products .woocommerce > .ssh-shop-header,
.elementor-wc-products .woocommerce > .ssh-shop-toolbar {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}
.ssh-archive-sidebar {
  grid-column: 1;
  grid-row: 3 / span 20; /* starts at row 3 — after header (row1) + toolbar (row2) */
  position: sticky;
  top: 120px; /* clears sticky site header (~105px) + 15px gap */
  /* Scrollable within the viewport so users don't have to reach
     the bottom of the page to scroll filter content */
  max-height: calc(100vh - 135px); /* viewport minus header+gap */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Thin scrollbar — visible on hover, invisible otherwise */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s;
}
.ssh-archive-sidebar:hover {
  scrollbar-color: var(--ssh-mist) transparent;
}
.ssh-archive-sidebar::-webkit-scrollbar {
  width: 4px;
}
.ssh-archive-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.ssh-archive-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.2s;
}
.ssh-archive-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--ssh-mist);
}
.ssh-archive-sidebar:hover::-webkit-scrollbar-thumb:hover {
  background: var(--ssh-fog);
}
/* When WP admin bar is visible (logged-in users) add 32px */
.admin-bar .ssh-archive-sidebar {
  top: 152px;
  max-height: calc(100vh - 167px);
}
/* Everything except the sidebar AND the full-span header/toolbar → col 2 */
.elementor-wc-products .woocommerce > *:not(.ssh-archive-sidebar):not(.ssh-shop-header):not(.ssh-shop-toolbar) {
  grid-column: 2;
}

/* ── 2. Reduce product columns 4→3 to suit the narrower grid area ─ */
.elementor-wc-products .woocommerce ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ── Tablet (769–1024px): tighter sidebar column ─────────────────── */
@media (max-width: 1024px) {
  .elementor-wc-products .woocommerce {
    grid-template-columns: 210px 1fr;
    column-gap: 28px;
  }
  .elementor-wc-products .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .elementor-wc-products .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 3. Sidebar widget shared styles ─────────────────────────────── */
.ssh-sidebar-widget {
  background: var(--ssh-white);
  border: 1px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-md);
  padding: 20px 18px;
  margin-bottom: 16px;
}
.ssh-sidebar-title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ssh-black) !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--ssh-mist) !important;
}

/* ── 4. Product search box ─────────────────────────────────────── */
.ssh-sidebar-search form.woocommerce-product-search,
.ssh-sidebar-search form[role="search"] {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-sm);
  overflow: hidden;
  background: var(--ssh-white);
}
.ssh-sidebar-search input[type="search"],
.ssh-sidebar-search input[name="s"] {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 9px 12px !important;
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  color: var(--ssh-black) !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0;
}
.ssh-sidebar-search input[type="search"]:focus,
.ssh-sidebar-search input[name="s"]:focus {
  border-color: var(--ssh-thread) !important;
}
.ssh-sidebar-search button[type="submit"],
.ssh-sidebar-search input[type="submit"] {
  background: var(--ssh-black) !important;
  color: var(--ssh-white) !important;
  border: none !important;
  padding: 9px 14px !important;
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: var(--ssh-transition);
  white-space: nowrap;
}
.ssh-sidebar-search button[type="submit"]:hover,
.ssh-sidebar-search input[type="submit"]:hover {
  background: var(--ssh-thread) !important;
}

/* ── 5. Filter section header + reset link ─────────────────────── */
.ssh-sidebar-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ssh-mist);
}
.ssh-sidebar-filters-header .ssh-sidebar-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.ssh-sidebar-reset {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  font-weight: 600;
  color: var(--ssh-fog);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: var(--ssh-transition);
}
.ssh-sidebar-reset:hover { color: var(--ssh-thread); }

/* ── 6. BeRocket filter group overrides ─────────────────────────── */
.ssh-sidebar-filters .berocket_aapf_widget_filter_name,
.ssh-sidebar-filters .berocket_filter_title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-sm) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 16px 0 8px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--ssh-mist) !important;
}
.ssh-sidebar-filters .berocket_aapf_widget_filter_name:first-child,
.ssh-sidebar-filters .berocket_filter_title:first-child {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Checkbox rows */
.ssh-sidebar-filters .berocket_aapf_widget li,
.ssh-sidebar-filters ul.berocket_aapf_widget_ul li {
  list-style: none !important;
  padding: 3px 0 !important;
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  color: var(--ssh-slate) !important;
}
.ssh-sidebar-filters .berocket_aapf_widget li label,
.ssh-sidebar-filters ul.berocket_aapf_widget_ul li label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  color: var(--ssh-slate) !important;
  font-size: var(--ssh-text-sm) !important;
  transition: var(--ssh-transition);
}
.ssh-sidebar-filters .berocket_aapf_widget li label:hover { color: var(--ssh-thread) !important; }
/* Custom checkbox accent */
.ssh-sidebar-filters input[type="checkbox"] {
  accent-color: var(--ssh-thread);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* Count badge */
.ssh-sidebar-filters .berocket_aapf_count {
  font-size: var(--ssh-text-xs) !important;
  color: var(--ssh-fog) !important;
  margin-left: auto !important;
}
/* Price slider */
.ssh-sidebar-filters .berocket_aapf_price_slider_input {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  color: var(--ssh-slate) !important;
}
.ssh-sidebar-filters .ui-slider-handle,
.ssh-sidebar-filters .ui-slider .ui-slider-handle {
  background: var(--ssh-thread) !important;
  border-color: var(--ssh-thread) !important;
}
.ssh-sidebar-filters .ui-slider-range {
  background: var(--ssh-thread-tint) !important;
}
/* Active/selected item highlight */
.ssh-sidebar-filters .berocket_aapf_widget li.berocket_checked label,
.ssh-sidebar-filters .berocket_aapf_widget li.checked label {
  color: var(--ssh-thread) !important;
  font-weight: 600 !important;
}

/* ── 7. Responsive — sidebar collapses on mobile ─────────────────── */
@media (max-width: 768px) {
  .elementor-wc-products .woocommerce {
    grid-template-columns: 1fr !important;
  }
  .ssh-archive-sidebar {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    max-height: none !important;
  }
  .elementor-wc-products .woocommerce > .ssh-shop-header,
  .elementor-wc-products .woocommerce > .ssh-shop-toolbar {
    grid-column: 1 !important;
  }
  .elementor-wc-products .woocommerce > *:not(.ssh-archive-sidebar):not(.ssh-shop-header):not(.ssh-shop-toolbar) {
    grid-column: 1 !important;
  }
  .elementor-wc-products .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   SECTION 23 — SINGLE PRODUCT REFINEMENTS v2.7
   Image height cap · Breadcrumbs
   ================================================================ */

/* ── Cap gallery image height ────────────────────────────────────
   WooCommerce's gallery fills ~48% of the product container.
   At full desktop width (~519px column) a portrait image can be
   taller than the screen. Cap the main image and viewport.
   ─────────────────────────────────────────────────────────────── */
.woocommerce-product-gallery .flex-viewport {
  max-height: 480px;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
  max-height: 480px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ── Single product: container-level inset ────────────────────────
   The Elementor single product template can render the .woocommerce
   div flush to the edge. Give both the breadcrumb (which fires
   before div.product) and the product grid itself a consistent
   horizontal inset that matches --ssh-container-pad.
   ─────────────────────────────────────────────────────────────── */
/* body.single-product is the WP body class on single product pages */
body.single-product .woocommerce {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ssh-container-pad) !important;
  padding-right: var(--ssh-container-pad) !important;
}

/* ── Branded breadcrumb trail ─────────────────────────────────── */
.ssh-breadcrumb,
.woocommerce-breadcrumb.ssh-breadcrumb {
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-xs);
  color: var(--ssh-fog);
  /* Generous top gap so it doesn't crowd the Elementor template edge;
     bottom gap separates it from the back-link / product title */
  margin: 20px 0 4px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--ssh-mist);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ssh-breadcrumb a {
  color: var(--ssh-fog);
  text-decoration: none;
  transition: var(--ssh-transition);
}
.ssh-breadcrumb a:hover { color: var(--ssh-thread); }
/* Current page (last breadcrumb item rendered as plain text) */
.ssh-breadcrumb > span:not(.ssh-bc-sep):last-child {
  color: var(--ssh-slate);
  font-weight: 500;
}
.ssh-bc-sep {
  color: var(--ssh-mist);
  margin: 0 3px;
  font-weight: 300;
}

/* ================================================================
   SECTION 24 — SHOP TOOLBAR CART LINK v2.7
   Cart icon + count badge injected into toolbar-right.
   ================================================================ */

.ssh-toolbar-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--ssh-radius-md);
  background: var(--ssh-canvas);
  border: 1.5px solid var(--ssh-mist);
  color: var(--ssh-black);
  text-decoration: none;
  transition: var(--ssh-transition);
  flex-shrink: 0;
}
.ssh-toolbar-cart:hover {
  background: var(--ssh-thread-tint);
  border-color: var(--ssh-thread);
  color: var(--ssh-thread);
}
.ssh-toolbar-cart svg { display: block; }
.ssh-toolbar-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ssh-thread);
  color: var(--ssh-white);
  font-family: var(--ssh-font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--ssh-white);
  pointer-events: none;
}

/* ================================================================
   SECTION 25 — SIDEBAR SUBCATEGORY SUPPORT v2.7
   BeRocket category filter items render cleanly as links.
   ================================================================ */

.ssh-sidebar-filters .berocket_aapf_widget li a,
.ssh-sidebar-filters .berocket_aapf_widget_ul li a {
  color: var(--ssh-slate) !important;
  text-decoration: none !important;
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  transition: var(--ssh-transition);
  display: block;
  padding: 3px 0;
}
.ssh-sidebar-filters .berocket_aapf_widget li a:hover,
.ssh-sidebar-filters .berocket_aapf_widget_ul li a:hover {
  color: var(--ssh-thread) !important;
}
.ssh-sidebar-filters .berocket_aapf_widget li.berocket_checked a,
.ssh-sidebar-filters .berocket_aapf_widget li.current-cat a {
  color: var(--ssh-thread) !important;
  font-weight: 600 !important;
}
/* Subcategory indentation */
.ssh-sidebar-filters .berocket_aapf_widget li ul,
.ssh-sidebar-filters .berocket_aapf_widget_ul li ul {
  padding-left: 14px !important;
  margin-top: 4px !important;
  border-left: 2px solid var(--ssh-mist) !important;
}

/* ================================================================
   SECTION 26 — STORE ACCESS GATE FORM v2.9
   Styles for [ssh_store_login] shortcode on /corporate-login.
   ================================================================ */

.ssh-gate-wrap {
  max-width: 640px;
  margin: 32px auto;
  padding: 0 16px;
  text-align: center;
}

.ssh-gate-heading {
  font-family: var(--ssh-font-display);
  font-size: var(--ssh-text-xl);
  font-weight: 700;
  color: var(--ssh-black);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  text-align: center;
}

.ssh-gate-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: var(--ssh-radius-sm);
  padding: 10px 14px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  margin: 0 0 16px;
  text-align: left;
}

/* Row layout: input stretches, button stays snug on the right */
.ssh-gate-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

.ssh-gate-label { display: none; } /* placeholder carries the label */

.ssh-gate-input {
  flex: 1 1 auto;
  padding: 14px 18px;
  border: 1.5px solid var(--ssh-mist);
  border-radius: var(--ssh-radius-sm);
  background: var(--ssh-canvas);
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-base);
  color: var(--ssh-black);
  outline: none;
  transition: border-color var(--ssh-transition);
  box-sizing: border-box;
}
.ssh-gate-input:focus {
  border-color: var(--ssh-thread);
  box-shadow: 0 0 0 3px rgba(var(--ssh-thread-rgb, 99, 73, 62), 0.12);
}

.ssh-gate-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: var(--ssh-thread);
  color: var(--ssh-white);
  border: none;
  border-radius: var(--ssh-radius-sm);
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ssh-transition);
  white-space: nowrap;
}
.ssh-gate-btn:hover {
  background: var(--ssh-thread-dark, #4a2e24);
}

/* Stack on small screens */
@media (max-width: 480px) {
  .ssh-gate-form {
    flex-direction: column;
  }
  .ssh-gate-btn {
    padding: 14px 24px;
    align-self: center;
  }
}

.ssh-gate-authenticated {
  text-align: center;
  padding: 32px 16px;
  font-family: var(--ssh-font-ui);
  color: var(--ssh-slate);
}
.ssh-gate-authenticated a {
  color: var(--ssh-thread);
  font-weight: 600;
  text-decoration: none;
}
.ssh-gate-authenticated a:hover {
  text-decoration: underline;
}

/* ================================================================
   SECTION 27 — COMPACT HEADER v2.9
   Reduces Elementor section padding on the header template so the
   top/bottom whitespace around the logo matches the Corporate Login
   button's own padding (8px).  Logo size is left to Elementor.
   Sidebar sticky top values above (Section 22) updated to match.
   ================================================================ */

/* ── Tighten the Elementor row/container inside the header ─────── */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ── Vertically centre all flex/grid children in the header row ── */
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .e-con-inner {
  align-items: center !important;
}

/* ── Tablet (769 – 1024px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-section,
  .elementor-location-header .e-con {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ── Mobile (≤768px): hamburger takes over, keep it tight ────────── */
@media (max-width: 768px) {
  .elementor-location-header .elementor-section,
  .elementor-location-header .e-con {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  /* Hamburger icon colour stays on-brand */
  .elementor-nav-menu__toggle .elementor-nav-menu__icon {
    color: var(--ssh-black) !important;
    font-size: 24px !important;
  }
}

/* ================================================================
   SECTION 28 — RESPONSIVE POLISH v2.9
   Mobile + tablet fixes for shop, single product, toolbar, nav.
   ================================================================ */

/* ── Mobile nav dropdown: card treatment ────────────────────────── */
.elementor-nav-menu--dropdown .elementor-nav-menu,
.elementor-nav-menu--mobile .elementor-nav-menu {
  background: var(--ssh-white) !important;
  border: 1px solid var(--ssh-mist) !important;
  border-radius: 0 0 var(--ssh-radius-md) var(--ssh-radius-md) !important;
  box-shadow: var(--ssh-shadow-md) !important;
  overflow: hidden;
}
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--mobile .elementor-nav-menu > li > a {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ssh-mist) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--ssh-black) !important;
}
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--mobile .elementor-nav-menu > li > a:hover {
  background: var(--ssh-thread-tint) !important;
  color: var(--ssh-thread) !important;
}
/* Corporate Login pill inside dropdown */
.elementor-nav-menu--dropdown .nav-corporate-login a,
.elementor-nav-menu--dropdown .menu-item-corporate-login a,
.elementor-nav-menu--mobile .nav-corporate-login a,
.elementor-nav-menu--mobile .menu-item-corporate-login a {
  background: var(--ssh-thread) !important;
  color: var(--ssh-white) !important;
  margin: 10px 12px !important;
  border-radius: var(--ssh-radius-sm) !important;
  border-bottom: none !important;
  text-align: center !important;
}
.elementor-nav-menu--dropdown .nav-corporate-login a:hover,
.elementor-nav-menu--mobile .nav-corporate-login a:hover {
  background: var(--ssh-thread-dark) !important;
}

/* ── Shop toolbar: wrap at 900px ─────────────────────────────────── */
@media (max-width: 900px) {
  .ssh-shop-toolbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 14px;
  }
  .ssh-shop-toolbar-left  { flex: 0 0 100%; order: 1; }
  .ssh-shop-toolbar-right { flex: 0 0 100%; order: 2; justify-content: space-between; }
  .ssh-shop-search { flex: 1; }
  .ssh-shop-search-input { width: 100%; }
}

/* ── Shop archive: compact header strip on mobile ────────────────── */
@media (max-width: 768px) {
  .ssh-shop-header {
    padding: 28px 20px;
    margin-bottom: 16px;
  }
  .ssh-shop-header h1 {
    font-size: var(--ssh-text-2xl) !important;
  }
  /* Archive sidebar: collapsible — show as summary/details on mobile */
  .ssh-archive-sidebar {
    margin-bottom: 16px;
  }
  /* Single product: stack image above summary (WC does this natively,
     but this ensures our padding doesn't break it) */
  body.single-product .woocommerce {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Breadcrumbs: tighten on mobile */
  .ssh-breadcrumb,
  .woocommerce-breadcrumb.ssh-breadcrumb {
    margin-top: 12px;
    font-size: 11px;
  }
  /* Back link: tighter on mobile */
  .ssh-back-link {
    margin-bottom: 12px;
  }
  /* Related/upsell: 2-col on mobile */
  .woocommerce .related.products ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Extra-small (≤480px): single column products ───────────────── */
@media (max-width: 480px) {
  .elementor-wc-products .woocommerce ul.products,
  .woocommerce .related.products ul.products,
  .woocommerce .up-sells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ssh-shop-toolbar-right {
    flex-wrap: wrap;
  }
  /* Cat pills: hide on tiny screens to save toolbar space */
  .ssh-cat-filters {
    display: none;
  }
}

/* ================================================================
   SECTION 29 — ORDER RECEIVED: CUSTOM PRODUCTION NOTICE
   ================================================================ */

.ssh-order-notice {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--ssh-white);
  border: 1.5px solid var(--ssh-mist);
  border-left: 5px solid var(--ssh-thread);
  border-radius: var(--ssh-radius-md);
  padding: 28px 32px;
  margin-bottom: 40px;
}

.ssh-order-notice-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--ssh-thread-tint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ssh-thread);
  margin-top: 2px;
}

.ssh-order-notice-body {
  flex: 1;
  min-width: 0;
}

.ssh-order-notice-title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-xl) !important;
  font-weight: 800 !important;
  color: var(--ssh-black) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}

.ssh-order-notice-body > p {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.65;
  margin: 0 0 14px !important;
}

.ssh-order-notice-body ul {
  margin: 0 0 16px !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ssh-order-notice-body ul li {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}

.ssh-order-notice-body ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ssh-thread);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.ssh-order-notice-body ul li strong {
  color: var(--ssh-black);
  font-weight: 600;
}

.ssh-order-notice-contact {
  font-family: var(--ssh-font-ui) !important;
  font-size: var(--ssh-text-sm) !important;
  color: var(--ssh-fog) !important;
  margin: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--ssh-mist);
}

.ssh-order-notice-contact a {
  color: var(--ssh-thread);
  font-weight: 600;
  text-decoration: none;
}
.ssh-order-notice-contact a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .ssh-order-notice {
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
  }
  .ssh-order-notice-icon {
    width: 36px;
    height: 36px;
  }
}

/* ================================================================
   GIFT CARD INSTRUCTIONS — My Account → Gift Cards tab
   ================================================================ */

.ssh-info-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--ssh-canvas);
  border: 1px solid var(--ssh-mist);
  border-left: 4px solid var(--ssh-thread);
  border-radius: var(--ssh-radius-md);
  padding: 24px 28px;
  margin-bottom: 32px;
}

.ssh-info-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--ssh-thread-tint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ssh-thread);
  margin-top: 2px;
}

.ssh-info-card-body {
  flex: 1;
  min-width: 0;
}

.ssh-info-card-title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-lg) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ssh-black) !important;
  margin: 0 0 14px !important;
}

.ssh-info-card-steps {
  margin: 0 0 14px !important;
  padding-left: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ssh-info-card-steps li {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-slate);
  line-height: 1.6;
  padding-left: 4px;
}

.ssh-info-card-steps li strong {
  color: var(--ssh-black);
}

.ssh-info-card-note {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm) !important;
  color: var(--ssh-fog) !important;
  margin: 0 !important;
  border-top: 1px solid var(--ssh-mist);
  padding-top: 12px;
  font-style: italic;
}

@media (max-width: 600px) {
  .ssh-info-card {
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
  }
  .ssh-info-card-icon {
    width: 36px;
    height: 36px;
  }
}

/* ================================================================
   REGISTRATION NUDGE — account register form
   ================================================================ */

.ssh-register-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ssh-thread-tint);
  border: 1px solid #e8c9c5;
  border-radius: var(--ssh-radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-sm);
  color: var(--ssh-slate);
  line-height: 1.55;
}

.ssh-register-nudge svg {
  flex-shrink: 0;
  color: var(--ssh-thread);
  margin-top: 2px;
}

.ssh-register-nudge strong {
  color: var(--ssh-black);
}

/* ================================================================
   404 — PAGE NOT FOUND
   ================================================================ */

/* ── Animations ── */
@keyframes ssh404-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ssh404-number-in {
  from { opacity: 0; transform: scale(.92); -webkit-text-stroke-color: transparent; }
  to   { opacity: 1; transform: scale(1);  -webkit-text-stroke-color: rgba(255,255,255,.22); }
}
@keyframes ssh404-hoop-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ssh404-stitch-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ssh404-thread-draw {
  from { stroke-dashoffset: 200; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* Hide Hello Elementor's default page-header on the 404 */
.error404 .page-header { display: none !important; }

/* Full-bleed reset */
.ssh-404-page {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ── Hero: split left/right ── */
.ssh-404-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 88vh;
  display: grid;
  grid-template-columns: 52% 48%;
  background: var(--ssh-black);
  position: relative;
  overflow: hidden;
}

/* Dot texture across full hero */
.ssh-404-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Subtle vertical divider */
.ssh-404-hero::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 52%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Left visual panel ── */
.ssh-404-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 60px 48px;
}

.ssh-404-hoop-wrap {
  position: relative;
  width: min(420px, 90%);
  aspect-ratio: 1;
}

/* SVG hoop behind the number */
.ssh-404-hoop-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Outer ring slow rotation */
.ssh-404-hoop-svg .ssh-hoop-outer {
  transform-origin: 240px 240px;
  animation: ssh404-hoop-spin 60s linear infinite;
}

/* Cross-stitch marks fade in */
.ssh-404-hoop-svg .ssh-stitches {
  animation: ssh404-stitch-in .6s ease-out 1.1s both;
}

/* The 404 number — centred in hoop */
.ssh-404-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ssh-font-display);
  font-size: clamp(90px, 16vw, 168px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.22);
  user-select: none;
  animation: ssh404-number-in .8s cubic-bezier(.22,1,.36,1) .3s both;
}

/* ── Right content panel ── */
.ssh-404-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 80px 64px 80px 48px;
}

.ssh-404-content-inner {
  max-width: 400px;
}

/* Eyebrow */
.ssh-404-eyebrow {
  font-family: var(--ssh-font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ssh-thread) !important;
  margin: 0 0 20px !important;
  display: block;
  animation: ssh404-fade-up .6s ease-out .5s both;
}

/* Heading */
.ssh-404-heading {
  font-family: var(--ssh-font-display) !important;
  font-size: clamp(56px, 6vw, 80px) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: var(--ssh-white) !important;
  margin: 0 0 28px !important;
  animation: ssh404-fade-up .6s ease-out .65s both;
}

/* Red accent rule */
.ssh-404-rule {
  width: 48px;
  height: 3px;
  background: var(--ssh-thread);
  border-radius: 2px;
  margin: 0 0 28px;
  animation: ssh404-fade-up .5s ease-out .75s both;
}

/* Description */
.ssh-404-meta {
  font-family: var(--ssh-font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 0 44px !important;
  animation: ssh404-fade-up .6s ease-out .85s both;
}

/* CTA row */
.ssh-404-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: ssh404-fade-up .6s ease-out .95s both;
}

.ssh-404-actions .ssh-btn {
  font-family: var(--ssh-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--ssh-radius-sm);
  display: inline-block;
  transition: var(--ssh-transition);
  white-space: nowrap;
}

.ssh-404-actions .ssh-btn-primary {
  background: var(--ssh-thread);
  color: var(--ssh-white);
  border: 2px solid var(--ssh-thread);
}
.ssh-404-actions .ssh-btn-primary:hover {
  background: var(--ssh-thread-dark);
  border-color: var(--ssh-thread-dark);
}

.ssh-404-actions .ssh-btn-secondary {
  background: transparent;
  color: var(--ssh-white);
  border: 2px solid rgba(255,255,255,.22);
}
.ssh-404-actions .ssh-btn-secondary:hover {
  border-color: rgba(255,255,255,.6);
}

/* Needle/thread line */
.ssh-404-thread-line {
  margin-top: 52px;
  animation: ssh404-fade-up .5s ease-out 1.1s both;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .ssh-404-hero {
    grid-template-columns: 1fr 1fr;
  }
  .ssh-404-content {
    padding: 60px 40px 60px 32px;
  }
}

/* ── Mobile (≤ 768px): stack vertically ── */
@media (max-width: 768px) {
  .ssh-404-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .ssh-404-hero::after { display: none; }

  .ssh-404-visual {
    padding: 56px 32px 32px;
  }
  .ssh-404-hoop-wrap {
    width: min(300px, 80vw);
  }
  .ssh-404-number {
    font-size: clamp(70px, 18vw, 110px);
  }

  .ssh-404-content {
    padding: 32px 24px 64px;
  }
  .ssh-404-content-inner {
    max-width: 100%;
    text-align: center;
  }
  .ssh-404-rule {
    margin-left: auto;
    margin-right: auto;
  }
  .ssh-404-actions {
    justify-content: center;
  }
  .ssh-404-actions .ssh-btn {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
  .ssh-404-thread-line {
    display: flex;
    justify-content: center;
  }
}

/* ================================================================
   SECTION 28 — NO PRODUCTS FOUND (EMPTY STATE)
   Branded empty state for zero search/filter results with
   return-to-store buttons.
   ================================================================ */

.ssh-no-results {
  grid-column: 1 / -1;           /* span full width in the archive grid */
  text-align: center;
  padding: 80px 24px 96px;
}
.ssh-no-results-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ssh-canvas);
  color: var(--ssh-fog);
  margin-bottom: 28px;
}
.ssh-no-results-title {
  font-family: var(--ssh-font-display) !important;
  font-size: var(--ssh-text-2xl) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ssh-black) !important;
  margin: 0 0 12px !important;
}
.ssh-no-results-desc {
  font-family: var(--ssh-font-body);
  font-size: var(--ssh-text-base);
  color: var(--ssh-slate);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 32px;
}
.ssh-no-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ssh-no-results-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ssh-font-ui);
  font-size: var(--ssh-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--ssh-radius);
  transition: var(--ssh-transition);
}
.ssh-no-results-btn-primary {
  background: var(--ssh-thread);
  color: var(--ssh-white);
}
.ssh-no-results-btn-primary:hover {
  background: var(--ssh-thread-dark);
  transform: translateY(-1px);
  box-shadow: var(--ssh-shadow-md);
}
.ssh-no-results-btn-secondary {
  background: transparent;
  color: var(--ssh-black);
  border: 1.5px solid var(--ssh-mist);
}
.ssh-no-results-btn-secondary:hover {
  border-color: var(--ssh-black);
  color: var(--ssh-black);
}

/* Hide the default WooCommerce "No products were found" info notice
   when our custom empty state is displayed */
.woocommerce-info:has(+ .ssh-no-results),
.ssh-no-results ~ .woocommerce-info,
.woocommerce .woocommerce-no-products-found .woocommerce-info {
  display: none !important;
}