/*
Theme Name: Phoenix Custom Designs
Theme URI: https://phoenixcd.co.uk
Author: Bokar Solutions
Author URI: https://www.bokarsolutions.co.uk
Description: A bold, dark WooCommerce Divi child theme for Phoenix Custom Designs.
Template: Divi
Version: 1.0.21
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 10.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoenix
Tags: woocommerce, dark, ecommerce, custom-merchandise, teamwear, sports
*/

/* =============================================
   DESIGN SYSTEM — CSS VARIABLES
============================================= */
:root {
  /* Brand Colours — matched to Phoenix Custom Designs screenshot */
  --gold:        #C9971C;   /* Warm amber gold — matches CTA buttons in screenshot */
  --gold-light:  #DFB040;   /* Lighter hover state */
  --gold-dark:   #A07010;   /* Darker pressed state */
  --gold-bg:     rgba(201,151,28,0.08); /* Subtle gold tint for backgrounds */
  --black:       #0D0D0D;   /* Page background — near-black, not pure black */
  --dark:        #111111;   /* Section dark */
  --dark-2:      #191919;   /* Card / header backgrounds */
  --dark-3:      #222222;   /* Input backgrounds */
  --dark-4:      #2E2E2E;   /* Borders / dividers */
  --dark-5:      #3A3A3A;   /* Hover borders */
  --white:       #FFFFFF;
  --grey-light:  #B0B0B0;   /* Body / secondary text */
  --grey-mid:    #6B6B6B;   /* Placeholder / muted */
  --grey-dark:   #3A3A3A;
  --success:     #4CAF50;
  --error:       #E53935;

  /* Typography */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', sans-serif;
  --font-accent:  'Barlow Condensed', sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Layout */
  --container: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-gold: 0 0 30px rgba(201, 168, 76, 0.15);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.7);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* =============================================
   TYPOGRAPHY
============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.8rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

.text-gold { color: var(--gold); }
.text-grey { color: var(--grey-light); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-accent { font-family: var(--font-accent); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* =============================================
   LAYOUT
============================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
}

.section { padding: var(--space-2xl) 0; }
.section--lg { padding: var(--space-3xl) 0; }
.section--dark { background-color: var(--dark); }
.section--dark-2 { background-color: var(--dark-2); }

/* =============================================
   BUTTONS
============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 32px;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: var(--gold);
  color: var(--black);
}
.btn--primary:hover {
  background: var(--gold-light);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201,168,76,0.4);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn--outline:hover {
  background: var(--white);
  color: var(--black);
  transform: translateY(-2px);
}

.btn--outline-gold {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn--outline-gold:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
}

.btn--sm { padding: 10px 20px; font-size: 0.75rem; }
.btn--lg { padding: 18px 48px; font-size: 1rem; }

/* WooCommerce button override */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: var(--gold);
  color: var(--black) !important;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--gold-light);
  color: var(--black) !important;
  transform: translateY(-2px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--gold);
  color: var(--black) !important;
}

/* =============================================
   GOLD DIVIDER
============================================= */
.gold-line {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: var(--space-md) 0;
}
.gold-line--center { margin: var(--space-md) auto; }

/* =============================================
   SECTION HEADINGS
============================================= */
.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section-header .eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.section-header h2 { color: var(--white); }
.section-header p {
  color: var(--grey-light);
  max-width: 560px;
  margin: var(--space-md) auto 0;
  font-size: 1.05rem;
}

/* =============================================
   HEADER / NAVIGATION
============================================= */
#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-4);
  transition: all var(--transition);
}

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

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.site-logo img { height: 44px; width: auto; }
.site-logo .logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.site-logo .logo-text span { color: var(--gold); display: block; font-size: 0.7rem; letter-spacing: 0.2em; }

/* Primary Nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav ul li a {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.primary-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item > a {
  color: var(--white);
}
.primary-nav ul li a:hover::after,
.primary-nav ul li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Dropdown */
.primary-nav ul li.menu-item-has-children { position: relative; }
.primary-nav ul li.menu-item-has-children > a::before {
  content: '▾';
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  color: var(--gold);
}
.primary-nav ul li .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-card);
  flex-direction: column;
  gap: 0;
  z-index: 100;
}
.primary-nav ul li:hover .sub-menu { display: flex; }
.primary-nav ul li .sub-menu li a {
  padding: 10px 20px;
  border-radius: 0;
  font-size: 0.8rem;
}
.primary-nav ul li .sub-menu li a::after { display: none; }
.primary-nav ul li .sub-menu li a:hover { background: var(--dark-4); color: var(--gold); }

/* Header Icons */
.header-icons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--grey-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.header-icon:hover { color: var(--gold); }
.header-icon svg { width: 20px; height: 20px; }

/* Cart count badge */
.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--gold);
  color: var(--black);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  transition: all var(--transition);
}

/* Announcement bar */
.announcement-bar {
  background: var(--gold);
  color: var(--black);
  text-align: center;
  padding: 8px var(--space-md);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================
   HERO
============================================= */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(201,168,76,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
}

.hero-content .eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.hero-content h1 {
  color: var(--white);
  margin-bottom: var(--space-lg);
}
.hero-content h1 span { color: var(--gold); display: block; }

.hero-content p {
  font-size: 1.1rem;
  color: var(--grey-light);
  max-width: 480px;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.hero-badges {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--grey-light);
  text-transform: uppercase;
}
.hero-badge svg { color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }

.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image img {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
}
.hero-image-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(201,168,76,0.2), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
}

/* =============================================
   CATEGORY GRID
============================================= */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.category-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.category-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.category-card:hover img { transform: scale(1.06); }

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  transition: all var(--transition);
}

.category-card h3 {
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.category-card .btn {
  align-self: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--transition);
}
.category-card:hover .btn {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   TRUST BADGES
============================================= */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--dark-4);
  border-bottom: 1px solid var(--dark-4);
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}
.trust-badge-icon {
  width: 56px; height: 56px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.trust-badge-icon svg { width: 24px; height: 24px; }
.trust-badge h4 {
  font-size: 0.9rem;
  font-family: var(--font-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.trust-badge p {
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: 1.5;
}

/* =============================================
   PRODUCT CARDS
============================================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.products-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.products-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.product-card {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition);
  position: relative;
}
.product-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--dark-3);
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover .product-card-image img { transform: scale(1.04); }

.product-badge {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  z-index: 2;
}
.product-badge.sale { background: #E53935; color: #fff; }

.product-card-actions {
  position: absolute;
  bottom: var(--space-md); right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateX(8px);
  transition: all var(--transition);
  z-index: 2;
}
.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
}
.product-card-action {
  width: 36px; height: 36px;
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all var(--transition);
}
.product-card-action:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.product-card-action svg { width: 16px; height: 16px; }

.product-card-body {
  padding: var(--space-md);
}
.product-card-body .product-cat {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-xs);
}
.product-card-body h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: var(--space-sm);
}
.product-card-body h3 a:hover { color: var(--gold); }

.product-price {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.product-price .amount {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.product-price del .amount {
  font-size: 0.85rem;
  color: var(--grey-mid);
  font-weight: 400;
}
.product-price ins { text-decoration: none; }
.product-price ins .amount { color: var(--gold); }

.product-card .add-to-cart-btn {
  width: 100%;
  justify-content: center;
}

/* WooCommerce product list compat */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); margin: 0; padding: 0; }
.woocommerce ul.products li.product { margin: 0; background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition); }
.woocommerce ul.products li.product:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.woocommerce ul.products li.product a img { width:100%; aspect-ratio:1; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-size:0.95rem; font-weight:600; text-transform:none; letter-spacing:0; color:var(--white); padding: var(--space-md) var(--space-md) var(--space-xs); }
.woocommerce ul.products li.product .price { display:block; padding: 0 !important; color:var(--gold); font-weight:700; white-space:normal; }

/* Remove padding/margin causing price range to split */
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.woocommerce ul.products li.product .price > span[aria-hidden="true"] {
    display: inline !important;
    padding: 0 !important;
    margin: 0 2px !important;
    white-space: normal !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { display:inline !important; white-space:nowrap !important; }
.woocommerce ul.products li.product .price > span { display:inline !important; }
.woocommerce ul.products li.product .price .screen-reader-text { display:none !important; }
.woocommerce ul.products li.product a.button { margin: 0 var(--space-md) var(--space-md); }

/* =============================================
   HOW IT WORKS
============================================= */
.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
}
.how-it-works-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 20px);
  right: calc(12.5% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 25%, transparent 75%, var(--gold));
  background: repeating-linear-gradient(90deg, var(--dark-4) 0, var(--dark-4) 8px, transparent 8px, transparent 16px);
  z-index: 0;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}

.step-number {
  width: 56px; height: 56px;
  background: var(--dark-3);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  flex-shrink: 0;
}

.step-card h4 {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
}
.step-card p {
  font-size: 0.85rem;
  color: var(--grey-light);
  line-height: 1.6;
}

/* =============================================
   DELIVERY BANNER
============================================= */
.delivery-banner {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.delivery-banner-text {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.delivery-banner-text svg {
  width: 40px; height: 40px;
  color: var(--gold);
  flex-shrink: 0;
}
.delivery-banner-text strong {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.delivery-banner-text span {
  font-size: 0.8rem;
  color: var(--grey-light);
}

/* =============================================
   SOCIAL PROOF STRIP
============================================= */
.social-proof-strip {
  background: var(--dark-3);
  border-top: 1px solid var(--dark-4);
  border-bottom: 1px solid var(--dark-4);
  padding: var(--space-xl) 0;
}
.social-proof-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.proof-item svg { width: 36px; height: 36px; color: var(--gold); margin: 0 auto var(--space-sm); }
.proof-item strong {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-xs);
}
.proof-item span { font-size: 0.75rem; color: var(--grey-light); }

/* =============================================
   TEAM LOGOS (club clients)
============================================= */
.clubs-strip {
  overflow: hidden;
  position: relative;
}
.clubs-strip::before,
.clubs-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
}
.clubs-strip::before { left: 0; background: linear-gradient(90deg, var(--dark), transparent); }
.clubs-strip::after  { right: 0; background: linear-gradient(-90deg, var(--dark), transparent); }

.clubs-track {
  display: flex;
  gap: var(--space-2xl);
  align-items: center;
  animation: scroll-clubs 30s linear infinite;
  width: max-content;
}
.clubs-track img { height: 48px; width: auto; filter: brightness(0.6) grayscale(1); transition: all var(--transition); }
.clubs-track img:hover { filter: brightness(1) grayscale(0); }

@keyframes scroll-clubs {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================
   FOOTER
============================================= */
#colophon {
  margin-top: 15px;
  background: var(--dark-2);
  border-top: 1px solid var(--dark-4);
}

.footer-top {
  padding: var(--space-2xl) 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
}

.footer-brand .logo-text {
  font-family: var(--font-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.footer-brand .logo-text span { color: var(--gold); display: block; font-size: 0.8rem; letter-spacing: 0.2em; }
.footer-brand p { font-size: 0.85rem; color: var(--grey-light); line-height: 1.7; margin-bottom: var(--space-lg); }

.footer-socials {
  display: flex;
  gap: var(--space-sm);
}
.footer-social {
  width: 36px; height: 36px;
  background: var(--dark-4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-light);
  transition: all var(--transition);
}
.footer-social:hover { background: var(--gold); color: var(--black); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h5 {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--dark-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col ul li a {
  font-size: 0.85rem;
  color: var(--grey-light);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.footer-col ul li a:hover { color: var(--gold); padding-left: 4px; }

/* Newsletter */
.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: var(--dark-4);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--white);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition);
}
.newsletter-form input[type="email"]:focus { border-color: var(--gold); }
.newsletter-form input[type="email"]::placeholder { color: var(--grey-mid); }

.footer-bottom {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--dark-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.footer-bottom p { font-size: 0.8rem; color: var(--grey-mid); margin: 0; }
.footer-bottom-links {
  display: flex;
  gap: var(--space-lg);
}
.footer-bottom-links a { font-size: 0.8rem; color: var(--grey-mid); transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--gold); }

/* =============================================
   WOOCOMMERCE — SHOP PAGE
============================================= */
.woocommerce-page .page-hero {
  background: var(--dark-2);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--dark-4);
  text-align: center;
}
.woocommerce-page .page-hero h1 { color: var(--white); }
.woocommerce-page .page-hero p { color: var(--grey-light); }

.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0;
}

/* Sidebar */
.shop-sidebar { position: sticky; top: 90px; }
.sidebar-widget {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.sidebar-widget h4 {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--dark-4);
}
.sidebar-widget ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.sidebar-widget ul li a {
  font-size: 0.85rem;
  color: var(--grey-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition);
}
.sidebar-widget ul li a:hover { color: var(--gold); }
.sidebar-widget ul li a .count {
  background: var(--dark-4);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: var(--grey-mid);
}

/* Shop toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--dark-4);
}
.woocommerce-result-count { font-size: 0.85rem; color: var(--grey-light); margin: 0; }
.woocommerce-ordering select {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 8px 14px;
  font-size: 0.85rem;
  outline: none;
  appearance: none;
  cursor: pointer;
}

/* Pagination */
.woocommerce-pagination ul {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-xl);
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--grey-light);
  transition: all var(--transition);
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

/* =============================================
   WOOCOMMERCE — SINGLE PRODUCT
============================================= */
.single-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0;
}

/* Product gallery */
.woocommerce-product-gallery {
  position: sticky;
  top: 90px;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--dark-4);
}

/* Product summary */
.single-product-summary { padding: var(--space-lg) 0; }

.woocommerce-product-details__short-description { margin-bottom: var(--space-lg); }
.woocommerce-product-details__short-description p { color: var(--grey-light); line-height: 1.7; }

.entry-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: var(--space-md);
}

.product-price-single {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: var(--space-lg);
}
.product-price-single del { font-size: 1.5rem; color: var(--grey-mid); margin-right: var(--space-md); }
.product-price-single ins { text-decoration: none; }

/* Quantity */
.quantity input[type=number] {
  width: 80px;
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 1rem;
  padding: 12px;
  text-align: center;
  outline: none;
}
.quantity input[type=number]:focus { border-color: var(--gold); }

.cart-form { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-lg); }

/* Variations */
.variations select {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 10px 14px;
  font-size: 0.9rem;
  outline: none;
  width: 100%;
}
.variations select:focus { border-color: var(--gold); }
.variations label { font-size: 0.8rem; font-weight: 600; color: var(--grey-light); letter-spacing: 0.05em; text-transform: uppercase; }
.variations td { padding: var(--space-sm) 0; }

/* Product meta */
.product_meta { font-size: 0.8rem; color: var(--grey-mid); }
.product_meta span { display: block; margin-bottom: var(--space-xs); }
.product_meta a { color: var(--gold); }

/* Product tabs */
.woocommerce-tabs {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--dark-4);
  padding-top: var(--space-xl);
}
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--dark-4);
}
.woocommerce-tabs ul.tabs li {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 24px;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-bottom: none;
  transition: all var(--transition);
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--gold); background: var(--dark-3); }
.woocommerce-tabs .panel { color: var(--grey-light); line-height: 1.8; }
body.woocommerce .woocommerce-tabs{ border: none !important;}

/* =============================================
   CART & CHECKOUT
============================================= */
.woocommerce-cart-form table,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce table.shop_table thead th {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding: var(--space-md);
  border-bottom: 1px solid var(--dark-4);
  text-align: left;
}
.woocommerce table.shop_table tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--dark-4);
  vertical-align: middle;
  color: var(--white);
}
.woocommerce table.shop_table .product-name a { color: var(--white); }
.woocommerce table.shop_table .product-name a:hover { color: var(--gold); }
.woocommerce-cart .cart-collaterals { margin-top: var(--space-xl); }

/* Cart totals */
.cart_totals h2, .order-total th {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.woocommerce .cart_totals table { background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius-md); }
.woocommerce .order-total .amount { color: var(--gold); font-size: 1.5rem; font-weight: 700; }

/* Checkout form */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--dark-4);
}
.woocommerce form .form-row label { font-size: 0.8rem; color: var(--grey-light); margin-bottom: var(--space-xs); display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--dark-2);
  border: 1px solid var(--dark-4);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 12px 14px;
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  transition: border-color var(--transition);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--gold); }

/* =============================================
   BREADCRUMBS
============================================= */
.woocommerce-breadcrumb {
  font-size: 0.8rem;
  color: var(--grey-mid);
  padding: var(--space-md) 0;
}
.woocommerce-breadcrumb a { color: var(--grey-mid); }
.woocommerce-breadcrumb a:hover { color: var(--gold); }

/* =============================================
   NOTICES
============================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}
.woocommerce-message { background: rgba(76,175,80,0.1); border-left: 4px solid var(--success); color: var(--white); }
.woocommerce-info { background: rgba(201,168,76,0.1); border-left: 4px solid var(--gold); color: var(--white); }
.woocommerce-error { background: rgba(229,57,53,0.1); border-left: 4px solid var(--error); color: var(--white); }

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1024px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-badges { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .shop-layout { grid-template-columns: 220px 1fr; }
  .how-it-works-steps { grid-template-columns: repeat(2, 1fr); }
  .how-it-works-steps::before { display: none; }
}

@media (max-width: 768px) {
  .primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-image { display: none; }
  .hero-buttons { justify-content: center; }
  .hero-badges { justify-content: center; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr); }
  .social-proof-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-badges { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; }
  .single-product-layout { grid-template-columns: 1fr; }
  .woocommerce-product-gallery { position: static; }
  .delivery-banner { flex-direction: column; text-align: center; }
  .how-it-works-steps { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
}

/* =============================================
   MOBILE NAV OPEN
============================================= */
body.nav-open .primary-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--black);
  padding: var(--space-xl);
  overflow-y: auto;
  z-index: 999;
}
body.nav-open .primary-nav ul {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
body.nav-open .primary-nav ul li { width: 100%; }
body.nav-open .primary-nav ul li a { font-size: 1.2rem; padding: var(--space-md) 0; border-bottom: 1px solid var(--dark-4); }
body.nav-open .primary-nav ul li .sub-menu { position: static; display: flex; background: transparent; border: none; padding-left: var(--space-lg); }

/* =============================================
   UTILS
============================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mt-xl { margin-top: var(--space-xl); }
.mb-xl { margin-bottom: var(--space-xl); }
.hidden { display: none !important; }

/* =============================================
   DIVI PAGE BUILDER — THEME INTEGRATION
   Styles that make Divi work seamlessly with
   the Phoenix dark theme colour scheme.
============================================= */

/* Full-width Divi page — no container constraints */
.divi-page-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Force Divi sections to respect our dark theme */
body.et-pb-page .et_pb_section {
    background-color: var(--dark);
}
body.et-pb-page .et_pb_section.et_pb_section_0 {
    padding-top: 0;
}

/* Divi text colours */
body.et-pb-page .et_pb_text,
body.et-pb-page .et_pb_text p,
body.et-pb-page .et_pb_module p {
    color: var(--grey-light);
}
body.et-pb-page h1,
body.et-pb-page h2,
body.et-pb-page h3,
body.et-pb-page h4,
body.et-pb-page h5,
body.et-pb-page h6 {
    color: var(--white);
}

/* Divi WooCommerce shop module — style product cards */
body.et-pb-page .et_pb_shop .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}
@media (max-width: 980px) {
    body.et-pb-page .et_pb_shop .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    body.et-pb-page .et_pb_shop .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

body.et-pb-page .et_pb_shop .woocommerce ul.products li.product {
    background: var(--dark-2);
    border: 1px solid var(--dark-4);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition);
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    text-transform: none;
    letter-spacing: 0;
    padding: var(--space-md) var(--space-md) var(--space-xs);
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product .price {
    display: block;
    padding: 0 var(--space-md) var(--space-sm);
    color: var(--gold);
    font-weight: 700;
    font-family: var(--font-accent);
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product a.button {
    margin: 0 var(--space-md) var(--space-md);
    background: var(--gold);
    color: var(--black);
    border-radius: var(--radius-sm);
    font-family: var(--font-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 20px;
    border: none;
    transition: all var(--transition);
    display: inline-flex;
}
body.et-pb-page .et_pb_shop .woocommerce ul.products li.product a.button:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

/* Divi image module */
body.et-pb-page .et_pb_image {
    margin: 0;
}
body.et-pb-page .et_pb_image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Divi rows */
body.et-pb-page .et_pb_row {
    max-width: 1280px;
}
body.et-pb-page .et_pb_row.et_pb_row_fullwidth,
body.et-pb-page .et_pb_section_fullwidth .et_pb_row {
    max-width: 100%;
}

/* Divi buttons */
body.et-pb-page .et_pb_button {
    background: var(--gold) !important;
    color: var(--black) !important;
    border: 2px solid var(--gold) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    transition: all var(--transition) !important;
}
body.et-pb-page .et_pb_button:hover {
    background: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
}

/* Divi sale flash */
body.et-pb-page .woocommerce span.onsale {
    background: #E53935;
    color: #fff;
    border-radius: var(--radius-sm);
    font-family: var(--font-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: auto;
    min-height: auto;
    line-height: 1;
    padding: 4px 10px;
}

/* =============================================
   SINGLE PRODUCT PAGE — FULL OVERRIDE
   Fixes all colour + layout issues visible in
   screenshot: title purple, price green, dark
   tabs, small gallery, invisible text.
============================================= */

/* ── Page background ── */
body.single-product,
body.single-product #page,
body.single-product #main,
body.single-product .woocommerce {
    background-color: var(--black) !important;
}

/* ── Breadcrumb ── */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
    color: var(--grey-mid) !important;
    font-size: 0.8rem !important;
}
.woocommerce-breadcrumb a:hover { color: var(--gold) !important; }
.woocommerce-breadcrumb .breadcrumb-separator { color: var(--grey-mid) !important; }

/* ── Product layout grid ── */
.single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2xl) !important;
    align-items: start !important;
    padding: var(--space-xl) 0 !important;
}
.single-product div.product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 90px !important;
}
.single-product div.product .summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.single-product div.product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}
.single-product div.product .related {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

/* ── Gallery ── */
.woocommerce-product-gallery {
    background: transparent !important;
    border: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    background: var(--dark-2) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--dark-4) !important;
    overflow: hidden !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: var(--dark-2) !important;
}
/* Thumbnails strip */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}
.woocommerce-product-gallery .flex-control-thumbs li { margin: 0 !important; }
.woocommerce-product-gallery .flex-control-thumbs img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important;
    border: 2px solid var(--dark-4) !important;
    cursor: pointer !important;
    transition: border-color var(--transition) !important;
    opacity: 0.7 !important;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    border-color: var(--gold) !important;
    opacity: 1 !important;
}

/* ── Product title ── */
.single-product .entry-title,
.single-product h1.product_title,
.product_title.entry-title {
    color: var(--white) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: var(--space-md) !important;
}

/* ── Category label ── */
.single-product .posted_in,
.single-product .product_meta .posted_in a {
    color: var(--gold) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

/* ── Star rating ── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: var(--gold) !important;
}
.woocommerce .star-rating {
    color: var(--gold) !important;
}

/* ── Price — kill WooCommerce green, apply gold ── */
.single-product .price,
.single-product p.price,
.single-product span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price .amount,
.woocommerce div.product .price .woocommerce-Price-amount {
    color: var(--gold) !important;
    font-family: var(--font-display) !important;
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-lg) !important;
}
.woocommerce div.product .price del,
.woocommerce div.product .price del .amount,
.woocommerce div.product .price del .woocommerce-Price-amount {
    color: var(--grey-mid) !important;
    font-size: 1.3rem !important;
    opacity: 1 !important;
}
.woocommerce div.product .price ins {
    text-decoration: none !important;
    background: none !important;
}

/* ── Short description ── */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description li,
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--grey-light) !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
}
.woocommerce-product-details__short-description strong {
    color: var(--white) !important;
}

/* ── Variations / Size select ── */
.woocommerce div.product form.cart .variations {
    margin-bottom: var(--space-lg) !important;
    width: 100% !important;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
    padding: var(--space-sm) 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.woocommerce div.product form.cart .variations label {
    color: var(--grey-light) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding-right: var(--space-md) !important;
}
.woocommerce div.product form.cart .variations select {
    background: var(--dark-3) !important;
    border: 1px solid var(--dark-4) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--white) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    font-family: var(--font-body) !important;
    width: 100% !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: auto !important;
    transition: border-color var(--transition) !important;
}
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--gold) !important;
}
/* Reset variation link */
.woocommerce div.product form.cart .reset_variations {
    color: var(--grey-mid) !important;
    font-size: 0.75rem !important;
    display: inline-block !important;
    margin-top: 4px !important;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--gold) !important; }

/* ── Quantity ── */
.woocommerce div.product form.cart {
    display: flex !important;
    gap: var(--space-md) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: var(--space-lg) !important;
}
.woocommerce div.product form.cart .qty,
.woocommerce div.product form.cart input.qty {
    background: var(--dark-3) !important;
    border: 1px solid var(--dark-4) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--white) !important;
    font-size: 1rem !important;
    text-align: center !important;
    width: 72px !important;
    height: 48px !important;
    padding: 0 var(--space-sm) !important;
    outline: none !important;
}
.woocommerce div.product form.cart .qty:focus { border-color: var(--gold) !important; }

/* ── Add to cart button ── */
.woocommerce div.product form.cart button[type="submit"],
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: var(--gold) !important;
    color: var(--black) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 14px 36px !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    flex: 1 !important;
    min-width: 160px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--gold-light) !important;
    transform: translateY(-2px) !important;
}

/* ── Product meta (SKU, Category) ── */
.woocommerce div.product .product_meta {
    font-size: 0.8rem !important;
    color: var(--grey-mid) !important;
    border-top: 1px solid var(--dark-4) !important;
    padding-top: var(--space-md) !important;
    margin-top: var(--space-md) !important;
}
.woocommerce div.product .product_meta span { display: block; margin-bottom: 4px; }
.woocommerce div.product .product_meta a { color: var(--gold) !important; }
.woocommerce div.product .product_meta a:hover { color: var(--gold-light) !important; }

/* ── Tabs ── */
.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--space-2xl) !important;
    border-top: 1px solid var(--dark-4) !important;
    padding-top: var(--space-xl) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 var(--space-xl) 0 !important;
    border-bottom: 1px solid var(--dark-4) !important;
    display: flex !important;
    gap: 4px !important;
    list-style: none !important;
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 1px solid var(--dark-4) !important;
    border-bottom: none !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 12px 24px !important;
    font-family: var(--font-accent) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--grey-light) !important;
    background: transparent !important;
    transition: color var(--transition) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--dark-2) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--gold) !important;
}

/* Tab panels — text colour */
.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--dark-2) !important;
    border: 1px solid var(--dark-4) !important;
    border-top: none !important;
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md) !important;
    padding: var(--space-xl) !important;
    margin: 0 !important;
    display: none;
}
.woocommerce div.product .woocommerce-tabs .panel.active-panel,
.woocommerce div.product .woocommerce-tabs #tab-description,
.woocommerce div.product .woocommerce-tabs #tab-additional_information {
    display: block !important;
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product #tab-description,
.woocommerce div.product #tab-description p,
.woocommerce div.product #tab-description h1,
.woocommerce div.product #tab-description h2,
.woocommerce div.product #tab-description h3,
.woocommerce div.product #tab-description h4,
.woocommerce div.product #tab-description li {
    color: var(--grey-light) !important;
    line-height: 1.8 !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4,
.woocommerce div.product #tab-description h2,
.woocommerce div.product #tab-description h3,
.woocommerce div.product #tab-description h4 {
    color: var(--white) !important;
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    margin: var(--space-xl) 0 var(--space-md) !important;
    font-size: 1.4rem !important;
}
.woocommerce div.product .woocommerce-tabs .panel strong {
    color: var(--white) !important;
}
/* Additional info table */
.woocommerce div.product #tab-additional_information table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.woocommerce div.product #tab-additional_information table th,
.woocommerce div.product #tab-additional_information table td {
    padding: 10px var(--space-md) !important;
    border-bottom: 1px solid var(--dark-4) !important;
    color: var(--grey-light) !important;
    font-size: 0.9rem !important;
    background: transparent !important;
}
.woocommerce div.product #tab-additional_information table th {
    color: var(--white) !important;
    font-family: var(--font-accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    width: 140px !important;
}

/* ── Related products heading ── */
.related.products > h2,
.upsells.products > h2 {
    color: var(--white) !important;
    font-family: var(--font-display) !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: var(--space-xl) !important;
    padding-top: var(--space-xl) !important;
    border-top: 1px solid var(--dark-4) !important;
}

/* Related product cards */
.related.products ul.products,
.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-lg) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.related.products ul.products li.product,
.upsells.products ul.products li.product {
    background: var(--dark-2) !important;
    border: 1px solid var(--dark-4) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    transition: border-color var(--transition), transform var(--transition) !important;
}
.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
    border-color: var(--gold) !important;
    transform: translateY(-4px) !important;
}
.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
}
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
    color: var(--white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: var(--space-md) var(--space-md) var(--space-xs) !important;
}
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
    color: var(--gold) !important;
    font-family: var(--font-accent) !important;
    font-weight: 700 !important;
    padding: 0 var(--space-md) var(--space-sm) !important;
    display: block !important;
}
.related.products ul.products li.product a.button,
.upsells.products ul.products li.product a.button {
    margin: 0 var(--space-md) var(--space-md) !important;
    background: var(--gold) !important;
    color: var(--black) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    display: inline-block !important;
}
.related.products ul.products li.product a.button:hover,
.upsells.products ul.products li.product a.button:hover {
    background: var(--gold-light) !important;
}

/* ── PayPal / payment buttons area ── */
.woocommerce div.product form.cart .wc-gzd-additional-info { color: var(--grey-mid) !important; font-size: 0.75rem !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .single-product div.product {
        grid-template-columns: 1fr !important;
    }
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary {
        grid-column: 1 !important;
        position: static !important;
    }
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 14px !important;
        font-size: 0.7rem !important;
    }
}
@media (max-width: 480px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   PRODUCT PAGE — VARIATION & PAYMENT FIXES
============================================= */

/* Size label — vertically centred with dropdown */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations label {
    vertical-align: middle !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
.woocommerce div.product form.cart table.variations {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

/* PayPal "Pay in 3" message — make it readable */
.woocommerce div.product form.cart .wc-gzd-additional-info,
.woocommerce div.product .payment_method_paypal label,
.ppcp-messages,
.ppc-button-wrapper + *,
[class*="paypal"] p,
[class*="paypal-message"],
[id*="paypal-message"],
.woocommerce div.product .woocommerce-variation-add-to-cart + * p,
form.cart > p,
form.cart p,
.woocommerce form.cart .woocommerce-PaymentBox p {
    color: #B0B0B0 !important;
}
/* Catch the specific PayPal Pay Later messaging */
.woocommerce .product .payment-method-message,
.woocommerce .product [data-pp-message],
.woocommerce .product .paypal-message-component,
#ppc-button ~ p,
#ppc-button ~ div > p,
.woocommerce form.cart ~ p,
.single-product .woocommerce-variation-add-to-cart ~ p,
.single-product form.cart p {
    color: #B0B0B0 !important;
}

/* =============================================
   PRODUCT TABS — HEADING VISIBILITY & BORDER
============================================= */

/* Remove the outer box border entirely — cleaner look */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product #tab-description,
.woocommerce div.product #tab-additional_information,
.woocommerce div.product #tab-reviews {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: var(--space-xl) 0 !important;
}

/* Tab bar — clean underline style, no box */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--dark-4) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: var(--space-xl) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -2px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid var(--gold) !important;
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--grey-mid) !important;
    background: transparent !important;
    padding: 12px 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--white) !important;
}

/* Description "DESCRIPTION" h2 auto-heading — hide it, it's redundant */
.woocommerce div.product #tab-description h2:first-child {
    display: none !important;
}

/* All headings inside tabs — bright white */
.woocommerce div.product .woocommerce-tabs .panel h1,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4,
.woocommerce div.product .woocommerce-tabs .panel h5,
.woocommerce div.product #tab-description h1,
.woocommerce div.product #tab-description h2,
.woocommerce div.product #tab-description h3,
.woocommerce div.product #tab-description h4,
.woocommerce div.product #tab-description h5 {
    color: var(--white) !important;
    font-family: var(--font-display) !important;
    font-size: 1.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin: var(--space-xl) 0 var(--space-md) !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}
/* Gold left accent on section headings */
.woocommerce div.product #tab-description h2,
.woocommerce div.product #tab-description h3 {
    border-left: 3px solid var(--gold) !important;
    padding-left: var(--space-md) !important;
}

/* Body text — properly readable */
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product #tab-description p,
.woocommerce div.product #tab-description li {
    color: #C8C8C8 !important;
    line-height: 1.8 !important;
    font-size: 0.95rem !important;
}
.woocommerce div.product .woocommerce-tabs .panel strong,
.woocommerce div.product #tab-description strong {
    color: var(--white) !important;
}

/* =============================================
   PRODUCT GALLERY — HIDE ZOOM MAGNIFIER ICONS
============================================= */
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger img,
a.woocommerce-product-gallery__trigger {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =============================================
   MOBILE — COMPREHENSIVE FIXES
============================================= */

/* ── Announcement bar — prevent overflow on small screens ── */
@media (max-width: 600px) {
    .announcement-bar {
        font-size: 0.65rem !important;
        letter-spacing: 0.05em !important;
        padding: 6px var(--space-sm) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Header — tighter on mobile ── */
@media (max-width: 768px) {
    .header-inner { height: 60px; }
    .header-icons { gap: var(--space-sm); }
    body.nav-open .primary-nav { top: 60px; }
}

/* ── Hero buttons — stack vertically on small screens ── */
@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
    }
    .hero-content h1 { font-size: 2.2rem !important; }
    .hero-content p { font-size: 0.95rem !important; }
    .hero-badges {
        gap: var(--space-md) !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ── Single product — stack on mobile ── */
@media (max-width: 768px) {
    .single-product div.product {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }
    .single-product div.product .woocommerce-product-gallery {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
    }
    .single-product div.product .summary {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .single-product div.product .woocommerce-tabs {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    .single-product div.product .related {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }
    /* Add to cart — full width on mobile */
    .woocommerce div.product form.cart {
        flex-wrap: wrap !important;
    }
    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    /* Tab labels — shorter text wrapping */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        font-size: 0.7rem !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }
    /* Related products — 2 col on mobile */
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* Single product price */
    .woocommerce div.product p.price,
    .woocommerce div.product span.price,
    .woocommerce div.product .price .woocommerce-Price-amount {
        font-size: 1.8rem !important;
    }
    /* Related — single col on tiny screens */
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
    /* Tabs wrap fully */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        flex: 1 !important;
        text-align: center !important;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 8px !important;
        font-size: 0.65rem !important;
    }
}

/* ── Shop page — sidebar hidden on mobile ── */
@media (max-width: 768px) {
    .shop-sidebar { display: none; }
    .shop-layout { grid-template-columns: 1fr !important; }
}

/* ── Footer ── */
@media (max-width: 480px) {
    .footer-top { gap: var(--space-lg) !important; }
    .footer-bottom-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: var(--space-md) !important;
    }
    .footer-socials { justify-content: center !important; }
    .newsletter-form {
        flex-direction: column !important;
    }
    .newsletter-form input[type="email"],
    .newsletter-form .btn { width: 100% !important; }
}

/* ── Trust badges — single col on tiny screens ── */
@media (max-width: 480px) {
    .trust-badges { grid-template-columns: 1fr !important; }
    .trust-badge { flex-direction: row !important; text-align: left !important; }
}

/* ── Delivery banner ── */
@media (max-width: 480px) {
    .delivery-banner {
        padding: var(--space-md) !important;
        gap: var(--space-md) !important;
    }
    .delivery-banner-text svg { display: none !important; }
}

/* ── Social proof strip ── */
@media (max-width: 480px) {
    .social-proof-inner {
        grid-template-columns: 1fr !important;
    }
    .proof-item { text-align: left !important; display: flex; align-items: center; gap: var(--space-md); }
    .proof-item svg { margin: 0 !important; flex-shrink: 0; }
}

/* ── How it works ── */
@media (max-width: 480px) {
    .how-it-works-steps { gap: var(--space-xl) !important; }
    .step-card { flex-direction: row !important; text-align: left !important; gap: var(--space-md) !important; }
    .step-number { flex-shrink: 0 !important; }
}

/* ── Section padding reduction on mobile ── */
@media (max-width: 480px) {
    .section { padding: var(--space-xl) 0 !important; }
    .section-header { margin-bottom: var(--space-lg) !important; }
    h2 { font-size: 1.8rem !important; }
}

/* ── WooCommerce notices — full width ── */
@media (max-width: 768px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        font-size: 0.8rem !important;
        padding: var(--space-sm) var(--space-md) !important;
    }
}

/* =============================================
   MOBILE NAV — TEXT VISIBILITY FIX
============================================= */
body.nav-open .primary-nav ul li a {
    color: var(--white) !important;
    border-bottom: 1px solid var(--dark-4) !important;
}
body.nav-open .primary-nav ul li a:hover {
    color: var(--gold) !important;
}
/* Sub-menu items slightly indented and dimmer */
body.nav-open .primary-nav ul li .sub-menu li a {
    color: var(--grey-light) !important;
    font-size: 1rem !important;
    padding-left: var(--space-lg) !important;
}
body.nav-open .primary-nav ul li .sub-menu li a:hover {
    color: var(--gold) !important;
}
/* Close button visible */
.menu-toggle svg { color: var(--white) !important; }

/* =============================================
   DIVI HEADER & NAVIGATION OVERRIDES
   Divi renders its own #main-header — our
   header.php is ignored. We override via CSS.
============================================= */

/* Main header bar */
#main-header,
#main-header .container,
.et_header_style_left #et-top-navigation,
.et_header_style_centered #top-header,
#et-top-navigation {
    background-color: rgba(10, 10, 10, 0.97) !important;
    border-bottom: 1px solid #2E2E2E !important;
}

/* Sticky header */
#main-header.et-fixed-header {
    background-color: rgba(10, 10, 10, 0.98) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* Logo text colour — kill Divi purple */
#et-top-navigation .logo_container a,
.et_pb_menu .et_pb_menu__logo a,
#main-header .et_pb_menu__logo,
.logo_container,
.logo_container a {
    color: var(--white) !important;
}

/* Nav links */
#et-top-navigation nav > ul > li > a,
#et-top-navigation ul li a,
.et_pb_menu nav ul li a,
#main-header #et-top-navigation ul li a {
    color: var(--grey-light) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
#et-top-navigation nav > ul > li > a:hover,
#et-top-navigation ul li a:hover,
#main-header #et-top-navigation ul li a:hover,
#et-top-navigation ul li.current-menu-item > a {
    color: var(--gold) !important;
}

/* Dropdown menus */
#et-top-navigation ul .sub-menu,
.et_pb_menu nav .sub-menu {
    background-color: var(--dark-2) !important;
    border-top: 2px solid var(--gold) !important;
    border: 1px solid var(--dark-4) !important;
    border-top: 2px solid var(--gold) !important;
}
#et-top-navigation ul .sub-menu li a,
.et_pb_menu nav .sub-menu li a {
    color: var(--grey-light) !important;
    border-bottom: 1px solid var(--dark-4) !important;
}
#et-top-navigation ul .sub-menu li a:hover {
    color: var(--gold) !important;
    background: var(--dark-3) !important;
}

/* Header icons (search, cart, account) */
#et-top-navigation .et_search_icon,
#et-top-navigation .et_cart_info,
#et_top_search,
.et_pb_menu .et-cart-info {
    color: var(--grey-light) !important;
}
#et-top-navigation .et_search_icon:hover,
#et-top-navigation .et_cart_info:hover {
    color: var(--gold) !important;
}

/* Cart item count bubble */
#et-top-navigation .et_cart_count,
.et_cart_count {
    background: var(--gold) !important;
    color: var(--black) !important;
}

/* Top bar (announcement bar above header) */
#top-header {
    background-color: var(--gold) !important;
    color: var(--black) !important;
}
#top-header a, #top-header p, #top-header span {
    color: var(--black) !important;
}

/* Mobile hamburger */
#et_mobile_nav_menu .mobile_nav,
.mobile_menu_bar,
.mobile_menu_bar:before {
    color: var(--white) !important;
}
.et_close_search_field:before,
.et_search_field {
    color: var(--white) !important;
    background: var(--dark-2) !important;
}

/* Divi mobile nav overlay */
#et-top-navigation .et_mobile_menu,
.et_mobile_menu {
    background: var(--black) !important;
    border: 1px solid var(--dark-4) !important;
}
.et_mobile_menu li a,
#et-top-navigation .et_mobile_menu li a {
    color: var(--white) !important;
    border-bottom: 1px solid var(--dark-4) !important;
    font-family: var(--font-accent) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.et_mobile_menu li a:hover,
#et-top-navigation .et_mobile_menu li a:hover {
    color: var(--gold) !important;
    background: var(--dark-2) !important;
}
/* Mobile sub-menu */
.et_mobile_menu .menu-item-has-children > a {
    color: var(--white) !important;
}
.et_mobile_menu ul {
    background: var(--dark-2) !important;
}

/* =============================================
   DIVI FOOTER OVERRIDES
============================================= */
#main-footer,
#footer-bottom,
.et_pb_footer_columns_area {
    background-color: var(--dark-2) !important;
    border-top: 1px solid var(--dark-4) !important;
}
#footer-bottom {
    background-color: var(--dark-3) !important;
    border-top: 1px solid var(--dark-4) !important;
}
#main-footer p,
#main-footer li,
#main-footer span,
#footer-bottom p,
#footer-bottom span {
    color: var(--grey-light) !important;
}
#main-footer a,
#footer-bottom a {
    color: var(--grey-light) !important;
}
#main-footer a:hover,
#footer-bottom a:hover {
    color: var(--gold) !important;
}
#footer-bottom #footer-info {
    color: var(--grey-mid) !important;
    font-size: 0.8rem !important;
}

/* =============================================
   HEADER LOGO — IMAGE + TEXT SIDE BY SIDE
============================================= */
.site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}
.site-logo__img {
    height: 44px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
.site-logo .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
/* Hide text name if you want logo-only — set via Customizer */
.site-logo.logo-only .logo-text { display: none !important; }

@media (max-width: 480px) {
    .site-logo__img { height: 34px !important; }
    .site-logo .logo-text { font-size: 1.1rem !important; }
}

/* =============================================
   FOOTER SPACING — gap between content & footer
   margin-top on #colophon is blocked by Divi's
   overflow:hidden wrappers, so we use padding-top
   on the footer itself and target Divi's wrappers.
============================================= */
#colophon,
#main-footer {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* Also add breathing room after Divi's last section */
#et-main-area > .et_pb_section:last-child,
#et-main-area > div:last-child,
.et_pb_section:last-of-type,
#page-container > #et-main-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Spacer before footer for all page types */
body:not(.home) #main-footer,
body:not(.home) #colophon {
    margin-top: 0 !important;
    border-top: 1px solid #2E2E2E !important;
}

/* =============================================
   SHOP BY CLUB — Homepage Club Cards
============================================= */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.club-card {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.club-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    color: inherit;
}

.club-card-inner {
    position: relative;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dark-4);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition);
}
.club-card:hover .club-card-inner {
    border-color: var(--gold);
}

/* Club colour background */
.club-card-bg {
    position: absolute;
    inset: 0;
    background: var(--club-color, var(--dark-2));
    opacity: 0.85;
    transition: opacity var(--transition);
}
.club-card:hover .club-card-bg { opacity: 1; }

/* Dark gradient overlay for readability */
.club-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.5) 60%,
        rgba(0,0,0,0.8) 100%
    );
    z-index: 1;
}

.club-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    padding: var(--space-lg);
    text-align: center;
}

.club-card-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}
.club-card:hover .club-card-logo {
    transform: translate(-50%, -65%);
}
.club-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.club-card-logo--placeholder {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
}
.club-card-logo--placeholder svg { width: 48px; height: 48px; }

.club-card-name {
    font-family: var(--font-display) !important;
    font-size: 1.3rem !important;
    color: var(--white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.1 !important;
    margin-bottom: var(--space-sm) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.club-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    transition: gap var(--transition);
}
.club-card:hover .club-card-cta { gap: 10px; }

/* Add club prompt — shown in Customizer when slots are empty */
.club-card--add {
    border: 2px dashed var(--dark-4);
    background: transparent;
}
.club-card--add .club-card-inner {
    background: var(--dark-2);
}

/* Responsive */
@media (max-width: 1024px) {
    .clubs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .clubs-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .club-card-logo { width: 72px; height: 72px; }
    .club-card-name { font-size: 1rem !important; }
}

/* =============================================
   CLUB CARDS — merged into category grid
============================================= */
.category-card.club-category-card {
    position: relative;
    overflow: hidden;
}
.category-card.club-category-card .club-card-bg {
    transition: opacity var(--transition);
}
.category-card.club-category-card:hover .club-card-bg {
    opacity: 1 !important;
}

/* =============================================
   MOBILE SHOP PAGE — FIX RIGHT SHIFT
   The shop grid was leaking outside viewport
============================================= */
@media (max-width: 768px) {
    /* Prevent any horizontal overflow */
    body, html { overflow-x: hidden !important; }

    /* Shop layout — force single column, no offset */
    .shop-layout {
        display: block !important;
        width: 100% !important;
        padding: var(--space-lg) 0 !important;
        margin: 0 !important;
    }

    /* WooCommerce main content full width */
    .woocommerce-page .woocommerce,
    .woocommerce-page #primary,
    .shop-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Product grid — 2 columns on mobile */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container padding on mobile */
    .container {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        overflow: hidden !important;
    }

    /* Divi content area */
    #et-main-area,
    #main-content,
    .et_pb_section,
    .et_pb_row {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* WooCommerce shop toolbar — stack on mobile */
    .shop-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-sm) !important;
    }
}

@media (max-width: 480px) {
    /* Single column on very small screens */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   MOBILE NAV — ensure Divi's hamburger works
   and our custom header doesn't conflict
============================================= */
@media (max-width: 980px) {
    /* Divi hides nav at 980px — ensure hamburger visible */
    .mobile_menu_bar {
        display: block !important;
        color: var(--white) !important;
    }
    .mobile_menu_bar:before {
        color: var(--white) !important;
        font-size: 1.6rem !important;
    }

    /* Our custom header nav toggle — show on mobile */
    .menu-toggle {
        display: flex !important;
    }

    /* Hide our custom nav on mobile (Divi handles it) */
    .primary-nav {
        display: none !important;
    }
    body.nav-open .primary-nav {
        display: flex !important;
    }
}

/* =============================================
   LOGO TEXT — colour fix
   Site name: white, Tagline/span: gold
============================================= */
.logo-text {
    color: var(--white) !important;
}
.logo-text span {
    color: var(--gold) !important;
}

/* Divi's own logo container — same rules */
#main-header .logo_container .logo-text,
#et-top-navigation .logo_container .logo-text {
    color: var(--white) !important;
}
#main-header .logo_container .logo-text span,
#et-top-navigation .logo_container .logo-text span {
    color: var(--gold) !important;
}

/* =============================================
   LOGO — hide tagline on mobile to free space
   for hamburger menu
============================================= */
@media (max-width: 980px) {
    .logo-text span,
    #main-header .logo_container .logo-text span,
    #et-top-navigation .logo_container .logo-text span {
        display: none !important;
    }

    /* Also slightly reduce logo text size on mobile */
    .logo-text,
    #main-header .logo_container .logo-text {
        font-size: 1.1rem !important;
    }
}

/* =============================================
   MOBILE LOGO — two lines + hamburger spacing
============================================= */
@media (max-width: 980px) {
    .logo-text,
    #main-header .logo_container .logo-text {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        max-width: 160px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Give hamburger more breathing room */
    .mobile_menu_bar,
    #et_mobile_nav_menu {
        padding-left: 12px !important;
    }

    /* Tighten header so logo + icons fit comfortably */
    #main-header .container,
    #main-header .et_pb_row,
    .header-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =============================================
   DIVI MOBILE MENU — ensure never hidden by
   our CSS overrides
============================================= */
.et_mobile_menu {
    /* Don't force display:none — let Divi control visibility */
    visibility: visible !important;
}
/* Only hide when Divi hasn't opened it */
#main-header .et_mobile_menu:not(.open),
.et_pb_menu .et_mobile_menu:not(.open) {
    display: none;
}
#main-header .et_mobile_menu.open,
.et_pb_menu .et_mobile_menu.open {
    display: block !important;
    background: #0D0D0D !important;
    border: 1px solid #2E2E2E !important;
    z-index: 9999 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* =============================================
   MOBILE NAV — complete rewrite
   Our header.php IS rendering, so we control
   the mobile nav fully. Fix z-index, top offset
   and ensure it displays over everything.
============================================= */
@media (max-width: 768px) {

    /* Header fixed height reference */
    #masthead {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        height: auto !important;
    }

    /* Announcement bar + header combined height offset */
    #page, body > #page, .site {
        margin-top: 100px !important;
    }

    /* Mobile nav overlay — full screen below header */
    body.nav-open .primary-nav {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 100px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #0D0D0D !important;
        z-index: 99998 !important;
        overflow-y: auto !important;
        padding: 24px !important;
        border-top: 1px solid #2E2E2E !important;
    }

    /* Menu items */
    body.nav-open .primary-nav ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    body.nav-open .primary-nav ul li {
        width: 100% !important;
        border-bottom: 1px solid #2E2E2E !important;
    }
    body.nav-open .primary-nav ul li a {
        display: block !important;
        padding: 16px 0 !important;
        font-size: 1rem !important;
        color: #fff !important;
        font-family: 'Barlow Condensed', sans-serif !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }
    body.nav-open .primary-nav ul li a:hover {
        color: #C9971C !important;
    }

    /* Sub-menus */
    body.nav-open .primary-nav ul li .sub-menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        padding: 0 0 8px 16px !important;
        box-shadow: none !important;
    }
    body.nav-open .primary-nav ul li .sub-menu li {
        border-bottom: 1px solid #1a1a1a !important;
    }
    body.nav-open .primary-nav ul li .sub-menu li a {
        font-size: 0.85rem !important;
        color: #B0B0B0 !important;
        padding: 10px 0 !important;
    }

    /* Menu toggle button — always visible, right aligned */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        color: #fff !important;
        flex-shrink: 0 !important;
    }
    .menu-toggle svg { color: #fff !important; }

    /* Hide primary nav when closed */
    .primary-nav {
        display: none !important;
    }
}

/* =============================================
   DIVI ACCENT COLOUR — force gold via CSS
   Divi JS outputs accent_color #822aa9 (purple)
   as inline styles. We override every instance.
============================================= */
/* Divi uses accent colour on these elements */
.et_pb_more_button,
.et_pb_button,
#et-top-navigation ul li a:hover,
.et_pb_pricing_heading,
.et_pb_featured_post .entry-title a:hover,
.et-db #et-boc .et-l .et_pb_slide_description .et_pb_button,
.et_pb_gallery_item:hover .et_overlay,
.et_pb_contact_submit {
    color: #C9971C !important;
    border-color: #C9971C !important;
}

/* =============================================
   MOBILE NAV — nuclear override
   Force our nav visible when nav-open is set,
   beating every Divi body class combination.
============================================= */

/* Hide by default on mobile */
@media (max-width: 980px) {
    #primary-nav,
    #masthead #primary-nav,
    .site-header #primary-nav,
    .et_header_style_left #primary-nav,
    .et_fixed_nav #primary-nav {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Show when open — maximum specificity */
body.nav-open #primary-nav,
body.nav-open #masthead #primary-nav,
body.nav-open .site-header #primary-nav,
body.et_mobile_device.nav-open #primary-nav,
body.et_header_style_left.nav-open #primary-nav,
body.et_fixed_nav.nav-open #primary-nav,
html body.nav-open #primary-nav {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 100px) !important;
    background: #0D0D0D !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    border-top: 2px solid #C9971C !important;
    margin: 0 !important;
}

/* Menu list */
body.nav-open #primary-nav ul,
body.nav-open #primary-nav #primary-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Menu items */
body.nav-open #primary-nav ul li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #2E2E2E !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Links */
body.nav-open #primary-nav ul li a {
    display: block !important;
    padding: 14px 4px !important;
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent !important;
}
body.nav-open #primary-nav ul li a:hover {
    color: #C9971C !important;
    padding-left: 8px !important;
}

/* Sub-menus — show inline on mobile */
body.nav-open #primary-nav ul li .sub-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 8px 16px !important;
    margin: 0 !important;
}
body.nav-open #primary-nav ul li .sub-menu li a {
    font-size: 0.9rem !important;
    color: #B0B0B0 !important;
    padding: 8px 4px !important;
    letter-spacing: 0.05em !important;
}

/* =============================================
   LOGO TEXT — fix purple colour & line wrapping
============================================= */

/* Force white on the logo link and all its children */
a.site-logo,
a.site-logo:hover,
a.site-logo:visited,
#masthead a.site-logo,
#masthead a.site-logo:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Site name — white, no wrap, controlled size */
a.site-logo .logo-text {
    color: #ffffff !important;
    white-space: nowrap !important;
    font-size: 1.2rem !important;
    line-height: 1.1 !important;
    max-width: none !important;
    word-break: normal !important;
}

/* Tagline span — gold */
a.site-logo .logo-text span {
    color: #C9971C !important;
    display: block !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
}

/* On mobile — allow wrapping but keep it compact */
@media (max-width: 980px) {
    a.site-logo .logo-text {
        white-space: normal !important;
        font-size: 0.9rem !important;
        max-width: 150px !important;
        line-height: 1.2 !important;
    }
    a.site-logo .logo-text span {
        display: none !important;
    }
}

/* =============================================
   LOGO TEXT — full gold for site name
============================================= */
a.site-logo .logo-text,
#masthead a.site-logo .logo-text,
.site-logo .logo-text {
    color: #C9971C !important;
}

/* =============================================
   DIVI ET_PB_SHOP — MOBILE FIX
   Targets the Divi shop module on club/team pages
============================================= */

/* Force 2-column grid on mobile for Divi shop module */
@media (max-width: 980px) {
    .et_pb_shop .woocommerce ul.products,
    .et_pb_shop_grid .woocommerce ul.products,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .et_pb_shop .woocommerce ul.products li.product,
    .woocommerce ul.products li.product {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        background: #191919 !important;
        border: 1px solid #2E2E2E !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* Product image — full width */
    .et_pb_shop .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product a img {
        width: 100% !important;
        aspect-ratio: 1 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Product title */
    .et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        color: #ffffff !important;
        font-size: 0.8rem !important;
        font-family: 'Barlow', sans-serif !important;
        font-weight: 600 !important;
        text-transform: none !important;
        padding: 8px 8px 4px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* Price — gold not red */
    .et_pb_shop .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .price,
    .et_pb_shop .woocommerce ul.products li.product .price *,
    .woocommerce ul.products li.product .price * {
        color: #C9971C !important;
        font-family: 'Barlow Condensed', sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        padding: 0 8px 8px !important;
        display: block !important;
    }

    /* Add to cart button */
    .et_pb_shop .woocommerce ul.products li.product a.button,
    .woocommerce ul.products li.product a.button {
        margin: 0 8px 8px !important;
        background: #C9971C !important;
        color: #0D0D0D !important;
        border: none !important;
        border-radius: 4px !important;
        font-family: 'Barlow Condensed', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        padding: 8px 12px !important;
        display: inline-block !important;
        width: calc(100% - 16px) !important;
        text-align: center !important;
    }

    /* Remove excess bottom gap before footer */
    .et_pb_section:last-of-type,
    .et_pb_row:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    .et_pb_shop .woocommerce ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
    }
}

/* =============================================
   PRODUCT GALLERY — fix excessive height / 
   empty black space above images
============================================= */
.woocommerce-product-gallery {
    max-height: none !important;
    height: auto !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    height: auto !important;
    max-height: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: auto !important;
    max-height: none !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
    display: block !important;
    height: auto !important;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 600px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--dark-2) !important;
    display: block !important;
}

/* Flexslider height fix — Divi/WooCommerce flexslider
   sets fixed heights which causes black space */
.woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    max-height: 600px !important;
}
.woocommerce-product-gallery .flexslider {
    height: auto !important;
    background: var(--dark-2) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--dark-4) !important;
    margin: 0 !important;
}
.woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs {
    margin-top: 8px !important;
}

/* Description tab — hide the auto "DESCRIPTION" h2 more aggressively */
.woocommerce-Tabs-panel--description > h2:first-of-type,
.woocommerce-Tabs-panel--description > h2:first-child,
#tab-description > h2:first-of-type,
#tab-description > h2:first-child,
.panel.woocommerce-Tabs-panel--description h2:first-child {
    display: none !important;
}

/* =============================================
   PRODUCT PAGE — layout & gallery height fix
============================================= */

/* Ensure product grid always shows both columns */
.single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
}

/* Gallery column */
.single-product div.product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Summary column — must always be visible */
.single-product div.product .summary.entry-summary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tabs and related — full width below */
.single-product div.product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}
.single-product div.product .related.products {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

/* ── Flexslider black space fix ──
   The slider sets an explicit height via JS.
   We override with max-height and auto height
   on all its internal elements.
*/
.woocommerce-product-gallery .flexslider,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .slides,
.woocommerce-product-gallery .slides li,
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: auto !important;
    max-height: 520px !important;
    overflow: hidden !important;
}
.woocommerce-product-gallery .flexslider {
    background: #191919 !important;
    border: 1px solid #2E2E2E !important;
    border-radius: 8px !important;
    margin: 0 0 8px 0 !important;
}
.woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 768px) {
    .single-product div.product {
        grid-template-columns: 1fr !important;
    }
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary.entry-summary {
        grid-column: 1 !important;
    }
    .single-product div.product .summary.entry-summary {
        grid-row: 2 !important;
    }
}

/* =============================================
   PRODUCT GALLERY — aggressive height reset
   WooCommerce flexslider sets width:2210px and
   height:520px via JS. We override all of it.
============================================= */
.woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    transform: translate3d(0,0,0) !important;
}
.woocommerce-product-gallery__image {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
}
.woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    min-height: 200px !important;
}
.woocommerce-product-gallery .flexslider {
    height: auto !important;
}
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 560px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* =============================================
   MOBILE NAV — fix unclickable bottom items
   Something is overlapping the lower menu items.
   Ensure the nav overlay is fully above everything
   and the items at the bottom are reachable.
============================================= */
@media (max-width: 980px) {

    /* Ensure announcement bar doesn't overlap nav */
    .announcement-bar {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Nav must sit above everything including payment iframes */
    body.nav-open #primary-nav,
    body.nav-open #masthead #primary-nav {
        z-index: 999999 !important;
        /* Add bottom padding so last items aren't hidden behind browser chrome */
        padding-bottom: 80px !important;
    }

    /* Ensure all nav links are fully tappable */
    body.nav-open #primary-nav ul li {
        position: relative !important;
        z-index: 999999 !important;
        pointer-events: all !important;
    }

    body.nav-open #primary-nav ul li a {
        position: relative !important;
        z-index: 999999 !important;
        pointer-events: all !important;
        /* Larger tap target */
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Stop any fixed/sticky elements from sitting above the nav */
    body.nav-open .et-fixed-header,
    body.nav-open #main-header.et-fixed-header {
        z-index: 99998 !important;
    }

    /* Ensure nothing from Divi/PayPal/Stripe iframes overlaps */
    body.nav-open iframe,
    body.nav-open .ppcp-messages,
    body.nav-open #wcpay-express-checkout-element {
        z-index: 0 !important;
        pointer-events: none !important;
    }
}

/* =============================================
   PRODUCT PRICE — fix range display
   Price ranges (£28.00 – £32.00) were breaking
   onto multiple lines due to block display rules.
============================================= */
.woocommerce ul.products li.product .price,
.et_pb_shop .woocommerce ul.products li.product .price {
    display: block !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price span,
.et_pb_shop .woocommerce ul.products li.product .price .woocommerce-Price-amount,
.et_pb_shop .woocommerce ul.products li.product .price span {
    display: inline !important;
    color: #C9971C !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
/* The separator dash between price range */
.woocommerce ul.products li.product .price > span[aria-hidden="true"],
.et_pb_shop .woocommerce ul.products li.product .price > span[aria-hidden="true"] {
    display: inline !important;
    color: #C9971C !important;
    margin: 0 2px !important;
}
/* Screen reader text — keep hidden */
.woocommerce ul.products li.product .price .screen-reader-text {
    display: none !important;
}

/* =============================================
   PRODUCT PRICE RANGE — complete inline fix
============================================= */
.woocommerce ul.products li.product .price,
.et_pb_shop .woocommerce ul.products li.product .price {
    display: block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price *,
.et_pb_shop .woocommerce ul.products li.product .price * {
    display: inline !important;
    white-space: nowrap !important;
}
.woocommerce ul.products li.product .price .screen-reader-text,
.et_pb_shop .woocommerce ul.products li.product .price .screen-reader-text {
    display: none !important;
}

/* =============================================
   PRODUCT PRICE RANGE — final fix
   Allow wrapping but keep £ and amount together
============================================= */
.woocommerce ul.products li.product .price,
.et_pb_shop .woocommerce ul.products li.product .price {
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
}
.woocommerce ul.products li.product .price *,
.et_pb_shop .woocommerce ul.products li.product .price * {
    display: inline !important;
    white-space: nowrap !important;
}
/* The separator dash — allow it to be a wrap point */
.woocommerce ul.products li.product .price > span[aria-hidden="true"],
.et_pb_shop .woocommerce ul.products li.product .price > span[aria-hidden="true"] {
    white-space: normal !important;
    margin: 0 3px !important;
}