/*
Theme Name: Red River Compounds 1.4.2
Theme URI: https://redrivercompounds.com
Description: Premium research peptide theme for Red River Compounds
Author: Red River Compounds
Version: 1.4.2
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
WooCommerce: 8.0
License: GPL v2 or later
Text Domain: redrivercompounds
Tags: e-commerce, woocommerce, dark, custom-menu, featured-images, right-sidebar
*/

:root {
  --bg: #070708;
  --bg-card: #0d0d0f;
  --bg-elevated: #131316;
  --bg-hover: #181820;
  --border: rgba(255,255,255,0.055);
  --border-mid: rgba(255,255,255,0.10);
  --border-high: rgba(255,255,255,0.18);
  --text: #f0ece6;
  --text-muted: #958f87;
  --text-subtle: #5c5955;
  --red: #c01828;
  --red-bright: #e0202e;
  --red-dark: #7f1020;
  --red-glow: rgba(192,24,40,0.25);
  --gold: #c8860a;
  --gold-light: #f0a820;
  --teal: #0ab0a0;
  --teal-dark: #077a6e;
  --font-display-title: 'Barlow Condensed', sans-serif;
  --font-display: 'Barlow', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --shadow-card: 0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  --shadow-red: 0 0 30px rgba(192,24,40,0.3);
  --shadow-product: 0 8px 40px rgba(0,0,0,0.6);
  --container: 1280px;
  --header-h: 80px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-mid: 280ms;
  --t-slow: 480ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0l20 34.64H20z' fill='none' stroke='rgba(255,255,255,0.012)' stroke-width='1'/%3E%3Cpath d='M40 80l20-34.64H20z' fill='none' stroke='rgba(255,255,255,0.012)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }

ul, ol { list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--red);
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
em { font-style: italic; }

.text-mono { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.04em; }
.text-muted { color: var(--text-muted); }
.text-red { color: var(--red-bright); }
.text-gold { color: var(--gold-light); }
.text-teal { color: var(--teal); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.container--narrow { max-width: 860px; }
.container--wide { max-width: 1440px; }

.section {
  padding: var(--space-2xl) 0;
  position: relative;
  z-index: 1;
}

.section--sm { padding: var(--space-xl) 0; }
.section--lg { padding: var(--space-3xl) 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { gap: var(--space-md); }

.site-main {
  min-height: 70vh;
  padding-top: var(--header-h);
  position: relative;
  z-index: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.8em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t-mid) var(--ease), background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.btn:hover::before { opacity: 1; }

.btn--primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(192,24,40,0.35);
}

.btn--primary:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
  box-shadow: 0 6px 28px rgba(220,30,50,0.5);
  transform: translateY(-1px);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-mid);
}

.btn--secondary:hover {
  border-color: var(--border-high);
  background: var(--bg-elevated);
  color: var(--text);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--red-bright);
  border-color: var(--red);
}

.btn--ghost:hover {
  background: var(--red);
  color: #fff;
}

.btn--sm {
  padding: 0.55em 1.2em;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1em 2.5em;
  font-size: 1.15rem;
}

.btn--full { width: 100%; justify-content: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.8em;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
}

.badge--red   { background: rgba(192,24,40,0.18); color: #f07078; border: 1px solid rgba(192,24,40,0.3); }
.badge--gold  { background: rgba(200,134,10,0.18); color: var(--gold-light); border: 1px solid rgba(200,134,10,0.3); }
.badge--teal  { background: rgba(10,176,160,0.12); color: var(--teal); border: 1px solid rgba(10,176,160,0.25); }
.badge--dark  { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-mid); }
.badge--sale  { background: var(--red); color: #fff; border: none; }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFDE21;
  margin-bottom: 0.8rem;
  display: block;
}

.section-heading {
  margin-bottom: var(--space-lg);
}

.section-heading h2 {
  margin-bottom: 0.4em;
}

.section-heading p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 560px;
}

.section-heading--center { text-align: center; }
.section-heading--center p { margin: 0 auto; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
  border: none;
  margin: var(--space-xl) 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  border-bottom: 1px solid var(--border);
  background: rgba(7,7,8,0.82);
  /* Promote to compositor layer so scroll-driven bg change doesn't trigger
     layout on the main thread — addresses "non-composited animations" audit */
  will-change: background, box-shadow;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.site-header.scrolled {
  background: rgba(7,7,8,0.96);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
  border-bottom-color: var(--border-mid);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: var(--space-lg);
}

.header-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-logo .custom-logo-link img,
.header-logo .custom-logo-link {
  display: block;
  max-height: calc(var(--header-h) - 20px);
  width: auto;
  overflow: hidden;
}

.header-logo img {
  max-height: calc(var(--header-h) - 20px);
  width: auto;
}

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.logo-wordmark span {
  display: block;
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-nav ul li a {
  display: block;
  padding: 0.5em 1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.header-nav ul li a:hover,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current-page-ancestor > a {
  color: var(--red);
  background: var(--bg-elevated);
}

.header-nav ul li.current-menu-item > a {
  color: var(--red-bright);
}

.header-nav ul .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  box-shadow: var(--shadow-card);
  z-index: 100;
}

.header-nav ul li:hover .sub-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.header-nav ul .sub-menu li a {
  padding: 0.6em 0.9em;
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.header-nav ul .sub-menu li a:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.header-nav ul li { position: relative; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.header-icon-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--red);
}

.header-icon-btn svg { pointer-events: none; }

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5em 1.1em;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.cart-btn:hover {
  background: var(--bg-hover);
  color: var(--red);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
}

.menu-toggle-bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--t-fast), opacity var(--t-fast);
  display: block;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,7,8,0.96);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  padding-top: 120px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}

.search-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.search-overlay form {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  gap: 0.75rem;
}

.search-overlay input[type="search"] {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 1em 1.5em;
  font-size: 1.25rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast);
}

.search-overlay input[type="search"]:focus {
  border-color: var(--red);
}

.search-overlay .close-search {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.search-overlay .close-search:hover { color: var(--text); border-color: var(--border-high); }

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-mid);
  z-index: 990;
  padding: var(--space-md);
  transform: translateY(-110%);
  transition: transform var(--t-mid) var(--ease);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.mobile-nav.is-open { transform: translateY(0); }

.mobile-nav ul { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav ul li a {
  display: block;
  padding: 0.8em 1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.mobile-nav ul li a:hover,
.mobile-nav ul li.current-menu-item a { color: var(--text); background: var(--bg-elevated); }

.mobile-nav .sub-menu { padding-left: 1rem; }
.mobile-nav .sub-menu li a { font-size: 0.9rem; text-transform: none; letter-spacing: 0.02em; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--header-h) 0 var(--space-xl);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,24,40,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 15% 50%, rgba(200,134,10,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 85% 80%, rgba(10,176,160,0.04) 0%, transparent 50%),
    var(--bg);
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 10%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 10%, black 0%, transparent 80%);
  opacity: 0.6;
}

.hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFDE21;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease) 0.2s forwards;
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: #FFDE21;
}

.hero__heading {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  font-family: var(--font-display-title);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease) 0.35s forwards;
}

.hero__heading em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-muted);
}

.hero__heading .accent {
  color: var(--red-bright);
  position: relative;
  display: inline-block;
}

.hero__heading .accent::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  border-radius: 2px;
  opacity: 0.6;
}

.hero__sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--white);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease) 0.5s forwards;
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease) 0.65s forwards;
}

.hero__stats {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease) 0.8s forwards;
}

.hero__stat-value {
  font-family: var(--font-display-title);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.2em;
}

.hero__stat-value .unit {
  font-size: 2.4rem;
  color: var(--red-bright);
}

.hero__stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  animation: fadeIn 1s var(--ease) 1.5s forwards;
}

.hero__scroll-hint-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--red), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.trust-strip {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}

.trust-strip__inner {
  display: flex;
  align-items: stretch;
}

.trust-strip__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem var(--space-md);
  border-right: 1px solid var(--border);
  transition: background var(--t-fast);
}

.trust-strip__item:last-child { border-right: none; }
.trust-strip__item:hover { background: var(--bg-elevated); }

.trust-strip__icon {
  width: 28px;
  height: 28px;
  color: var(--red-bright);
  flex-shrink: 0;
}

.trust-strip__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}

.trust-strip__text span {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  position: relative;
}

.product-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-4px);
  box-shadow: var(--shadow-product);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-elevated);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

.product-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,7,8,0.8) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.product-card:hover .product-card__media-overlay { opacity: 1; }

.product-card__quick-add {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.product-card:hover .product-card__quick-add {
  transform: translateY(0);
  opacity: 1;
}

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.product-card__purity {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: rgba(7,7,8,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--teal);
  letter-spacing: 0.06em;
}

.product-card__body {
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-card__category {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  transition: color var(--t-fast);
}

.product-card:hover .product-card__title { color: var(--red-bright); }

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

.product-card__price del {
  font-size: 0.8em;
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 0.35em;
}

.product-card__price ins {
  text-decoration: none;
  color: var(--red-bright);
}

.product-card__add-to-cart {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 0.45em 0.9em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  color: var(--text-muted);
}

.product-card__add-to-cart:hover,
.product-card:hover .product-card__add-to-cart {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: var(--space-md) !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-mid);
  transform: translateY(-4px);
  box-shadow: var(--shadow-product);
}

.woocommerce ul.products li.product a img {
  border-radius: 0;
  margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 0.75rem 1rem 0.25rem !important;
  color: var(--text) !important;
  transition: color var(--t-fast);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--red-bright) !important;
}

.woocommerce ul.products li.product .product-card__price {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding: 0 !important;
  display: block !important;
}

.woocommerce ul.products li.product .price:not(.product-card__price) {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding: 0 1rem !important;
  display: block !important;
}

.woocommerce ul.products li.product .price del { color: var(--text-muted) !important; }
.woocommerce ul.products li.product .price ins { color: var(--red-bright) !important; text-decoration: none !important; }

.woocommerce ul.products li.product .product-card__footer .button,
.woocommerce ul.products li.product .product-card__footer .add_to_cart_button,
.woocommerce ul.products li.product .product-card__add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.45em 0.9em !important;
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: color var(--t-fast) !important, background var(--t-fast) !important, border-color var(--t-fast) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.woocommerce ul.products li.product .button:not(.product-card__footer .button),
.woocommerce ul.products li.product .add_to_cart_button:not(.product-card__footer .add_to_cart_button):not(.product-card__add-to-cart) {
  display: block !important;
  width: calc(100% - 2rem) !important;
  margin: 0.75rem 1rem 1rem !important;
  padding: 0.7em 1em !important;
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: color var(--t-fast) !important, background var(--t-fast) !important, border-color var(--t-fast) !important;
  cursor: pointer !important;
}

.woocommerce ul.products li.product .product-card__footer .button:hover,
.woocommerce ul.products li.product .product-card__footer .add_to_cart_button:hover,
.woocommerce ul.products li.product .product-card__add-to-cart:hover,
.product-card:hover .product-card__add-to-cart {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.woocommerce ul.products li.product .button:not(.product-card__footer .button):hover,
.woocommerce ul.products li.product .add_to_cart_button:not(.product-card__footer .add_to_cart_button):hover,
.woocommerce ul.products li.product:hover .button:not(.product-card__footer .button) {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.woocommerce ul.products li.product .product-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--border) !important;
  flex-wrap: nowrap !important;
}

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.woocommerce div.product div.images {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
}

.woocommerce div.product div.images img {
  border-radius: 0 !important;
  position: relative;
}

.woocommerce div.product div.summary {
  padding-top: 0.5rem;
}

.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin-bottom: 0.5rem !important;
  color: var(--text) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: var(--space-md) !important;
}

.woocommerce div.product p.price del { color: var(--text-muted) !important; }
.woocommerce div.product p.price ins { color: var(--red-bright) !important; text-decoration: none !important; }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-muted);
  font-size: 0.97rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
  margin: var(--space-md) 0;
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.woocommerce div.product form.cart .quantity input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 0.75em 1em;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  width: 90px !important;
  text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 0.85em 2em !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: color var(--t-mid) !important, background var(--t-mid) !important, border-color var(--t-mid) !important, box-shadow var(--t-mid) !important, transform var(--t-mid) !important;
  box-shadow: 0 4px 20px rgba(192,24,40,0.35) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--red-bright) !important;
  box-shadow: 0 6px 28px rgba(220,30,50,0.5) !important;
  transform: translateY(-1px);
}

.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--space-xl);
  grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 0.8em 1.4em !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--t-fast) !important, border-color var(--t-fast) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--text) !important;
  border-bottom-color: var(--red) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: var(--space-lg) 0 !important;
  background: transparent !important;
  border: none !important;
}

.woocommerce div.product .product_meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: var(--space-sm);
}

.woocommerce .onsale {
  display: none !important;
}

.woocommerce-page .site-main { padding-top: var(--header-h); }
.shop-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: var(--space-lg) 0 var(--space-md);
  margin-bottom: var(--space-md);
}

.woocommerce-products-header { text-align: left; margin-bottom: 0 !important; }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.5em 1em !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
}

.woocommerce .woocommerce-result-count {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
}

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin-top: var(--space-xl);
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-muted) !important;
  padding: 0.55em 1em !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: color var(--t-fast) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-mid) !important;
  color: var(--text) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.woocommerce table.cart,
.woocommerce-page table.cart {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.cart td,
.woocommerce table.cart th {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--space-md) !important;
  vertical-align: middle !important;
  background: transparent !important;
}

.woocommerce table.cart thead th {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  padding-bottom: var(--space-sm) !important;
}

.woocommerce table.cart td.product-name a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.woocommerce table.cart td.product-name a:hover { color: var(--red-bright); }

.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

.woocommerce table.cart input.qty {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 0.4em 0.7em;
  width: 70px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce #order_review h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: var(--space-md);
  color: var(--text);
}

.woocommerce .cart-collaterals,
.woocommerce #order_review_heading { color: var(--text); }

.woocommerce table.shop_table {
  border: none !important;
  border-collapse: collapse;
}

.woocommerce table.shop_table thead th { font-family: var(--font-display); color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--space-sm) var(--space-md) !important;
  background: transparent !important;
  color: var(--text);
}

.woocommerce #payment {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

.woocommerce #payment div.payment_box {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}

.woocommerce #payment div.payment_box::before {
  border-bottom-color: var(--bg-elevated) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  padding: 0.75em 1em !important;
  transition: border-color var(--t-fast) !important;
  width: 100% !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--red) !important;
  outline: none !important;
}

.woocommerce form .form-row label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4em;
  display: block;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  text-decoration: none;
  position: relative;
  aspect-ratio: 3/2;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.category-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
}

.category-card__bg {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
}

.category-card__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: repeating-linear-gradient(
    60deg,
    var(--red) 0px,
    var(--red) 1px,
    transparent 1px,
    transparent 40px
  );
  transition: opacity var(--t-mid);
}

.category-card:hover .category-card__pattern { opacity: 0.14; }

.category-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(180deg, transparent, rgba(7,7,8,0.95));
}

.category-card__title {
  font-family: var(--font-display-title);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  display: block;
  margin-bottom: 0.2em;
  transition: color var(--t-fast);
}

.category-card:hover .category-card__title { color: var(--red-bright); }

.category-card__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.features-section {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
}

.feature-item {
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px solid var(--border);
  transition: background var(--t-mid) var(--ease);
}

.feature-item:last-child { border-right: none; }
.feature-item:hover { background: var(--bg-elevated); }

.feature-item__icon {
  width: 48px;
  height: 48px;
  background: rgba(192,24,40,0.1);
  border: 1px solid rgba(192,24,40,0.2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-bright);
  margin-bottom: var(--space-md);
  transition: transform var(--t-mid), color var(--t-mid);
}

.feature-item:hover .feature-item__icon {
  background: rgba(192,24,40,0.18);
  border-color: rgba(192,24,40,0.4);
  box-shadow: 0 0 20px rgba(192,24,40,0.2);
}

.feature-item__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.feature-item__text {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.cta-section {
  text-align: center;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.cta-section__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(192,24,40,0.12) 0%, transparent 70%);
}

.cta-section__content { position: relative; z-index: 1; }

.cta-section h2 {
  margin-bottom: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section p {
  color: var(--white);
  max-width: 480px;
  margin: 0 auto var(--space-lg);
  font-size: 1.1rem;
}

.cta-section .ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.disclaimer-bar {
  background: rgba(192,24,40,0.06);
  border: 1px solid rgba(192,24,40,0.15);
  border-radius: var(--r-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.disclaimer-bar__icon {
  color: var(--red-bright);
  flex-shrink: 0;
  margin-top: 2px;
}

.disclaimer-bar__text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.disclaimer-bar__text strong {
  color: #FFDE21;
  font-weight: 800;
}

.with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-2xl);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-lg));
}

.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.widget-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.widget-content {
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.widget ul li {
  padding: 0.35em 0;
  border-bottom: 1px solid var(--border);
}

.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--t-fast);
}

.widget ul li a:hover { color: var(--red-bright); }

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--border); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider-range { background: var(--red); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider-handle { background: var(--red); border-color: var(--red); }
.woocommerce .widget_price_filter .price_label { color: var(--text-muted); font-size: 0.85rem; }

.breadcrumbs {
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
}

.breadcrumbs a { color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.breadcrumbs a:hover { text-decoration-color: var(--red-bright); }
.breadcrumbs a:hover { color: var(--red-bright); }
.breadcrumbs .sep { color: var(--text-muted); }
.breadcrumbs .current { color: var(--text-muted); }

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.post-card__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body { padding: var(--space-md); }

.post-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5em;
  line-height: 1.25;
  transition: color var(--t-fast);
}

.post-card:hover .post-card__title { color: var(--red-bright); }
.post-card__title a:hover { text-decoration: underline; text-decoration-color: var(--red-bright); }

.post-card__excerpt { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

.post-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.entry-header { margin-bottom: var(--space-lg); }
.entry-header .entry-title { margin-bottom: 0.5em; }
.entry-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.06em; }
.entry-content { font-size: 1.05rem; line-height: 1.8; color: rgba(240,236,230,0.88); }
.entry-content h2, .entry-content h3, .entry-content h4 { margin: 1.8em 0 0.8em; }
.entry-content p { margin-bottom: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1.4em; }
.entry-content ul li { list-style: disc; margin-bottom: 0.4em; }
.entry-content ol li { list-style: decimal; margin-bottom: 0.4em; }
.entry-content blockquote { border-left: 3px solid var(--red); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; background: var(--bg-card); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--text-muted); }
.entry-content a { color: #FFF; text-decoration: underline; text-decoration-color: rgba(224,32,46,0.4); }
.entry-content a:hover { text-decoration-color: #FFDE21; }
.entry-content img { border-radius: var(--r-md); }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; }
.entry-content table th, .entry-content table td { border: 1px solid var(--border); padding: 0.75em 1em; text-align: left; }
.entry-content table th { background: var(--bg-elevated); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.entry-content code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.15em 0.5em; font-family: var(--font-mono); font-size: 0.88em; color: var(--teal); }

.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--border);
}

.footer-brand {}

.footer-logo { margin-bottom: var(--space-md); }
.footer-logo img {
  height: 125px;
  width: 180px;
  max-height: 150px;
  object-fit: contain;
}
.footer-logo-text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-logo-text span { display: block; font-size: 0.6em; font-weight: 500; color: var(--text-muted); letter-spacing: 0.14em; }

.footer-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.footer-social {
  display: flex;
  gap: 0.5rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: var(--space-md);
}

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { color: var(--text-muted); font-size: 0.9rem; transition: color var(--t-fast), text-decoration-color var(--t-fast); display: flex; align-items: center; gap: 0.4em; text-decoration: underline; text-decoration-color: transparent; }
.footer-links a::before { content: '—'; color: var(--text-muted); font-size: 0.8em; }
.footer-links a:hover { color: var(--text); text-decoration-color: currentColor; }
.footer-links a:hover::before { color: var(--red); }

.footer-newsletter {}

.footer-newsletter p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: var(--space-sm); line-height: 1.6; }

.footer-newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-newsletter-form input[type="email"] {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 0.7em 1em;
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color var(--t-fast);
  outline: none;
}

.footer-newsletter-form input[type="email"]:focus { border-color: var(--red); }
.footer-newsletter-form input[type="email"]::placeholder { color: var(--text-muted); }

.footer-bottom {
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-bottom-left { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.footer-bottom-left a { color: var(--text-muted); }
.footer-bottom-left a:hover { color: var(--red-bright); }

.footer-bottom-right { display: flex; gap: var(--space-md); }
.footer-bottom-right a { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; transition: color var(--t-fast); }
.footer-bottom-right a:hover { color: var(--text-muted); }

.footer-disclaimer {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.page-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: var(--space-lg) 0 var(--space-md);
  margin-bottom: var(--space-md);
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 0;
}

/* My Account layout block — consolidated below near line 2622 */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  /* Hint to compositor: these properties animate, keep on own layer */
  will-change: opacity, transform;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.js-ready .reveal-delay-1 { transition-delay: 0.1s; }
.js-ready .reveal-delay-2 { transition-delay: 0.2s; }
.js-ready .reveal-delay-3 { transition-delay: 0.3s; }
.js-ready .reveal-delay-4 { transition-delay: 0.4s; }
.js-ready .reveal-delay-5 { transition-delay: 0.5s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.woocommerce-cart-form__contents .blockUI.blockOverlay { background: rgba(7,7,8,0.7) !important; }
.woocommerce .blockUI.blockOverlay::before { border-color: var(--red) transparent transparent transparent !important; animation: spin 0.7s linear infinite; }

@media (max-width: 1200px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  .woocommerce div.product { grid-template-columns: 1fr; gap: var(--space-xl); }
  .woocommerce div.product .woocommerce-tabs { grid-column: auto; }
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .feature-item { border-right: none; border-bottom: 1px solid var(--border); }
  .feature-item:last-child { border-bottom: none; }
  .hero__stats { gap: var(--space-lg); }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .hero { min-height: 85vh; min-height: 85dvh; }
  .hero__stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-md); }
  .hero__stat-value { font-size: 1.8rem; }
  .trust-strip__inner { flex-wrap: wrap; }
  .trust-strip__item { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
  .features-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .cta-section .ctas { flex-direction: column; align-items: center; }
  /* Account: stack sidebar above content */
  .woocommerce-account .entry-content,
  .woocommerce-account .woocommerce { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; position: static; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; border-radius: var(--r-md); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li { flex: 1 1 50%; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li:nth-child(even) { border-right: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a { justify-content: center; text-align: center; font-size: 0.78rem; padding: 0.75em 0.5em; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: var(--space-md); }
  .woocommerce-account .woocommerce-orders-table,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-table { font-size: 0.82rem; }
  .woocommerce-account .woocommerce-orders-table th,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-table th,
  .woocommerce-account .woocommerce-orders-table td,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-table td { padding: 0.6em 0.6em; }
  /* Cart: tighten table cells and stack coupon */
  .woocommerce-cart table.cart td,
  .woocommerce-cart table.cart th { padding: var(--space-sm) !important; }
  .woocommerce .coupon { display: flex; flex-direction: column; gap: 10px; }
  .woocommerce .coupon button { width: 100%; }
}

@media (max-width: 480px) {
  .trust-strip__item { flex: 1 1 100%; }
  .products-grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

.wp-block-image img { border-radius: var(--r-md); }
.wp-block-quote { border-left: 3px solid var(--red); padding: var(--space-md) var(--space-lg); background: var(--bg-card); }
.wp-block-code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-md); font-family: var(--font-mono); font-size: 0.88rem; color: var(--teal); }
.wp-block-separator { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border-mid), transparent); }
.wp-block-table td, .wp-block-table th { border-color: var(--border) !important; }
.wp-block-table thead { background: var(--bg-elevated); }

html,
body {
  background-color: var(--bg) !important;
}

.woocommerce-page,
.woocommerce {
  background-color: transparent;
}
#page,
.site,
.site-main {
  background-color: var(--bg);
}

.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery {
  margin-left: auto;
}

.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center center;
  border-radius: 0 !important;
  margin: 0 auto;
}

.woocommerce div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  justify-content: center;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  margin: 0 !important;
}

.woocommerce div.product .flex-control-thumbs li {
  width: 70px !important;
  margin: 0 !important;
}

.woocommerce div.product .flex-control-thumbs li img {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--r-sm) !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast);
  max-height: none !important;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
  border-color: var(--red) !important;
}

.product-card__media img,
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.woocommerce ul.products li.product .add_to_cart_button.loading,
.product-card__add-to-cart.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.woocommerce ul.products li.product .add_to_cart_button.loading::after,
.product-card__add-to-cart.loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rrc-spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes rrc-spin {
  to { transform: rotate(360deg); }
}

.woocommerce ul.products li.product .add_to_cart_button.added,
.product-card__add-to-cart.added {
  background: var(--teal-dark) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
}

.woocommerce ul.products li.product .add_to_cart_button.added::before,
.product-card__add-to-cart.added::before {
  content: '✓ ';
}

@media (max-width: 600px) {
  .woocommerce div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce div.product form.cart .quantity {
    width: 100%;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }
}

.footer-logo .custom-logo-link img,
.footer-logo .custom-logo-link {
  display: block;
  max-height: 150px;
  width: auto;
}

.account-dropdown-wrap {
  position: relative;
}

.account-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease),
              visibility var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  pointer-events: none;
}

.account-dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.account-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-mid);
  border-top: 1px solid var(--border-mid);
  transform: rotate(45deg);
}

.account-dropdown-header {
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.account-dropdown-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.account-dropdown-email {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2em;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-links {
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
}

.account-dropdown-links li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
  letter-spacing: 0.01em;
}

.account-dropdown-links li a:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.account-dropdown-links li a svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.account-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}

.account-dropdown-signout a {
  color: var(--red-bright) !important;
}

.account-dropdown-signout a:hover {
  background: rgba(192,24,40,0.1) !important;
  color: var(--red-bright) !important;
}

.account-dropdown-login-btn {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--r-sm);
  margin: 0.3rem 0.75rem !important;
  padding: 0.6rem 1rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
  width: calc(100% - 1.5rem) !important;
}

.account-dropdown-login-btn:hover {
  background: var(--red-bright) !important;
  color: #fff !important;
}

.account-dropdown-register-btn {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid) !important;
  margin: 0 0.75rem 0.3rem !important;
  padding: 0.55rem 1rem !important;
  justify-content: center !important;
  width: calc(100% - 1.5rem) !important;
}

.account-dropdown-register-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-high) !important;
}

.account-dropdown-toggle[aria-expanded="true"] {
  background: var(--bg-elevated);
  color: var(--text);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce .cart-collaterals .checkout-button,
.woocommerce .woocommerce-cart-form button[type="submit"],
.woocommerce .coupon button,
.woocommerce .place-order button,
.wc-block-components-button,
.wc-block-cart__submit-button {
    font-family: var(--font-display) !important;
    background: var(--red) !important;
    color: #fff !important;
    border: 2px solid var(--red) !important;
    border-radius: var(--r-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 0.6em 1.5em !important;
    transition: color var(--t-mid) var(--ease) !important, background var(--t-mid) var(--ease) !important, border-color var(--t-mid) var(--ease) !important, box-shadow var(--t-mid) var(--ease) !important;
    cursor: pointer !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce .cart-collaterals .checkout-button:hover,
.woocommerce .woocommerce-cart-form button[type="submit"]:hover,
.woocommerce .coupon button:hover,
.woocommerce .place-order button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
    background: var(--red-bright) !important;
    border-color: var(--red-bright) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 28px rgba(220,30,50,0.5) !important;
    color: #fff !important;
}

.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
    background: var(--bg-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text) !important;
}
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-high) !important;
    transform: translateY(-1px);
    box-shadow: none;
}

.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) !important;
    background: transparent;
    color: var(--text);
}
.woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table th {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.woocommerce-cart table.cart td.product-name a {
    color: var(--text);
    font-weight: 700;
}
.woocommerce-cart table.cart td.product-name a:hover {
    color: var(--red-bright);
}
.woocommerce-cart table.cart a.remove {
    color: var(--red) !important;
    background: rgba(192,24,40,0.1);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 1.2rem;
    transition: color var(--t-fast), background var(--t-fast);
}
.woocommerce-cart table.cart a.remove:hover {
    background: var(--red);
    color: #fff !important;
}

.woocommerce-cart table.cart input.qty,
.woocommerce .quantity input.qty {
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 0.4em 0.7em;
    width: 70px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-lg);
}
.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--space-md);
    color: var(--text);
}
.woocommerce-cart .cart_totals table.shop_table {
    background: transparent;
    border: none;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
    color: var(--text);
}

.woocommerce-cart .coupon input.input-text {
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    padding: 0.6em 1em;
    color: var(--text);
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.woocommerce-checkout h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: var(--space-md);
    color: var(--text);
}
.woocommerce-checkout .form-row label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3em;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    padding: 0.7em 1em;
    color: var(--text);
    width: 100%;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--red);
    outline: none;
}

.woocommerce-checkout #payment {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--border);
    padding: var(--space-md);
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* ── My Account: full layout ─────────────────────────────────────────────── */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

/* Sidebar navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    list-style: none;
    border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 0.85em 1.2em;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--t-fast), background var(--t-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--red-bright);
    background: var(--bg-elevated);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--text-subtle);
    font-size: 0.82rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--red-bright);
    background: var(--bg-elevated);
}

/* Content panel */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-lg);
    color: var(--text);
}

/* ── Dashboard tab ───────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.woocommerce-account .woocommerce-MyAccount-content p a {
    color: var(--red-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-content p a:hover {
    color: var(--text);
}

/* ── Orders tab ─────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-elevated);
}

.woocommerce-account .woocommerce-orders-table thead,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table thead {
    background: var(--bg-elevated);
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table th {
    background: var(--bg-elevated);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.75em 1em;
    border-bottom: 1px solid var(--border-mid);
    text-align: left;
}

.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table td {
    padding: 0.85em 1em;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr:hover td {
    background: var(--bg-hover);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table .wc-order-status,
.woocommerce-account .woocommerce-orders-table .wc-order-status {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25em 0.7em;
    border-radius: var(--r-sm);
    display: inline-block;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border-mid);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .button {
    display: inline-flex;
    align-items: center;
    padding: 0.45em 1em;
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ── Downloads tab ──────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-downloads .download-product a {
    color: var(--red-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-downloads .download-file a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.45em 1em;
    background: var(--red);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background var(--t-fast);
}

.woocommerce-account .woocommerce-MyAccount-downloads .download-file a:hover {
    background: var(--red-bright);
}

/* ── Addresses tab ──────────────────────────────────────────────────────── */

/* WC wraps billing+shipping in .u-columns.col2-set with floated .col-1/.col-2.
   We reset the floats and use a flex row instead.                          */
.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    display: flex !important;
    gap: var(--space-md);
    flex-wrap: wrap;
    width: 100% !important;
    float: none !important;
    clear: both;
}

.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2,
.woocommerce-account .woocommerce-MyAccount-content .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col-2 {
    float: none !important;
    width: auto !important;
    flex: 1 1 240px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-md);
    height: 100%;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6em;
    margin-bottom: 0.8em;
    gap: 0.5em;
}

/* Reset the global h3 bleed — WC uses h3 for "Billing address" heading */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h3 {
    font-family: var(--font-display) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red-bright);
    text-decoration: none;
    border: 1px solid var(--red-dark);
    padding: 0.25em 0.7em;
    border-radius: var(--r-sm);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.woocommerce-account .woocommerce-MyAccount-content address {
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.8;
}

/* "You have not set up this type of address yet." empty state */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address p {
    color: var(--text-subtle);
    font-style: italic;
}

/* ── Account Details (edit-account) tab ────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset,
.woocommerce-account .woocommerce-MyAccount-content fieldset {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0.5em;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row {
    margin-bottom: var(--space-md);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4em;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row .required {
    color: var(--red-bright);
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100%;
    padding: 0.7em 1em;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    appearance: none;
    -webkit-appearance: none;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow);
}

.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em 2em;
    background: var(--red);
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}

.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
    background: var(--red-bright);
    transform: translateY(-1px);
}

/* ── Notices within account content ────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    padding: 0.85em 1.1em;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
    border: 1px solid;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
    background: rgba(10, 176, 160, 0.08);
    border-color: var(--teal-dark);
    color: var(--teal);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    background: rgba(192, 24, 40, 0.08);
    border-color: var(--red-dark);
    color: var(--red-bright);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    background: var(--bg-elevated);
    border-color: var(--border-mid);
    color: var(--text-muted);
}


.woocommerce-account .shop_table,
.woocommerce table.shop_table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-bottom: 1px solid var(--border);
    padding: var(--space-md);
    color: var(--text);
}
.woocommerce-account .shop_table th,
.woocommerce table.shop_table th {
    background: var(--bg-elevated);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}


.home .site-main,
.front-page .site-main {
  padding-top: 0 !important;
}

.shop-header .woocommerce-products-header__title {
  display: none !important;
}

.woocommerce-products-header__title {
  font-weight: 800 !important;
  margin-bottom: 0 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}

.woocommerce-page .site-main .section:first-of-type {
  padding-top: 0 !important;
}

.navigation.pagination {
  margin-top: var(--space-xl);
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.page-numbers:hover {
  border-color: var(--border-mid);
  color: var(--text);
}

.page-numbers.current {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.page-numbers.dots {
  border: none;
  background: transparent;
}

/* ── COA Page: modern horizontal list ───────────────────────────────────── */

#coaSearch {
  display: block;
  margin: 0 0 1.75rem 0;
  padding: 0.72rem 1rem 0.72rem 2.75rem;
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a756d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.85rem center;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
}

#coaSearch:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

#coaSearch::placeholder { color: var(--text-subtle); }

/* Vertical list */
.coa-product-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Row: thumbnail | info | actions */
.coa-item {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  column-gap: 1.1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.coa-item:hover {
  background: var(--bg-elevated);
  border-color: var(--border-mid);
  transform: none;
}

/* Thumbnail */
.coa-image {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  margin: 0;
}

.coa-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.coa-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  border: none;
  transition: transform var(--t-mid) var(--ease);
}

.coa-item:hover .coa-image img { transform: scale(1.06); }

/* Info block */
.coa-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.coa-item h3 {
  margin: 0;
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coa-item h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

.coa-item h3 a:hover { color: var(--red-bright); }

.coa-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.coa-item-sku {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-subtle);
  letter-spacing: 0.03em;
}

.coa-item-status {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 100px;
}

.coa-item-status.is-available {
  background: rgba(10,176,160,0.1);
  color: var(--teal);
  border: 1px solid rgba(10,176,160,0.2);
}

.coa-item-status.is-pending {
  background: var(--bg-elevated);
  color: var(--text-subtle);
  border: 1px solid var(--border);
}

/* Actions */
.coa-buttons {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-top: 0;
  justify-content: flex-end;
}

.coa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.85rem;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t-fast);
}

.coa-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-high);
  color: var(--text);
}

.coa-btn.secondary {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
}

.coa-btn.secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-high);
  color: var(--text);
}

/* Mobile */
@media (max-width: 580px) {
  .coa-item {
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
  }

  .coa-image {
    width: 54px;
    height: 54px;
    grid-row: 1 / 2;
  }

  .coa-buttons {
    grid-column: 1 / -1;
    margin-top: 0.6rem;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.woocommerce ul.products li.product a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.woocommerce ul.products li.product a.button i {
    font-size: 16px;
}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li {
    list-style: none !important;
}
.woocommerce table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text {
    width: 220px !important;
}

.cart-count {
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.cart-count.is-empty {
  display: none;
}

/* ── WooCommerce notices wrapper ─────────────────────────────────────────
   WC renders .woocommerce-notices-wrapper BEFORE the page container, so it
   sits flush against the fixed header. We give it the same container width
   and top offset so it flows naturally inside the page layout.           */
.woocommerce-notices-wrapper {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  box-sizing: border-box;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r-md) !important;
  border-top: none !important;
  border-left: 3px solid currentColor !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  padding: 0.9rem 1.1rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: var(--space-md) !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}

/* Suppress WC's built-in ::before icon — we use flex layout instead */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before {
  display: none !important;
  content: none !important;
}

/* The "Continue Shopping" / "View Cart" button inside the notice */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-info .button,
.woocommerce-info a.button {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4em 1em !important;
  background: transparent !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast) !important;
}

.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info .button:hover,
.woocommerce-info a.button:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.woocommerce-message { color: #2ecc71 !important; background: rgba(46,204,113,0.08) !important; }
.woocommerce-info    { color: #3b9fdb !important; background: var(--bg-card) !important; }
.woocommerce-error   { color: var(--red-bright) !important; background: rgba(200,30,30,0.08) !important; }

ul.woocommerce-error {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  list-style: none !important;
  padding-left: 0 !important;
}

ul.woocommerce-error li {
  display: block !important;
  font-size: 0.88rem !important;
  color: var(--text) !important;
  padding: 0 !important;
}

.woocommerce-checkout .woocommerce-info {
  border-left-color: var(--border-mid) !important;
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 0.9rem !important;
  padding-left: 3rem !important;
}

.woocommerce-checkout .woocommerce-info a {
  color: var(--red-bright) !important;
}

.woocommerce-cart .woocommerce-cart-form a.remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-muted) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast) !important;
}

.woocommerce-cart .woocommerce-cart-form a.remove:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

.woocommerce-NoticeGroup .woocommerce-error {
  display: none !important;
}
.woocommerce .site-main > .container {
    padding-top: 60px;
    padding-bottom: 60px;
}
/* ── Skip Link ──────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: 9999;
  padding: 0.6em 1.2em;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid var(--red-bright);
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--space-md);
  outline: none;
}

/* ── Focus-visible ring ─────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

/* Remove default focus ring where focus-visible is applied */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Guest price / add-to-cart gate ────────────────────────────────────── */

.guest-price-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.guest-price-lock:hover {
  color: var(--red-bright);
  border-color: rgba(192, 24, 40, 0.35);
}

.product-card__guest-gate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}

.product-card__guest-gate:hover {
  color: var(--red-bright);
  border-color: rgba(192, 24, 40, 0.35);
}

.guest-atc-btn {
  /* Inherits .product-card__add-to-cart base styles */
  text-decoration: none !important;
}

/* ── Stagger via CSS custom property ────────────────────────────────────── */

.reveal[style*="--stagger-delay"] {
  transition-delay: var(--stagger-delay, 0ms);
}

/* ── Nav active underline indicator ────────────────────────────────────── */

.header-nav ul li.current-menu-item > a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0.75em;
  right: 0.75em;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}


/* ── Breadcrumb aria-current ────────────────────────────────────────────── */

.breadcrumbs .current[aria-current="page"] {
  color: var(--text-muted);
}
/* Hide ONLY the edit-address H2 safely */
.woocommerce-edit-address .entry-content h2 {
    display: none !important;
}
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
    content: none !important;
    display: none !important;
}
.woocommerce .woocommerce-customer-details .woocommerce-column__title {
	font-size: 2.0rem;
}

/* Notice colours consolidated above */

/* ── Search overlay: mobile fix ────────────────────────────────────────────
   On small screens the search input + submit button overflow the viewport
   because of the large side padding. We shrink padding, constrain the button
   to an icon-only square, and make the form stack if needed.               */

@media (max-width: 640px) {
  .search-overlay form {
    padding: 0 var(--space-md);   /* 1.25rem each side instead of 2rem */
    gap: 0.5rem;
    flex-wrap: nowrap;            /* keep them on one row */
    align-items: stretch;
  }

  .search-overlay input[type="search"] {
    font-size: 1rem;              /* slightly smaller so it fits */
    padding: 0.85em 1em;
    min-width: 0;                 /* let it shrink below its content size */
  }

  /* Collapse the submit button to an icon-only square — the SVG is already
     inside it and screen-reader text is visually hidden anyway.            */
  .search-overlay form .btn.btn--primary,
  .search-overlay form button[type="submit"] {
    padding: 0;
    width: 48px;
    min-width: 48px;
    height: 48px;
    flex-shrink: 0;
    justify-content: center;
    border-radius: var(--r-md);
  }
}

/* ── Logo: tell the browser the correct display size ───────────────────────
   The logo image is 500×500 but displayed at ~60px tall on mobile
   (header-h is 60px with 20px margin = 40px max). Adding explicit width/
   height attributes in PHP is ideal, but we can also constrain via CSS so
   the browser doesn't allocate more decode budget than needed.             */

.header-logo .custom-logo-link img,
.header-logo img {
  /* Already set in PHP (width/height attrs), but reinforce intrinsic size */
  width: auto;
  max-height: calc(var(--header-h) - 20px);
  /* Hint that this is the LCP candidate */
  content-visibility: auto;
}

/* ── Reduce unused CSS: hide mobile-only rules on desktop ──────────────────
   Small savings but helps the "reduce unused CSS" audit.                   */
@media (min-width: 1025px) {
  .mobile-nav,
  .menu-toggle { display: none !important; }
}
.woocommerce-notices-wrapper {
	content: none !important;
    display: none !important;
}