/*
Theme Name: Thrift Loop Classic
Theme URI: https://thriftloop.com
Description: Premium streetwear marketplace -- Classic WordPress + WooCommerce. Dark aesthetic, fully editable from WP Admin.
Author: Thrift Loop Studio
Author URI: https://thriftloop.com
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: thrift-loop
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --obsidian:      #0F0F0F;
  --obsidian-soft: #1A1A1A;
  --obsidian-mid:  #222222;
  --obsidian-edge: #2E2E2E;
  --sage:          #8A9A86;
  --sage-light:    #A8B8A4;
  --sage-dim:      #5A6A56;
  --offwhite:      #F5F5F7;
  --offwhite-dim:  rgba(245,245,247,0.6);
  --offwhite-faint:rgba(245,245,247,0.15);
  --accent-red:    #B85C5C;
  --accent-gold:   #C9A96E;

  --font-display:  'Syne', 'Space Grotesk', sans-serif;
  --font-body:     'Space Grotesk', sans-serif;
  --font-mono:     'Syncopate', monospace;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill:999px;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-hover:0 8px 40px rgba(0,0,0,0.7);

  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--obsidian);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--offwhite);
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { color: var(--offwhite-dim); line-height: 1.75; }

.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 120px 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--sage);
  color: var(--obsidian);
}
.btn-primary:hover {
  background: var(--sage-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138,154,134,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--offwhite);
  border: 1px solid var(--offwhite-faint);
}
.btn-outline:hover {
  border-color: var(--sage);
  color: var(--sage);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--offwhite-dim);
  padding: 10px 0;
}
.btn-ghost:hover { color: var(--sage); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(15,15,15,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--offwhite-faint);
  transition: all var(--transition);
}

#site-header.scrolled {
  background: rgba(15,15,15,0.98);
  border-bottom-color: var(--obsidian-edge);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}

/* Logo */
.site-logo {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite);
  flex-shrink: 0;
}
.site-logo span { color: var(--sage); }
.site-logo:hover { color: var(--offwhite); }

/* Primary Nav */
#primary-nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
}
#primary-nav a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  position: relative;
  padding: 4px 0;
}
#primary-nav a:hover,
#primary-nav .current-menu-item > a { color: var(--offwhite-dim); }
/* current item underline removed - Home stays normal grey */

/* ============================================================
   DROPDOWN MENUS - supports nested submenus (Shop -> Men -> Tops)
   No gap between parent and child = no broken hover chain.
   Nested levels open to the SIDE, not below, to avoid overlap.
   ============================================================ */
#primary-nav li { position: relative; }

/* Level 1 dropdown (e.g. opens below "Shop") */
#primary-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  padding-top: 12px;     /* visual gap via padding, not margin -> no dead zone */
  background: transparent;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 200;
}
/* The actual visible panel is a child wrapper so the 12px padding
   above stays part of the hoverable area (bridges the gap) */
#primary-nav .sub-menu {
  display: flex;
  flex-direction: column;
}
#primary-nav li > .sub-menu {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 8px 0 8px 0;
  margin-top: 12px;       /* the gap, but bridged by ::before below */
}
/* Invisible bridge so moving cursor from parent link to submenu
   never crosses a dead zone and breaks :hover */
#primary-nav li > .sub-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

#primary-nav li:hover > .sub-menu,
#primary-nav li.sub-menu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

#primary-nav .sub-menu a {
  display: block;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--offwhite);
  white-space: nowrap;
}
#primary-nav .sub-menu a::after { display: none; }
#primary-nav .sub-menu a:hover { background: var(--obsidian-mid); color: var(--sage); }

/* ---- NESTED submenu (3rd level, e.g. Shop > Men > Tops) ---- */
/* Opens to the RIGHT of its parent item, vertically aligned,
   with zero gap so hover never breaks. */
#primary-nav .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  margin-top: 0;
  padding: 0;
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  min-width: 190px;
}
#primary-nav .sub-menu .sub-menu::before {
  /* bridge on the LEFT side instead of top, since it opens sideways */
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}
#primary-nav .sub-menu li > .sub-menu {
  padding: 8px 0;
}
/* Parent item that has a nested submenu gets an arrow indicator */
#primary-nav .sub-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: 28px;
}
#primary-nav .sub-menu li.menu-item-has-children > a::before {
  content: '\203A';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--offwhite-dim);
}

/* If the dropdown would overflow the right edge of the viewport,
   flip nested submenus to open on the LEFT instead */
#primary-nav .sub-menu li.tl-flip-left > .sub-menu {
  left: auto;
  right: 100%;
}
#primary-nav .sub-menu li.tl-flip-left > .sub-menu::before {
  left: auto;
  right: -8px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.header-search-btn,
.header-cart-btn,
.header-account-btn {
  background: none;
  border: none;
  color: var(--offwhite-dim);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
  position: relative;
}
.header-search-btn:hover,
.header-cart-btn:hover,
.header-account-btn:hover { color: var(--offwhite); }

.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--sage);
  color: var(--obsidian);
  font-size: 9px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--offwhite);
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--offwhite);
  transition: all var(--transition);
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* Mobile Nav */
#mobile-nav {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--obsidian);
  z-index: 999;
  padding: 40px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}
#mobile-nav.open { transform: translateX(0); }
#mobile-nav ul { flex-direction: column; gap: 0; }
#mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--offwhite);
  padding: 16px 0;
  border-bottom: 1px solid var(--obsidian-edge);
}
#mobile-nav a:hover { color: var(--sage); }

/* Search Overlay */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15,15,15,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}
#search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay-inner { width: 100%; max-width: 600px; padding: 0 24px; }
.search-overlay-inner input[type="search"] {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--offwhite-faint);
  color: var(--offwhite);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  padding: 16px 0;
  outline: none;
  caret-color: var(--sage);
}
.search-overlay-inner input::placeholder { color: var(--offwhite-faint); }
.search-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none; border: none;
  color: var(--offwhite-dim);
  cursor: pointer; font-size: 24px;
  transition: color var(--transition);
}
.search-close:hover { color: var(--offwhite); }

/* ============================================================
   HERO SLIDER
   ============================================================ */
/* duplicate .hero-slider/.slide removed - see consolidated rule below */
.slide.exiting {
  opacity: 0;
  z-index: 1;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease;
}
.slide.active .slide-bg { transform: scale(1.06); }

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,15,15,0.85) 0%,
    rgba(15,15,15,0.4) 60%,
    rgba(15,15,15,0.1) 100%
  );
}

/* Hover effect on slide */
.slide:hover .slide-overlay {
  background: linear-gradient(
    135deg,
    rgba(15,15,15,0.75) 0%,
    rgba(15,15,15,0.3) 60%,
    rgba(15,15,15,0.05) 100%
  );
}

.slide-content {
  position: absolute;
  bottom: 12%;
  left: 0;
  right: 0;
  padding: 0 48px;
  z-index: 3;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.8s ease 0.4s;
}
.slide.active .slide-content {
  transform: translateY(0);
  opacity: 1;
}

.slide-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
  display: block;
}
.slide-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--offwhite);
  margin-bottom: 20px;
  max-width: 700px;
}
.slide-desc {
  font-size: 1rem;
  color: var(--offwhite-dim);
  margin-bottom: 32px;
  max-width: 440px;
}
.slide-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Slider controls */
.slider-dots {
  position: absolute;
  bottom: 40px;
  right: 48px;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--offwhite-faint);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}
.slider-dot.active {
  background: var(--sage);
  width: 24px;
  border-radius: 3px;
}

.slider-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--sage);
  z-index: 10;
  transition: width 0.1s linear;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  right: 48px;
}
.slider-prev, .slider-next {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--offwhite-faint);
  border: 1px solid var(--offwhite-faint);
  color: var(--offwhite);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  backdrop-filter: blur(8px);
}
.slider-prev:hover, .slider-next:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--obsidian);
}
.slider-nav { flex-direction: column; top: auto; bottom: 60px; right: 48px; transform: none; }

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.marquee-bar {
  background: var(--sage);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--obsidian);
  padding: 0 32px;
}
.marquee-track span::after { content: ''; margin-left: 32px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  margin-bottom: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
  display: block;
}
.section-header h2 { margin: 0; }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-card {
  background: var(--obsidian-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--obsidian-edge);
  transition: all var(--transition);
  position: relative;
  group: true;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--sage-dim);
}

.product-card-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--obsidian-mid);
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.06); }

.product-card-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}
.badge {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}
.badge-rare  { background: var(--accent-gold); color: var(--obsidian); }
.badge-new   { background: var(--sage);        color: var(--obsidian); }
.badge-sale  { background: var(--accent-red);  color: var(--offwhite); }

.product-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,15,15,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 3;
}
.product-card:hover .product-card-overlay { opacity: 1; }

.product-card-body {
  padding: 16px;
}
.product-brand {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}
.product-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--offwhite);
  margin-bottom: 8px;
  line-height: 1.3;
}
.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.product-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--offwhite);
  letter-spacing: 0.05em;
}
.product-price del { color: var(--offwhite-dim); font-weight: 400; margin-right: 6px; font-size: 11px; }
.product-condition {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  background: var(--obsidian-mid);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* WooCommerce product loop overrides */
.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.woocommerce ul.products li.product a img { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.category-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  display: block;
}
.category-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.category-card:hover .category-card-bg { transform: scale(1.08); }
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.2) 60%, transparent 100%);
  transition: background var(--transition);
}
.category-card:hover .category-card-overlay {
  background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0.3) 60%, rgba(138,154,134,0.05) 100%);
}
.category-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px;
  z-index: 2;
}
.category-card-label .eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 6px;
}
.category-card-label h3 {
  font-size: 1.3rem;
  color: var(--offwhite);
  margin: 0 0 6px;
}
.category-card-label small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* ============================================================
   FEATURE STRIP / TRUST BAR
   ============================================================ */
.trust-bar {
  border-top: 1px solid var(--obsidian-edge);
  border-bottom: 1px solid var(--obsidian-edge);
  background: var(--obsidian-soft);
}
.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  divide-x: 1px solid var(--obsidian-edge);
}
.trust-item {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--obsidian-edge);
}
.trust-item:last-child { border-right: none; }
.trust-icon {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  background: var(--obsidian-mid);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.trust-item h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--offwhite);
  margin-bottom: 4px;
}
.trust-item p {
  font-size: 0.78rem;
  color: var(--offwhite-dim);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   ABOUT / BRAND STRIP
   ============================================================ */
.brand-strip {
  background: var(--obsidian-soft);
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.brand-strip-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--obsidian-mid);
}
.brand-strip-visual img { width:100%; height:100%; object-fit: cover; }
.brand-strip-stat {
  position: absolute;
  bottom: 20px; right: 20px;
  background: var(--obsidian);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: center;
}
.brand-strip-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 4px;
}
.brand-strip-stat span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* ============================================================
   INSTAGRAM / GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(138,154,134,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--transition);
  font-size: 24px;
  color: var(--obsidian);
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-section {
  text-align: center;
  background: var(--obsidian-soft);
  border-radius: var(--radius-lg);
  padding: 80px 40px;
  border: 1px solid var(--obsidian-edge);
}
.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 32px auto 0;
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  color: var(--offwhite);
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.newsletter-form input:focus { border-color: var(--sage); }
.newsletter-form input::placeholder { color: var(--offwhite-dim); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--obsidian-soft);
  border-top: 1px solid var(--obsidian-edge);
  padding-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
}

.footer-brand .site-logo {
  font-size: 18px;
  display: block;
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 0.88rem;
  color: var(--offwhite-dim);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--offwhite-dim);
  transition: all var(--transition);
}
.footer-social a:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--obsidian);
  transform: translateY(-2px);
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  font-size: 0.88rem;
  color: var(--offwhite-dim);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--sage); }

.footer-bottom {
  border-top: 1px solid var(--obsidian-edge);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  margin: 0;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: var(--sage); }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-hero {
  background: var(--obsidian-soft);
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--obsidian-edge);
}
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.shop-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-btn {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite-dim);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--sage);
  color: var(--sage);
  background: rgba(138,154,134,0.08);
}
.shop-sort select {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite-dim);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  cursor: pointer;
  outline: none;
}

/* WooCommerce shop wrapper */
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering { display: none; }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.product-single-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 40px;
}
.product-gallery-main {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--obsidian-mid);
  outline: none;
}
.product-gallery-main img { width:100%; height:100%; object-fit: cover; }

/* Prev/Next arrow buttons */
.product-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15,15,15,0.6);
  border: 1px solid rgba(245,245,247,0.15);
  color: #F5F5F7;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: all 0.2s ease;
}
.product-gallery-arrow:hover {
  background: #E87722;
  border-color: #E87722;
}
.product-gallery-arrow-prev { left: 12px; }
.product-gallery-arrow-next { right: 12px; }

/* Image counter (e.g. "2 / 5") */
.product-gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15,15,15,0.7);
  color: #F5F5F7;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 20px;
  z-index: 6;
}

@media (max-width: 600px) {
  .product-gallery-arrow { width: 36px; height: 36px; font-size: 20px; }
}

.product-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.product-thumb {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--obsidian-edge);
  cursor: pointer;
  transition: border-color var(--transition);
  flex-shrink: 0;
}
.product-thumb:hover,
.product-thumb.active { border-color: var(--sage); }
.product-thumb img { width:100%; height:100%; object-fit: cover; }

.product-single-info { position: sticky; top: 100px; }
.product-single-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
  display: block;
}
.product-single-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 20px;
}
.product-single-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--offwhite);
  margin-bottom: 24px;
}
.product-single-price del {
  font-size: 1.2rem;
  color: var(--offwhite-dim);
  font-weight: 400;
  margin-right: 12px;
}

.product-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.product-meta-item {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.product-meta-item .label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 4px;
}
.product-meta-item .value {
  font-size: 0.9rem;
  color: var(--offwhite);
  font-weight: 500;
}

.product-add-to-cart .btn { width: 100%; justify-content: center; padding: 18px; font-size: 12px; }

/* WooCommerce single product overrides */
.woocommerce div.product { padding-top: 0 !important; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--offwhite) !important; font-family: var(--font-display); font-size: 2rem !important; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--sage) !important;
  color: var(--obsidian) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
  border: none !important;
  transition: all var(--transition) !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--sage-light) !important; }

/* ============================================================
   CART PAGE
   ============================================================ */
.woocommerce-cart table.cart { border-collapse: collapse; width: 100%; }
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  padding: 20px 16px;
  border-bottom: 1px solid var(--obsidian-edge);
  vertical-align: middle;
}
.woocommerce-cart table.cart th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  background: var(--obsidian-soft);
}
.woocommerce-cart .cart_totals {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 32px;
}
.woocommerce-cart .cart_totals h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--obsidian-soft);
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 64px 0;
}
.stat-block {
  background: var(--obsidian-soft);
  padding: 48px 32px;
  text-align: center;
}
.stat-block strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-block span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}
.contact-form-wrapper {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-lg);
  padding: 48px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  color: var(--offwhite);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--sage); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--offwhite-dim); }
.form-group textarea { min-height: 140px; }

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.contact-info-icon {
  width: 44px; height: 44px;
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-info-text h4 { font-size: 0.95rem; margin-bottom: 4px; }
.contact-info-text p { font-size: 0.88rem; margin: 0; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 100px 0 60px;
  background: var(--obsidian-soft);
  border-bottom: 1px solid var(--obsidian-edge);
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 16px;
}
.page-hero h1 { margin-bottom: 16px; }
.page-hero p { max-width: 560px; }

/* ============================================================
   WOOCOMMERCE GLOBAL OVERRIDES
   ============================================================ */
.woocommerce-message,
.woocommerce-info { background: var(--obsidian-soft) !important; border-top-color: var(--sage) !important; color: var(--offwhite-dim) !important; }
.woocommerce-error { background: var(--obsidian-soft) !important; border-top-color: var(--accent-red) !important; }
.woocommerce-message::before { color: var(--sage) !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--obsidian-soft) !important;
  border-color: var(--obsidian-edge) !important;
  color: var(--offwhite-dim) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sage) !important;
  color: var(--obsidian) !important;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 44px; height: 44px;
  background: var(--sage);
  color: var(--obsidian);
  border: none;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(16px);
  transition: all var(--transition);
  z-index: 500;
  font-size: 18px;
}
#back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--sage-light); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .brand-strip { padding: 48px 32px; gap: 48px; }
  .woocommerce ul.products { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }

  #primary-nav { display: none; }
  .menu-toggle { display: flex; }
  #mobile-nav { display: block; }

  .hero-slider { height: 85vh; margin-top: 0; }
  .slide-content { padding: 0 24px; bottom: 14%; }
  .slider-nav { right: 24px; bottom: 50px; }
  .slider-dots { right: 24px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .brand-strip { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr; }
  .product-single-layout { grid-template-columns: 1fr; gap: 40px; }
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3,1fr); }
  .newsletter-form { flex-direction: column; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr); }
  .product-meta-grid { grid-template-columns: 1fr; }
  .product-single-info { position: static; }
}

@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-bar-inner { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .header-inner { height: 64px; }
  .hero-slider { margin-top: 0; }
  .contact-form-wrapper { padding: 28px 20px; }
  .woocommerce ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ============================================================
   PROMO BANNER
   ============================================================ */
#promo-banner {
  background: var(--sage);
  color: var(--obsidian);
  text-align: center;
  padding: 10px 48px;
  position: relative;
  z-index: 1001;
}
#promo-banner p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--obsidian);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
#promo-banner a {
  color: var(--obsidian);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#promo-banner .promo-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--obsidian);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.7;
  padding: 4px 8px;
}
#promo-banner .promo-close:hover { opacity: 1; }
#promo-banner.hidden { display: none; }

/* Shift header down when banner is visible */
body.has-promo-banner #site-header { top: 0; }

/* ============================================================
   HERO SLIDER -- SPLIT LAYOUT (image left, text right)
   ============================================================ */
/* duplicate .hero-slider/.slide removed - see consolidated rule below */

/* Left: image panel */
.slide-image-panel {
  position: relative;
  overflow: hidden;
  background: var(--obsidian-mid);
}
.slide-image-panel img,
.slide-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Greyscale by default, colour on hover */
  filter: grayscale(100%) brightness(0.75);
  transition: filter 0.7s ease, transform 0.8s ease;
}
.slide:hover .slide-image-panel img,
.slide:hover .slide-bg-img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.04);
}

/* Colour tint overlay -- lightens on hover */
.slide-image-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(138,154,134,0.18);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.slide:hover .slide-image-panel::after { opacity: 1; }

/* Fallback gradient when no image */
.slide-bg-gradient {
  width: 100%;
  height: 100%;
  filter: grayscale(100%) brightness(0.6);
  transition: filter 0.7s ease;
}
.slide:hover .slide-bg-gradient { filter: grayscale(0%) brightness(0.9); }

/* Right: text panel */
.slide-text-panel {
  background: var(--obsidian);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px;
  position: relative;
  transition: background 0.5s ease;
}
.slide:hover .slide-text-panel { background: var(--obsidian-soft); }

/* Decorative vertical line */
.slide-text-panel::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sage), transparent);
  opacity: 0.4;
}

.slide-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 20px;
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.slide-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--offwhite);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}
.slide-desc {
  font-size: 0.95rem;
  color: var(--offwhite-dim);
  margin-bottom: 36px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}
.slide-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s;
}
.slide.active .slide-eyebrow,
.slide.active .slide-title,
.slide.active .slide-desc,
.slide.active .slide-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Slide number indicator */
.slide-counter {
  position: absolute;
  bottom: 32px;
  right: 40px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--offwhite-dim);
}
.slide-counter strong { color: var(--sage); }

/* Progress bar */
.slider-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--sage);
  z-index: 10;
  transition: width 0.1s linear;
}

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--offwhite-faint);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}
.slider-dot.active { background: var(--sage); width: 22px; border-radius: 3px; }

/* Prev/Next */
.slider-nav {
  position: absolute;
  bottom: 20px;
  right: 24px;
  z-index: 10;
  display: flex;
  gap: 8px;
  flex-direction: row;
}
.slider-prev, .slider-next {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.slider-prev:hover, .slider-next:hover {
  background: var(--sage); border-color: var(--sage); color: var(--obsidian);
}

/* ============================================================
   NEW HOMEPAGE SECTIONS
   ============================================================ */

/* How It Works */
.how-it-works { background: var(--obsidian); }
.step-card {
  text-align: center;
  padding: 40px 24px;
  position: relative;
}
.step-number {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  color: var(--obsidian-edge);
  line-height: 1;
  margin-bottom: 16px;
  transition: color var(--transition);
}
.step-card:hover .step-number { color: var(--sage); }
.step-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}
.step-card h4 { font-size: 1.1rem; margin-bottom: 10px; }
.step-card p { font-size: 0.88rem; margin: 0; }
.step-connector {
  position: absolute;
  top: 60px; right: -50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--sage-dim), transparent);
}

/* Testimonials */
.testimonials-section { background: var(--obsidian-soft); }
.testimonial-card {
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: all var(--transition);
}
.testimonial-card:hover {
  border-color: var(--sage-dim);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.testimonial-stars {
  color: var(--accent-gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.testimonial-text {
  font-size: 0.95rem;
  color: var(--offwhite-dim);
  line-height: 1.8;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--obsidian-edge);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--sage);
  flex-shrink: 0;
}
.testimonial-author-info strong {
  display: block;
  font-size: 0.88rem;
  color: var(--offwhite);
}
.testimonial-author-info span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Featured Drop Banner */
.drop-banner {
  background: var(--sage);
  padding: 64px 0;
  overflow: hidden;
  position: relative;
}
.drop-banner::before {
  content: 'DROP';
  position: absolute;
  font-family: var(--font-display);
  font-size: 20vw;
  font-weight: 800;
  color: rgba(15,15,15,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.05em;
}
.drop-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.drop-banner h2 { color: var(--obsidian); margin-bottom: 8px; }
.drop-banner p { color: rgba(15,15,15,0.7); margin: 0; }
.drop-banner .btn-dark {
  background: var(--obsidian);
  color: var(--offwhite);
  border: none;
  flex-shrink: 0;
}
.drop-banner .btn-dark:hover {
  background: var(--obsidian-soft);
  transform: translateY(-2px);
}

/* ============================================================
   MOBILE & TABLET FIXES
   ============================================================ */
@media (max-width: 1024px) {
  /* Slider split at tablet: stack vertically */
  .hero-slider { height: auto; min-height: unset; margin-top: 0; }
  .slide { grid-template-columns: 1fr; grid-template-rows: 55vw 1fr; }
  .slide-text-panel { padding: 40px 32px; justify-content: flex-start; }
  .slide-text-panel::before { display: none; }
  .slide-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .slider-nav { bottom: 16px; right: 16px; }
  .slider-dots { bottom: 20px; }

  /* Grids */
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .brand-strip { padding: 48px 32px; gap: 48px; }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
  .trust-bar-inner { grid-template-columns: repeat(2,1fr); }

  /* Drop banner */
  .drop-banner-inner { flex-direction: column; text-align: center; gap: 20px; }
}

@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  /* Spacing */
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section-lg { padding: 64px 0; }

  /* Header */
  #site-header { position: fixed; }
  #primary-nav { display: none; }
  .menu-toggle { display: flex; }
  #mobile-nav { display: block; }
  .header-inner { height: 64px; }

  /* Promo banner */
  #promo-banner { padding: 8px 40px 8px 16px; }
  #promo-banner p { font-size: 10px; gap: 8px; text-align: center; }

  /* Slider */
  .hero-slider { height: auto; min-height: auto; margin-top: 0; }
  .slide { grid-template-columns: 1fr; grid-template-rows: 56vw auto; }
  .slide-image-panel { min-height: 56vw; }
  .slide-text-panel { padding: 28px 20px 52px; }
  .slide-title { font-size: 1.6rem; }
  .slide-desc { font-size: 0.88rem; margin-bottom: 20px; }
  .slide-actions { gap: 10px; }
  .slide-actions .btn { padding: 12px 20px; font-size: 10px; }
  .slider-dots { bottom: 14px; }
  .slider-nav { bottom: 8px; right: 12px; }
  .slider-prev, .slider-next { width: 34px; height: 34px; }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-header .btn { width: 100%; justify-content: center; }

  /* Trust bar */
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 20px 12px; }
  .trust-item p { font-size: 0.75rem; }

  /* Brand strip */
  .brand-strip { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  .brand-strip-visual { aspect-ratio: 16/9; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* Product layouts */
  .product-single-layout { grid-template-columns: 1fr; gap: 28px; }
  .product-single-info { position: static; }
  .product-meta-grid { grid-template-columns: 1fr 1fr; }

  /* WooCommerce */
  .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; gap: 12px; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-wrapper { padding: 24px 16px; }

  /* About */
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-hero .container { grid-template-columns: 1fr !important; gap: 32px; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-section { padding: 40px 20px; }

  /* Drop banner */
  .drop-banner { padding: 40px 0; }
  .drop-banner-inner { flex-direction: column; text-align: center; gap: 20px; }
  .drop-banner .btn-dark { width: 100%; justify-content: center; }

  /* How it works */
  .step-connector { display: none; }

  /* Testimonials */
  .testimonial-card { padding: 24px 16px; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(3,1fr); gap: 2px; }
}

@media (max-width: 480px) {
  /* Typography */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  /* Spacing */
  .container { padding: 0 12px; }
  .section { padding: 36px 0; }

  /* Header */
  .header-inner { height: 60px; }
  .hero-slider { margin-top: 0; }
  .site-logo { font-size: 14px; }

  /* Slider */
  .slide { grid-template-rows: 64vw auto; }
  .slide-image-panel { min-height: 64vw; }
  .slide-text-panel { padding: 20px 16px 48px; }
  .slide-title { font-size: 1.4rem; }
  .slide-eyebrow { font-size: 9px; margin-bottom: 12px; }
  .slide-desc { display: none; }
  .slide-actions { flex-direction: column; }
  .slide-actions .btn { width: 100%; justify-content: center; }

  /* Trust bar */
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .trust-icon { width: 32px; height: 32px; font-size: 14px; }
  .trust-item h4 { font-size: 0.78rem; }

  /* Grids */
  .grid-3 { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .product-card-body { padding: 10px; }
  .product-title { font-size: 0.85rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  #site-footer { padding-top: 40px; }

  /* Buttons */
  .btn { padding: 12px 20px; font-size: 10px; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  /* About stats */
  .about-stats { grid-template-columns: 1fr; }
  .stat-block { padding: 28px 20px; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2,1fr); }

  /* Forms */
  .contact-form-wrapper { padding: 20px 14px; }
  .form-group input, .form-group textarea, .form-group select { padding: 12px 14px; }

  /* Product meta */
  .product-meta-grid { grid-template-columns: 1fr; }
  .product-gallery-thumbs { gap: 6px; }
  .product-thumb { width: 56px; height: 56px; }

  /* Back to top */
  #back-to-top { bottom: 16px; right: 16px; width: 38px; height: 38px; }
}

/* ============================================================
   PROMO BANNER (above header)
   ============================================================ */
.promo-banner {
  background: var(--sage);
  padding: 10px 16px;
  position: relative;
  z-index: 1001;
}
.promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.promo-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--obsidian);
  font-weight: 700;
}
.promo-cta {
  background: var(--obsidian);
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--transition);
}
.promo-cta:hover { background: var(--obsidian-edge); color: var(--sage-light); }
.promo-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--obsidian);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity var(--transition);
}
.promo-close:hover { opacity: 1; }
.promo-banner.hidden { display: none; }

/* Offset header when promo is visible */
body.has-promo #site-header { top: 0; }

/* ============================================================
   HERO SLIDER -- HALF IMAGE / HALF TEXT LAYOUT
   ============================================================ */
.hero-slider {
  position: relative;
  width: 100%;
  height: calc(100vh - 72px);
  min-height: 560px;
  overflow: hidden;
  margin-top: 0;
  display: block;
}

/* Override old full-bg slide styles */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 1;
}
.slide.active {
  opacity: 1;
  z-index: 2;
}

/* LEFT -- image panel */
.slide-image-panel {
  position: relative;
  overflow: hidden;
  background: var(--obsidian-mid);
  cursor: pointer;
}
.slide-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Start greyscale */
  filter: grayscale(100%) brightness(0.7);
  transform: scale(1.04);
  transition:
    filter 0.6s ease,
    transform 0.6s ease;
}
/* Hover: remove greyscale, lighten overlay */
.slide-image-panel:hover .slide-img-bg {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.08);
}

.slide-img-placeholder {
  background: linear-gradient(160deg, var(--obsidian-mid) 0%, var(--sage-dim) 100%);
}

.slide-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,15,15,0.35);
  transition: background 0.6s ease;
}
.slide-image-panel:hover .slide-img-overlay {
  background: rgba(15,15,15,0.1);
}

.slide-img-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}
.slide-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(245,245,247,0.6);
}

/* RIGHT -- text panel */
.slide-text-panel {
  background: var(--obsidian-soft);
  display: flex;
  align-items: center;
  padding: 0 64px;
  border-left: 1px solid var(--obsidian-edge);
  position: relative;
}
.slide-text-inner {
  max-width: 440px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.7s ease 0.3s, opacity 0.7s ease 0.3s;
}
.slide.active .slide-text-inner {
  transform: translateY(0);
  opacity: 1;
}
.slide-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 20px;
}
.slide-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--offwhite);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.slide-desc {
  font-size: 0.95rem;
  color: var(--offwhite-dim);
  margin-bottom: 32px;
  line-height: 1.7;
}
.slide-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Slider nav -- repositioned for split layout */
.slider-nav {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 10;
  top: auto;
  transform: none;
}
.slider-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--sage);
  z-index: 10;
  transition: width 0.1s linear;
  width: 0%;
}

/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */
.how-step {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.how-step:hover {
  border-color: var(--sage-dim);
  transform: translateY(-4px);
}
.how-step-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  color: var(--obsidian-edge);
  line-height: 1;
  margin-bottom: 20px;
  transition: color var(--transition);
}
.how-step:hover .how-step-num { color: var(--sage-dim); }
.how-step-title {
  font-size: 1.2rem;
  color: var(--offwhite);
  margin-bottom: 12px;
}
.how-step-desc {
  font-size: 0.9rem;
  color: var(--offwhite-dim);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 32px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  border-color: var(--sage-dim);
  transform: translateY(-4px);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--sage);
  opacity: 0.3;
  line-height: 0.6;
  margin-bottom: 20px;
}
.testimonial-text {
  font-size: 0.95rem;
  color: var(--offwhite);
  line-height: 1.75;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sage-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--obsidian);
  flex-shrink: 0;
}
.testimonial-author strong {
  display: block;
  font-size: 0.9rem;
  color: var(--offwhite);
}
.testimonial-author span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* ============================================================
   MOBILE & TABLET RESPONSIVE FIXES
   ============================================================ */

/*  Tablet: 768px - 1024px  */
@media (max-width: 1024px) {
  /* Slider: stack image top, text bottom on tablet */
  .hero-slider {
    height: auto;
    min-height: unset;
    margin-top: 0;
  }
  .slide {
    grid-template-columns: 1fr;
    grid-template-rows: 50vw auto;
    position: relative;
  }
  .slide:not(.active) { display: none; }
  .slide.active { display: grid; opacity: 1; position: relative; }

  .slide-image-panel {
    height: 50vw;
    min-height: 240px;
    max-height: 420px;
  }
  .slide-text-panel {
    padding: 40px 36px;
    border-left: none;
    border-top: 1px solid var(--obsidian-edge);
  }
  .slide-text-inner { max-width: 100%; }
  .slide-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }

  .slider-nav { bottom: 20px; right: 20px; }
  .slider-dots { bottom: 16px; }

  /* Grid adjustments */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .brand-strip { grid-template-columns: 1fr; gap: 40px; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Promo banner */
  .promo-text { font-size: 10px; }
}

/*  Mobile: up to 768px  */
@media (max-width: 768px) {
  /* Header */
  .header-inner { height: 60px; }
  .hero-slider { margin-top: 0; }
  #primary-nav { display: none; }
  .menu-toggle { display: flex; }

  /* Promo banner */
  .promo-inner { gap: 8px; }
  .promo-text { font-size: 9px; letter-spacing: 0.08em; }
  .promo-cta { display: none; }

  /* Slider on mobile: image takes 55vw height */
  .slide { grid-template-rows: 55vw auto; }
  .slide-image-panel { min-height: 200px; max-height: 320px; }
  .slide-text-panel { padding: 28px 20px 48px; }
  .slide-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .slide-desc { font-size: 0.88rem; margin-bottom: 24px; }
  .slide-actions { gap: 10px; }
  .slide-actions .btn { padding: 12px 20px; font-size: 10px; }

  .slider-nav { bottom: 12px; right: 12px; }
  .slider-prev, .slider-next { width: 36px; height: 36px; }
  .slider-dots { bottom: 12px; }

  /* Sections */
  .section { padding: 48px 0; }
  .section-lg { padding: 64px 0; }
  .container { padding: 0 16px; }

  /* Grids collapse to 1 col on small mobile, 2 on larger */
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Trust bar: 2 col */
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 20px 12px; }
  .trust-item h4 { font-size: 0.8rem; }
  .trust-item p { font-size: 0.75rem; }

  /* Brand strip */
  .brand-strip { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  .brand-strip-visual { aspect-ratio: 16/9; }

  /* Section headers */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* How it works */
  .how-step { padding: 28px 20px; }
  .how-step-num { font-size: 3rem; }

  /* Testimonials */
  .testimonial-card { padding: 24px 20px; }

  /* Newsletter */
  .newsletter-section { padding: 48px 20px; }
  .newsletter-form { flex-direction: column; }

  /* Product cards */
  .product-card-body { padding: 12px; }
  .product-title { font-size: 0.85rem; }
  .product-price { font-size: 12px; }

  /* Page hero */
  .page-hero { padding: 80px 0 40px; }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }

  /* Contact layout */
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-wrapper { padding: 28px 20px; }

  /* Product single */
  .product-single-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-single-info { position: static; }
  .product-meta-grid { grid-template-columns: 1fr 1fr; }

  /* About stats */
  .about-stats { grid-template-columns: 1fr 1fr; }

  /* WC products */
  .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; gap: 12px; }

  /* Mobile menu */
  #mobile-nav { padding: 32px 16px; }
  #mobile-nav a { font-size: 1.6rem; padding: 14px 0; }
}

/*  Small mobile: up to 420px  */
@media (max-width: 420px) {
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust-bar-inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--obsidian-edge); }
  .slide-title { font-size: 1.5rem; }
  .slide-text-panel { padding: 20px 16px 40px; }
  .promo-banner { padding: 8px 36px 8px 12px; }
  .promo-text { font-size: 9px; }
  .about-stats { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .product-single-layout { gap: 24px; }
  .product-meta-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ADMIN BAR COLLISION FIX
   WordPress admin bar is 32px on desktop, 46px on mobile < 600px
   Our fixed header must shift down when admin bar is present
   ============================================================ */

/* When logged in -- push header below admin bar */
.admin-bar #site-header {
  top: 32px;
}

/* Slider and page content offset when admin bar shown */
.admin-bar .hero-slider {
  margin-top: 0;
}
.admin-bar #page-wrap > *:first-child:not(.hero-slider) {
  padding-top: calc(72px + 32px);
}

/* Mobile admin bar is 46px on screens < 600px */
@media screen and (max-width: 600px) {
  .admin-bar #site-header {
    top: 46px;
  }
  .admin-bar .hero-slider {
    margin-top: 0;
  }
}

/* Promo banner + admin bar combined offset */
.admin-bar .promo-banner {
  margin-top: 32px;
}
@media screen and (max-width: 600px) {
  .admin-bar .promo-banner {
    margin-top: 46px;
  }
}

/* ============================================================
   LOGO SIZING -- controlled by Customizer CSS vars
   ============================================================ */
.site-logo .custom-logo-link {
  display: flex;
  align-items: center;
}
.site-logo .custom-logo-link img.custom-logo {
  max-width: var(--logo-width, 160px);
  max-height: var(--logo-height, 48px);
  width: auto;
  height: auto;
  display: block;
  padding: var(--logo-padding, 0) 0;
  object-fit: contain;
}
/* Text logo fallback size */
a.site-logo:not(:has(.custom-logo)) {
  font-size: var(--text-logo-size, 16px) !important;
}

/* ============================================================
   LOGO -- proper sizing, no nested anchor conflict
   ============================================================ */

/* Custom image logo wrapper */
.custom-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.custom-logo-wrap a.custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 1;
}
.custom-logo-wrap img.custom-logo {
  max-width:  var(--logo-width,  160px);
  max-height: var(--logo-height,  48px);
  width: auto;
  height: auto;
  display: block;
  padding: var(--logo-padding, 0px) 0;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.custom-logo-wrap a.custom-logo-link:hover img.custom-logo {
  opacity: 0.85;
}

/* Text logo (fallback) */
a.site-logo.text-logo {
  font-family: var(--font-mono);
  font-size: var(--text-logo-size, 16px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
a.site-logo.text-logo span { color: var(--sage); }
a.site-logo.text-logo:hover { color: var(--offwhite); }

/* Mobile logo */
@media (max-width: 768px) {
  .custom-logo-wrap img.custom-logo {
    max-height: calc(var(--logo-height, 48px) * 0.8);
  }
}

/* ============================================================
   GAP FIX -- Hero slider sits flush under header
   The promo banner is INSIDE #page-wrap (not fixed),
   so slider only needs to account for the fixed header height.
   Remove all duplicate margin-top overrides.
   ============================================================ */
/* margin-top now handled by the single consolidated .hero-slider rule */

/* Fixed header is 72px tall -- push page-wrap down */
#page-wrap {
  padding-top: 72px;
}

/* When admin bar is showing, add its height too */
.admin-bar #page-wrap {
  padding-top: calc(72px + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar #page-wrap {
    padding-top: calc(60px + 46px);
  }
}
@media (max-width: 768px) {
  #page-wrap { padding-top: 60px; }
}

/* Promo banner -- static flow inside page-wrap, no extra offset needed */
.promo-banner {
  position: relative;
  z-index: 5;
  margin-top: 0 !important;
}

/* ============================================================
   CATEGORY GRID -- Customisable + hover image reveal
   ============================================================ */
.category-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  display: block;
  background: var(--obsidian-mid);
}
.category-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Start greyscale like the slider */
  filter: grayscale(100%) brightness(0.6);
  transform: scale(1.04);
  transition: filter 0.6s ease, transform 0.6s ease;
}
.category-card:hover .category-card-bg {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.08);
}
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,0.92) 0%, rgba(15,15,15,0.3) 55%, transparent 100%);
  transition: background 0.5s ease;
  z-index: 1;
}
.category-card:hover .category-card-overlay {
  background: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.15) 55%, rgba(138,154,134,0.06) 100%);
}
.category-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 22px;
  z-index: 2;
  transform: translateY(4px);
  transition: transform 0.4s ease;
}
.category-card:hover .category-card-label {
  transform: translateY(0);
}
.category-card-label .eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}
.category-card:hover .category-card-label .eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.category-card-label h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--offwhite);
  margin: 0 0 6px;
  transition: color 0.3s ease;
}
.category-card:hover .category-card-label h3 { color: var(--offwhite); }
.category-card-label small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  display: block;
}
.category-card:hover .category-card-label small {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SALE PAGE
   ============================================================ */
.sale-hero {
  background: linear-gradient(135deg, #2A1A1A 0%, var(--obsidian) 60%);
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sale-hero::before {
  content: 'SALE';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 800;
  color: rgba(184,92,92,0.06);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.04em;
}
.sale-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-red);
  color: var(--offwhite);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.sale-countdown {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
  flex-wrap: wrap;
}
.countdown-block {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-align: center;
  min-width: 80px;
}
.countdown-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-red);
  line-height: 1;
  display: block;
}
.countdown-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  display: block;
  margin-top: 6px;
}
.sale-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--obsidian-edge);
}
.sale-tag {
  background: rgba(184,92,92,0.12);
  border: 1px solid rgba(184,92,92,0.3);
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   SELL PAGE -- Enhanced
   ============================================================ */
.sell-hero {
  display: block;
  background: linear-gradient(135deg, #0A1A0A 0%, var(--obsidian) 60%);
  padding: 140px 0 64px;
  position: relative;
  overflow: hidden;
}
.sell-hero .container { position: relative; z-index: 2; }
.sell-hero span.eyebrow,
.sell-hero h1,
.sell-hero p {
  background: transparent !important;
}
.sell-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(138,154,134,0.08) 0%, transparent 60%);
}
.sell-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 64px 0;
  background: var(--obsidian-edge);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sell-step {
  background: var(--obsidian-soft);
  padding: 40px 32px;
  position: relative;
}
.sell-step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--sage-dim);
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}
.sell-step h3 { font-size: 1.1rem; margin-bottom: 10px; }
.sell-step p { font-size: 0.88rem; color: var(--offwhite-dim); margin: 0; line-height: 1.7; }
.sell-earnings {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  margin: 48px 0;
}
.sell-earnings strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem,5vw,4rem);
  font-weight: 800;
  color: var(--sage);
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .sell-steps-grid { grid-template-columns: 1fr; }
  .sale-countdown { gap: 10px; }
  .countdown-block { padding: 14px 16px; min-width: 64px; }
  .countdown-num { font-size: 1.8rem; }
}

/* ============================================================
   HEADER -- NEW NAV FONT + ORANGE HOVER + AUTH BUTTONS
   ============================================================ */

/* Nav font -- Syne for a bolder editorial feel */
#primary-nav ul { display: flex; align-items: center; gap: 28px; }
#primary-nav a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}
#primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: #E87722;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 1px;
  pointer-events: none;
}
/* Orange hover only - current page does NOT get orange (Home stays grey on homepage) */
#primary-nav a:hover {
  color: #E87722 !important;
}
#primary-nav a:hover::after { opacity: 1; }
#primary-nav .current-menu-item > a,
#primary-nav .current_page_item > a {
  color: var(--offwhite-dim);
}

/* Discount nav item -- always orange */
#primary-nav li a[href*="discount"],
#primary-nav li a[href*="Discount"],
#primary-nav li.menu-discount > a,
#primary-nav li.tl-orange > a {
  color: #E87722 !important;
}
#primary-nav li a[href*="discount"]::after,
#primary-nav li.menu-discount > a::after,
#primary-nav li.tl-orange > a::after { width: 100%; opacity: 1; }

/* Sign Up button in nav -- always orange pill */
#primary-nav li.menu-signup > a,
#primary-nav li.tl-signup > a {
  background: #E87722 !important;
  color: #fff !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
}
#primary-nav li.menu-signup > a::after,
#primary-nav li.tl-signup > a::after { display: none; }
#primary-nav li.menu-signup > a:hover,
#primary-nav li.tl-signup > a:hover {
  background: #FF8C35 !important;
  box-shadow: 0 4px 14px rgba(232,119,34,0.4);
}

/* Fresh Stock -- no dot indicator (removed per request) */

/* Dropdown overrides */
#primary-nav .sub-menu a:hover { color: #E87722 !important; }

/*  Header icon buttons (search, wishlist, cart)  */
.header-icon-btn {
  background: none;
  border: none;
  color: var(--offwhite-dim);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color var(--transition);
  text-decoration: none;
}
.header-icon-btn:hover { color: #E87722; }

/* Badge on icons */
.icon-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: #E87722;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  pointer-events: none;
}
.cart-badge { background: var(--sage); color: var(--obsidian); }

/*  Login / Signup buttons  */
.header-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.header-login-btn {
  background: transparent;
  color: var(--offwhite-dim);
  border: 1px solid var(--offwhite-faint);
}
.header-login-btn:hover {
  border-color: #E87722;
  color: #E87722;
}
.header-signup-btn {
  background: #E87722;
  color: #fff;
  border: 1px solid #E87722;
}
.header-signup-btn:hover {
  background: #FF8C35;
  border-color: #FF8C35;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,119,34,0.35);
}
/* Logged in account link */
.header-account-link {
  background: transparent;
  color: var(--offwhite-dim);
  border: 1px solid var(--offwhite-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.header-account-link:hover {
  border-color: var(--sage);
  color: var(--sage);
}

/*  Mobile nav bottom  */
.mobile-nav-bottom {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--obsidian-edge);
}
.mobile-nav-icons {
  display: flex;
  gap: 16px;
}
.mobile-icon-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--offwhite-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  flex: 1;
  justify-content: center;
  transition: all var(--transition);
  text-decoration: none;
}
.mobile-icon-btn:hover {
  border-color: #E87722;
  color: #E87722;
}

/* Mobile nav links orange hover */
#mobile-nav a:hover { color: #E87722 !important; }

/*  Responsive header adjustments  */
@media (max-width: 1100px) {
  #primary-nav ul { gap: 18px; }
  #primary-nav a { font-size: 11px; }
  .header-auth-btn { padding: 7px 12px; font-size: 9px; }
}
@media (max-width: 900px) {
  #primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-auth-btn { display: none; }
}
@media (max-width: 768px) {
  .header-icon-btn { padding: 4px; }
}

/* ============================================================
   FOOTER -- Orange permanent links + Discount highlight
   ============================================================ */

/* All footer links default */
.footer-col ul a {
  font-size: 0.88rem;
  color: var(--offwhite-dim);
  transition: color var(--transition);
  display: block;
  padding: 3px 0;
}
.footer-col ul a:hover { color: #E87722; }

/* Permanently orange links in footer */
.footer-col ul li a[href*="discount"],
.footer-col ul li a[href*="Discount"],
.footer-col ul li.footer-orange > a,
.footer-col ul li.tl-footer-orange > a {
  color: #E87722 !important;
  font-weight: 700;
}
.footer-col ul li a[href*="discount"]:hover,
.footer-col ul li.footer-orange > a:hover,
.footer-col ul li.tl-footer-orange > a:hover {
  color: #FF8C35 !important;
}

/* Our Story link -- orange */
.footer-col ul li a[href*="our-story"],
.footer-col ul li a[href*="about"],
.footer-col ul li.footer-story > a,
.footer-col ul li.tl-footer-story > a {
  color: #E87722 !important;
  font-weight: 700;
}
.footer-col ul li a[href*="our-story"]:hover,
.footer-col ul li a[href*="about"]:hover,
.footer-col ul li.footer-story > a:hover,
.footer-col ul li.tl-footer-story > a:hover {
  color: #FF8C35 !important;
}

/* Contact Us link -- orange */
.footer-col ul li a[href*="contact"],
.footer-col ul li.footer-contact > a,
.footer-col ul li.tl-footer-contact > a {
  color: #E87722 !important;
  font-weight: 700;
}
.footer-col ul li a[href*="contact"]:hover,
.footer-col ul li.footer-contact > a:hover,
.footer-col ul li.tl-footer-contact > a:hover {
  color: #FF8C35 !important;
}

/* Discount at top of SHOP column -- extra emphasis */
.footer-col ul li:first-child a[href*="discount"] {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-col ul li:first-child a[href*="discount"]::before {
  content: '%';
  background: rgba(232,119,34,0.15);
  border: 1px solid rgba(232,119,34,0.3);
  color: #E87722;
  font-size: 9px;
  font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ============================================================
   DISCOUNT COUNTDOWN STRIP
   Complementary to theme: dark obsidian base, orange accents,
   high contrast white numbers, sage green code pill
   ============================================================ */
.discount-countdown-strip {
  background: linear-gradient(90deg, #0F0F0F 0%, #1A0800 40%, #1A0800 60%, #0F0F0F 100%);
  border-top: 1px solid rgba(232,119,34,0.3);
  border-bottom: 1px solid rgba(232,119,34,0.3);
  padding: 14px 0;
  position: relative;
  overflow: hidden;
}
.discount-countdown-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(232,119,34,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.countdown-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Left: offer text */
.countdown-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.countdown-pct {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  color: #E87722;
  letter-spacing: -0.01em;
  line-height: 1;
}
.countdown-label-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
}

/* Centre: timer blocks */
.countdown-blocks {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(232,119,34,0.2);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-width: 58px;
}
.cd-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.02em;
  /* flip animation */
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cd-num.flip {
  transform: scaleY(0);
  opacity: 0;
}
.cd-unit {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,119,34,0.7);
  margin-top: 3px;
}
.cd-sep {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(232,119,34,0.5);
  margin-top: -8px;
  line-height: 1;
}

/* Right: code + CTA */
.countdown-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.countdown-code-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--offwhite-dim);
  text-transform: uppercase;
}
.countdown-code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--obsidian);
  background: var(--sage);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.countdown-cta {
  background: #E87722;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.countdown-cta:hover {
  background: #FF8C35;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,119,34,0.4);
}

/* Responsive countdown */
@media (max-width: 900px) {
  .countdown-strip-inner { justify-content: center; gap: 16px; }
  .countdown-left { text-align: center; }
}
@media (max-width: 600px) {
  .cd-block { padding: 6px 10px; min-width: 46px; }
  .cd-num { font-size: 1.3rem; }
  .countdown-code { display: none; }
  .countdown-code-label { display: none; }
  .countdown-label-text { display: none; }
  .countdown-pct { font-size: 1rem; }
}

/* ============================================================
   MARQUEE TICKER -- updated colour + Discount% link visibility
   ============================================================ */
.marquee-bar {
  background: var(--obsidian-soft) !important;
  border-top: 1px solid var(--obsidian-edge);
  border-bottom: 1px solid var(--obsidian-edge);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--offwhite);
  padding: 0 32px;
}
.marquee-track span::after {
  content: '|';
  margin-left: 32px;
  color: var(--obsidian-edge);
}
/* Discount% link inside marquee */
.marquee-track a {
  color: #E87722 !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.15em;
  transition: color 0.2s ease;
  background: rgba(232,119,34,0.1);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(232,119,34,0.3);
}
.marquee-track a:hover {
  background: rgba(232,119,34,0.2);
  color: #FF8C35 !important;
}
.marquee-track a strong { font-weight: 800; }
/* Pause on hover */
.marquee-bar:hover .marquee-track { animation-play-state: paused; }

/* ============================================================
   NAV - % Discount always orange, bold, high attention
   ============================================================ */

/* % Discount nav - same font/size as other nav items but always orange */
#primary-nav li.tl-orange > a,
#primary-nav li.nav-discount > a,
#primary-nav li a[href*="discount"] {
  color: #E87722 !important;
  font-weight: 700;
}
#primary-nav li.tl-orange > a::after,
#primary-nav li.nav-discount > a::after,
#primary-nav li a[href*="discount"]::after {
  width: 100%;
  opacity: 1;
  background: #E87722;
}
#primary-nav li.tl-orange > a:hover,
#primary-nav li.nav-discount > a:hover,
#primary-nav li a[href*="discount"]:hover {
  color: #FF8C35 !important;
}

/* Sale nav same as discount - both point to discount page */
#primary-nav li a[href*="sale"] {
  color: #E87722 !important;
}
#primary-nav li a[href*="sale"]::after { width: 100%; opacity: 1; background: #E87722; }

/* Home nav - same font as others, normal colour */
#primary-nav li a[href="/"],
#primary-nav li a[href="<?php echo home_url('/'); ?>"] {
  color: var(--offwhite-dim);
}

/* Sign Up pill always orange */
#primary-nav li.tl-signup > a,
#primary-nav li.menu-signup > a {
  background: #E87722 !important;
  color: #fff !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
}
#primary-nav li.tl-signup > a::after,
#primary-nav li.menu-signup > a::after { display: none; }
#primary-nav li.tl-signup > a:hover,
#primary-nav li.menu-signup > a:hover {
  background: #FF8C35 !important;
  box-shadow: 0 4px 14px rgba(232,119,34,0.4);
}

/* Mobile nav % Discount */
#mobile-nav li.tl-orange > a,
#mobile-nav li.nav-discount > a {
  color: #E87722 !important;
}

/* ============================================================
   % Discount nav badge - matches footer style
   ============================================================ */
.nav-pct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,119,34,0.18);
  border: 1px solid rgba(232,119,34,0.45);
  color: #E87722;
  font-size: 9px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 3px;
  font-family: var(--font-mono);
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
/* Mobile nav badge */
#mobile-nav .nav-pct-badge {
  width: 22px;
  height: 22px;
  font-size: 11px;
  margin-right: 6px;
}


/* ============================================================
   NAV: "Swap or Sell" and "Clearance" always orange
   ============================================================ */
#primary-nav li a[href*="/sell"],
#primary-nav li a[href*="swap"],
#primary-nav li.tl-nav-sell > a,
#primary-nav li.menu-swap-sell > a {
  color: #E87722 !important;
}
#primary-nav li a[href*="/sell"]::after,
#primary-nav li a[href*="swap"]::after,
#primary-nav li.tl-nav-sell > a::after,
#primary-nav li.menu-swap-sell > a::after {
  width: 100%;
  opacity: 1;
  background: #E87722;
}
#primary-nav li a[href*="/sell"]:hover,
#primary-nav li a[href*="swap"]:hover,
#primary-nav li.tl-nav-sell > a:hover,
#primary-nav li.menu-swap-sell > a:hover {
  color: #FF8C35 !important;
}

#primary-nav li a[href*="clearance"],
#primary-nav li a[href*="discount"],
#primary-nav li.tl-nav-clearance > a,
#primary-nav li.menu-clearance > a {
  color: #E87722 !important;
}
#primary-nav li a[href*="clearance"]::after,
#primary-nav li a[href*="discount"]::after,
#primary-nav li.tl-nav-clearance > a::after,
#primary-nav li.menu-clearance > a::after {
  width: 100%;
  opacity: 1;
  background: #E87722;
}
#primary-nav li a[href*="clearance"]:hover,
#primary-nav li a[href*="discount"]:hover,
#primary-nav li.tl-nav-clearance > a:hover,
#primary-nav li.menu-clearance > a:hover {
  color: #FF8C35 !important;
}

/* Global safeguard against stray highlight boxes */
.page-hero h1, .page-hero .eyebrow, .page-hero p,
.slide-title, .slide-eyebrow, .slide-desc,
h1 span, h2 span, h3 span {
  background: transparent !important;
  background-color: transparent !important;
  box-decoration-break: clone;
}
/* ============================================================
   COOKIE CONSENT POPUP
   ============================================================ */
#tl-cookie-popup {
  position: fixed;
  z-index: 99999;
  left: 0; right: 0;
  padding: 0 16px;
  transform: translateY(120%);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
#tl-cookie-popup.tl-cookie-visible { transform: translateY(0); }

/* Bottom bar */
#tl-cookie-popup.tl-cookie-pos-bottom { bottom: 0; }
#tl-cookie-popup.tl-cookie-pos-bottom-left { bottom: 24px; left: 24px; right: auto; max-width: 420px; }
#tl-cookie-popup.tl-cookie-pos-bottom-right { bottom: 24px; right: 24px; left: auto; max-width: 420px; }
#tl-cookie-popup.tl-cookie-pos-center {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%) scale(0.9);
  max-width: 480px;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#tl-cookie-popup.tl-cookie-pos-center.tl-cookie-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.tl-cookie-inner {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-top: 2px solid #E87722;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.4);
  position: relative;
}
.tl-cookie-pos-bottom-left .tl-cookie-inner,
.tl-cookie-pos-bottom-right .tl-cookie-inner,
.tl-cookie-pos-center .tl-cookie-inner {
  border-radius: var(--radius-md);
  flex-direction: column;
  text-align: center;
}
.tl-cookie-icon { font-size: 28px; flex-shrink: 0; }
.tl-cookie-content { flex: 1; min-width: 0; }
.tl-cookie-content h4 {
  font-size: 0.95rem;
  color: var(--offwhite);
  margin-bottom: 4px;
}
.tl-cookie-content p {
  font-size: 0.82rem;
  color: var(--offwhite-dim);
  margin: 0;
  line-height: 1.5;
}
.tl-cookie-content a {
  color: #E87722;
  text-decoration: underline;
}
.tl-cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.tl-cookie-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.tl-cookie-btn-accept {
  background: #E87722;
  color: #fff;
}
.tl-cookie-btn-accept:hover { background: #FF8C35; }
.tl-cookie-btn-decline {
  background: transparent;
  color: var(--offwhite-dim);
  border: 1px solid var(--obsidian-edge);
}
.tl-cookie-btn-decline:hover { border-color: var(--offwhite-dim); color: var(--offwhite); }
.tl-cookie-close {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  color: var(--offwhite-dim);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px;
  transition: color 0.2s;
}
.tl-cookie-close:hover { color: var(--offwhite); }

/* ============================================================
   APP INSTALL POPUP
   ============================================================ */
#tl-app-popup { position: fixed; inset: 0; z-index: 99998; }

.tl-app-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.tl-app-popup-card {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--obsidian-soft);
  border-top: 2px solid #E87722;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 40px 32px 32px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 -8px 48px rgba(0,0,0,0.5);
}
#tl-app-popup.tl-app-visible .tl-app-popup-card {
  transform: translateY(0);
}
.tl-app-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite-dim);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.tl-app-close:hover { background: var(--obsidian-edge); color: var(--offwhite); }
.tl-app-icon-wrap { margin: 0 auto 16px; }
.tl-app-icon-img {
  width: 80px; height: 80px;
  border-radius: 18px;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tl-app-icon-placeholder {
  width: 80px; height: 80px;
  border-radius: 18px;
  background: linear-gradient(135deg, #E87722 0%, #FF8C35 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(232,119,34,0.4);
}
.tl-app-title {
  font-size: 1.3rem;
  color: var(--offwhite);
  margin-bottom: 8px;
}
.tl-app-text {
  font-size: 0.9rem;
  color: var(--offwhite-dim);
  margin-bottom: 24px;
  line-height: 1.6;
}
.tl-app-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tl-app-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tl-app-android {
  background: #E87722;
  color: #fff;
}
.tl-app-android:hover { background: #FF8C35; transform: translateY(-2px); }
.tl-app-ios {
  background: var(--offwhite);
  color: var(--obsidian);
}
.tl-app-ios:hover { background: #e0e0e2; transform: translateY(-2px); }
.tl-app-later {
  background: none;
  border: none;
  color: var(--offwhite-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s;
  text-decoration: underline;
}
.tl-app-later:hover { color: var(--offwhite); }

@media (max-width: 480px) {
  .tl-cookie-inner { gap: 12px; }
  .tl-cookie-actions { width: 100%; }
  .tl-cookie-btn { flex: 1; justify-content: center; }
  .tl-app-popup-card { padding: 32px 20px 24px; }
  .tl-app-btns { flex-direction: column; }
  .tl-app-store-btn { justify-content: center; }
}

/* ============================================================
   FOOTER CONTACT INFO (address, phone, email, whatsapp)
   ============================================================ */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--offwhite-dim);
  line-height: 1.5;
}
.footer-contact-icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}
.footer-contact-item a {
  color: var(--offwhite-dim);
  transition: color var(--transition);
}
.footer-contact-item a:hover { color: #E87722; }

/* WhatsApp button in footer */
.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  margin-top: 4px;
  transition: all 0.3s ease;
  width: fit-content;
}
.footer-whatsapp-btn:hover {
  background: #1ebe5a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
}

/* ============================================================
   CHECKOUT & CART - DARK THEME (matches site brand)
   High-contrast off-white text on dark obsidian surfaces.
   ============================================================ */
.woocommerce-checkout,
.woocommerce-cart,
body.woocommerce-checkout #main-content,
body.woocommerce-cart #main-content {
  background: var(--obsidian);
  color: var(--offwhite);
  padding-bottom: 60px;
}
.woocommerce-checkout .page-hero,
.woocommerce-cart .page-hero {
  background: var(--obsidian-soft) !important;
}
.woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3,
.woocommerce-cart h1, .woocommerce-cart h2, .woocommerce-cart h3 {
  color: var(--offwhite) !important;
}
.woocommerce-checkout label, .woocommerce-cart label,
.woocommerce-checkout p, .woocommerce-cart p,
.woocommerce-checkout th, .woocommerce-cart th,
.woocommerce-checkout td, .woocommerce-cart td {
  color: var(--offwhite-dim) !important;
}

/* Cart table */
.woocommerce-cart table.cart {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.woocommerce-cart table.cart th {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border-bottom: 1px solid var(--obsidian-edge) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px;
}
.woocommerce-cart table.cart td {
  border-bottom: 1px solid var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
  padding: 16px;
  vertical-align: middle;
}
.woocommerce-cart table.cart td.product-name a {
  color: var(--offwhite) !important;
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover { color: #E87722 !important; }
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: var(--offwhite) !important;
  font-weight: 700;
}
.woocommerce-cart table.cart td.product-thumbnail img {
  border-radius: var(--radius-sm);
  width: 70px;
  height: 70px;
  object-fit: cover;
}

/* Quantity stepper - high contrast on dark */
.woocommerce-cart .quantity {
  display: inline-flex;
  align-items: center;
}
.woocommerce-cart .quantity input.qty {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border: 1px solid var(--obsidian-edge) !important;
  border-radius: var(--radius-sm);
  width: 64px;
  height: 40px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
}
.woocommerce-cart .quantity input.qty:focus {
  border-color: #E87722 !important;
  outline: none;
}

/* Stepper +/- buttons (injected by JS) - works everywhere quantity inputs appear */
.tl-qty-stepper {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tl-qty-stepper input.qty {
  border: none !important;
  border-radius: 0 !important;
  width: 48px !important;
  height: 38px !important;
}
.tl-qty-btn {
  background: var(--obsidian-mid);
  color: var(--offwhite);
  border: none;
  width: 36px;
  height: 38px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tl-qty-btn:hover {
  background: #E87722;
  color: #fff;
}
.tl-qty-minus { border-right: 1px solid var(--obsidian-edge); }
.tl-qty-plus  { border-left: 1px solid var(--obsidian-edge); }

/* On checkout / light contexts the same stepper still needs to be visible */
.woocommerce-checkout .tl-qty-stepper,
.single-product .tl-qty-stepper {
  border-color: var(--obsidian-edge);
}

/* Remove (x) button - clear and obvious */
.woocommerce-cart td.product-remove {
  text-align: center;
  width: 44px;
}
.woocommerce-cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(184,92,92,0.15);
  color: #D98080 !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.woocommerce-cart a.remove:hover {
  background: #B85C5C !important;
  color: #fff !important;
  transform: scale(1.1);
}

/* Update Cart / Apply Coupon buttons */
.woocommerce-cart .actions {
  background: var(--obsidian-mid);
  padding: 20px !important;
}
.woocommerce-cart .actions .button {
  background: var(--obsidian-soft);
  color: var(--offwhite) !important;
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.woocommerce-cart .actions .button:hover {
  background: #E87722;
  color: #fff !important;
  border-color: #E87722;
}
.woocommerce-cart .actions .button[name="update_cart"] {
  margin-top: 12px;
}

/* Cart totals box */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .cart_totals {
  background: var(--obsidian-soft) !important;
  border: 1px solid var(--obsidian-edge) !important;
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout .cart_totals h2 {
  color: var(--offwhite) !important;
  border-bottom: 1px solid var(--obsidian-edge);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout .cart_totals table {
  border: none !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout .cart_totals table th,
.woocommerce-checkout .cart_totals table td {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
  padding: 10px 0 !important;
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--offwhite) !important;
  border-bottom: none !important;
  border-top: 2px solid var(--offwhite) !important;
}

/* Coupon box */
.woocommerce-cart .coupon {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.woocommerce-cart .coupon input#coupon_code {
  background: var(--obsidian-mid) !important;
  border: 1px solid var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.woocommerce-cart .coupon input#coupon_code::placeholder { color: var(--offwhite-dim); }
.woocommerce-cart .coupon label { display: none; }

/* === CHECKOUT FORM === */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  background: transparent;
}
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout h3 {
  color: var(--offwhite) !important;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.woocommerce-checkout .form-row label {
  color: var(--offwhite) !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.woocommerce-checkout .form-row .required {
  color: #E87722;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
  background: var(--obsidian-mid) !important;
  border: 1px solid var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  font-size: 0.92rem !important;
  transition: border-color 0.2s ease;
}
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--offwhite-faint);
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #E87722 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,119,34,0.15) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 46px !important;
  display: flex;
  align-items: center;
  background: var(--obsidian-mid) !important;
}
.woocommerce-checkout .select2-selection__rendered { color: var(--offwhite) !important; }
.woocommerce-checkout .select2-dropdown {
  background: var(--obsidian-mid) !important;
  border-color: var(--obsidian-edge) !important;
}
.woocommerce-checkout .select2-results__option {
  color: var(--offwhite) !important;
}
.woocommerce-checkout .select2-results__option--highlighted {
  background: #E87722 !important;
}

/* Order review table on checkout */
.woocommerce-checkout #order_review,
.woocommerce-checkout table.shop_table {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  color: var(--offwhite) !important;
  border-bottom: 1px solid var(--obsidian-edge) !important;
}
.woocommerce-checkout table.shop_table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--offwhite-dim) !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
  background: var(--obsidian-soft) !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--obsidian-edge) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--obsidian-edge) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--offwhite) !important;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite-dim) !important;
  border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--obsidian-mid) !important;
}

/* Place order button stays branded */
.woocommerce-checkout #place_order,
.woocommerce-cart .checkout-button {
  background: #E87722 !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 32px !important;
  border-radius: var(--radius-sm) !important;
  width: 100%;
  transition: all 0.3s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .checkout-button:hover {
  background: #FF8C35 !important;
  transform: translateY(-1px);
}

/* Notices */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
  background: var(--obsidian-soft) !important;
  color: var(--offwhite) !important;
  border: 1px solid var(--obsidian-edge) !important;
  border-left: 4px solid var(--sage) !important;
  border-top: none !important;
}

/* Cross-sell / Upsell products on cart page */
.woocommerce-cart .cross-sells,
.woocommerce-cart .related.products {
  background: var(--obsidian-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.woocommerce-cart .cross-sells h2,
.woocommerce-cart .related.products h2 {
  color: var(--offwhite) !important;
}
.woocommerce-cart .cross-sells ul.products li.product,
.woocommerce-cart .related.products ul.products li.product {
  background: var(--obsidian-mid);
  border-radius: var(--radius-sm);
}
.woocommerce-cart .cross-sells ul.products li.product h2,
.woocommerce-cart .cross-sells ul.products li.product h3,
.woocommerce-cart .related.products ul.products li.product h2,
.woocommerce-cart .related.products ul.products li.product h3 {
  color: var(--offwhite) !important;
  font-size: 0.85rem;
}
.woocommerce-cart .cross-sells ul.products li.product .price,
.woocommerce-cart .related.products ul.products li.product .price {
  color: var(--offwhite) !important;
}

/* My Account page */
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  color: var(--offwhite) !important;
}

@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review {
    padding: 16px;
  }
  .woocommerce-cart table.cart td.product-thumbnail img { width: 56px; height: 56px; }
  .woocommerce-cart table.cart td { padding: 12px 8px; }
}

/* ============================================================
   GENERIC PAGE CONTENT - ALIGNMENT + TYPOGRAPHY FOR
   RAW GUTENBERG BLOCK PAGES (Our Story, FAQs, Policies etc)
   ============================================================ */
.page-content {
  max-width: 760px;
  margin: 0 auto;
}
.page-content > * { margin-bottom: 1.4em; }
.page-content > *:last-child { margin-bottom: 0; }

/* Headings - consistent hierarchy, all light on dark */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  color: var(--offwhite) !important;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}
.page-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.page-content h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.page-content h4, .page-content h5, .page-content h6 {
  font-size: 1.05rem;
  color: var(--sage) !important;
}

/* Paragraphs - light grey, readable */
.page-content p {
  color: var(--offwhite-dim) !important;
  line-height: 1.85;
  font-size: 0.98rem;
}
.page-content strong, .page-content b {
  color: var(--offwhite) !important;
  font-weight: 700;
}
.page-content em, .page-content i { color: var(--offwhite-dim) !important; }

/* Links */
.page-content a {
  color: #E87722 !important;
  text-decoration: underline;
  text-decoration-color: rgba(232,119,34,0.3);
  transition: text-decoration-color 0.2s ease;
}
.page-content a:hover { text-decoration-color: #E87722; }

/* Lists */
.page-content ul, .page-content ol {
  color: var(--offwhite-dim) !important;
  padding-left: 24px;
  line-height: 1.9;
}
.page-content li { margin-bottom: 0.5em; }
.page-content li::marker { color: var(--sage); }

/* Images - centered, rounded, contained */
.page-content img,
.page-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: 0 auto;
}
.page-content figure {
  margin: 2em 0;
  text-align: center;
}
.page-content figcaption {
  color: var(--offwhite-dim) !important;
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 8px;
  opacity: 0.8;
}

/* Blockquotes */
.page-content blockquote {
  border-left: 3px solid #E87722;
  padding: 16px 24px;
  margin: 1.6em 0;
  background: var(--obsidian-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--offwhite-dim) !important;
  font-style: italic;
}
.page-content blockquote p { margin: 0; }
.page-content blockquote cite {
  display: block;
  margin-top: 8px;
  color: var(--sage) !important;
  font-style: normal;
  font-size: 0.85rem;
}

/* Horizontal rules */
.page-content hr {
  border: none;
  border-top: 1px solid var(--obsidian-edge);
  margin: 2.4em 0;
}

/* Embedded iframes (e.g. earth.org embeds) - make them fit, not overflow */
.page-content iframe,
.page-content embed,
.page-content .wp-block-embed {
  max-width: 100%;
  border-radius: var(--radius-md);
}
.page-content .wp-block-embed__wrapper {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.page-content .wp-block-embed iframe {
  width: 100% !important;
}

/* Highlighted/marked text (==text==) rendered as <mark> */
.page-content mark {
  background: rgba(232,119,34,0.18);
  color: #E87722 !important;
  padding: 0 4px;
  border-radius: 3px;
}

/* Tables inside content */
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
}
.page-content table th,
.page-content table td {
  padding: 10px 14px;
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite-dim) !important;
  text-align: left;
}
.page-content table th {
  background: var(--obsidian-soft);
  color: var(--offwhite) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Gallery / multiple images side by side */
.page-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 1.6em 0;
}
.page-content .wp-block-gallery img { margin: 0; }

/* Author/founder image captions - center align name+title blocks */
.page-content > p:has(img) {
  text-align: center;
}

/* Wide content blocks (used for emphasis sections) */
.page-content .wp-block-group,
.page-content .wp-block-cover {
  background: var(--obsidian-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 1.6em 0;
}

/* Mobile */
@media (max-width: 768px) {
  .page-content { padding: 0 4px; }
  .page-content h1 { font-size: 1.6rem; }
  .page-content h2 { font-size: 1.3rem; }
  .page-content .wp-block-gallery { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   PAGE HERO - consistent alignment across all inner pages
   ============================================================ */
.page-hero {
  padding: 110px 0 56px;
  background: var(--obsidian-soft);
  border-bottom: 1px solid var(--obsidian-edge);
  position: relative;
  overflow: hidden;
}
.page-hero .container {
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}
.page-hero .eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--sage);
}
.page-hero h1 {
  color: var(--offwhite) !important;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 12px;
}
.page-hero p {
  color: var(--offwhite-dim) !important;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .page-hero { padding: 84px 0 40px; }
}


/* ============================================================
   FORCE LIGHT TEXT ON ALL DARK SURFACES SITE-WIDE
   Catches any leftover dark/black text colours from
   pasted Gutenberg content with inline styles
   ============================================================ */
#page-wrap [style*="color:#000"],
#page-wrap [style*="color: #000"],
#page-wrap [style*="color:black"],
#page-wrap [style*="color: black"],
#page-wrap [style*="color:#111"],
#page-wrap [style*="color: #111"],
#page-wrap [style*="color:#222"],
#page-wrap [style*="color: #222"],
#page-wrap [style*="color:#333"],
#page-wrap [style*="color: #333"] {
  color: var(--offwhite-dim) !important;
}
/* Exception: checkout/cart light areas should keep dark text */
.woocommerce-checkout [style*="color:#000"],
.woocommerce-checkout [style*="color:#111"],
.woocommerce-checkout [style*="color:#222"],
.woocommerce-checkout [style*="color:#333"],
.woocommerce-cart [style*="color:#000"],
.woocommerce-cart [style*="color:#111"],
.woocommerce-cart [style*="color:#222"],
.woocommerce-cart [style*="color:#333"] {
  color: #1A1A1A !important;
}

/* Generic page - title shown inline when banner disabled */
.page-content-title {
  max-width: 760px;
  margin: 48px auto 24px;
  text-align: center;
  color: var(--offwhite) !important;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
}
.section-no-title { padding-top: 24px; }
@media (max-width: 768px) {
  .page-content-title { margin: 32px auto 16px; }
}

/* ============================================================
   GLOBAL SAFEGUARD: prevent stray dark highlight boxes
   behind headings, eyebrows, and hero text
   ============================================================ */
.page-hero h1, .page-hero .eyebrow, .page-hero p,
.sell-hero h1, .sell-hero .eyebrow, .sell-hero p,
.slide-title, .slide-eyebrow, .slide-desc,
h1 span, h2 span, h3 span {
  background: transparent !important;
  background-color: transparent !important;
  box-decoration-break: clone;
}

/* Sell page title - single line on desktop, wraps on mobile if needed */
.sell-hero h1 {
  font-size: clamp(1.6rem, 5vw, 3.2rem) !important;
}
@media (max-width: 480px) {
  .sell-hero h1 { white-space: normal !important; font-size: 1.8rem !important; }
}

/* ============================================================
   TESTIMONIALS - star ratings, photo avatars, Google link
   ============================================================ */
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 12px;
  font-size: 14px;
}
.star-filled { color: #E87722; }
.star-empty { color: var(--obsidian-edge); }

.testimonial-avatar-img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--obsidian-edge);
}

.testimonial-google-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--obsidian-edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.testimonial-google-link:hover { color: #4285F4; }

/* ============================================================
   RETURN POLICY BADGE - Product page + Cart
   ============================================================ */
.tl-return-policy-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 0.85rem;
}
.tl-return-policy-badge svg { flex-shrink: 0; }
.tl-return-policy-badge span { flex: 1; color: var(--offwhite-dim); }
.tl-return-policy-badge a {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  flex-shrink: 0;
}
.tl-return-policy-badge a:hover { color: #E87722; }

/* Cart-wide reminder badge (above totals) - dark theme */
.woocommerce-cart .tl-return-policy-cart {
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  margin-bottom: 16px;
}

/* Per-cart-item badge - small pill shown under each product name */
.tl-return-policy-cart-item {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--obsidian-edge);
  border-radius: 20px;
  background: var(--obsidian-mid);
}
.tl-return-policy-cart-item span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   MOBILE NAV - expandable submenus (tap to open, not hover)
   ============================================================ */
#mobile-nav li { position: relative; }
#mobile-nav .sub-menu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid var(--obsidian-edge);
  margin-left: 4px;
}
#mobile-nav li.tl-mobile-submenu-open > .sub-menu { display: flex; }
#mobile-nav .sub-menu a { font-size: 1.1rem; padding: 10px 0; }
#mobile-nav li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mobile-nav .tl-mobile-submenu-toggle {
  background: none;
  border: none;
  color: var(--offwhite-dim);
  font-size: 20px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
#mobile-nav li.tl-mobile-submenu-open > .tl-mobile-submenu-toggle-wrap .tl-mobile-submenu-toggle {
  transform: rotate(45deg);
}

/* ============================================================
   HERO SLIDER MOBILE - FINAL OVERRIDE (highest source-order
   priority). Guarantees no black gap below the slider on any
   phone width, regardless of any earlier conflicting rule.
   ============================================================ */
@media (max-width: 1024px) {
  .hero-slider {
    height: auto !important;
    min-height: 0 !important;
  }
  .slide {
    position: relative !important;
  }
  .slide:not(.active) {
    display: none !important;
  }
  .slide-image-panel {
    min-height: 60vw;
    max-height: 70vw;
  }
}
@media (max-width: 480px) {
  .slide-image-panel {
    min-height: 64vw;
    max-height: 80vw;
  }
}

/* Make room for the pulse dot indicator on nav items using it */
#primary-nav li.tl-nav-pulse > a,
#primary-nav li a[href*="mysrt.in"],
#primary-nav li a[href*="myplants.cc"] {
  margin-left: 10px;
}
#mobile-nav li.tl-nav-pulse > a,
#mobile-nav li a[href*="mysrt.in"],
#mobile-nav li a[href*="myplants.cc"] {
  margin-left: 14px;
}

/* ============================================================
   WOOCOMMERCE BLOCKS - Cart & Checkout (React-based blocks,
   different markup from classic shortcodes). Site uses the
   block-based Cart/Checkout pages, so this is the styling
   that actually applies on the live site.
   ============================================================ */

/* Shared dark theme base for both blocks */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
  color: var(--offwhite) !important;
}
.wc-block-components-main,
.wc-block-components-sidebar {
  color: var(--offwhite) !important;
}

/* ---- CART BLOCK ---- */
.wc-block-cart-items {
  border: none !important;
}
.wc-block-cart-items__header {
  border-bottom: 1px solid var(--obsidian-edge) !important;
}
.wc-block-cart-items__header-text {
  color: var(--offwhite-dim) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wc-block-cart-item {
  border-bottom: 1px solid var(--obsidian-edge) !important;
}
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
  color: var(--offwhite) !important;
  font-weight: 600;
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-product-price,
.wc-block-components-product-price__value {
  color: var(--offwhite) !important;
}
.wc-block-components-sale-badge {
  background: rgba(184,92,92,0.15) !important;
  color: #D98080 !important;
  border: none !important;
}

/* Quantity stepper - THE critical fix: make it visible on dark bg */
.wc-block-components-quantity-selector {
  border: 1px solid var(--obsidian-edge) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--obsidian-mid) !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector__input {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border: none !important;
}
.wc-block-components-quantity-selector__button {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border: none !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: #E87722 !important;
  color: #fff !important;
}
.wc-block-components-quantity-selector__button-minus {
  border-right: 1px solid var(--obsidian-edge) !important;
}
.wc-block-components-quantity-selector__button-plus {
  border-left: 1px solid var(--obsidian-edge) !important;
}

/* Remove item link/button */
.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata .wc-block-cart-item__remove-link {
  color: #D98080 !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wc-block-cart-item__remove-link:hover { color: #B85C5C !important; }

/* Cart totals sidebar */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item {
  color: var(--offwhite) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: var(--offwhite) !important;
}
.wc-block-components-totals-item__description {
  color: var(--offwhite-dim) !important;
}
.wc-block-cart__totals-title {
  color: var(--offwhite) !important;
}
.wc-block-components-panel,
.wc-block-components-totals-coupon {
  border-color: var(--obsidian-edge) !important;
}
.wc-block-components-totals-coupon__input input {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border-color: var(--obsidian-edge) !important;
}
.wc-block-components-totals-coupon__button {
  background: var(--obsidian-soft) !important;
  color: var(--offwhite) !important;
  border-color: var(--obsidian-edge) !important;
}

/* Checkout button on cart */
.wc-block-cart__submit-container .wp-element-button,
.wc-block-proceed-to-checkout-block .wp-block-button__link {
  background: #E87722 !important;
  color: #fff !important;
  border: none !important;
}
.wc-block-cart__submit-container .wp-element-button:hover {
  background: #FF8C35 !important;
}

/* ---- CHECKOUT BLOCK ---- */
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
  color: var(--offwhite) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__description {
  color: var(--offwhite) !important;
}
.wc-block-components-checkout-step {
  border-color: var(--obsidian-edge) !important;
}

/* Text inputs - the white unstyled fields seen in screenshots */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border: 1px solid var(--obsidian-edge) !important;
  border-radius: var(--radius-sm) !important;
}
.wc-block-components-text-input label {
  color: var(--offwhite-dim) !important;
  background: transparent !important;
}
.wc-block-components-text-input input:focus,
.wc-block-checkout input:focus {
  border-color: #E87722 !important;
  outline: none !important;
}

/* Country/State select dropdowns */
.wc-block-components-country-input .components-combobox-control__input,
.wc-block-components-state-input .components-combobox-control__input,
.wc-block-checkout select {
  background: var(--obsidian-mid) !important;
  color: var(--offwhite) !important;
  border: 1px solid var(--obsidian-edge) !important;
}

/* Ship / Pickup toggle buttons */
.wc-block-checkout__shipping-option,
.wc-block-components-radio-control-accordion-option {
  background: var(--obsidian-soft) !important;
  border: 1px solid var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
}
.wc-block-checkout__shipping-option--selected,
.wc-block-components-radio-control-accordion-option--checked {
  border-color: #E87722 !important;
  background: var(--obsidian-mid) !important;
}

/* Payment method radio options */
.wc-block-components-radio-control__option {
  background: var(--obsidian-soft) !important;
  border-color: var(--obsidian-edge) !important;
  color: var(--offwhite) !important;
}
.wc-block-components-radio-control__option--checked {
  border-color: #E87722 !important;
}
.wc-block-components-radio-control__label {
  color: var(--offwhite) !important;
}
.wc-block-components-radio-control__description {
  color: var(--offwhite-dim) !important;
}

/* Order summary sidebar */
.wc-block-components-order-summary,
.wc-block-components-order-summary-item {
  color: var(--offwhite) !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__quantity {
  color: var(--offwhite-dim) !important;
}

/* Fix vertical single-letter text wrap bug - product name column
   was too narrow combined with long attribute text and no proper
   word-break, causing CSS to wrap one character per line. */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-metadata {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100%;
}
.wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
.wc-block-components-order-summary-item__image {
  flex-shrink: 0;
}
.wc-block-components-order-summary-item__content {
  flex: 1;
  min-width: 0;
}
.wc-block-components-order-summary-item__name {
  font-size: 0.85rem;
  line-height: 1.4;
}
/* Hide verbose variation/attribute meta rows entirely - keep
   checkout short and scannable (product name + price only) */
.wc-block-components-order-summary-item .wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  display: none !important;
}

/* Express checkout (PayPal / card) buttons stay branded, no change needed */

/* Proceed/Place order button */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wp-element-button {
  background: #E87722 !important;
  color: #fff !important;
  border: none !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: #FF8C35 !important;
}

/* Checkboxes */
.wc-block-components-checkbox input[type="checkbox"] {
  accent-color: #E87722;
}
.wc-block-components-checkbox label {
  color: var(--offwhite-dim) !important;
}


/* ============================================================
   MOBILE HEADER-TO-CONTENT GAP - comprehensive final safeguard
   Zeroes out any possible accumulated margin/padding between
   the fixed header and the first visible content block.
   ============================================================ */
@media (max-width: 1024px) {
  #page-wrap > *:first-child {
    margin-top: 0 !important;
  }
  .promo-banner,
  .discount-countdown-strip,
  .marquee-bar,
  .hero-slider {
    margin-top: 0 !important;
  }
  .promo-banner:empty,
  .discount-countdown-strip:empty,
  .marquee-bar:empty {
    display: none !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   SHOP SIDEBAR FILTERS - layout, price slider, chips, swatches
   ============================================================ */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

.shop-sidebar {
  position: sticky;
  top: 100px;
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 24px;
}
.shop-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--obsidian-edge);
}
.shop-sidebar-header h3 {
  font-size: 1rem;
  color: var(--offwhite);
  margin: 0;
}
.shop-filter-clear {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E87722;
  text-decoration: underline;
}

.shop-filter-group {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--obsidian-edge);
}
.shop-filter-group:last-of-type { border-bottom: none; margin-bottom: 16px; }
.shop-filter-group h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  margin-bottom: 16px;
}

/* Mobile filter toggle button (hidden on desktop) */
.shop-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.shop-filter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E87722;
}

@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-mobile-filter-btn { display: inline-flex; }
  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 9000;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 8px 0 32px rgba(0,0,0,0.4);
  }
  .shop-sidebar.shop-sidebar-open {
    transform: translateX(0);
  }
}

/* ============================================================
   CHECKOUT / CART - kill all top gaps above the content
   The Blocks-based Checkout/Cart pages reserve title space
   from the block editor that our .page-hero hide rule doesn't
   fully account for. This forces zero extra space above content.
   ============================================================ */
.woocommerce-checkout #main-content,
.woocommerce-cart #main-content {
  padding-top: 0 !important;
}
.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout h1.entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-cart .wp-block-post-title {
  margin: 0 !important;
  padding: 24px 0 !important;
}
.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wc-block-cart {
  margin-top: 0 !important;
}
/* Remove the reserved blank space when page-hero/shop-hero is hidden */
.woocommerce-checkout .page-hero,
.woocommerce-cart .page-hero {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Sidebar empty space fix - footer area / left column on checkout
   was showing a large empty box (the contact-info footer column
   rendering empty/misaligned next to the form). Ensure footer
   columns don't create phantom height when content is sparse. */
.site-footer .footer-col:empty,
.site-footer .footer-contact-info:empty {
  display: none !important;
}

/* overflow/word-break rules consolidated into the permanent checkout layout block below */

/* Note: a 3-column checkout grid was attempted here previously using
   CSS Grid + :has() selectors targeting WooCommerce Blocks' internal
   structure. It caused layout corruption (large empty boxes, content
   displaced into wrong columns) because the Blocks DOM structure
   didn't match what the grid rules assumed. Reverted to the standard
   2-column (form + order summary sidebar) layout, which is reliable
   across WooCommerce versions. A true 3-column layout would need to
   be rebuilt using the Checkout block's official "Additional fields"
   / block-area customization in the block editor rather than CSS
   grid overrides on top of unstable internal class names.
   ============================================================ */

/* ============================================================
   SHOP SIDEBAR - extra widgets (Appearance > Widgets > Shop
   Sidebar) styled to match the dark theme, shown below the
   built-in Price/Size/Color filters.
   ============================================================ */
.shop-sidebar-widgets {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--obsidian-edge);
}
.shop-sidebar-widgets .widget {
  margin-bottom: 24px;
}
.shop-sidebar-widgets .widget:last-child { margin-bottom: 0; }
.shop-sidebar-widgets .widget-title,
.shop-sidebar-widgets h2,
.shop-sidebar-widgets h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  margin-bottom: 14px;
}
.shop-sidebar-widgets ul { list-style: none; padding: 0; margin: 0; }
.shop-sidebar-widgets li {
  padding: 8px 0;
  border-bottom: 1px solid var(--obsidian-edge);
  font-size: 0.85rem;
}
.shop-sidebar-widgets li:last-child { border-bottom: none; }
.shop-sidebar-widgets a {
  color: var(--offwhite);
  text-decoration: none;
}
.shop-sidebar-widgets a:hover { color: #E87722; }
.shop-sidebar-widgets input[type="text"],
.shop-sidebar-widgets input[type="search"] {
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: 8px;
}
.shop-sidebar-widgets button,
.shop-sidebar-widgets input[type="submit"] {
  background: var(--obsidian-mid);
  border: 1px solid var(--obsidian-edge);
  color: var(--offwhite);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.shop-sidebar-widgets button:hover { background: #E87722; border-color: #E87722; }

/* WooCommerce native filter widgets - price slider, attribute
   checkboxes, rating filter, active filters list - dark theme */
.shop-sidebar-widgets .widget_price_filter .price_slider_amount {
  color: var(--offwhite-dim);
}
.shop-sidebar-widgets .widget_price_filter .price_slider_amount .button {
  background: #E87722;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  padding: 6px 14px;
}
.shop-sidebar-widgets .price_slider_wrapper .ui-slider {
  background: var(--obsidian-edge);
  height: 4px;
  border: none;
}
.shop-sidebar-widgets .price_slider_wrapper .ui-slider .ui-slider-range {
  background: #E87722;
}
.shop-sidebar-widgets .price_slider_wrapper .ui-slider .ui-slider-handle {
  background: #E87722;
  border: 2px solid var(--obsidian);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: -6px;
}
.shop-sidebar-widgets .wc-layered-nav-rating a,
.shop-sidebar-widgets .wc-layered-nav li a {
  color: var(--offwhite-dim);
}
.shop-sidebar-widgets .wc-layered-nav li a:hover { color: #E87722; }
.shop-sidebar-widgets .wc-block-active-filters,
.shop-sidebar-widgets .wc-block-attribute-filter,
.shop-sidebar-widgets .wc-block-rating-filter {
  color: var(--offwhite-dim);
}

/* ============================================================
   CHECKOUT - permanent 2-column layout
   Based on the layout that actually works on the live site
   (verified by user). Uses flex (not grid) to avoid fighting
   WooCommerce Blocks' own internal flex structure.
   ============================================================ */

/* Force the WooCommerce block checkout into a sane 2-column layout */
.wp-block-woocommerce-checkout.wc-block-checkout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.wc-block-checkout__main {
  flex: 1 1 60%;
  min-width: 320px;
}
.wc-block-checkout__sidebar {
  flex: 1 1 360px;
  min-width: 300px;
  max-width: 400px;
}
/* Stop text breaking mid-word inside the order summary */
.wc-block-checkout__sidebar,
.wc-block-checkout__sidebar * {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
/* Make sure form fields actually fill their column */
.wc-block-checkout__main input[type="text"],
.wc-block-checkout__main input[type="email"],
.wc-block-checkout__main input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .wp-block-woocommerce-checkout.wc-block-checkout {
    flex-direction: column;
  }
}

/* ============================================================
   SHOP PAGE - remove any gap between header and shop-hero
   ============================================================ */
.shop-section-no-gap {
  padding-top: 40px;
}
body.post-type-archive-product #main-content,
body.tax-product_cat #main-content {
  padding-top: 0 !important;
}
.shop-hero {
  margin-top: 0 !important;
}

/* Mobile filter toggle - only relevant when sidebar widgets exist */
@media (max-width: 900px) {
  .shop-mobile-filter-btn { display: inline-flex; }
}

/* ============================================================
   PRODUCT ATTRIBUTES TABLE (Size, Color, Material, etc.)
   ============================================================ */
.product-attributes-table {
  margin-bottom: 28px;
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-edge);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.product-attributes-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offwhite-dim);
  margin-bottom: 14px;
}
.product-attributes-table table {
  width: 100%;
  border-collapse: collapse;
}
.product-attributes-table th,
.product-attributes-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--obsidian-edge);
  text-align: left;
  font-size: 0.88rem;
}
.product-attributes-table tr:last-child th,
.product-attributes-table tr:last-child td {
  border-bottom: none;
}
.product-attributes-table th {
  color: var(--offwhite-dim);
  font-weight: 600;
  width: 35%;
}
.product-attributes-table td {
  color: var(--offwhite);
}

/* ============================================================
   SHOP SIDEBAR - filter widget Apply button visibility
   Covers both the classic "Filter Products by Attribute" widget
   (which has a built-in Apply button, .wc-layered-nav-rating /
   button.wc-layered-nav-filter) and ensures it's never
   accidentally hidden by our dark-theme overrides.
   ============================================================ */
.shop-sidebar-widgets button[type="submit"],
.shop-sidebar-widgets .wc-layered-nav-rating .button,
.shop-sidebar-widgets .button.wc-layered-nav-filter,
.shop-sidebar-widgets .woocommerce-widget-layered-nav-list .button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #E87722;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 12px;
}
.shop-sidebar-widgets button[type="submit"]:hover,
.shop-sidebar-widgets .wc-layered-nav-rating .button:hover {
  background: #FF8C35;
}

/* JS-injected Apply button (added as a fallback when no native
   button exists in the widget markup at all) */
.shop-sidebar-widgets .tl-filter-apply-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: #E87722;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.shop-sidebar-widgets .tl-filter-apply-btn:hover { background: #FF8C35; }

/* Edit Cart link on Checkout */
.tl-checkout-edit-cart {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 16px;
}
.tl-checkout-edit-cart a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--offwhite-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tl-checkout-edit-cart a:hover { color: #E87722; }