/*
 Theme Name:   Floaty Goat
 Theme URI:    https://floatygoat.com
 Description:  Premium cannabis child theme for Kadence — dark header/footer, gradient accents, clean white content.
 Author:       Floaty Goat
 Author URI:   https://floatygoat.com
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  floatygoat
*/

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
  /* ─── Design System Colors ─── */
  --color-primary: #9B6FD6;
  --color-primary-dark: #7B4FB8;
  --color-primary-light: #F5F0FF;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #4A4A5E;
  --color-border: #E8E8ED;
  --color-background: #FFFFFF;
  --color-success: #4A7C59;
  --color-warning: #D4A843;
  --color-error: #C0392B;
  --color-sale: #E63946;

  /* ─── Design System Typography ─── */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;

  /* ─── Design System Spacing ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ─── Design System Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ─── Design System Shadows ─── */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 12px rgba(155, 111, 214, 0.3);

  /* ─── Legacy Brand Palette (backward compat) ─── */
  --fg-purple: #8B5CF6;
  --fg-magenta: #D946EF;
  --fg-pink: #D946EF;
  --fg-cyan: #22D3EE;
  --fg-dark: #0D0D0D;

  /* Strain colours */
  --fg-sativa: #16A34A;
  --fg-indica: #8B5CF6;
  --fg-hybrid: #0EA5E9;

  /* Brand gradient */
  --fg-gradient: linear-gradient(135deg, #8B5CF6, #D946EF);
  --fg-gradient-primary: linear-gradient(135deg, #8B5CF6, #D946EF);

  /* Typography (mapped to design system) */
  --fg-font-heading: var(--font-display);
  --fg-font-body: var(--font-body);

  /* Layout */
  --fg-container: 1280px;
  --fg-radius: 0.75rem;
  --fg-radius-full: 9999px;
}

/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography Scale ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-top: 0;
}

h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 36px;
  font-weight: 600;
}

h3 {
  font-size: 28px;
  font-weight: 600;
}

h4 {
  font-size: 24px;
  font-weight: 600;
}

h5 {
  font-size: 20px;
  font-weight: 600;
}

h6 {
  font-size: 18px;
  font-weight: 600;
}

/* Body text variations */
.text-large {
  font-size: 18px;
  line-height: 1.7;
}

.text-small {
  font-size: 14px;
  line-height: 1.5;
}

.text-caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Paragraph spacing */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-dark);
}

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

/* Mobile typography adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }
}

/* ==========================================================================
   2b. Focus States & Accessibility
   ========================================================================== */

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible styles for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Focus ring for buttons with background */
.gradient-btn:focus-visible,
.fg-btn-outline:focus-visible,
button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(155, 111, 214, 0.25);
}

/* Skip to content link (add to header.php if needed) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 10000;
  font-weight: 500;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
  }

  a:focus-visible,
  button:focus-visible {
    outline-width: 3px;
  }
}

/* ==========================================================================
   3. Container
   ========================================================================== */

.fg-container {
  width: 100%;
  max-width: var(--fg-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .fg-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .fg-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ==========================================================================
   4. Section Spacing
   ========================================================================== */

.fg-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .fg-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .fg-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ============================================
   4b. Homepage — Tighter Section Spacing
   ============================================ */

/* Reduce section header margins */
.home .fg-section-header {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .home .fg-section-header {
    margin-bottom: 2.5rem;
  }
}

/* Tighten heading + paragraph spacing */
.home .fg-section-header h2 {
  margin-bottom: 0.75rem;
}

.home .fg-section-desc {
  margin-bottom: 0;
}

/* Reduce footer spacing in sections */
.home .fg-section-footer {
  margin-top: 2rem;
}

/* ==========================================================================
   5. Utility Classes — Gradient
   ========================================================================== */

.gradient-text {
  background: var(--fg-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg {
  background: var(--fg-gradient);
}

.gradient-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: var(--fg-gradient);
  color: #ffffff;
  font-family: var(--fg-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  border: none;
  border-radius: var(--fg-radius-full);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.gradient-btn:hover {
  color: #ffffff;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.45), 0 0 48px rgba(217, 70, 239, 0.2);
  transform: translateY(-1px);
}

.gradient-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.fg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s ease;
}

.fg-header.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Trust Bar — below header on all pages */
.fg-trust-bar {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--fg-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fg-trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0.5rem 0;
}

.fg-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.fg-trust-item svg {
  opacity: 0.6;
}

.fg-trust-item--link {
  color: var(--fg-cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fg-trust-item--link:hover {
  color: #ffffff;
}

.fg-trust-item--link svg {
  opacity: 1;
}

/* Adjust body padding for trust bar */
body {
  padding-top: 132px !important;
}

@media (max-width: 768px) {
  .fg-trust-bar {
    top: 80px;
  }

  .fg-trust-bar-inner {
    gap: 1rem;
    padding: 0.4rem 0;
    flex-wrap: wrap;
  }

  .fg-trust-item {
    font-size: 0.6rem;
  }

  body {
    padding-top: 112px !important;
  }
}

@media (max-width: 480px) {
  .fg-trust-bar-inner {
    gap: 0.75rem;
  }

  .fg-trust-item span:not(:first-child) {
    display: none;
  }

  .fg-trust-item::after {
    content: attr(data-short);
  }
}

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

/* Logo */
.fg-logo {
  flex-shrink: 0;
}

.fg-logo a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-family: var(--fg-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.fg-logo img {
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Mobile: smaller logo */
@media (max-width: 768px) {
  .fg-header-inner {
    height: 80px;
  }

  .fg-logo img {
    max-height: 55px !important;
  }
}

/* Footer logo — slightly smaller */
.fg-logo--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.fg-logo--footer img {
  width: 180px !important;
  height: auto !important;
  max-height: none !important;
}

/* Desktop navigation */
.fg-nav {
  display: none;
}

@media (min-width: 1024px) {
  .fg-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

.fg-nav a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.fg-nav a:hover,
.fg-nav a.current {
  color: var(--fg-cyan);
}

/* Kadence header nav overrides — cyan hover */
.header-navigation .menu-item a:hover,
.header-navigation .current-menu-item a,
.header-menu-container .menu-item a:hover,
.header-navigation nav .menu > .menu-item > a:hover,
.main-navigation .menu > li > a:hover,
.header-navigation .current-menu-item > a {
  color: var(--fg-cyan) !important;
  transition: color 0.3s ease;
}

/* Header actions */
.fg-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fg-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.fg-cart-link:hover {
  color: #ffffff;
}

.fg-cart-link svg {
  width: 22px;
  height: 22px;
}

.fg-cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fg-magenta);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--fg-radius-full);
  padding: 0 4px;
}

.fg-header-cta {
  display: none;
}

@media (min-width: 1024px) {
  .fg-header-cta {
    display: inline-flex;
  }
}

/* Hamburger */
.fg-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1024px) {
  .fg-hamburger {
    display: none;
  }
}

.fg-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fg-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fg-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.fg-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================
   MOBILE MENU OVERLAY
   ============================ */
.fg-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 13, 13, 0.98);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fg-mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Close Button */
.fg-mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 10px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease, color 0.2s ease;
}

.fg-mobile-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--fg-cyan);
}

.fg-mobile-close svg {
  width: 28px;
  height: 28px;
}

/* Mobile Navigation */
.fg-mobile-nav {
  text-align: center;
}

.fg-mobile-nav ul,
.fg-mobile-nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.fg-mobile-nav li {
  margin-bottom: 8px;
}

.fg-mobile-nav a,
.fg-mobile-menu .menu-item a {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--fg-font-body);
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
  letter-spacing: 0.5px;
  min-height: 44px;
}

.fg-mobile-nav a:hover,
.fg-mobile-menu .menu-item a:hover {
  color: var(--fg-cyan);
  transform: scale(1.05);
}

/* Shop Now button in mobile menu */
.fg-mobile-cta {
  margin-top: 30px !important;
  display: inline-block;
  background: linear-gradient(135deg, #8B5CF6, #D946EF);
  color: white !important;
  padding: 14px 36px !important;
  border-radius: 50px;
  font-size: 16px !important;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fg-mobile-cta:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Mobile nav container */
.fg-mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile CTA button */
.fg-mobile-cta {
  margin-top: 1.5rem;
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.fg-footer {
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fg-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (min-width: 640px) {
  .fg-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 4rem;
  }
}

@media (max-width: 767px) {
  .fg-footer-grid {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Footer Section Headers */
.fg-footer h4 {
  color: #ffffff;
  font-family: var(--fg-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  text-transform: none;
}

.fg-footer-brand p {
  margin-top: 1rem;
  max-width: 280px;
  color: #B0B0B0;
  line-height: 1.7;
}

/* Footer Links */
.fg-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fg-footer-links li {
  margin-bottom: 12px;
}

.fg-footer-links li:last-child {
  margin-bottom: 0;
}

.fg-footer-links a {
  color: #B0B0B0;
  font-size: 14px;
  line-height: 2;
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
  min-height: 44px;
  padding: 6px 0;
}

.fg-footer-links a:hover {
  color: #B794F4;
  transform: translateX(4px);
}

/* Footer Contact */
.fg-footer-contact p {
  margin: 0.25rem 0;
}

.fg-footer-contact > p a {
  color: #B0B0B0;
  font-size: 14px;
  transition: color 0.3s ease;
}

.fg-footer-contact > p a:hover {
  color: #B794F4;
}

/* Social Media Section */
.fg-footer-social-label {
  color: #B0B0B0;
  font-size: 13px;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.fg-footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.fg-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.fg-footer-social a svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.fg-footer-social a:hover {
  color: #B794F4;
  border-color: #B794F4;
  background: rgba(183, 148, 244, 0.1);
}

.fg-footer-social a:hover svg {
  transform: scale(1.1);
}

/* Purchase Restriction Section */
.fg-footer-restriction {
  background: #1a1a1a;
  padding: 30px 0;
}

.footer-purchase-restriction {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
  padding: 0 20px;
}

.footer-purchase-restriction strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
}

/* Bottom Bar */
.fg-footer-bottom-wrap {
  border-top: 1px solid #2a2a2a;
  background: rgba(0, 0, 0, 0.3);
}

.fg-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .fg-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Payment Icons in Bottom Bar */
.fg-footer-bottom-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .fg-footer-bottom-payment {
    align-items: flex-start;
  }
}

.fg-payment-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fg-payment-icons {
  max-width: 200px;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.fg-payment-icons:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .fg-payment-icons {
    max-width: 180px;
  }
}

/* Copyright */
.fg-footer-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Disclaimer */
.fg-footer-disclaimer {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

@media (min-width: 768px) {
  .fg-footer-disclaimer {
    text-align: right;
  }
}

/* Mobile touch targets */
@media (max-width: 767px) {
  .fg-footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .fg-footer-bottom {
    gap: 1.25rem;
  }

  .fg-footer-copyright,
  .fg-footer-disclaimer {
    font-size: 12px;
  }
}

/* ==========================================================================
   8. WooCommerce — Product Cards
   ========================================================================== */

.woocommerce ul.products li.product,
.fg-product-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.woocommerce ul.products li.product:hover,
.fg-product-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 12px 36px rgba(139, 92, 246, 0.15);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product a img,
.fg-product-card img {
  border-radius: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--fg-dark);
  font-weight: 600;
}

.woocommerce ul.products li.product .button,
.fg-product-card .button {
  background: var(--fg-gradient);
  color: #ffffff;
  border: none;
  border-radius: var(--fg-radius-full);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.025em;
  transition: box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .button:hover,
.fg-product-card .button:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ==========================================================================
   9. Strain Type Badges
   ========================================================================== */

.fg-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--fg-radius-full);
  line-height: 1.4;
}

.fg-badge--sativa {
  background: rgba(22, 163, 74, 0.12);
  color: var(--fg-sativa);
}

.fg-badge--indica {
  background: rgba(139, 92, 246, 0.12);
  color: var(--fg-indica);
}

.fg-badge--hybrid {
  background: rgba(14, 165, 233, 0.12);
  color: var(--fg-hybrid);
}

/* ==========================================================================
   10. Age Gate
   ========================================================================== */

.fg-age-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.fg-age-gate-box {
  max-width: 420px;
  padding: 2.5rem;
  text-align: center;
}

.fg-age-gate-logo {
  display: block;
  max-width: 180px;
  height: auto;
  margin: 0 auto 1.5rem auto;
}

.fg-age-gate-box h2 {
  font-family: var(--fg-font-heading);
  color: #ffffff;
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.fg-age-gate-box p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.fg-age-gate-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.fg-age-gate-actions .gradient-btn {
  min-width: 120px;
}

.fg-age-gate-deny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.75rem 1.75rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--fg-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--fg-radius-full);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.fg-age-gate-deny:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   11. Misc Helpers
   ========================================================================== */

.fg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Push content below fixed header + trust bar — see trust bar section */

/* ==========================================================================
   12. Shared — Section Headers
   ========================================================================== */

.fg-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.fg-section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-purple);
  margin-bottom: 0.75rem;
}

.fg-section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .fg-section-header h2 {
    font-size: 2.5rem;
  }
}

.fg-section-desc {
  color: #6b7280;
  font-size: 1.05rem;
  line-height: 1.7;
}

.fg-section-footer {
  text-align: center;
  margin-top: 2.5rem;
}

/* Outline button */
.fg-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--fg-purple);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--fg-radius-full);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.fg-btn-outline:hover {
  border-color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.06);
  color: var(--fg-purple);
}

/* ==========================================================================
   13. Hero — Image Slideshow
   ========================================================================== */

.fg-hero {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  text-align: center;
  height: 80vh;
  min-height: 520px;
  max-height: 800px;
}

@media (min-width: 768px) {
  .fg-hero {
    height: 85vh;
    min-height: 600px;
    max-height: 900px;
  }
}

@media (min-width: 1024px) {
  .fg-hero {
    height: 90vh;
    min-height: 650px;
    max-height: 960px;
  }
}

/* Slides container */
.fg-hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.fg-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Full-bleed background image */
.fg-hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark overlay for text readability */
.fg-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.45) 0%,
    rgba(13, 13, 13, 0.55) 50%,
    rgba(13, 13, 13, 0.75) 100%
  );
}

/* Slide text content */
.fg-hero-inner {
  position: relative;
  z-index: 2;
  padding: 5rem 0 4rem;
}

@media (min-width: 768px) {
  .fg-hero-inner {
    padding: 7rem 0 6rem;
  }
}

.fg-hero-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-cyan);
  margin-bottom: 1.25rem;
}

.fg-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.25rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .fg-hero-title {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .fg-hero-title {
    font-size: 4.5rem;
  }
}

.fg-hero-sub {
  max-width: 560px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.fg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.fg-hero-actions .fg-btn-outline {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.fg-hero-actions .fg-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.fg-hero-btn {
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
}

/* Navigation dots */
.fg-hero-dots {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 4px;
}

@media (min-width: 768px) {
  .fg-hero-dots {
    bottom: 5rem;
  }
}

.fg-hero-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.fg-hero-dot:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.fg-hero-dot.active {
  width: 8px !important;
  height: 8px !important;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

/* Prev / Next arrows */
.fg-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(13, 13, 13, 0.35);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  padding: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fg-hero-arrow:hover {
  background: rgba(139, 92, 246, 0.35);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ffffff;
}

.fg-hero-arrow--prev {
  left: 1rem;
}

.fg-hero-arrow--next {
  right: 1rem;
}

@media (min-width: 768px) {
  .fg-hero-arrow--prev {
    left: 1.5rem;
  }
  .fg-hero-arrow--next {
    right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .fg-hero-arrow--prev {
    left: 2rem;
  }
  .fg-hero-arrow--next {
    right: 2rem;
  }
}

/* Hide arrows on very small screens */
@media (max-width: 479px) {
  .fg-hero-arrow {
    display: none;
  }
}

/* Trust badges — anchored at bottom of hero */
.fg-hero-badges {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .fg-hero-badges {
    bottom: 1.5rem;
  }
}

.fg-hero-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.fg-hero-badge svg {
  color: var(--fg-cyan);
  flex-shrink: 0;
}

/* ==========================================================================
   14. Featured Products — Home Grid
   ========================================================================== */

.fg-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .fg-product-grid {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .fg-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fg-product-card-img {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f9fafb;
}

.fg-product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.fg-product-card:hover .fg-product-card-img img {
  transform: scale(1.05);
}

.fg-product-card-img .fg-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.fg-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f0ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

.fg-product-card-body {
  padding: 1.25rem;
}

@media (max-width: 639px) {
  .fg-product-card-body {
    padding: 0.875rem;
  }
}

.fg-product-card-body h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

@media (max-width: 639px) {
  .fg-product-card-body h3 {
    font-size: 0.875rem;
  }
}

.fg-product-card-body h3 a {
  color: var(--fg-dark);
}

.fg-product-card-body h3 a:hover {
  color: var(--fg-purple);
}

.fg-product-price {
  font-weight: 600;
  color: var(--fg-dark);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.fg-product-card-btn {
  width: 100%;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

@media (max-width: 639px) {
  .fg-product-card-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ==========================================================================
   15. Strain Category Cards
   ========================================================================== */

.fg-strain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fg-strain-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-strain-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  background: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.fg-strain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.fg-strain-card--sativa:hover { border-color: var(--fg-sativa); }
.fg-strain-card--indica:hover { border-color: var(--fg-indica); }
.fg-strain-card--hybrid:hover { border-color: var(--fg-hybrid); }

.fg-strain-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius-full);
  margin-bottom: 1.25rem;
}

.fg-strain-card--sativa .fg-strain-icon {
  background: rgba(22, 163, 74, 0.1);
  color: var(--fg-sativa);
}

.fg-strain-card--indica .fg-strain-icon {
  background: rgba(139, 92, 246, 0.1);
  color: var(--fg-indica);
}

.fg-strain-card--hybrid .fg-strain-icon {
  background: rgba(14, 165, 233, 0.1);
  color: var(--fg-hybrid);
}

.fg-strain-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.fg-strain-card p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.fg-strain-card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-purple);
  transition: color 0.2s ease;
}

.fg-strain-card:hover .fg-strain-card-link {
  color: var(--fg-magenta);
}

/* ==========================================================================
   16. Brand Story
   ========================================================================== */

.fg-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .fg-story-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fg-story-img img {
  width: 100%;
  border-radius: var(--fg-radius);
}

.fg-story-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f3f0ff 0%, #fdf2f8 50%, #ecfeff 100%);
  border-radius: var(--fg-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-story-text .fg-section-tag {
  margin-bottom: 0.5rem;
}

.fg-story-text h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-story-text h2 {
    font-size: 2.25rem;
  }
}

.fg-story-text p {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* ==========================================================================
   17. Trust / Features Grid
   ========================================================================== */

.fg-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .fg-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fg-trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fg-trust-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 2rem;
  text-align: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-trust-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

.fg-trust-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--fg-radius-full);
}

.fg-trust-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.fg-trust-card p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.65;
}

/* ==========================================================================
   18. Lab Results CTA
   ========================================================================== */

.fg-lab-cta-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--fg-dark);
  border-radius: 1rem;
  padding: 3rem 2rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fg-lab-cta-box {
    grid-template-columns: 1.3fr 1fr;
    padding: 4rem 3.5rem;
  }
}

.fg-lab-cta-text {
  color: #ffffff;
}

.fg-lab-cta-text h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .fg-lab-cta-text h2 {
    font-size: 2.25rem;
  }
}

.fg-lab-cta-text p {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Bar chart graphic */
.fg-lab-graphic {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
  height: 180px;
}

.fg-lab-bar {
  width: 48px;
  height: var(--bar-h, 50%);
  background: var(--bar-color, var(--fg-purple));
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.5rem;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.fg-lab-bar:hover {
  opacity: 1;
}

.fg-lab-bar span {
  font-size: 0.65rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   19. Newsletter
   ========================================================================== */

.fg-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 460px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .fg-newsletter-form {
    flex-direction: row;
  }
}

.fg-newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.8rem 1.25rem;
  border: 1px solid #d1d5db;
  border-radius: var(--fg-radius-full);
  font-family: var(--fg-font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fg-newsletter-form input[type="email"]:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.fg-newsletter-form .gradient-btn {
  white-space: nowrap;
}

.fg-newsletter-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* ==========================================================================
   19b. Kill Kadence "Shop" title hero block on WooCommerce pages
   ========================================================================== */

.woocommerce .entry-hero,
.woocommerce .product-archive-hero-section,
.woocommerce .entry-hero-container-inner,
.woocommerce-page .entry-hero,
.woocommerce-page .product-archive-hero-section,
body.post-type-archive-product .entry-hero,
body.post-type-archive-product .hero-section-overlay,
.woocommerce header.product-archive-title,
.woocommerce header.entry-header.product-archive-title,
.woocommerce .woocommerce-products-header {
  display: none !important;
}

/* ==========================================================================
   20. Shop Hero
   ========================================================================== */

.fg-shop-hero {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  padding: 7rem 0 6rem;
  text-align: center;
  background-image: url('/wp-content/uploads/2026/02/shop-hero.webp');
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .fg-shop-hero {
    padding: 9rem 0 7rem;
  }
}

@media (min-width: 1024px) {
  .fg-shop-hero {
    padding: 10rem 0 8rem;
  }
}

/* Dark overlay for text readability */
.fg-shop-hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.5) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.75) 100%
  );
  pointer-events: none;
}

.fg-shop-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

/* Shop hero title — Playfair Display with gradient accent */
.fg-shop-hero-title {
  font-family: var(--fg-font-heading);
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-shop-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-shop-hero-title {
    font-size: 3.5rem;
  }
}

/* Shop hero subtitle */
.fg-shop-hero-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* Breadcrumbs */
.fg-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.fg-breadcrumbs a {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s ease;
}

.fg-breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.fg-breadcrumbs span {
  color: rgba(255, 255, 255, 0.6);
}

.fg-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

/* ==========================================================================
   21. Shop Toolbar
   ========================================================================== */

.fg-shop-toolbar-wrap {
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 72px;
  z-index: 40;
}

.fg-shop-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

@media (min-width: 768px) {
  .fg-shop-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Filter pills */
.fg-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fg-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--fg-radius-full);
  transition: all 0.2s ease;
}

.fg-pill:hover {
  color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.15);
}

.fg-pill.active {
  color: #ffffff;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-pill--sativa.active {
  background: var(--fg-sativa);
  border-color: var(--fg-sativa);
}

.fg-pill--indica.active {
  background: var(--fg-indica);
  border-color: var(--fg-indica);
}

.fg-pill--hybrid.active {
  background: var(--fg-hybrid);
  border-color: var(--fg-hybrid);
}

/* Product type pills */
.fg-pill--flower.active {
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-pill--prerolls.active {
  background: var(--fg-magenta);
  border-color: var(--fg-magenta);
}

/* Right side — count + sort */
.fg-toolbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fg-result-count {
  font-size: 0.8rem;
  color: #9ca3af;
  white-space: nowrap;
}

.fg-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4rem 2rem 0.4rem 0.85rem;
  font-family: var(--fg-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") right 0.65rem center no-repeat;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius-full);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.fg-sort-select:focus {
  outline: none;
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ==========================================================================
   22. Shop Product Grid (archive-specific)
   ========================================================================== */

.fg-product-grid--shop {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .fg-product-grid--shop {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .fg-product-grid--shop {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   23. Product Card — Shop Enhancements
   ========================================================================== */

/* Sale badge */
.fg-sale-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--fg-magenta);
  border-radius: var(--fg-radius-full);
  z-index: 2;
}

/* Potency meta row */
.fg-product-meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.fg-meta-item {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.02em;
}

/* Star rating */
.fg-product-rating {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 0.6rem;
}

.fg-star--full {
  color: #fbbf24;
}

.fg-star--half {
  color: #fbbf24;
}

.fg-rating-count {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* ATC form reset */
.fg-atc-form {
  margin: 0;
  padding: 0;
}

/* Out-of-stock button */
.fg-oos-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: var(--fg-radius-full);
  cursor: not-allowed;
}

/* ==========================================================================
   24. Pagination
   ========================================================================== */

.fg-pagination {
  margin-top: 3rem;
  text-align: center;
}

.fg-pagination ul {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fg-pagination li {
  display: inline-flex;
}

.fg-pagination a,
.fg-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  transition: all 0.2s ease;
}

.fg-pagination a:hover {
  color: var(--fg-purple);
  border-color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.04);
}

.fg-pagination span.current {
  color: #ffffff;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-pagination .prev,
.fg-pagination .next {
  font-size: 1rem;
}

/* ==========================================================================
   25. Empty Shop State
   ========================================================================== */

.fg-empty-shop {
  text-align: center;
  padding: 4rem 1rem;
}

.fg-empty-icon {
  margin-bottom: 1.5rem;
}

.fg-empty-shop h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.fg-empty-shop p {
  color: #6b7280;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================================================
   26. WooCommerce Notices Override
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--fg-radius) !important;
  border-left: 4px solid var(--fg-purple) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.9rem;
  background: #f3f0ff !important;
}

.woocommerce-error {
  border-left-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--fg-purple) !important;
}

.woocommerce-message .button {
  background: var(--fg-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--fg-radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 1.25rem !important;
}

/* ==========================================================================
   27. Single Product — Breadcrumbs (light variant)
   ========================================================================== */

.fg-sp-breadcrumbs-wrap {
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding: 0.85rem 0;
}

.fg-breadcrumbs--light a {
  color: #9ca3af;
}

.fg-breadcrumbs--light a:hover {
  color: var(--fg-purple);
}

.fg-breadcrumbs--light span {
  color: #374151;
}

.fg-breadcrumbs--light .fg-breadcrumb-sep {
  color: #d1d5db;
}

.fg-breadcrumbs--light {
  justify-content: flex-start;
}

/* ==========================================================================
   28. Single Product — 2-Column Grid
   ========================================================================== */

.fg-sp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .fg-sp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-sp-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
  }
}

/* ==========================================================================
   29. Single Product — Gallery
   ========================================================================== */

.fg-sp-gallery {
  position: relative;
  max-height: 580px; /* Main image + thumbnails */
}

.fg-sp-main-img {
  position: relative;
  border-radius: var(--fg-radius);
  overflow: hidden;
  background: #f9fafb;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-sp-main-img img {
  width: auto;
  max-width: 100%;
  max-height: 480px;
  display: block;
  border-radius: var(--fg-radius);
  object-fit: contain;
  margin: 0 auto;
}

.fg-sale-badge--lg {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  z-index: 3;
}

/* Thumbnails */
.fg-sp-thumbs {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.fg-sp-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 0.2s ease;
}

.fg-sp-thumb.active,
.fg-sp-thumb:hover {
  border-color: var(--fg-purple);
}

.fg-sp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: Constrain gallery height */
@media (max-width: 767px) {
  .fg-sp-gallery {
    max-height: 420px;
  }

  .fg-sp-main-img {
    max-height: 350px;
  }

  .fg-sp-main-img img {
    max-height: 350px;
  }
}

/* ==========================================================================
   30. Single Product — Details
   ========================================================================== */

.fg-sp-details {
  display: flex;
  flex-direction: column;
}

/* Top line: badge + SKU */
.fg-sp-topline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fg-sp-sku {
  font-size: 0.75rem;
  color: #9ca3af;
  letter-spacing: 0.03em;
}

/* Title */
.fg-sp-title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

@media (min-width: 768px) {
  .fg-sp-title {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .fg-sp-title {
    font-size: 2.25rem;
  }
}

/* Rating row */
.fg-sp-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.fg-sp-review-link {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fg-sp-review-link:hover {
  color: var(--fg-purple);
}

/* Price */
.fg-sp-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg-dark);
  margin-bottom: 1rem;
}

.fg-sp-price del {
  color: #9ca3af;
  font-weight: 400;
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

.fg-sp-price ins {
  text-decoration: none;
  color: var(--fg-purple);
}

/* Excerpt */
.fg-sp-excerpt {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.fg-sp-excerpt p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   31. Single Product — Potency Stat Bars
   ========================================================================== */

.fg-sp-stats {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f9fafb;
  border-radius: var(--fg-radius);
  border: 1px solid #f3f4f6;
}

.fg-stat-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.fg-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.fg-stat-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fg-dark);
}

.fg-stat-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.fg-stat-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.fg-stat-fill--thc {
  background: var(--fg-gradient);
}

.fg-stat-fill--cbd {
  background: linear-gradient(90deg, var(--fg-cyan), var(--fg-sativa));
}

/* ==========================================================================
   32. Single Product — Pills (Effects, Flavors, Terpenes)
   ========================================================================== */

.fg-sp-pills-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.fg-sp-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fg-sp-pills-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  flex-shrink: 0;
  min-width: 65px;
}

.fg-sp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fg-sp-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: var(--fg-radius-full);
}

/* ==========================================================================
   33. Single Product — Stock Status
   ========================================================================== */

.fg-sp-stock {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}

.fg-sp-stock-in {
  color: var(--fg-sativa);
  font-weight: 500;
}

.fg-sp-stock-in strong {
  color: #b45309;
}

.fg-sp-stock-out {
  color: #ef4444;
  font-weight: 500;
}

/* ==========================================================================
   34. Single Product — Add to Cart Area
   ========================================================================== */

.fg-sp-atc {
  margin-bottom: 1.5rem;
}

/* Override WooCommerce ATC form inside our template */
.fg-sp-atc .cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.fg-sp-atc .quantity {
  display: flex;
  align-items: center;
}

.fg-sp-atc .quantity .qty {
  width: 64px;
  height: 48px;
  text-align: center;
  font-family: var(--fg-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  outline: none;
  transition: border-color 0.2s ease;
}

.fg-sp-atc .quantity .qty:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fg-sp-atc .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2rem;
  background: var(--fg-gradient);
  color: #ffffff;
  font-family: var(--fg-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--fg-radius-full);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.fg-sp-atc .single_add_to_cart_button:hover {
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.45), 0 0 48px rgba(217, 70, 239, 0.2);
  transform: translateY(-1px);
}

/* Variable product selects */
.fg-sp-atc .variations {
  width: 100%;
  border: none;
  margin-bottom: 0.5rem;
}

.fg-sp-atc .variations td {
  display: block;
  padding: 0;
}

.fg-sp-atc .variations .label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  padding-bottom: 0.3rem;
}

.fg-sp-atc .variations .label label {
  font-weight: 600;
}

.fg-sp-atc .variations select {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  font-family: var(--fg-font-body);
  font-size: 0.9rem;
  color: #374151;
  outline: none;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease;
}

.fg-sp-atc .variations select:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fg-sp-atc .reset_variations {
  font-size: 0.8rem;
  color: var(--fg-purple);
}

.fg-sp-atc .woocommerce-variation-price {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   35. Single Product — Trust Strip
   ========================================================================== */

.fg-sp-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f3f4f6;
}

.fg-sp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.fg-sp-trust-item svg {
  color: var(--fg-purple);
  flex-shrink: 0;
}

/* ==========================================================================
   36. Single Product — Tabs
   ========================================================================== */

.fg-sp-tabs-section {
  padding: 0 0 4rem;
}

.fg-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #f3f4f6;
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fg-tab-btn {
  padding: 0.85rem 1.5rem;
  font-family: var(--fg-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #9ca3af;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fg-tab-btn:hover {
  color: #374151;
}

.fg-tab-btn.active {
  color: var(--fg-purple);
  border-bottom-color: var(--fg-purple);
}

.fg-tab-panel {
  display: none;
  animation: fgFadeIn 0.25s ease;
}

.fg-tab-panel.active {
  display: block;
}

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

/* Tab content typography */
.fg-tab-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.fg-tab-panel p {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.fg-tab-panel ul,
.fg-tab-panel ol {
  color: #4b5563;
  line-height: 1.75;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   37. Single Product — Lab Results Tab
   ========================================================================== */

.fg-lab-tab {
  max-width: 600px;
}

.fg-lab-tab-stats {
  margin-bottom: 1.5rem;
}

.fg-lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fg-lab-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 0.6rem 0;
  border-bottom: 2px solid #f3f4f6;
}

.fg-lab-table td {
  padding: 0.6rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.fg-lab-table td:last-child {
  font-weight: 600;
  color: var(--fg-dark);
  text-align: right;
}

.fg-lab-table th:last-child {
  text-align: right;
}

.fg-lab-tab-terps {
  margin-bottom: 1rem;
}

/* ==========================================================================
   38. Single Product — Reviews Override
   ========================================================================== */

.fg-tab-panel #reviews h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.fg-tab-panel #reviews .comment-form-rating label {
  font-weight: 600;
  color: #374151;
}

.fg-tab-panel #reviews .comment-form input,
.fg-tab-panel #reviews .comment-form textarea {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  font-family: var(--fg-font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.fg-tab-panel #reviews .comment-form input:focus,
.fg-tab-panel #reviews .comment-form textarea:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fg-tab-panel #reviews .comment-form .form-submit input[type="submit"] {
  background: var(--fg-gradient);
  color: #ffffff;
  border: none;
  border-radius: var(--fg-radius-full);
  font-weight: 600;
  padding: 0.7rem 1.75rem;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.fg-tab-panel #reviews .comment-form .form-submit input[type="submit"]:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.fg-tab-panel .commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fg-tab-panel .commentlist li {
  padding: 1.25rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.fg-tab-panel .commentlist .meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

.fg-tab-panel .commentlist .meta strong {
  color: #374151;
}

/* ==========================================================================
   39. Single Product — Additional Info Table
   ========================================================================== */

.fg-tab-panel .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fg-tab-panel .shop_attributes th {
  text-align: left;
  font-weight: 600;
  color: #374151;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid #f3f4f6;
  width: 35%;
}

.fg-tab-panel .shop_attributes td {
  color: #6b7280;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.fg-tab-panel .shop_attributes td p {
  margin: 0;
}

/* ==========================================================================
   40. Related Products Section
   ========================================================================== */

.fg-related {
  background: #f9fafb;
}

/* ==========================================================================
   40b. WooCommerce Product Image Constraints
   ========================================================================== */

/* Constrain default WooCommerce/Kadence product gallery */
.woocommerce div.product div.images,
.single-product .product .woocommerce-product-gallery,
.woocommerce-product-gallery {
  max-height: 520px;
  overflow: visible;
}

.woocommerce div.product div.images img,
.single-product .product .woocommerce-product-gallery img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
  max-height: 500px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* Force 50/50 layout for image and summary */
.woocommerce div.product div.images {
  width: 48%;
  float: left;
}

.woocommerce div.product div.summary {
  width: 48%;
  float: right;
}

/* Kadence flexbox layout overrides */
.single-product .product-details {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

.single-product .product-details > .woocommerce-product-gallery,
.single-product .product-details > .product-image-wrap {
  flex: 0 0 48%;
  max-width: 48%;
}

.single-product .product-details > .entry-summary,
.single-product .product-details > .summary {
  flex: 0 0 48%;
  max-width: 48%;
}

/* Custom fg-sp-gallery constraints */
.fg-sp-gallery {
  max-height: 520px;
}

.fg-sp-main-img {
  max-height: 480px;
  overflow: hidden;
}

.fg-sp-main-img img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Mobile: Stack and constrain */
@media (max-width: 768px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100%;
    float: none;
  }

  .single-product .product-details > .woocommerce-product-gallery,
  .single-product .product-details > .product-image-wrap,
  .single-product .product-details > .entry-summary,
  .single-product .product-details > .summary {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .woocommerce div.product div.images img,
  .single-product .product .woocommerce-product-gallery img,
  .fg-sp-main-img img {
    max-height: 350px;
  }

  .woocommerce div.product div.images,
  .fg-sp-gallery {
    max-height: 380px;
  }
}

/* Clear floats */
.woocommerce div.product::after {
  content: '';
  display: table;
  clear: both;
}

/* ==========================================================================
   41. About — Hero
   ========================================================================== */

.fg-about-hero {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  text-align: center;
  padding: 7rem 0 6rem;
  background-image: url('/wp-content/uploads/2026/02/about-us-hero.webp');
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .fg-about-hero {
    padding: 9rem 0 7rem;
  }
}

@media (min-width: 1024px) {
  .fg-about-hero {
    padding: 10rem 0 8rem;
  }
}

/* Dark overlay for text readability */
.fg-about-hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.5) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.75) 100%
  );
  pointer-events: none;
}

.fg-about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.fg-about-hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-about-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-about-hero-title {
    font-size: 3.5rem;
  }
}

.fg-about-hero-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* About page — tighter section spacing */
.fg-about-mission,
.fg-about-values,
.fg-about-process,
.fg-about-team,
.fg-about-commitment {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .fg-about-mission,
  .fg-about-values,
  .fg-about-process,
  .fg-about-team,
  .fg-about-commitment {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Reduce About hero bottom padding */
.fg-about-hero {
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .fg-about-hero {
    padding-bottom: 5rem;
  }
}

/* ==========================================================================
   42. About — Split Layout (image + text)
   ========================================================================== */

.fg-about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .fg-about-split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

.fg-about-split--reverse .fg-about-split-img {
  order: 0;
}

@media (min-width: 768px) {
  .fg-about-split--reverse .fg-about-split-img {
    order: 2;
  }
}

.fg-about-split-img img {
  width: 100%;
  border-radius: var(--fg-radius);
}

.fg-about-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius);
  background: linear-gradient(135deg, #f3f0ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

.fg-about-img-placeholder--alt {
  background: linear-gradient(135deg, #ecfeff 0%, #f3f0ff 50%, #fdf2f8 100%);
}

.fg-about-split-text .fg-section-tag {
  margin-bottom: 0.5rem;
}

.fg-about-split-text h2 {
  font-size: 1.85rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-about-split-text h2 {
    font-size: 2.15rem;
  }
}

.fg-about-split-text p {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* ==========================================================================
   43. About — Values Grid
   ========================================================================== */

.fg-about-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fg-about-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-about-value {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 2rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-about-value:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

.fg-about-value-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius);
  margin-bottom: 1.25rem;
}

.fg-about-value h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.fg-about-value p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   44. About — Process Timeline
   ========================================================================== */

.fg-process-timeline {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  padding-left: 2.5rem;
}

/* Vertical line */
.fg-process-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--fg-purple), var(--fg-magenta), var(--fg-cyan));
  border-radius: 1px;
}

.fg-process-step {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
}

.fg-process-step:last-child {
  padding-bottom: 0;
}

.fg-process-num {
  position: absolute;
  left: -2.5rem;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid var(--fg-purple);
  border-radius: var(--fg-radius-full);
  z-index: 1;
}

.fg-process-num span {
  font-family: var(--fg-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fg-purple);
}

.fg-process-content {
  padding-left: 1rem;
  padding-top: 0.15rem;
}

.fg-process-content h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.fg-process-content p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================================================
   45. About — Stats Strip
   ========================================================================== */

.fg-about-stats {
  background: var(--fg-dark);
  padding: 3.5rem 0;
}

.fg-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .fg-about-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fg-about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.fg-about-stat-num {
  font-family: var(--fg-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .fg-about-stat-num {
    font-size: 3rem;
  }
}

.fg-about-stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   46. About — Team Grid
   ========================================================================== */

.fg-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fg-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-team-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-team-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

.fg-team-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f9fafb;
}

.fg-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fg-team-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f0ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

.fg-team-info {
  padding: 1.5rem;
}

.fg-team-info h3 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.fg-team-role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-purple);
  margin-bottom: 0.75rem;
}

.fg-team-info p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   47. About — CTA Banner
   ========================================================================== */

.fg-about-cta {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  text-align: center;
  padding: 5rem 0;
}

@media (min-width: 768px) {
  .fg-about-cta {
    padding: 6rem 0;
  }
}

.fg-about-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.fg-about-cta-inner {
  position: relative;
  z-index: 1;
}

.fg-about-cta h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .fg-about-cta h2 {
    font-size: 2.5rem;
  }
}

.fg-about-cta p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* ==========================================================================
   48. Contact — Hero
   ========================================================================== */

.fg-contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  text-align: center;
  padding: 7rem 0 6rem;
  background-image: url('/wp-content/uploads/2026/02/Gemini_Generated_Image_c1h21hc1h21hc1h2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .fg-contact-hero {
    padding: 9rem 0 7rem;
  }
}

/* Dark overlay for text readability */
.fg-contact-hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.5) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.75) 100%
  );
  pointer-events: none;
}

.fg-contact-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.fg-contact-hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-contact-hero-title {
    font-size: 3rem;
  }
}

.fg-contact-hero-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ==========================================================================
   49. Contact — Info Cards
   ========================================================================== */

.fg-contact-cards-section {
  margin-top: -2rem;
  position: relative;
  z-index: 10;
  padding-bottom: 1rem;
}

.fg-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .fg-contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-contact-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-contact-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

.fg-contact-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius);
  margin: 0 auto 1rem;
}

.fg-contact-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.fg-contact-card p {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.fg-contact-card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-purple);
}

/* ==========================================================================
   50. Contact — Form + Sidebar Grid
   ========================================================================== */

.fg-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .fg-contact-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
  }
}

/* Form wrap */
.fg-contact-form-wrap h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.fg-contact-form-sub {
  color: #6b7280;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* ==========================================================================
   51. Contact — Form Styles
   ========================================================================== */

.fg-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fg-form-row--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .fg-form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.fg-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.4rem;
}

.fg-form-group label span {
  color: var(--fg-magenta);
}

.fg-form-optional {
  font-weight: 400;
  color: #9ca3af;
}

.fg-form-group input,
.fg-form-group select,
.fg-form-group textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--fg-font-body);
  font-size: 0.9rem;
  color: #374151;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fg-form-group input:focus,
.fg-form-group select:focus,
.fg-form-group textarea:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fg-form-group input::placeholder,
.fg-form-group textarea::placeholder {
  color: #9ca3af;
}

.fg-form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.fg-form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.fg-form-submit {
  align-self: flex-start;
  padding: 0.8rem 2rem;
  font-size: 0.95rem;
}

/* Feedback message */
.fg-form-feedback {
  padding: 0.85rem 1.25rem;
  border-radius: var(--fg-radius);
  font-size: 0.9rem;
  font-weight: 500;
}

.fg-form-feedback--ok {
  background: rgba(22, 163, 74, 0.08);
  color: var(--fg-sativa);
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.fg-form-feedback--err {
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.15);
  margin-top: 1rem;
}

.fg-form-feedback--err a {
  color: var(--fg-purple);
  font-weight: 600;
}

/* Form success state */
.fg-form-success {
  text-align: center;
  padding: 3rem 1.5rem;
}

.fg-success-icon {
  width: 64px;
  height: 64px;
  background: var(--fg-gradient);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.fg-form-success h3 {
  font-family: var(--fg-font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: var(--fg-dark);
}

.fg-form-success p {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.fg-form-reset {
  font-size: 0.85rem;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
}

/* ==========================================================================
   52. Contact — Sidebar Callouts
   ========================================================================== */

.fg-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fg-contact-callout {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--fg-radius);
  padding: 1.5rem;
}

.fg-contact-callout-icon {
  margin-bottom: 0.85rem;
  color: var(--fg-purple);
}

.fg-contact-callout h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.fg-contact-callout p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Social links */
.fg-contact-social {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--fg-radius);
  padding: 1.5rem;
}

.fg-contact-social h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.fg-social-links {
  display: flex;
  gap: 0.75rem;
}

.fg-social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius-full);
  color: #6b7280;
  transition: all 0.2s ease;
}

.fg-social-link:hover {
  color: #ffffff;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

/* ==========================================================================
   53. Contact — FAQ Accordion
   ========================================================================== */

.fg-faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.fg-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  background: #ffffff;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.fg-faq-item[open] {
  border-color: var(--fg-purple);
}

.fg-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg-dark);
  transition: color 0.2s ease;
}

.fg-faq-q::-webkit-details-marker {
  display: none;
}

.fg-faq-q::marker {
  content: '';
}

.fg-faq-q:hover {
  color: var(--fg-purple);
}

.fg-faq-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.25s ease, color 0.2s ease;
}

.fg-faq-item[open] .fg-faq-chevron {
  transform: rotate(180deg);
  color: var(--fg-purple);
}

.fg-faq-a {
  padding: 0 1.25rem 1.25rem;
}

.fg-faq-a p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

.fg-faq-a a {
  font-weight: 600;
}

/* ==========================================================================
   54. Labs — Hero
   ========================================================================== */

.fg-labs-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--fg-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 5rem 0 4rem;
}

@media (min-width: 768px) {
  .fg-labs-hero {
    padding: 7rem 0 5.5rem;
  }
}

/* Dark overlay for text legibility */
.fg-labs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 13, 13, 0.7) 0%,
    rgba(13, 13, 13, 0.85) 100%
  );
  z-index: 0;
}

.fg-labs-hero-glow {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34,211,238,0.12) 0%, rgba(139,92,246,0.06) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.fg-labs-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.fg-labs-hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-labs-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-labs-hero-title {
    font-size: 3.5rem;
  }
}

.fg-labs-hero-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ==========================================================================
   55. Labs — How We Test (3 steps)
   ========================================================================== */

.fg-labs-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .fg-labs-steps {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

.fg-labs-step {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}

.fg-labs-step-num {
  font-family: var(--fg-font-heading);
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.fg-labs-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.fg-labs-step p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.fg-labs-step-divider {
  display: none;
}

@media (min-width: 768px) {
  .fg-labs-step-divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    margin: 0.5rem 0;
    background: #e5e7eb;
  }
}

/* ==========================================================================
   56. Labs — What We Screen For (panel grid)
   ========================================================================== */

.fg-labs-panels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .fg-labs-panels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fg-labs-panels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-labs-panel-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-labs-panel-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.06);
}

.fg-labs-panel-card svg {
  margin-bottom: 0.85rem;
}

.fg-labs-panel-card h4 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.fg-labs-panel-card p {
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   57. Labs — Toolbar (search + filter pills)
   ========================================================================== */

.fg-labs-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .fg-labs-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fg-labs-search {
  position: relative;
  flex: 1;
  max-width: 340px;
}

.fg-labs-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.fg-labs-search input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  font-family: var(--fg-font-body);
  font-size: 0.875rem;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius-full);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fg-labs-search input:focus {
  border-color: var(--fg-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fg-labs-search input::placeholder {
  color: #9ca3af;
}

/* ==========================================================================
   58. Labs — Strain Result Cards
   ========================================================================== */

.fg-labs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .fg-labs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fg-labs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-labs-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-labs-card:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

/* Card header */
.fg-labs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fg-labs-card-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.fg-labs-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
}

.fg-labs-card-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f0ff, #fdf2f8, #ecfeff);
}

.fg-labs-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.fg-labs-card-title a {
  color: var(--fg-dark);
}

.fg-labs-card-title a:hover {
  color: var(--fg-purple);
}

/* COA link badge */
.fg-labs-coa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--fg-radius-full);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.fg-labs-coa-link:hover {
  background: var(--fg-purple);
  color: #ffffff;
}

/* Potency bars */
.fg-labs-card-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.fg-labs-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fg-labs-bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  width: 28px;
  flex-shrink: 0;
}

.fg-labs-bar-track {
  flex: 1;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.fg-labs-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.fg-labs-bar-fill--thc {
  background: var(--fg-gradient);
}

.fg-labs-bar-fill--cbd {
  background: linear-gradient(90deg, var(--fg-cyan), var(--fg-sativa));
}

.fg-labs-bar-fill--cbg {
  background: linear-gradient(90deg, var(--fg-magenta), var(--fg-purple));
}

.fg-labs-bar-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fg-dark);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* Terpenes row */
.fg-labs-card-terps {
  padding-top: 0.85rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fg-labs-terps-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  flex-shrink: 0;
}

/* ==========================================================================
   59. Labs — Empty State
   ========================================================================== */

.fg-labs-empty {
  text-align: center;
  padding: 3rem 1rem;
}

.fg-labs-empty svg {
  margin-bottom: 1rem;
}

.fg-labs-empty p {
  color: #9ca3af;
  font-size: 0.95rem;
}

/* ==========================================================================
   60. Wholesale — Hero
   ========================================================================== */

.fg-ws-hero {
  position: relative;
  overflow: hidden;
  background: var(--fg-dark);
  color: #ffffff;
  text-align: center;
  padding: 7rem 0 6rem;
  background-image: url('/wp-content/uploads/2026/02/Gemini_Generated_Image_tdegbvtdegbvtdeg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .fg-ws-hero {
    padding: 9rem 0 7rem;
  }
}

/* Dark overlay for text readability */
.fg-ws-hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.5) 0%,
    rgba(13, 13, 13, 0.6) 50%,
    rgba(13, 13, 13, 0.75) 100%
  );
  pointer-events: none;
}

.fg-ws-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
}

.fg-ws-hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .fg-ws-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .fg-ws-hero-title {
    font-size: 3.5rem;
  }
}

.fg-ws-hero-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ==========================================================================
   61. Wholesale — Benefits Grid
   ========================================================================== */

.fg-ws-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .fg-ws-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fg-ws-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fg-ws-benefit {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 1.75rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-ws-benefit:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.06);
}

.fg-ws-benefit-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius);
  margin-bottom: 1rem;
}

.fg-ws-benefit h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.fg-ws-benefit p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   62. Wholesale — How It Works (4 steps)
   ========================================================================== */

.fg-ws-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

@media (min-width: 768px) {
  .fg-ws-steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
}

.fg-ws-step {
  text-align: center;
  max-width: 200px;
  padding: 1rem 0;
}

.fg-ws-step-circle {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fg-radius-full);
  margin: 0 auto 0.85rem;
}

.fg-ws-step-circle span {
  font-family: var(--fg-font-heading);
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
}

.fg-ws-step h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.fg-ws-step p {
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

.fg-ws-step-connector {
  width: 2px;
  height: 28px;
  background: #e5e7eb;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .fg-ws-step-connector {
    width: 48px;
    height: 2px;
    margin-top: 24px;
  }
}

/* ==========================================================================
   63. Wholesale — Pricing Tiers
   ========================================================================== */

.fg-ws-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .fg-ws-tiers {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.fg-ws-tier {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--fg-radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fg-ws-tier:hover {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08);
}

/* Featured tier */
.fg-ws-tier--featured {
  border-color: var(--fg-purple);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.1);
}

@media (min-width: 768px) {
  .fg-ws-tier--featured {
    transform: scale(1.04);
    z-index: 1;
  }
}

.fg-ws-tier-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--fg-gradient);
  border-radius: var(--fg-radius-full);
  white-space: nowrap;
}

.fg-ws-tier-header h3 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.fg-ws-tier-range {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0;
}

.fg-ws-tier-body {
  padding: 1.25rem 0;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1.25rem;
}

.fg-ws-tier-discount {
  font-family: var(--fg-font-heading);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--fg-dark);
}

.fg-ws-tier-label {
  display: block;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.15rem;
}

.fg-ws-tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.fg-ws-tier-perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.fg-ws-tier-perks svg {
  flex-shrink: 0;
}

.fg-ws-tier-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ==========================================================================
   64. Wholesale — Application Form Wrapper
   ========================================================================== */

.fg-ws-form-wrap {
  max-width: 680px;
  margin: 0 auto;
}

/* ==========================================================================
   65. Custom Lightbox — Product Image Viewer
   ========================================================================== */

/* Lightbox trigger button — wraps the product image */
.fg-lightbox-trigger,
.fg-lightbox-trigger:hover,
.fg-lightbox-trigger:focus,
.fg-lightbox-trigger:active {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: zoom-in;
  border-radius: var(--fg-radius);
  overflow: hidden;
}

.fg-lightbox-trigger:hover {
  opacity: 0.92;
}

.fg-lightbox-trigger:focus {
  outline: 2px solid var(--fg-purple);
  outline-offset: 2px;
}

.fg-lightbox-trigger:focus-visible {
  outline: 2px solid var(--fg-purple);
  outline-offset: 2px;
}

/* Override any WooCommerce/Kadence button defaults */
button.fg-lightbox-trigger,
button.fg-lightbox-trigger:hover,
button.fg-lightbox-trigger:focus,
button.fg-lightbox-trigger:active,
.woocommerce button.fg-lightbox-trigger,
.woocommerce button.fg-lightbox-trigger:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
}

.fg-lightbox-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lightbox overlay — hidden by default */
.fg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Lightbox open state */
.fg-lightbox.open {
  opacity: 1;
  visibility: visible;
}

/* Dark backdrop */
.fg-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

/* Content container */
.fg-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button — large X in top-right */
.fg-lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100000;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fg-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.fg-lightbox-close:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.fg-lightbox-close svg {
  width: 32px;
  height: 32px;
}

/* Lightbox image */
.fg-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--fg-radius);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

.fg-lightbox.open .fg-lightbox-img {
  transform: scale(1);
}

/* Disable body scroll when lightbox is open */
body.fg-lightbox-open {
  overflow: hidden;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .fg-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  .fg-lightbox-close svg {
    width: 28px;
    height: 28px;
  }

  .fg-lightbox-img {
    max-width: 95vw;
    max-height: 80vh;
  }
}

/* ==========================================================================
   67. Lab Results / COA Page — Redesigned
   ========================================================================== */

/* Filter Tabs */
.fg-labs-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.fg-coa-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--fg-radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fg-coa-tab:hover {
  color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.15);
}

.fg-coa-tab.active {
  color: #ffffff;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-coa-tab--flower.active {
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-coa-tab--prerolls.active {
  background: var(--fg-magenta);
  border-color: var(--fg-magenta);
}

/* COA Groups */
.fg-coa-group {
  margin-bottom: 3rem;
}

.fg-coa-group:last-child {
  margin-bottom: 0;
}

.fg-coa-group-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.fg-coa-group-header h2 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--fg-dark);
}

.fg-coa-group-sub {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

/* COA List */
.fg-coa-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fg-coa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  transition: background 0.15s ease;
}

.fg-coa-row:first-child {
  border-radius: var(--fg-radius) var(--fg-radius) 0 0;
}

.fg-coa-row:last-child {
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 0 var(--fg-radius) var(--fg-radius);
}

.fg-coa-row:only-child {
  border-radius: var(--fg-radius);
  border-bottom: 1px solid #e5e7eb;
}

.fg-coa-row:hover {
  background: #fafafa;
}

.fg-coa-row-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fg-coa-strain-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg-dark);
}

/* View COA Button */
.fg-coa-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-purple);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--fg-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fg-coa-view-btn:hover {
  color: #ffffff;
  background: var(--fg-purple);
  border-color: var(--fg-purple);
}

.fg-coa-view-btn svg {
  flex-shrink: 0;
}

/* ==========================================================================
   68. PDF Lightbox Modal
   ========================================================================== */

.fg-pdf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fg-pdf-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.fg-pdf-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.fg-pdf-lightbox-container {
  position: relative;
  z-index: 1;
  width: 95vw;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--fg-radius);
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.fg-pdf-lightbox.open .fg-pdf-lightbox-container {
  transform: scale(1);
}

.fg-pdf-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--fg-dark);
  color: #ffffff;
}

.fg-pdf-lightbox-title {
  font-weight: 600;
  font-size: 1rem;
}

.fg-pdf-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fg-pdf-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fg-pdf-lightbox-body {
  flex: 1;
  overflow: hidden;
}

.fg-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .fg-labs-filter-tabs {
    flex-wrap: wrap;
  }

  .fg-coa-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .fg-coa-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  .fg-coa-view-btn {
    width: 100%;
    justify-content: center;
  }

  .fg-pdf-lightbox-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
  }

  .fg-pdf-lightbox-header {
    padding: 0.75rem 1rem;
  }
}

/* ==========================================================================
   DESIGN SYSTEM: WooCommerce Single Product Overrides
   ========================================================================== */

/* Primary Add to Cart Button */
.single-product .single_add_to_cart_button {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  min-height: 48px !important;
  transition: all 0.2s ease !important;
  /* width: 100% removed — let Session 2's flex: 1 control layout */
}

.single-product .single_add_to_cart_button:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary) !important;
}

/* Quantity Input */
.single-product .quantity input[type="number"] {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 48px;
  width: 80px;
}

/* Product Title */
.single-product .product_title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 16px !important;
}

@media (min-width: 768px) {
  .single-product .product_title {
    font-size: 36px !important;
  }
}

/* Product Price */
.single-product .price {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--color-primary) !important;
  margin-bottom: 16px !important;
}

.single-product .price del {
  color: var(--color-text-secondary) !important;
  font-size: 18px !important;
  opacity: 0.7;
}

/* Sale Badge */
.single-product .onsale {
  background: var(--color-sale) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   DESIGN SYSTEM: Product Attributes Section
   ========================================================================== */

.product-attributes {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: #FAFAFA;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.product-attributes .attribute {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.product-attributes .attribute:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.product-attributes .attribute__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.product-attributes .attribute__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-primary);
}

.product-attributes .attribute__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.product-attributes .attribute__link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ==========================================================================
   DESIGN SYSTEM: Trust Badge Bar
   ========================================================================== */

.trust-badge-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.trust-badge-bar .badge-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.trust-badge-bar .badge-trust svg {
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .trust-badge-bar {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   DESIGN SYSTEM: Shop Page / Product Archive
   ========================================================================== */

/* ─── Shop Page Header ─── */
.woocommerce-products-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding: var(--space-6) 0;
}

.woocommerce-products-header__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 36px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-3) !important;
}

@media (min-width: 768px) {
  .woocommerce-products-header__title {
    font-size: 48px !important;
  }
}

.woocommerce-products-header p,
.term-description {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── Product Grid Layout ─── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}

@media (min-width: 1280px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ─── Product Card Styles ─── */
.woocommerce ul.products li.product,
.product-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover,
.product-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(155, 111, 214, 0.15);
  transform: translateY(-4px);
}

/* Product Image Container */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px !important;
  width: 100% !important;
  height: auto !important;
}

/* Product Image Link */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  position: relative;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2 {
    font-size: 20px !important;
  }
}

/* Product Price */
.woocommerce ul.products li.product .price {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--color-primary) !important;
  margin-bottom: 12px !important;
  display: block;
}

/* Original/Sale Price */
.woocommerce ul.products li.product .price del {
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-right: 8px !important;
  opacity: 0.8;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
}

/* ─── Sale Badge Override ─── */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--color-sale) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  z-index: 10 !important;
  line-height: 1.4 !important;
  min-width: auto !important;
  min-height: auto !important;
}

/* ─── Strain Type Badge ─── */
.badge-product-type {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 4px;
  color: #FFFFFF;
  background: var(--color-primary);
  margin-bottom: 8px;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
}

/* Strain Type Variants */
.badge-product-type--hybrid {
  background: #9B6FD6;
}

.badge-product-type--indica {
  background: #7B4FB8;
}

.badge-product-type--sativa {
  background: #B89FE6;
}

/* ─── Add to Cart Button on Cards ─── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  border: none !important;
  width: 100% !important;
  min-height: 44px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  margin-top: auto !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary) !important;
}

/* Loading state */
.woocommerce ul.products li.product .button.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Added to cart state */
.woocommerce ul.products li.product a.added_to_cart {
  background: var(--color-success) !important;
  margin-top: 8px !important;
}

/* ─── Result Count & Ordering ─── */
.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.woocommerce-ordering select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--color-text-primary);
}

/* ─── Pagination ─── */
.woocommerce nav.woocommerce-pagination {
  margin-top: var(--space-7);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 8px;
  border: none;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* ==========================================================================
   DESIGN SYSTEM: Cart Page
   ========================================================================== */

/* ─── Cart Page Container ─── */
.woocommerce-cart .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* ─── Cart Page Header ─── */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  color: var(--color-text-primary) !important;
  text-align: center;
  margin-bottom: var(--space-6) !important;
}

@media (min-width: 768px) {
  .woocommerce-cart .entry-title,
  .woocommerce-cart .page-title {
    font-size: 42px !important;
  }
}

/* ─── Cart Layout (Desktop: 2 columns) ─── */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
    align-items: start;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    margin-bottom: 0;
  }

  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
    position: sticky;
    top: 100px;
  }
}

/* ─── Cart Table ─── */
.woocommerce table.shop_table.cart {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: #FFFFFF;
}

/* Table Header */
.woocommerce table.shop_table.cart thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  background: #FAFAFA;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.woocommerce table.shop_table.cart thead th.product-remove {
  width: 50px;
}

.woocommerce table.shop_table.cart thead th.product-thumbnail {
  width: 100px;
}

/* Table Rows */
.woocommerce table.shop_table.cart tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table.cart tbody tr:last-child {
  border-bottom: none;
}

.woocommerce table.shop_table.cart tbody td {
  padding: var(--space-4);
  vertical-align: middle;
  border: none;
}

/* Product Thumbnail */
.woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* Product Name */
.woocommerce table.shop_table.cart td.product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-primary);
}

.woocommerce table.shop_table.cart td.product-name a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* Product variation/meta */
.woocommerce table.shop_table.cart td.product-name .variation,
.woocommerce table.shop_table.cart td.product-name dl.variation {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* Product Price */
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
}

.woocommerce table.shop_table.cart td.product-subtotal {
  color: var(--color-primary);
  font-size: 18px;
}

/* ─── Remove Item Button ─── */
.woocommerce table.shop_table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FEE2E2;
  color: var(--color-error) !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  background: var(--color-error);
  color: #FFFFFF !important;
}

/* ─── Quantity Controls ─── */
.woocommerce table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
  width: 50px;
  height: 44px;
  border: none;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
  background: #FFFFFF;
  -moz-appearance: textfield;
}

.woocommerce table.shop_table.cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce table.shop_table.cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce table.shop_table.cart td.product-quantity .quantity input.qty:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ─── Coupon Form ─── */
.woocommerce table.shop_table.cart td.actions {
  padding: var(--space-5);
  background: #FAFAFA;
  border-top: 1px solid var(--color-border);
}

.woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce table.shop_table.cart td.actions .coupon label {
  display: none;
}

.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
  flex: 1;
  min-width: 150px;
  max-width: 250px;
  height: 44px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  transition: border-color 0.2s ease;
}

.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code::placeholder {
  color: var(--color-text-secondary);
}

.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--color-primary);
}

.woocommerce table.shop_table.cart td.actions .coupon button.button {
  height: 44px;
  padding: 0 var(--space-5);
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.woocommerce table.shop_table.cart td.actions .coupon button.button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* ─── Update Cart Button ─── */
.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
  height: 44px;
  padding: 0 var(--space-5);
  background: #FFFFFF;
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  float: right;
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"]:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Cart Totals Section ─── */
.woocommerce .cart-collaterals .cart_totals {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.woocommerce .cart_totals > h2 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce .cart_totals table.shop_table {
  border: none;
  margin-bottom: var(--space-5);
}

.woocommerce .cart_totals table.shop_table tr {
  border-bottom: 1px solid var(--color-border);
}

.woocommerce .cart_totals table.shop_table tr:last-child {
  border-bottom: none;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: var(--space-4) 0;
  border: none;
  vertical-align: middle;
}

.woocommerce .cart_totals table.shop_table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: left;
}

.woocommerce .cart_totals table.shop_table td {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-primary);
  text-align: right;
}

/* Order Total */
.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.woocommerce .cart_totals table.shop_table tr.order-total td {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Shipping Options */
.woocommerce .cart_totals .shipping-calculator-form {
  margin-top: var(--space-4);
}

.woocommerce .cart_totals #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce .cart_totals #shipping_method li {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
}

.woocommerce .cart_totals #shipping_method li label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* ─── Proceed to Checkout Button ─── */
.woocommerce .cart_totals .wc-proceed-to-checkout {
  padding-top: var(--space-4);
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  padding: var(--space-4);
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  min-height: 52px;
  line-height: 1.4;
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

/* ─── Cross-Sells Section ─── */
.woocommerce .cross-sells {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.woocommerce .cross-sells > h2 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-5) !important;
  text-align: center;
}

/* ─── Empty Cart State ─── */
.woocommerce-cart .cart-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.woocommerce-cart .cart-empty.woocommerce-info {
  background: var(--color-primary-light);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: var(--space-5);
}

.woocommerce-cart .cart-empty.woocommerce-info::before {
  color: var(--color-primary);
}

.woocommerce-cart .return-to-shop {
  text-align: center;
}

.woocommerce-cart .return-to-shop a.button {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.woocommerce-cart .return-to-shop a.button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

/* ─── Cart Mobile Responsive ─── */
@media (max-width: 767px) {
  /* Hide table headers on mobile */
  .woocommerce table.shop_table.cart thead {
    display: none;
  }

  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart tbody,
  .woocommerce table.shop_table.cart tr,
  .woocommerce table.shop_table.cart td {
    display: block;
    width: 100%;
  }

  .woocommerce table.shop_table.cart tbody tr {
    position: relative;
    padding: var(--space-4);
    padding-left: 100px;
    min-height: 100px;
    border-bottom: 1px solid var(--color-border);
  }

  .woocommerce table.shop_table.cart tbody td {
    padding: var(--space-2) 0;
    border: none;
  }

  /* Position thumbnail */
  .woocommerce table.shop_table.cart td.product-thumbnail {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    width: 80px;
    padding: 0;
  }

  /* Position remove button */
  .woocommerce table.shop_table.cart td.product-remove {
    position: absolute;
    right: var(--space-4);
    top: var(--space-4);
    width: auto;
    padding: 0;
  }

  /* Product name full width */
  .woocommerce table.shop_table.cart td.product-name {
    font-size: 16px;
    padding-right: 40px;
  }

  /* Price and quantity inline */
  .woocommerce table.shop_table.cart td.product-price,
  .woocommerce table.shop_table.cart td.product-quantity {
    display: inline-block;
    width: auto;
    margin-right: var(--space-4);
  }

  .woocommerce table.shop_table.cart td.product-price::before {
    content: 'Price: ';
    font-weight: 400;
    color: var(--color-text-secondary);
    font-size: 12px;
  }

  /* Subtotal */
  .woocommerce table.shop_table.cart td.product-subtotal {
    font-size: 16px;
  }

  .woocommerce table.shop_table.cart td.product-subtotal::before {
    content: 'Subtotal: ';
    font-weight: 400;
    color: var(--color-text-secondary);
    font-size: 12px;
  }

  /* Actions row */
  .woocommerce table.shop_table.cart td.actions {
    padding: var(--space-4);
  }

  .woocommerce table.shop_table.cart td.actions .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    max-width: 100%;
  }

  .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
    float: none;
    width: 100%;
    margin-top: var(--space-3);
  }

  /* Cart totals */
  .woocommerce .cart_totals {
    margin-top: var(--space-4);
  }
}

/* ─── Cart Notices ─── */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.woocommerce-cart .woocommerce-message {
  background: #ECFDF5;
  border-color: var(--color-success);
  color: var(--color-success);
}

.woocommerce-cart .woocommerce-error {
  background: #FEF2F2;
  border-color: var(--color-error);
  color: var(--color-error);
}

.woocommerce-cart .woocommerce-error li {
  list-style: none;
}

/* ==========================================================================
   DESIGN SYSTEM: Checkout Page
   ========================================================================== */

/* ─── Checkout Page Container ─── */
.woocommerce-checkout .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* ─── Checkout Page Header ─── */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  color: var(--color-text-primary) !important;
  text-align: center;
  margin-bottom: var(--space-6) !important;
}

@media (min-width: 768px) {
  .woocommerce-checkout .entry-title,
  .woocommerce-checkout .page-title {
    font-size: 42px !important;
  }
}

/* ─── Checkout Layout (Desktop: 2 columns) ─── */
@media (min-width: 1024px) {
  .woocommerce-checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-6);
    align-items: start;
  }

  .woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 2;
  }

  .woocommerce-checkout #order_review_heading {
    grid-row: 1;
    align-self: start;
  }

  .woocommerce-checkout #order_review {
    grid-row: 1 / span 2;
    position: sticky;
    top: 100px;
  }
}

/* ─── Section Headings ─── */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-5) !important;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

/* ─── Billing/Shipping Form Fields ─── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Full-width fields */
  .woocommerce-checkout #billing_company_field,
  .woocommerce-checkout #billing_address_1_field,
  .woocommerce-checkout #billing_address_2_field,
  .woocommerce-checkout #billing_email_field,
  .woocommerce-checkout #shipping_company_field,
  .woocommerce-checkout #shipping_address_1_field,
  .woocommerce-checkout #shipping_address_2_field,
  .woocommerce-checkout #order_comments_field {
    grid-column: 1 / -1;
  }
}

/* Form Row */
.woocommerce-checkout .form-row {
  margin-bottom: 0;
  position: relative;
}

/* Labels */
.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.woocommerce-checkout .form-row label .required {
  color: var(--color-error);
  font-weight: 700;
}

.woocommerce-checkout .form-row label .optional {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 12px;
}

/* Text Inputs */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-primary);
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-checkout .form-row textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(155, 111, 214, 0.15);
}

.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.7;
}

/* Select Dropdown Arrow */
.woocommerce-checkout .form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A4A5E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

/* Select2 Overrides */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 12px;
}

.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(155, 111, 214, 0.15);
}

.select2-dropdown {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.select2-results__option {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 14px;
}

.select2-results__option--highlighted {
  background: var(--color-primary-light) !important;
  color: var(--color-text-primary) !important;
}

.select2-results__option--selected {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* Validation States */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
  border-color: var(--color-success);
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
  border-color: var(--color-error);
}

.woocommerce-checkout .form-row.woocommerce-invalid label {
  color: var(--color-error);
}

/* ─── Checkbox Fields ─── */
.woocommerce-checkout .form-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: var(--space-2);
  accent-color: var(--color-primary);
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Ship to Different Address Toggle */
.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address {
  margin-bottom: var(--space-4);
}

.woocommerce-checkout #ship-to-different-address-checkbox {
  margin-right: var(--space-3);
}

/* ─── Create Account Checkbox ─── */
.woocommerce-checkout .woocommerce-account-fields {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.woocommerce-checkout .create-account {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
}

/* ─── Order Review Section ─── */
.woocommerce-checkout #order_review {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.woocommerce-checkout #order_review_heading {
  margin-top: 0;
}

/* Order Review Table */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border: none;
  margin-bottom: var(--space-5);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: var(--space-3) 0;
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  padding-right: var(--space-4);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name .product-quantity {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  text-align: right;
  white-space: nowrap;
}

/* Order Totals */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: var(--space-3) 0;
  border: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  text-align: right;
}

/* Order Total Row */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
  border-top: 2px solid var(--color-border);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  padding-top: var(--space-4);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  padding-top: var(--space-4);
}

/* ─── Payment Methods ─── */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
  cursor: pointer;
  background: #FFFFFF;
  margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
  max-height: 24px;
  width: auto;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Selected Payment Method */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked + label,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--color-primary);
}

/* Payment Method Description Box */
.woocommerce-checkout #payment .payment_box {
  background: var(--color-primary-light);
  padding: var(--space-4);
  margin: 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.woocommerce-checkout #payment .payment_box p {
  margin: 0;
}

.woocommerce-checkout #payment .payment_box::before {
  display: none;
}

/* ─── Terms and Conditions ─── */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: #FAFAFA;
  border-radius: var(--radius-md);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions {
  max-height: 150px;
  overflow-y: auto;
  padding: var(--space-3);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox {
  font-size: 14px;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ─── Place Order Button ─── */
.woocommerce-checkout #payment .place-order {
  padding-top: var(--space-4);
}

.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 56px;
}

.woocommerce-checkout #place_order:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.woocommerce-checkout #place_order:disabled {
  background: var(--color-border);
  color: var(--color-text-secondary) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─── Coupon Toggle on Checkout ─── */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--color-primary-light);
  border: none;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  color: var(--color-primary);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--color-primary);
  font-weight: 600;
}

/* Coupon Form */
.woocommerce-checkout .checkout_coupon {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.woocommerce-checkout .checkout_coupon p {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.woocommerce-checkout .checkout_coupon .form-row-first,
.woocommerce-checkout .checkout_coupon .form-row-last {
  width: auto;
  float: none;
  display: inline-block;
}

.woocommerce-checkout .checkout_coupon input#coupon_code {
  height: 48px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 200px;
  margin-right: var(--space-3);
}

.woocommerce-checkout .checkout_coupon button.button {
  height: 48px;
  padding: 0 var(--space-5);
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.woocommerce-checkout .checkout_coupon button.button:hover {
  background: var(--color-primary-dark);
}

/* ─── Login Form on Checkout ─── */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: var(--color-primary-light);
  border: none;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: 14px;
}

.woocommerce-checkout .woocommerce-form-login {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

/* ─── Checkout Notices ─── */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-notices-wrapper {
  margin-bottom: var(--space-5);
}

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  list-style: none;
}

.woocommerce-checkout .woocommerce-message {
  background: #ECFDF5;
  border-color: var(--color-success);
  color: var(--color-success);
}

.woocommerce-checkout .woocommerce-info {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.woocommerce-checkout .woocommerce-error {
  background: #FEF2F2;
  border-color: var(--color-error);
  color: var(--color-error);
}

.woocommerce-checkout .woocommerce-error li {
  list-style: none;
  margin-bottom: var(--space-2);
}

.woocommerce-checkout .woocommerce-error li:last-child {
  margin-bottom: 0;
}

/* ─── Checkout Mobile Responsive ─── */
@media (max-width: 767px) {
  .woocommerce-checkout .woocommerce {
    padding: var(--space-4);
  }

  .woocommerce-checkout .entry-title,
  .woocommerce-checkout .page-title {
    font-size: 28px !important;
    margin-bottom: var(--space-5) !important;
  }

  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading {
    font-size: 20px !important;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 52px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .woocommerce-checkout #order_review {
    padding: var(--space-4);
  }

  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    padding: var(--space-3);
    font-size: 14px;
  }

  .woocommerce-checkout #place_order {
    font-size: 16px;
    min-height: 52px;
  }

  .woocommerce-checkout .checkout_coupon {
    padding: var(--space-4);
  }

  .woocommerce-checkout .checkout_coupon input#coupon_code {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--space-3);
  }

  .woocommerce-checkout .checkout_coupon button.button {
    width: 100%;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 20px;
  }
}

/* ─── Privacy Policy Text ─── */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--color-primary);
}

/* ─── Order Received / Thank You Page ─── */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-success);
  text-align: center;
  padding: var(--space-6);
  background: #ECFDF5;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.woocommerce-order-received .woocommerce-order-overview {
  list-style: none;
  margin: 0 0 var(--space-6) 0;
  padding: var(--space-5);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.woocommerce-order-received .woocommerce-order-overview li {
  text-align: center;
  padding: var(--space-3);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: var(--space-2);
}

.woocommerce-order-received section.woocommerce-order-details,
.woocommerce-order-received section.woocommerce-customer-details {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.woocommerce-order-received section h2 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   DESIGN SYSTEM: Mobile Conversion Features
   ========================================================================== */

/* ─── Sticky Mobile CTA Bar ─── */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-cta-bar.visible {
  transform: translateY(0);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .sticky-cta-bar {
    display: none !important;
  }
}

/* Product Info */
.sticky-cta-bar__product {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sticky-cta-bar__thumb,
.sticky-cta-bar__product img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.sticky-cta-bar__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-primary);
  white-space: nowrap;
}

.sticky-cta-bar__price del {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.sticky-cta-bar__price ins {
  text-decoration: none;
}

/* Quantity Controls */
.sticky-cta-bar__qty {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.sticky-cta-bar__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #FAFAFA;
  border: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.sticky-cta-bar__qty-btn:hover,
.sticky-cta-bar__qty-btn:active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.sticky-cta-bar__qty-value {
  min-width: 32px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
}

/* Add to Cart Button */
.sticky-cta-bar__btn {
  flex: 1;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.sticky-cta-bar__btn:hover,
.sticky-cta-bar__btn:active {
  background: var(--color-primary-dark);
}

.sticky-cta-bar__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ─── Body Padding for Sticky CTA ─── */
@media (max-width: 767px) {
  .single-product body,
  body.single-product {
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   DESIGN SYSTEM: Touch Target Optimization
   ========================================================================== */

/* Minimum touch target sizes (WCAG 2.5.5) */
button,
input[type="submit"],
input[type="button"],
.button,
.btn,
a.button,
a.btn {
  min-height: 44px;
  min-width: 44px;
}

/* Primary action buttons - larger touch targets */
.single_add_to_cart_button,
.sticky-cta-bar__btn,
.sticky-cta-bar__qty-btn,
.checkout-button,
#place_order,
.wc-proceed-to-checkout a {
  min-height: 48px;
}

/* Mobile-specific touch target spacing */
@media (max-width: 767px) {
  /* Add margin between stacked buttons */
  .woocommerce .button + .button,
  .woocommerce a.button + a.button,
  .btn + .btn {
    margin-top: 8px;
  }

  /* Ensure form submit buttons are full touch-friendly */
  .woocommerce form .button,
  .woocommerce form input[type="submit"] {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Product loop add to cart */
  .woocommerce ul.products li.product .button {
    min-height: 48px;
  }

  /* Quantity buttons */
  .quantity .qty {
    min-height: 48px;
    min-width: 48px;
  }
}

/* ==========================================================================
   DESIGN SYSTEM: Mobile Navigation Enhancements
   ========================================================================== */

/* Mobile menu items - ensure proper touch targets */
.fg-mobile-menu nav ul li a,
.fg-mobile-nav ul li a {
  display: block;
  min-height: 48px;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s ease, color 0.2s ease;
}

.fg-mobile-menu nav ul li a:hover,
.fg-mobile-menu nav ul li a:active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Cart icon badge */
.fg-cart-link {
  position: relative;
}

.fg-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

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

/* Mobile menu drawer animation */
.fg-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: #FFFFFF;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fg-mobile-menu.open {
  transform: translateX(0);
}

/* Mobile menu backdrop */
.fg-mobile-menu::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.fg-mobile-menu.open::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   DESIGN SYSTEM: Responsive Breakpoint Polish
   ========================================================================== */

/* ─── iPhone SE / Small phones (375px) ─── */
@media (max-width: 375px) {
  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }

  .fg-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Smaller hero text */
  .fg-hero-title,
  .fg-contact-hero-title {
    font-size: 28px !important;
  }

  /* Product grid - tighter on very small screens */
  .woocommerce ul.products {
    gap: 8px !important;
  }

  .woocommerce ul.products li.product {
    padding: 12px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
  }

  .woocommerce ul.products li.product .price {
    font-size: 16px !important;
  }

  .woocommerce ul.products li.product .button {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  /* Sticky CTA adjustments */
  .sticky-cta-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .sticky-cta-bar__product {
    display: none; /* Hide thumbnail on very small screens */
  }

  .sticky-cta-bar__price {
    font-size: 16px;
  }

  .sticky-cta-bar__btn {
    font-size: 14px;
    padding: 10px 12px;
  }

  /* Cart/Checkout adjustments */
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce {
    padding: var(--space-3);
  }

  .woocommerce .cart_totals,
  .woocommerce-checkout #order_review {
    padding: var(--space-4);
  }
}

/* ─── iPhone 14 Pro (390px) ─── */
@media (min-width: 376px) and (max-width: 390px) {
  .woocommerce ul.products {
    gap: 10px !important;
  }

  .woocommerce ul.products li.product {
    padding: 14px;
  }
}

/* ─── iPhone 14 Pro Max (428px) ─── */
@media (min-width: 391px) and (max-width: 428px) {
  .woocommerce ul.products {
    gap: 12px !important;
  }

  /* Comfortable sticky CTA */
  .sticky-cta-bar {
    padding: 12px 16px;
  }
}

/* ─── Large phones to small tablets (429px - 767px) ─── */
@media (min-width: 429px) and (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px !important;
  }

  .sticky-cta-bar__product {
    display: flex;
  }
}

/* ─── iPad Portrait (768px) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 3-column product grid */
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  /* Single product layout starts side-by-side */
  .fg-sp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Cart/Checkout stay single column */
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce form.checkout {
    display: block;
  }
}

/* ─── iPad Landscape / Small Laptops (1024px+) ─── */
@media (min-width: 1024px) {
  /* Full desktop layout */
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  /* Single product full layout */
  .fg-sp-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  /* Cart 2-column */
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
  }

  /* Checkout 2-column */
  .woocommerce-checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-6);
  }

  /* Sticky CTA bar hidden */
  .sticky-cta-bar {
    display: none !important;
  }

  /* No body padding needed */
  body.single-product {
    padding-bottom: 0;
  }
}

/* ─── Large Desktops (1280px+) ─── */
@media (min-width: 1280px) {
  /* 4-column product grid */
  .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================================================
   DESIGN SYSTEM: Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sticky-cta-bar {
    transition: none;
  }

  .fg-mobile-menu {
    transition: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   DESIGN SYSTEM: Safe Area Insets (iPhone X+ notch/home indicator)
   ========================================================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-cta-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  @media (max-width: 767px) {
    body.single-product {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
  }
}

/* ==========================================================================
   MOBILE CSS FIXES - February 2026
   ========================================================================== */

/* ─── Issue 1: Remove White Gap Above Hero Sections ─── */
@media (max-width: 767px) {
  .fg-hero,
  .fg-shop-hero,
  .fg-contact-hero,
  .fg-about-hero,
  .fg-ws-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove any gap from Kadence wrapper or content area */
  .site-container .content-wrap,
  .site-container .site-main,
  .site-container .entry-content,
  .wp-site-blocks > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ─── Issue 2: Fix Hero Text Cutoff on Left Side ─── */
@media (max-width: 767px) {
  .fg-hero-inner,
  .fg-shop-hero-inner,
  .fg-contact-hero-inner,
  .fg-about-hero-inner,
  .fg-ws-hero-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Also target container if used */
  .fg-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero titles - prevent overflow */
  .fg-hero-title,
  .fg-shop-hero-title,
  .fg-contact-hero-title,
  .fg-about-hero-title,
  .fg-ws-hero-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ─── Issue 3: Single Product Mobile Layout Fix ─── */
/* Trust badges + quantity + add-to-cart alignment */
@media (max-width: 767px) {
  /* Trust badge bar - full width, proper spacing */
  .trust-badge-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Add to cart wrapper - stack vertically */
  .fg-sp-atc {
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Cart form - flex column on mobile */
  .fg-sp-atc .cart,
  .fg-sp-atc form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Quantity input row - full width */
  .fg-sp-atc .quantity,
  .fg-sp-atc form.cart .quantity {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
  }

  /* Add to cart button - full width below quantity */
  .fg-sp-atc .single_add_to_cart_button,
  .fg-sp-atc form.cart .single_add_to_cart_button {
    width: 100% !important;
    flex: none !important;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   MOBILE CSS FIXES - Session 2 (February 2026)
   ========================================================================== */

/* ─── FIX 7: Prevent Horizontal Overflow Site-Wide ─── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── FIX 1: Product/Category/Trust Grids on Mobile ─── */
@media (max-width: 767px) {
  .fg-product-grid,
  .fg-strain-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .fg-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ─── FIX 2: Footer Stacked on Mobile ─── */
@media (max-width: 767px) {
  .fg-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }

  .fg-footer-brand,
  .fg-footer-col,
  .fg-footer-contact {
    text-align: center;
  }

  .fg-footer-links {
    padding-left: 0;
  }

  .fg-footer-social {
    justify-content: center;
  }
}

/* ─── FIX 3: Hero Text Positioning on Mobile ─── */
@media (max-width: 767px) {
  .fg-hero-inner,
  .fg-shop-hero-inner,
  .fg-contact-hero-inner,
  .fg-about-hero-inner,
  .fg-ws-hero-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .fg-hero-title,
  .fg-shop-hero-title,
  .fg-contact-hero-title,
  .fg-about-hero-title,
  .fg-ws-hero-title {
    font-size: 32px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .fg-hero-sub,
  .fg-hero-tag,
  .fg-hero-actions {
    text-align: center !important;
  }
}

/* ─── FIX 4: Remove White Gap Above Hero ─── */
@media (max-width: 767px) {
  .fg-hero,
  .fg-shop-hero,
  .fg-contact-hero,
  .fg-about-hero,
  .fg-ws-hero,
  section.hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Also target any Kadence/WP wrapper gaps */
  .site-inner > *:first-child,
  .content-area > *:first-child,
  main > *:first-child {
    margin-top: 0 !important;
  }
}

/* ─── FIX 5: Product Page Trust Badges + Add to Cart Layout ─── */
@media (max-width: 767px) {
  /* Trust strip on single product */
  .fg-sp-trust-strip {
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .fg-sp-trust-item {
    font-size: 12px !important;
  }

  /* Add to cart form layout */
  .fg-sp-atc {
    width: 100% !important;
  }

  .single-product form.cart,
  .fg-sp-atc form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .single-product form.cart .quantity,
  .fg-sp-atc form.cart .quantity {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
  }

  .single-product form.cart .quantity input[type="number"],
  .fg-sp-atc form.cart .quantity input[type="number"] {
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
  }

  .single-product form.cart .single_add_to_cart_button,
  .fg-sp-atc form.cart .single_add_to_cart_button {
    width: 100% !important;
    margin-left: 0 !important;
    min-height: 48px !important;
    flex: none !important;
  }
}

/* ─── FIX 6: Mobile Typography ─── */
@media (max-width: 767px) {
  body {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  .fg-top-bar,
  .fg-announcement-bar {
    font-size: 12px !important;
  }
}

/* ─── FIX 8: Hide Breadcrumbs on Mobile ─── */
@media (max-width: 767px) {
  .woocommerce-breadcrumb,
  .breadcrumb,
  .fg-breadcrumb,
  nav.woocommerce-breadcrumb {
    display: none !important;
  }
}

/* ─── FIX 9: Hero Slider Responsive on Mobile ─── */
@media (max-width: 767px) {
  .fg-hero {
    min-height: 500px !important;
    height: auto !important;
    overflow: hidden;
  }

  .fg-hero-slides {
    min-height: 500px !important;
  }

  .fg-hero-slide {
    min-height: 500px !important;
  }

  .fg-hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Ensure content doesn't overflow */
  .fg-hero-inner {
    padding: 3rem 20px 5rem 20px !important;
  }

  .fg-hero-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .fg-hero-sub {
    font-size: 0.95rem !important;
  }
}

/* ─── FIX 10: Hero Badges & Dots Overlap Fix ─── */
@media (max-width: 767px) {
  /* Move dots higher to avoid badge overlap */
  .fg-hero-dots {
    bottom: 6rem !important;
    z-index: 10 !important;
  }

  /* Stack badges vertically and position below dots */
  .fg-hero-badges {
    position: absolute !important;
    bottom: 0.75rem !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding: 12px 16px !important;
    gap: 8px 16px !important;
    z-index: 5 !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
  }

  .fg-hero-badge {
    font-size: 0.7rem !important;
    gap: 4px !important;
  }

  .fg-hero-badge svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ============================================
   FIX 11: Product Page Cart + Trust Badges Mobile Layout
   ============================================ */
@media (max-width: 767px) {
  /* Cart form wrapper - full width */
  .fg-sp-atc {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Force cart form to stack vertically */
  .fg-sp-atc .cart,
  .fg-sp-atc form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Quantity container - full width, centered */
  .fg-sp-atc .quantity {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Quantity input - wider and taller for touch */
  .fg-sp-atc .quantity .qty,
  .fg-sp-atc .quantity input[type="number"] {
    width: 100px !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Add to Cart button - full width, not flex: 1 */
  .fg-sp-atc .single_add_to_cart_button {
    flex: none !important;
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
  }

  /* Variable product variations - stack labels properly */
  .fg-sp-atc .variations {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .fg-sp-atc .variations tr {
    display: block !important;
    margin-bottom: 12px !important;
  }

  .fg-sp-atc .variations td {
    display: block !important;
    width: 100% !important;
  }

  .fg-sp-atc .variations select {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Variation price - full width */
  .fg-sp-atc .woocommerce-variation-price {
    width: 100% !important;
    text-align: center !important;
  }

  /* Trust strip below cart - stack vertically */
  .fg-sp-trust-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 16px !important;
    text-align: center !important;
  }

  .fg-sp-trust-item {
    justify-content: center !important;
    font-size: 0.85rem !important;
  }

  .fg-sp-trust-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Ensure stock status is also properly spaced */
  .fg-sp-stock {
    margin-bottom: 16px !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ============================================
   FIX 12: Hide Breadcrumb Navigation on Mobile
   ============================================ */
@media (max-width: 767px) {
  .woocommerce-breadcrumb,
  nav.woocommerce-breadcrumb,
  .breadcrumb,
  .fg-breadcrumb,
  .single-product .woocommerce-breadcrumb,
  .woocommerce .woocommerce-breadcrumb {
    display: none !important;
  }
}

/* ============================================
   FIX 13: Hero Slider - All Slides Responsive on Mobile
   (Custom slider, NOT Slider Revolution)
   ============================================ */
@media (max-width: 767px) {
  /* Ensure all slides scale properly */
  .fg-hero-slide,
  .fg-hero-slide:nth-child(2),
  .fg-hero-slides .fg-hero-slide {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* All slide images - cover and center */
  .fg-hero-slide-img,
  .fg-hero-slide img,
  .fg-hero-slides img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Prevent any overflow from the slider container */
  .fg-hero,
  .fg-hero-slides {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Second slide specific fix (if needed) */
  .fg-hero-slide:nth-of-type(2) .fg-hero-slide-img {
    object-position: center center !important;
  }
}

/* ============================================
   FIX 14: Remove White Gap Between Trust Bar and Hero on Mobile
   ============================================ */
@media (max-width: 767px) {
  /* Remove trust bar bottom border which creates a visual gap */
  .fg-trust-bar {
    border-bottom: none !important;
  }

  /* Ensure hero sections have zero margin/gap at top */
  .fg-hero,
  .fg-shop-hero,
  .fg-contact-hero,
  .fg-about-hero,
  .fg-ws-hero {
    margin-top: 0 !important;
  }

  /* Pull hero up slightly if there's still a 1px gap from borders/rounding */
  .site-container .fg-hero,
  .site-main .fg-hero,
  .entry-content .fg-hero,
  body .fg-hero {
    margin-top: -1px !important;
    border-top: 1px solid var(--fg-dark) !important;
  }

  /* Same for other hero variants */
  body .fg-contact-hero,
  body .fg-about-hero,
  body .fg-ws-hero,
  body .fg-shop-hero {
    margin-top: -1px !important;
    border-top: 1px solid var(--fg-dark) !important;
  }
}