/*
Theme Name: Agro Power Parts
Theme URI: https://agropowerparts.gr
Author: Agro Power Parts
Author URI: https://agropowerparts.gr
Description: Premium WordPress theme for agricultural machinery and equipment e-commerce with WooCommerce integration. Features modern design, Greek language support, and full responsive layout.
Version: 1.40
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agro-power-parts
Tags: e-commerce, woocommerce, custom-logo, custom-menu, featured-images, translation-ready
WooCommerce: 8.0
*/

/* ==========================================================================
   Google Fonts
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
   @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap");
   
   /* ==========================================================================
      CSS Custom Properties (Variables)
      ========================================================================== */
   :root {
       /* Colors - Light Mode */
       --background: hsl(0, 0%, 100%);
       --foreground: hsl(0, 0%, 9%);
       --card: hsl(0, 0%, 100%);
       --card-foreground: hsl(0, 0%, 9%);
       --popover: hsl(0, 0%, 97%);
       --popover-foreground: hsl(0, 0%, 9%);
      --primary: hsl(155, 82%, 22%);
      --primary-foreground: hsl(0, 0%, 100%);
       --secondary: hsl(0, 0%, 95%);
       --secondary-foreground: hsl(0, 0%, 15%);
       --muted: hsl(0, 0%, 75%);
       --muted-foreground: hsl(0, 0%, 40%);
       --accent: hsl(166, 76%, 96%);
       --accent-foreground: hsl(155, 82%, 22%);
       --destructive: hsl(0, 72%, 50%);
       --destructive-foreground: hsl(0, 85%, 97%);
       --border: hsl(0, 0%, 87%);
       --input: hsl(0, 0%, 87%);
       --ring: hsl(161, 93%, 25%);
       --radius: 0.75rem;
   
       /* Color aliases for page templates */
       --color-primary: var(--primary);
       --color-primary-foreground: var(--primary-foreground);
       --color-bg: var(--background);
       --color-bg-secondary: var(--secondary);
       --color-text: var(--foreground);
       --color-text-muted: var(--muted-foreground);
       --color-border: var(--border);
   
       /* Custom Tokens */
       --hero-gradient: linear-gradient(135deg, var(--primary) 0%, hsl(155, 82%, 28%) 50%, hsl(155, 72%, 35%) 100%);
       --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
       --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
   
       /* Typography */
       --font-sans: 'Montserrat', 'Work Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-size-xs: 0.75rem;
       --font-size-sm: 0.875rem;
       --font-size-base: 1rem;
       --font-size-lg: 1.125rem;
       --font-size-xl: 1.25rem;
       --font-size-2xl: 1.5rem;
       --font-size-3xl: 1.875rem;
       --font-size-4xl: 2.25rem;
       --font-size-5xl: 3rem;
       --font-size-6xl: 3.75rem;
   
       /* Spacing */
       --spacing-1: 0.25rem;
       --spacing-2: 0.5rem;
       --spacing-3: 0.75rem;
       --spacing-4: 1rem;
       --spacing-5: 1.25rem;
       --spacing-6: 1.5rem;
       --spacing-8: 2rem;
       --spacing-10: 2.5rem;
       --spacing-12: 3rem;
       --spacing-16: 4rem;
       --spacing-20: 5rem;
   }
   
   /* ==========================================================================
      Reset & Base Styles
      ========================================================================== */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       scroll-behavior: smooth;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   body {
       font-family: var(--font-sans);
       font-size: var(--font-size-base);
       line-height: 1.6;
       color: var(--foreground);
       background-color: var(--background);
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-sans);
       font-weight: 700;
       line-height: 1.2;
       letter-spacing: -0.025em;
       color: var(--foreground);
   }
   
   h1 { font-size: var(--font-size-4xl); }
   h2 { font-size: var(--font-size-3xl); }
   h3 { font-size: var(--font-size-2xl); }
   h4 { font-size: var(--font-size-xl); }
   h5 { font-size: var(--font-size-lg); }
   h6 { font-size: var(--font-size-base); }
   
   @media (min-width: 768px) {
       h1 { font-size: var(--font-size-5xl); }
       h2 { font-size: var(--font-size-4xl); }
   }
   
   @media (min-width: 1024px) {
       h1 { font-size: var(--font-size-6xl); }
   }
   
   a {
       color: inherit;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   a:hover {
       color: var(--primary);
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   ul, ol {
       list-style: none;
   }
   
   /* ==========================================================================
      Layout
      ========================================================================== */
   .container {
       width: 100%;
       max-width: 1280px;
       margin-left: auto;
       margin-right: auto;
       padding-left: var(--spacing-4);
       padding-right: var(--spacing-4);
   }
   
   @media (min-width: 640px) {
       .container {
           padding-left: var(--spacing-6);
           padding-right: var(--spacing-6);
       }
   }
   
   .min-h-screen {
       min-height: 100vh;
       overflow-x: hidden;
   }
   
   #page {
       overflow-x: hidden;
       width: 100%;
   }
   
   /* Grid System */
   .grid {
       display: grid;
   }
   
   .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
   .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   
   @media (min-width: 640px) {
       .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   
   @media (min-width: 768px) {
       .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   
   @media (min-width: 1024px) {
       .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   
   @media (min-width: 1200px) {
       .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   }
   
   .gap-4 { gap: var(--spacing-4); }
   .gap-6 { gap: var(--spacing-6); }
   .gap-8 { gap: var(--spacing-8); }
   
   /* Flexbox */
   .flex {
       display: flex;
   }
   
   .flex-col {
       flex-direction: column;
   }
   
   .flex-wrap {
       flex-wrap: wrap;
   }
   
   .items-center {
       align-items: center;
   }
   
   .items-start {
       align-items: flex-start;
   }
   
   .justify-between {
       justify-content: space-between;
   }
   
   .justify-center {
       justify-content: center;
   }
   
   /* ==========================================================================
      Buttons
      ========================================================================== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-2);
       padding: var(--spacing-3) var(--spacing-6);
       font-family: var(--font-sans);
       font-size: var(--font-size-sm);
       font-weight: 600;
       line-height: 1;
       border-radius: var(--radius);
       border: 2px solid transparent;
       cursor: pointer;
       transition: all 0.2s ease;
       text-decoration: none;
       white-space: nowrap;
   }
   
   .btn:focus {
       outline: 2px solid var(--ring);
       outline-offset: 2px;
   }
   
   /* Primary Button */
   .btn-primary {
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-color: var(--primary);
   }
   
.btn-primary:hover {
    background-color: hsl(155, 82%, 20%);
    color: var(--primary-foreground);
}
   
   /* Secondary Button */
   .btn-secondary {
       background-color: var(--secondary);
       color: var(--secondary-foreground);
       border-color: var(--secondary);
   }
   
   .btn-secondary:hover {
       background-color: hsl(0, 0%, 85%);
       color: var(--secondary-foreground);
   }
   
   /* Outline Button */
   .btn-outline {
       background-color: transparent;
       color: var(--foreground);
       border-color: var(--border);
   }
   
   .btn-outline:hover {
       background-color: var(--accent);
       border-color: var(--primary);
       color: var(--primary);
   }
   
   /* Ghost Button */
   .btn-ghost {
       background-color: transparent;
       color: var(--foreground);
       border-color: transparent;
   }
   
   .btn-ghost:hover {
       background-color: var(--accent);
   }
   
   /* Hero Buttons - defined in hero section below */
   
   /* Button Sizes */
   .btn-sm {
       padding: var(--spacing-2) var(--spacing-4);
       font-size: var(--font-size-xs);
   }
   
   .btn-lg {
       padding: var(--spacing-4) var(--spacing-8);
       font-size: var(--font-size-base);
   }
   
   .btn-icon {
       padding: var(--spacing-2);
       width: 40px;
       height: 40px;
   }
   
   .btn-icon.rounded-full {
       border-radius: 50%;
   }
   
   /* ==========================================================================
      Header Styles
      ========================================================================== */
   .site-header {
       position: sticky;
       top: 0;
       z-index: 50;
       background-color: var(--background);
       border-bottom: 1px solid var(--border);
   }
   
   /* Top Bar */
   .top-bar {
       background-color: var(--secondary);
       color: var(--secondary-foreground);
       padding: var(--spacing-2) 0;
       font-size: var(--font-size-sm);
   }
   
   /* Top bar: mobile – stacked and centered */
   .top-bar__container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-2);
       text-align: center;
   }
   
   .top-bar__banner {
       text-align: center;
   }
   
   @media (min-width: 768px) {
       .top-bar__container {
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           text-align: left;
       }
       
       .top-bar__banner {
           text-align: left;
       }
   }
   
   .top-bar a {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
       color: var(--secondary-foreground);
   }
   
   .top-bar a:hover {
       color: var(--primary);
   }
   
   /* Main Header */
   .main-header {
       padding: var(--spacing-4) 0;
   }
   
   .main-header .container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-4);
       flex-direction: column;
   }
   
   @media (min-width: 768px) {
       .main-header .container {
           flex-direction: row;
           flex-wrap: wrap;
       }
   }
   
   @media (min-width: 1100px) {
       .main-header .container {
           flex-wrap: nowrap;
       }
   }
   
   /* Logo */
   .site-logo img {
       height: 48px;
       width: auto;
   }
   
   @media (min-width: 768px) {
       .site-logo img {
           height: 56px;
       }
   }
   
   @media (min-width: 1024px) {
       .site-logo img {
           height: 64px;
       }
   }
   
   /* Search Form */
   .header-search {
       display: none;
       flex: 1;
       max-width: 640px;
   }
   
   @media (min-width: 768px) {
       .header-search {
           display: flex;
       }
   }
   
   .header-search form {
       position: relative;
       width: 100%;
   }
   
   .header-search input {
       width: 100%;
       padding: var(--spacing-3) var(--spacing-4);
       padding-right: 48px;
       border: 2px solid var(--border);
       border-radius: 9999px;
       font-size: var(--font-size-sm);
       font-family: var(--font-sans);
       background-color: var(--background);
       color: var(--foreground);
       height: 44px;
   }
   
   .header-search input:focus {
       outline: none;
       border-color: var(--primary);
   }
   
   .header-search input::placeholder {
       color: var(--muted-foreground);
   }
   
   .header-search button {
       position: absolute;
       right: 4px;
       top: 50%;
       transform: translateY(-50%);
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background-color: var(--primary);
       color: var(--primary-foreground);
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background-color 0.2s ease;
   }
   
   .header-search button:hover {
       background-color: hsl(155, 82%, 20%);
   }
   
   /* Mobile Search */
   .mobile-search {
       display: block;
       width: 100%;
   }
   
   @media (min-width: 768px) {
       .mobile-search {
           display: none;
       }
   }
   
   .mobile-search form {
       position: relative;
       width: 100%;
   }
   
   .mobile-search input {
       width: 100%;
       padding: var(--spacing-3) var(--spacing-4);
       padding-right: 48px;
       border: 2px solid var(--border);
       border-radius: 9999px;
       font-size: var(--font-size-sm);
       font-family: var(--font-sans);
       background-color: var(--background);
       color: var(--foreground);
       height: 40px;
   }
   
   .mobile-search input:focus {
       outline: none;
       border-color: var(--primary);
   }
   
   .mobile-search button {
       position: absolute;
       right: 4px;
       top: 50%;
       transform: translateY(-50%);
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background-color: var(--primary);
       color: var(--primary-foreground);
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background-color 0.2s ease;
   }
   
   .mobile-search button:hover {
       background-color: hsl(155, 82%, 20%);
   }
   
   /* Header Actions */
   .header-actions {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
       flex-shrink: 0;
   }
   /* Language Switcher - pill design */
   .language-switcher .lang-switcher-pills {
       display: flex;
       align-items: center;
       background: var(--secondary);
       border-radius: var(--radius);
       padding: 2px;
       gap: 2px;
   }
   .language-switcher .lang-pill {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 5px 10px;
       border-radius: calc(var(--radius) - 2px);
       font-size: var(--font-size-xs);
       font-weight: 600;
       text-decoration: none;
       color: var(--muted-foreground);
       transition: all 0.2s ease;
   }
   .language-switcher .lang-pill:hover {
       color: var(--foreground);
       background: rgba(255, 255, 255, 0.6);
   }
   .language-switcher .lang-pill.is-active {
       background: var(--primary);
       color: var(--primary-foreground);
   }
   .language-switcher .lang-pill.is-active:hover {
       background: hsl(155, 82%, 18%);
       color: var(--primary-foreground);
   }
   .language-switcher .lang-flag {
       width: 18px;
       height: 14px;
       object-fit: cover;
       border-radius: 2px;
   }
   .header-actions .btn-icon {
       position: relative;
   }
   
   /* Cart Widget */
   .cart-widget {
       position: relative;
   }
   
   .cart-count {
       position: absolute;
       top: -4px;
       right: -4px;
       width: 20px;
       height: 20px;
       background-color: var(--primary);
       color: var(--primary-foreground);
       font-size: var(--font-size-xs);
       font-weight: 700;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   /* Mobile Menu Toggle */
   .mobile-menu-toggle {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       padding: 0;
       border: 2px solid var(--primary);
       border-radius: var(--radius);
       background-color: transparent;
       color: var(--foreground);
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .mobile-menu-toggle:hover {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   .mobile-menu-toggle .close-icon {
       display: none;
   }
   
   .mobile-menu-toggle .menu-icon {
       display: block;
   }
   
   .mobile-menu-toggle[aria-expanded="true"] .close-icon {
       display: block;
   }
   
   .mobile-menu-toggle[aria-expanded="true"] .menu-icon {
       display: none;
   }
   
   .mobile-menu-toggle[aria-expanded="true"] {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   @media (min-width: 768px) {
       .mobile-menu-toggle {
           display: none;
       }
   }
   
   /* Navigation */
   .main-nav {
       background-color: var(--primary);
   }

   /* ── Nav Bar: 3-column layout ── */
   .nav-bar {
       display: flex;
       align-items: stretch;
       height: 42px;
       overflow: hidden;
   }
   .nav-bar__left {
       flex-shrink: 0;
       display: flex;
       align-items: center;
   }
   .nav-bar__center {
       flex: 1 1 auto;
       min-width: 0;
       overflow: hidden;
   }
   .nav-bar__right {
       flex-shrink: 0;
       display: none;
       align-items: center;
       gap: 14px;
       padding: 0 var(--spacing-3);
       margin-left: auto;
       border-left: 1px solid rgba(255,255,255,.15);
   }
   @media (min-width: 1100px) {
       .nav-bar__right {
           display: flex;
       }
   }
   .nav-bar__info-item {
       display: flex;
       align-items: center;
       gap: 5px;
       color: rgba(255,255,255,.85) !important;
       text-decoration: none !important;
       font-size: 0.7rem;
       font-weight: 500;
       white-space: nowrap;
       transition: color .2s;
   }
   .nav-bar__info-item:hover {
       color: #fff !important;
   }
   .nav-bar__info-item svg {
       flex-shrink: 0;
       opacity: .8;
       width: 14px;
       height: 14px;
   }

   .main-nav ul {
       display: none;
       flex-direction: column;
       padding: 0;
       margin: 0;
       list-style: none;
   }
   
   .main-nav.is-open ul {
       display: flex;
   }
   
   @media (min-width: 768px) {
       .nav-bar__center > ul,
       .nav-bar__center .menu {
           display: flex !important;
           flex-direction: row;
           align-items: center;
           flex-wrap: nowrap;
           height: 100%;
       }
       .main-nav ul {
           display: flex;
           flex-direction: row;
           align-items: center;
           flex-wrap: nowrap;
           gap: 0;
       }
   }
   
   .main-nav li {
       width: 100%;
       border-bottom: 1px solid var(--border);
   }
   
   .main-nav li:last-child {
       border-bottom: none;
   }
   
   @media (min-width: 768px) {
       .main-nav li {
           width: auto;
           flex-shrink: 0;
           border-bottom: none;
       }
   }
   
   .nav-bar__center a {
       display: flex;
       align-items: center;
       padding: 0 var(--spacing-3);
       height: 100%;
       color: white;
       font-weight: 500;
       font-size: var(--font-size-sm);
       white-space: nowrap;
       transition: background-color 0.2s ease;
   }
   
   .nav-bar__center a:hover,
   .nav-bar__center .current-menu-item a {
       background-color: var(--accent);
       color: var(--accent-foreground);
   }

   /* Ensure info items are NOT affected by nav link styles */
   .nav-bar__right a.nav-bar__info-item {
       padding: 0;
       height: auto;
       background: none !important;
   }

   /* Override: MLM trigger inside nav bar */
   .nav-bar__left a.mlm-trigger-btn {
       border-radius: 0;
       height: 42px;
       padding: 0 var(--spacing-4);
       font-size: var(--font-size-sm);
       border-right: 1px solid rgba(255,255,255,.15);
   }
   .nav-bar__left a.mlm-trigger-btn:hover {
       opacity: 1;
       background: hsl(155, 82%, 18%);
   }
   
   /* Mobile nav */
   @media (max-width: 767px) {
       .main-nav.is-open {
           animation: slideDown 0.3s ease;
       }
       .nav-bar {
           flex-wrap: wrap;
           height: auto;
           overflow: visible;
       }
       .nav-bar__left {
           width: 100%;
           border-bottom: 1px solid rgba(255,255,255,.15);
       }
       .nav-bar__left a.mlm-trigger-btn {
           width: 100%;
           justify-content: center;
           border-radius: 0;
           border-right: none;
       }
       .nav-bar__center {
           width: 100%;
           overflow: visible;
       }
       .nav-bar__center a {
           display: block;
           padding: var(--spacing-2) var(--spacing-3);
           height: auto;
           color: white;
       }
   }
   
   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ==========================================================================
      Hero Section - Primary gradient background with bold italic heading
      ========================================================================== */
   .hero-section {
       position: relative;
       overflow: hidden;
       max-width: 100vw;
       background: linear-gradient(135deg, var(--primary) 0%, hsl(155, 82%, 28%) 50%, hsl(155, 72%, 35%) 100%);
   }

   .hero-bg-image {
       position: absolute;
       inset: 0;
       background-size: cover;
       background-position: center;
       opacity: 0.15;
       filter: grayscale(50%);
   }

   .hero-section::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 40%;
       max-width: 40%;
       height: 100%;
       background-color: rgba(255, 255, 255, 0.08);
       transform: skewX(-12deg);
       transform-origin: top right;
   }

   .hero-content {
       position: relative;
       z-index: 10;
       padding: var(--spacing-16) 0;
   }

   @media (min-width: 1024px) {
       .hero-content {
           padding: 5rem 0;
       }
   }

   .hero-grid {
       display: grid;
       gap: var(--spacing-8);
       align-items: center;
   }

   @media (min-width: 900px) {
       .hero-grid {
           grid-template-columns: 1.1fr 1fr;
           gap: var(--spacing-6);
       }
   }

   @media (min-width: 1200px) {
       .hero-grid {
           grid-template-columns: 1.2fr 1fr;
           gap: var(--spacing-8);
       }
   }

   .hero-text {
       color: white;
   }

   .hero-welcome {
       display: inline-block;
       font-size: var(--font-size-sm);
       font-weight: 600;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: var(--spacing-4);
   }

   .hero-text h1 {
       color: hsl(210, 11%, 15%);
       font-size: var(--font-size-4xl);
       font-weight: 800;
       font-style: italic;
       line-height: 1.1;
       margin-bottom: var(--spacing-6);
   }

   @media (min-width: 768px) {
       .hero-text h1 {
           font-size: var(--font-size-5xl);
       }
   }

   @media (min-width: 1024px) {
       .hero-text h1 {
           font-size: var(--font-size-6xl);
       }
   }

   .hero-text p {
       font-size: var(--font-size-base);
       color: rgba(255, 255, 255, 0.85);
       max-width: 32rem;
       margin-bottom: var(--spacing-8);
       line-height: 1.7;
   }

   .hero-buttons {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-4);
   }

   .btn-hero {
       background-color: hsl(210, 11%, 15%);
       color: white;
       border-color: hsl(210, 11%, 15%);
       padding: var(--spacing-4) var(--spacing-8);
       font-size: var(--font-size-base);
       font-weight: 600;
       border-radius: 0;
   }

   .btn-hero:hover {
       background-color: hsl(210, 11%, 22%);
       color: white;
   }

   /* Hero Image */
   .hero-image {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .hero-image img {
       width: 100%;
       max-width: 750px;
       height: auto;
       position: relative;
       z-index: 10;
       filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
   }

   @media (max-width: 899px) {
       .hero-image {
           display: none;
       }
   }
   
/* ==========================================================================
     Category Cards Section - Dark bg with enhanced cards
     ========================================================================== */
  .category-cards-section {
      padding: var(--spacing-12) 0;
      position: relative;
      z-index: 10;
  }
  
  @media (min-width: 1024px) {
      .category-cards-section {
          padding: var(--spacing-16) 0;
      }
  }

  .category-cards-header {
      text-align: center;
      margin-bottom: var(--spacing-10);
  }

  .category-cards-subtitle {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: var(--spacing-3);
  }

  .category-cards-header h2 {
      font-size: var(--font-size-3xl);
      font-weight: 800;
  }

  @media (min-width: 768px) {
      .category-cards-header h2 {
          font-size: var(--font-size-4xl);
      }
  }

  .category-cards-section .container > .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 768px) {
      .category-cards-section .container > .grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
  }

  @media (min-width: 1200px) {
      .category-cards-section .container > .grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
  }
   
   .category-card {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       gap: var(--spacing-3);
       padding: var(--spacing-5);
       background-color: var(--card);
       border-radius: var(--radius);
       border: 1px solid var(--border);
       transition: all 0.3s ease;
       text-decoration: none;
       position: relative;
       overflow: hidden;
   }
   
   .category-card::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 50%;
       height: 100%;
       background: linear-gradient(135deg, transparent 40%, var(--primary) 40%);
       opacity: 0.15;
       transition: opacity 0.3s ease;
   }
   
   .category-card:hover {
       border-color: var(--primary);
       transform: translateY(-4px);
       box-shadow: var(--card-shadow-hover);
   }

   .category-card:hover::before {
       opacity: 0.25;
   }
   
   .category-card-icon {
       padding: var(--spacing-3);
       border-radius: 8px;
       color: var(--primary-foreground);
       transition: transform 0.2s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       position: relative;
       z-index: 2;
   }
   
   .category-card-icon.bg-primary {
       background-color: var(--primary);
   }
   
   .category-card-icon.bg-accent {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   .category-card:hover .category-card-icon {
       transform: scale(1.1);
   }
   
   .category-card-content {
       position: relative;
       z-index: 2;
   }

   .category-card-content h3 {
       font-size: var(--font-size-base);
       font-weight: 700;
       color: var(--card-foreground);
       margin-bottom: var(--spacing-1);
       word-break: break-word;
   }
   
   .category-card-content p {
       font-size: var(--font-size-sm);
       color: var(--muted-foreground);
       margin: 0;
   }
   
/* ==========================================================================
     Brand Banners Section
     ========================================================================== */
  .brand-banners-section {
      padding: var(--spacing-10) 0;
  }
  
  @media (min-width: 1024px) {
      .brand-banners-section {
          padding: var(--spacing-12) 0;
      }
  }
   
   .brand-banners-grid {
       display: grid;
       gap: var(--spacing-4);
   }
   
   @media (min-width: 768px) {
       .brand-banners-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .brand-banner {
       position: relative;
       border-radius: var(--radius);
       padding: var(--spacing-6);
       min-height: 280px;
   }
   
   @media (min-width: 1024px) {
       .brand-banner {
           padding: var(--spacing-8);
       }
   }
   
   .brand-banner.blue {
       background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   }
   
   .brand-banner.red {
       background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
   }
   
   .brand-banner-content {
       position: relative;
       z-index: 10;
       max-width: 40%;
   }
   
   .brand-banner .badge {
       display: inline-block;
       padding: var(--spacing-1) var(--spacing-3);
       background-color: rgba(255, 255, 255, 0.2);
       color: white;
       border-radius: 9999px;
       font-size: var(--font-size-sm);
       font-weight: 500;
       margin-bottom: var(--spacing-3);
   }
   
   .brand-banner h3 {
       color: white;
       margin-bottom: var(--spacing-2);
   }
   
   .brand-banner p {
       color: rgba(255, 255, 255, 0.8);
       font-size: var(--font-size-sm);
       margin-bottom: var(--spacing-4);
   }
   
   .brand-banner .btn {
       background-color: white;
   }
   
   .brand-banner.blue .btn {
       color: #1d4ed8;
   }
   
   .brand-banner.red .btn {
       color: #b91c1c;
   }
   
   .brand-banner-image {
       position: absolute;
       right: 2rem;
       bottom: 0;
       width: 60%;
       transform: translate(10%, 5%);
       transition: transform 0.5s ease;
   }
   
.brand-banner:hover .brand-banner-image {
      transform: translate(10%, 5%) scale(1.05);
  }
  
  /* ==========================================================================
     Newest Products Section - Dark themed
     ========================================================================== */
  .newest-products-section {
      padding: var(--spacing-10) 0;
      background-color: hsl(210, 11%, 12%);
  }
  
  @media (min-width: 1024px) {
      .newest-products-section {
          padding: var(--spacing-12) 0;
      }
  }

  .newest-products-section .section-header h2 {
      color: white;
  }

  .newest-products-section .section-header p {
      color: rgba(255, 255, 255, 0.6);
  }

  .newest-products-section .section-subtitle {
      color: var(--primary);
  }

  .newest-products-section .btn-outline {
      border-color: rgba(255, 255, 255, 0.3);
      color: white;
  }

  .newest-products-section .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background-color: rgba(255, 255, 255, 0.05);
  }
  
  /* ==========================================================================
     Featured Products Section
     ========================================================================== */
  .featured-products-section,
  .privileged-products-section {
      padding: var(--spacing-10) 0;
  }
  
  @media (min-width: 1024px) {
      .featured-products-section,
      .privileged-products-section {
          padding: var(--spacing-12) 0;
      }
  }
   
   .privileged-products-section {
       background-color: var(--secondary);
   }
   
   .section-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--spacing-8);
   }
   
   .section-header h2 {
       margin-bottom: var(--spacing-1);
   }
   
   .section-header h2 .text-primary {
       color: var(--primary);
   }
   
   .section-header p {
       color: var(--muted-foreground);
       margin: 0;
   }
   
   .section-subtitle {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
       color: var(--primary);
       font-size: var(--font-size-sm);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       margin-bottom: var(--spacing-2);
   }
   
   .section-subtitle svg {
       fill: var(--primary);
   }
   
   /* Product Grid */
   .products-grid {
       display: grid;
       grid-template-columns: repeat(1, minmax(0, 1fr));
       gap: var(--spacing-4);
   }
   
   @media (min-width: 640px) {
       .products-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }
   
   @media (min-width: 900px) {
       .products-grid {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }
   }
   
   @media (min-width: 1200px) {
       .products-grid {
           grid-template-columns: repeat(4, minmax(0, 1fr));
       }
   }
   
   /* ==========================================================================
      Product Card Styles - Dark card with diagonal green stripe
      ========================================================================== */
   .product-card {
       background-color: hsl(210, 11%, 15%);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
       transition: all 0.3s ease;
       position: relative;
       display: flex;
       flex-direction: column;
   }
   
   .product-card:hover {
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
       transform: translateY(-4px);
   }

   /* Diagonal green accent stripe */
   .product-card-stripe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
       overflow: hidden;
   }

   .product-card-stripe::before {
       content: '';
       position: absolute;
       top: -4px;
       left: 0;
       right: 0;
       height: 5px;
       background-color: var(--primary);
   }

   .product-card-stripe::after {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 55%;
       height: 55%;
       background: linear-gradient(135deg, transparent 45%, var(--primary) 45%);
       opacity: 0.85;
   }
   
   .product-card-image {
       position: relative;
       aspect-ratio: 1;
       background-color: hsl(210, 11%, 20%);
       z-index: 2;
   }
   
   .product-card-badges {
       position: absolute;
       top: var(--spacing-3);
       left: var(--spacing-3);
       display: flex;
       flex-direction: column;
       gap: var(--spacing-2);
       z-index: 10;
   }
   
   .product-badge {
       display: inline-block;
       padding: var(--spacing-1) var(--spacing-2);
       font-size: var(--font-size-xs);
       font-weight: 600;
       border-radius: 4px;
   }
   
   .product-badge.new {
       background-color: var(--primary);
       color: white;
   }
   
   .product-badge.sale {
       background-color: hsl(0, 72%, 50%);
       color: white;
   }
   
   .product-card-image img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       transition: transform 0.3s ease;
       position: relative;
       z-index: 3;
   }
   
   .product-card:hover .product-card-image img {
       transform: scale(1.05);
   }
   
   .product-card-content {
       padding: var(--spacing-4);
       position: relative;
       z-index: 2;
       flex: 1;
       display: flex;
       flex-direction: column;
   }
   
   .product-card-brand {
       font-size: var(--font-size-xs);
       font-weight: 600;
       color: var(--primary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }
   
   .product-card-title {
       font-size: var(--font-size-base);
       font-weight: 600;
       color: white;
       margin: var(--spacing-2) 0 var(--spacing-3);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .product-card-title a {
       color: white;
   }

   .product-card-title a:hover {
       color: var(--primary);
   }

   /* Product Card Specs Row */
   .product-card-specs {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-2) var(--spacing-3);
       margin-bottom: var(--spacing-3);
   }

   .product-spec-item {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: var(--font-size-xs);
       color: rgba(255, 255, 255, 0.6);
   }

   .product-spec-item svg {
       color: var(--primary);
       flex-shrink: 0;
   }

   /* Product Card Divider */
   .product-card-divider {
       height: 1px;
       background-color: rgba(255, 255, 255, 0.1);
       margin-bottom: var(--spacing-3);
   }

   /* Product Card Price Row */
   .product-card-price-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--spacing-1);
   }

   .product-card-price-label {
       font-size: var(--font-size-xs);
       color: rgba(255, 255, 255, 0.5);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       font-weight: 500;
   }

   .product-card-rating {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
   }

   .product-card-stars {
       display: flex;
       gap: 1px;
       color: var(--primary);
   }

   .product-card-stars svg {
       color: var(--primary);
   }

   .product-card-rating-count {
       font-size: var(--font-size-xs);
       color: rgba(255, 255, 255, 0.5);
   }
   
   .product-card-footer {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-1);
       margin-bottom: var(--spacing-3);
   }
   
   .product-card-price {
       display: flex;
       align-items: baseline;
       gap: var(--spacing-2);
   }
   
   .product-price-current {
       font-size: var(--font-size-xl);
       font-weight: 700;
       color: white;
   }
   
   .product-price-original {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.4);
       text-decoration: line-through;
   }

   /* CTA Button at bottom of card */
   .product-card-cta {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-2);
       width: 100%;
       padding: var(--spacing-3) var(--spacing-4);
       background-color: var(--primary);
       color: white;
       border: none;
       border-radius: calc(var(--radius) - 4px);
       font-size: var(--font-size-sm);
       font-weight: 600;
       font-family: var(--font-sans);
       cursor: pointer;
       transition: all 0.2s ease;
       text-decoration: none;
       margin-top: auto;
   }

   .product-card-cta:hover {
       background-color: hsl(155, 82%, 28%);
       color: white;
   }

   .product-card-cta svg {
       flex-shrink: 0;
   }
   
   /* Legacy add-to-cart icon button (for WooCommerce grids) */
   .product-add-to-cart {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: var(--primary);
       color: var(--primary-foreground);
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background-color 0.2s ease;
       flex-shrink: 0;
   }
   
   .product-add-to-cart:hover {
       background-color: hsl(155, 82%, 20%);
   }
   
   /* ==========================================================================
      Promo Banner Section
      ========================================================================== */
.promo-banner-section {
      padding: var(--spacing-10) 0;
  }
  
  @media (min-width: 1024px) {
      .promo-banner-section {
          padding: var(--spacing-12) 0;
      }
  }
  
  .promo-banner {
      position: relative;
       overflow: hidden;
       border-radius: var(--radius);
       background-color: var(--primary);
   }
   
   .promo-banner::before,
   .promo-banner::after {
       content: '';
       position: absolute;
       border-radius: 50%;
       opacity: 0.1;
   }
   
   .promo-banner::before {
       top: 0;
       right: 0;
       width: 384px;
       height: 384px;
       background-color: var(--primary-foreground);
       transform: translate(25%, -50%);
   }
   
   .promo-banner::after {
       bottom: 0;
       left: 0;
       width: 256px;
       height: 256px;
       background-color: var(--primary-foreground);
       transform: translate(-25%, 50%);
   }
   
   .promo-banner-content {
       position: relative;
       z-index: 10;
       padding: var(--spacing-10) var(--spacing-6);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-6);
   }
   
   @media (min-width: 768px) {
       .promo-banner-content {
           flex-direction: row;
           padding: var(--spacing-16) var(--spacing-12);
       }
   }
   
   .promo-banner-text {
       display: flex;
       align-items: center;
       gap: var(--spacing-6);
       color: var(--primary-foreground);
   }
   
   .promo-banner-icon {
       padding: var(--spacing-4);
       background-color: rgba(255, 255, 255, 0.2);
       border-radius: 50%;
   }
   
   .promo-banner h3 {
       color: var(--primary-foreground);
       margin-bottom: var(--spacing-1);
   }
   
   .promo-banner p {
       color: var(--primary-foreground);
       margin: 0;
   }
   
   /* ==========================================================================
      Features Section - Dark strip at bottom
      ========================================================================== */
.features-section {
      padding: var(--spacing-10) 0;
  }
  
  @media (min-width: 1024px) {
      .features-section {
          padding: var(--spacing-12) 0;
      }
  }
  
  .features-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--spacing-4);
   }
   
   @media (min-width: 1200px) {
       .features-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   .feature-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-4);
       text-align: center;
   }
   
   @media (min-width: 640px) {
       .feature-item {
           flex-direction: row;
           align-items: flex-start;
           text-align: left;
       }
   }
   
   .feature-icon {
       padding: var(--spacing-3);
       background-color: hsl(155, 82%, 30%, 0.1);
       border-radius: var(--radius);
       color: var(--primary);
       flex-shrink: 0;
       justify-content: center;
       display: flex;
   }
   
   .feature-content h3 {
       font-size: var(--font-size-base);
       margin-bottom: var(--spacing-1);
   }
   
   .feature-content p {
       font-size: var(--font-size-sm);
       color: var(--muted-foreground);
       margin: 0;
   }
   
   /* ==========================================================================
      Innovative Design Section
      ========================================================================== */
.innovative-section {
      padding: var(--spacing-10) 0;
      background-color: var(--card);
      overflow: hidden;
  }
  
  @media (min-width: 1024px) {
      .innovative-section {
          padding: var(--spacing-12) 0;
      }
  }
   
   .innovative-grid {
       display: grid;
       gap: var(--spacing-4);
       align-items: center;
   }
   
   @media (min-width: 900px) {
       .innovative-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: var(--spacing-4);
       }
   }
   
   @media (min-width: 1200px) {
       .innovative-grid {
           gap: var(--spacing-4);
       }
   }
   
   .innovative-image {
       position: relative;
   }
   
   .innovative-image-corner {
       position: absolute;
       top: -32px;
       right: 0;
       width: 80px;
       height: 80px;
       background-color: var(--primary);
       clip-path: polygon(100% 0, 0 0, 100% 100%);
   }
   
   @media (max-width: 480px) {
       .innovative-image-corner {
           display: none;
       }
   }
   
   @media (min-width: 768px) {
       .innovative-image-corner {
           width: 128px;
           height: 128px;
       }
   }
   
   @media (min-width: 1024px) {
       .innovative-image-corner {
           width: 192px;
           height: 192px;
       }
   }
   
   .innovative-image-container {
       position: relative;
       z-index: 10;
       border: 4px solid var(--primary);
       border-radius: 8px;
       padding: var(--spacing-4);
       background-color: var(--card);
   }
   
   .innovative-content .subtitle {
       font-size: var(--font-size-sm);
       font-weight: 600;
       letter-spacing: 0.1em;
       color: var(--primary);
       text-transform: uppercase;
       margin-bottom: var(--spacing-4);
   }
   
   .innovative-content h2 {
       margin-bottom: var(--spacing-6);
   }
   
   .innovative-content p {
       color: var(--muted-foreground);
       line-height: 1.7;
       margin-bottom: var(--spacing-8);
   }
   
   .innovative-features {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--spacing-4);
   }
   
   .innovative-feature {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: var(--spacing-4);
       border: 1px solid var(--border);
       border-radius: 8px;
       transition: border-color 0.2s ease;
   }
   
   .innovative-feature:hover {
       border-color: var(--primary);
   }
   
   .innovative-feature svg {
       color: var(--primary);
       margin-bottom: var(--spacing-3);
   }
   
   .innovative-feature span {
       font-size: var(--font-size-sm);
       font-weight: 500;
       text-align: center;
   }
   
   /* ==========================================================================
      Newsletter Section
      ========================================================================== */
   .newsletter-section {
       position: relative;
       overflow: hidden;
   }
   
   .newsletter-curve {
       background-color: var(--secondary);
       height: 64px;
   }
   
   .newsletter-curve svg {
       position: absolute;
       bottom: calc(100% - 64px);
       width: 100%;
       height: 64px;
       fill: var(--secondary);
   }
   
.newsletter-content {
      background-color: var(--secondary);
      padding: var(--spacing-10) 0;
  }
  
  @media (min-width: 1024px) {
      .newsletter-content {
          padding: var(--spacing-12) 0;
      }
  }
  
  .newsletter-grid {
       display: grid;
       gap: var(--spacing-4);
       align-items: center;
   }
   
   @media (min-width: 900px) {
       .newsletter-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .newsletter-text .subtitle {
       font-size: var(--font-size-sm);
       font-weight: 600;
       letter-spacing: 0.1em;
       color: var(--primary);
       text-transform: uppercase;
       margin-bottom: var(--spacing-3);
   }
   
   .newsletter-text h2 {
       margin-bottom: var(--spacing-6);
   }
   
   .newsletter-form {
       max-width: 28rem;
   }
   
   .newsletter-form-row {
       display: flex;
       gap: var(--spacing-2);
       margin-bottom: var(--spacing-4);
   }
   
   .newsletter-form input[type="email"] {
       flex: 1;
       height: 48px;
       padding: 0 var(--spacing-4);
       border: 2px solid var(--primary);
       border-radius: var(--radius);
       font-size: var(--font-size-base);
       font-family: var(--font-sans);
       background-color: var(--background);
       color: var(--foreground);
   }
   
   .newsletter-form input[type="email"]:focus {
       outline: none;
       border-color: var(--ring);
   }
   
   .newsletter-form input[type="email"]::placeholder {
       color: var(--muted-foreground);
   }
   
   .newsletter-form .btn-icon {
       height: 48px;
       width: 48px;
       background-color: var(--primary);
       color: var(--primary-foreground);
       border: none;
       border-radius: var(--radius);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .newsletter-image {
       display: none;
   }
   
   @media (min-width: 1024px) {
       .newsletter-image {
           display: block;
       }
   }
   
   /* ==========================================================================
      About Us Section - Dark bg with image + badge + certs
      ========================================================================== */
   .about-section {
       background-color: var(--secondary);
       padding: var(--spacing-12) 0;
       overflow: hidden;
   }

   @media (min-width: 1024px) {
       .about-section {
           padding: var(--spacing-20) 0;
       }
   }

   .about-grid {
       display: grid;
       gap: var(--spacing-8);
       align-items: center;
   }

   @media (min-width: 900px) {
       .about-grid {
           grid-template-columns: 1fr 1.2fr;
           gap: var(--spacing-12);
       }
   }

   .about-image-wrap {
       position: relative;
   }

   .about-badge {
       position: absolute;
       top: -20px;
       left: -10px;
       width: 120px;
       height: 120px;
       background-color: var(--primary);
       border-radius: 50%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       z-index: 20;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }

   @media (min-width: 768px) {
       .about-badge {
           width: 140px;
           height: 140px;
           top: -20px;
           left: -20px;
       }
   }

   .about-badge-value {
       font-size: var(--font-size-3xl);
       font-weight: 800;
       color: white;
       line-height: 1;
   }

   @media (min-width: 768px) {
       .about-badge-value {
           font-size: var(--font-size-4xl);
       }
   }

   .about-badge-label {
       font-size: var(--font-size-xs);
       color: rgba(255, 255, 255, 0.9);
       text-align: center;
       line-height: 1.2;
       margin-top: var(--spacing-1);
   }

   .about-image {
       border-radius: var(--radius);
       overflow: hidden;
       position: relative;
   }

   .about-image img {
       width: 100%;
       height: 400px;
       object-fit: cover;
       border-radius: var(--radius);
   }

   @media (min-width: 768px) {
       .about-image img {
           height: 500px;
       }
   }

   .about-content {
       color: var(--secondary-foreground);
   }

   .about-subtitle {
       display: block;
       font-size: var(--font-size-sm);
       font-weight: 600;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: var(--primary);
       margin-bottom: var(--spacing-4);
   }

   .about-content h2 {
       font-size: var(--font-size-3xl);
       font-weight: 800;
       margin-bottom: var(--spacing-6);
       line-height: 1.2;
   }

   @media (min-width: 768px) {
       .about-content h2 {
           font-size: var(--font-size-4xl);
       }
   }

   .about-content > p {
       color: var(--muted-foreground);
       line-height: 1.8;
       margin-bottom: var(--spacing-8);
       font-size: var(--font-size-base);
   }

   .about-certs {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-6);
   }

   .about-cert-item {
       display: flex;
       align-items: flex-start;
       gap: var(--spacing-4);
   }

   .about-cert-icon {
       flex-shrink: 0;
       color: var(--primary);
       padding: var(--spacing-2);
   }

   .about-cert-label {
       display: block;
       font-size: var(--font-size-xs);
       font-weight: 600;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--primary);
       margin-bottom: var(--spacing-1);
   }

   .about-cert-item strong {
       display: block;
       font-size: var(--font-size-base);
       font-weight: 700;
       color: var(--foreground);
   }

   /* ==========================================================================
      Project/Video Section - Dark bg with video and info cards
      ========================================================================== */
   .project-section {
       background-color: var(--background);
       padding: var(--spacing-12) 0;
       position: relative;
       overflow: hidden;
   }

   .project-section::before,
   .project-section::after {
       content: '';
       position: absolute;
       width: 200px;
       height: 200px;
       background-color: var(--primary);
       opacity: 0.08;
   }

   .project-section::before {
       top: -50px;
       left: -50px;
       transform: rotate(45deg);
   }

   .project-section::after {
       bottom: -50px;
       right: -50px;
       transform: rotate(45deg);
   }

   @media (min-width: 1024px) {
       .project-section {
           padding: var(--spacing-16) 0;
       }
   }

   .project-section-title {
       font-size: var(--font-size-2xl);
       font-weight: 800;
       text-align: center;
       margin-bottom: var(--spacing-8);
   }

   @media (min-width: 768px) {
       .project-section-title {
           font-size: var(--font-size-3xl);
       }
   }

   .project-reels-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--spacing-6);
   }

   @media (min-width: 768px) {
       .project-reels-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: var(--spacing-8);
       }
   }

   .project-reel-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-4);
   }

   .project-reel-embed {
       position: relative;
       width: 100%;
       max-width: 320px;
       margin: 0 auto;
       border-radius: var(--radius);
       overflow: hidden;
       aspect-ratio: 9 / 16;
       background: var(--card);
       border: 1px solid var(--border);
   }

   .project-reel-embed iframe {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border: 0;
   }

   .project-reel-placeholder {
       width: 100%;
       max-width: 320px;
       aspect-ratio: 9 / 16;
       margin: 0 auto;
       border-radius: var(--radius);
       border: 2px dashed var(--border);
       background: var(--muted);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--muted-foreground);
       font-size: var(--font-size-sm);
   }

   .project-reel-card {
       width: 100%;
       text-align: center;
   }

   .project-card {
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: var(--spacing-6);
       transition: all 0.3s ease;
   }

   .project-card:hover {
       border-color: var(--primary);
       transform: translateY(-2px);
   }

   .project-card h4 {
       font-size: var(--font-size-lg);
       font-weight: 700;
       margin-bottom: var(--spacing-3);
   }

   .project-card p {
       color: var(--muted-foreground);
       font-size: var(--font-size-sm);
       line-height: 1.7;
       margin: 0;
   }

   /* ==========================================================================
      Partnership Logos Section - Dark bg with logo grid
      ========================================================================== */
   .partnerships-section {
       background-color: var(--secondary);
       padding: var(--spacing-10) 0;
   }

   @media (min-width: 1024px) {
       .partnerships-section {
           padding: var(--spacing-12) 0;
       }
   }

   .partnerships-title {
       text-align: center;
       font-size: var(--font-size-2xl);
       font-weight: 800;
       margin-bottom: var(--spacing-8);
   }

   .partnerships-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--spacing-4);
   }

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

   .partner-logo-card {
       background-color: var(--card);
       border-radius: var(--radius);
       padding: var(--spacing-4) var(--spacing-6);
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 60px;
       transition: all 0.3s ease;
       border: 1px solid var(--border);
   }

   .partner-logo-card:hover {
       border-color: var(--primary);
       box-shadow: var(--card-shadow);
   }

   .partner-logo-card span {
       color: var(--foreground);
       font-size: var(--font-size-base);
       font-weight: 600;
       letter-spacing: 0.02em;
   }

   /* ==========================================================================
      FAQ Section - Dark bg with two-column accordion
      ========================================================================== */
   .faq-section {
       background-color: var(--background);
       padding: var(--spacing-12) 0;
   }

   @media (min-width: 1024px) {
       .faq-section {
           padding: var(--spacing-16) 0;
       }
   }

   .faq-header {
       text-align: center;
       margin-bottom: var(--spacing-10);
   }

   .faq-subtitle {
       display: block;
       font-size: var(--font-size-sm);
       font-weight: 600;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: var(--primary);
       margin-bottom: var(--spacing-3);
   }

   .faq-header h2 {
       font-size: var(--font-size-3xl);
       font-weight: 800;
   }

   @media (min-width: 768px) {
       .faq-header h2 {
           font-size: var(--font-size-4xl);
       }
   }

   .faq-columns {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--spacing-4);
   }

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

   .faq-column {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-3);
   }

   .faq-item {
       border-radius: var(--radius);
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .faq-question {
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
       padding: var(--spacing-4) var(--spacing-5);
       background-color: var(--secondary);
       border: none;
       cursor: pointer;
       text-align: left;
       color: var(--foreground);
       font-family: var(--font-sans);
       font-size: var(--font-size-sm);
       font-weight: 500;
       transition: all 0.3s ease;
       gap: var(--spacing-3);
   }

   .faq-question:hover {
       background-color: hsl(0, 0%, 90%);
   }

   .faq-question svg {
       flex-shrink: 0;
       transition: transform 0.3s ease;
       color: var(--muted-foreground);
   }

   .faq-item.is-open .faq-question {
       background-color: var(--primary);
       color: white;
   }

   .faq-item.is-open .faq-question svg {
       transform: rotate(180deg);
       color: white;
   }

   .faq-answer {
       background-color: var(--accent);
       padding: var(--spacing-4) var(--spacing-5);
   }

   .faq-answer p {
       color: var(--muted-foreground);
       font-size: var(--font-size-sm);
       line-height: 1.7;
       margin: 0;
   }

   /* ==========================================================================
      CTA Stats Section - Primary bg with stats
      ========================================================================== */
   .cta-stats-section {
       background-color: var(--primary);
       padding: var(--spacing-12) 0;
       position: relative;
       overflow: hidden;
   }

   .cta-stats-section::before {
       content: '';
       position: absolute;
       top: -100px;
       right: -100px;
       width: 400px;
       height: 400px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.08);
   }

   .cta-stats-section::after {
       content: '';
       position: absolute;
       bottom: -80px;
       left: -80px;
       width: 300px;
       height: 300px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.05);
   }

   @media (min-width: 1024px) {
       .cta-stats-section {
           padding: var(--spacing-16) 0;
       }
   }

   .cta-stats-content {
       position: relative;
       z-index: 10;
       text-align: center;
       margin-bottom: var(--spacing-10);
   }

   .cta-stats-content h2 {
       color: white;
       font-size: var(--font-size-3xl);
       font-weight: 800;
       margin-bottom: var(--spacing-6);
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
   }

   @media (min-width: 768px) {
       .cta-stats-content h2 {
           font-size: var(--font-size-4xl);
       }
   }

   .btn-cta {
       background-color: white;
       color: var(--primary);
       border-color: white;
       padding: var(--spacing-4) var(--spacing-8);
       font-size: var(--font-size-base);
       font-weight: 600;
       border-radius: 0;
   }

   .btn-cta:hover {
       background-color: hsl(0, 0%, 95%);
       color: var(--primary);
   }

   .cta-stats-grid {
       position: relative;
       z-index: 10;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--spacing-6);
       max-width: 700px;
       margin: 0 auto;
       padding-top: var(--spacing-8);
       border-top: 1px solid rgba(255, 255, 255, 0.2);
   }

   .cta-stat {
       text-align: center;
   }

   .cta-stat-value {
       display: block;
       font-size: var(--font-size-4xl);
       font-weight: 800;
       color: white;
       line-height: 1;
       margin-bottom: var(--spacing-2);
   }

   @media (min-width: 768px) {
       .cta-stat-value {
           font-size: var(--font-size-5xl);
       }
   }

   .cta-stat-label {
       display: block;
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.8);
       font-weight: 500;
   }

   /* ==========================================================================
      Footer Styles
      ========================================================================== */
   .site-footer {
       background-color: hsl(210, 11%, 10%);
       color: rgba(255, 255, 255, 0.85);
       overflow-x: hidden;
   }
   
   .footer-main {
       padding: var(--spacing-12) 0;
       overflow: hidden;
   }
   
   .footer-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: var(--spacing-8);
   }
   
   @media (min-width: 768px) {
       .footer-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (min-width: 1100px) {
       .footer-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   /* Footer Company Info */
   .footer-company img {
       height: 64px;
       width: auto;
       margin-bottom: var(--spacing-4);
   }
   
   .footer-company p {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.6);
       margin-bottom: var(--spacing-4);
   }
   
   .footer-social {
       display: flex;
       gap: var(--spacing-3);
   }
   
   .footer-social a {
       padding: var(--spacing-2);
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       transition: all 0.2s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       color: rgba(255, 255, 255, 0.7);
   }
   
   .footer-social a:hover {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   /* Footer Links */
   .footer-links h4 {
       font-size: var(--font-size-base);
       font-weight: 700;
       margin-bottom: var(--spacing-4);
       color: white;
   }
   
   .footer-links ul {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-2);
   }
   
   .footer-links a {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.6);
       transition: color 0.2s ease;
   }
   
   .footer-links a:hover {
       color: var(--primary);
   }
   
   /* Footer Contact */
   .footer-contact h4 {
       font-size: var(--font-size-base);
       font-weight: 700;
       margin-bottom: var(--spacing-4);
       color: white;
   }
   
   .footer-contact ul {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-3);
   }
   
   .footer-contact li {
       display: flex;
       align-items: flex-start;
       gap: var(--spacing-3);
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.6);
   }
   
   .footer-contact svg {
       color: var(--primary);
       flex-shrink: 0;
       margin-top: 2px;
   }
   
   .footer-contact a {
       color: rgba(255, 255, 255, 0.6);
   }
   
   .footer-contact a:hover {
       color: var(--primary);
   }
   
   /* Footer Trust */
   .footer-trust {
       margin-top: var(--spacing-12);
       padding-top: var(--spacing-8);
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       overflow: hidden;
   }
   
   .footer-trust-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-6);
       width: 100%;
   }
   
   @media (min-width: 1024px) {
       .footer-trust-content {
           flex-direction: row;
           justify-content: space-between;
       }
   }
   
   /* Google Reviews */
   .google-reviews {
       display: flex;
       align-items: center;
       gap: var(--spacing-3);
       background-color: rgba(255, 255, 255, 0.05);
       padding: var(--spacing-3) var(--spacing-4);
       border-radius: 8px;
       flex-shrink: 0;
   }
   
   .google-reviews-stars {
       display: flex;
       gap: 2px;
       flex-shrink: 0;
   }
   
   .google-reviews-stars svg {
       color: #facc15;
       fill: #facc15;
       width: 16px;
       height: 16px;
   }
   
   .google-reviews-text {
       font-size: var(--font-size-sm);
       white-space: nowrap;
       color: rgba(255, 255, 255, 0.7);
   }
   
   .google-reviews-text strong {
       color: white;
   }
   
   /* Payment Methods */
   .payment-methods {
       display: flex;
       align-items: center;
       gap: var(--spacing-4);
       flex-wrap: wrap;
       justify-content: center;
   }
   
   .payment-methods > span {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.7);
       white-space: nowrap;
   }
   
   .payment-icons {
       display: flex;
       gap: var(--spacing-3);
       flex-wrap: wrap;
       justify-content: center;
   }
   
   .payment-icon {
       background-color: rgba(255, 255, 255, 0.1);
       padding: var(--spacing-1) var(--spacing-2);
       border-radius: 4px;
       font-size: var(--font-size-xs);
       font-weight: 700;
       white-space: nowrap;
       color: rgba(255, 255, 255, 0.8);
   }
   
   .payment-icon.visa { color: hsl(220, 80%, 70%); }
   .payment-icon.mastercard { color: hsl(0, 70%, 70%); }
   .payment-icon.paypal { color: hsl(210, 70%, 70%); }
   .payment-icon.bank { color: hsl(140, 60%, 60%); }
   
   /* Business Hours */
   .business-hours {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.7);
       text-align: center;
       word-wrap: break-word;
   }
   
   .business-hours strong {
       font-weight: 600;
       color: white;
       display: block;
   }
   
   @media (min-width: 768px) {
       .business-hours strong {
           display: inline;
       }
   }
   
   /* Footer Bottom */
   .footer-legal-details {
       text-align: center;
       margin-bottom: var(--spacing-6);
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.55);
       line-height: 1.65;
   }

   .footer-legal-details p {
       margin: 0 0 var(--spacing-2);
   }

   .footer-legal-details p:last-child {
       margin-bottom: 0;
   }

   .footer-legal-details a {
       color: rgba(255, 255, 255, 0.7);
   }

   .footer-legal-details a:hover {
       color: var(--primary);
   }

   .footer-bottom {
       margin-top: var(--spacing-8);
       padding-top: var(--spacing-6);
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .footer-bottom-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-4);
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.5);
   }
   
   @media (min-width: 768px) {
       .footer-bottom-content {
           flex-direction: row;
           justify-content: space-between;
       }
   }
   
   .footer-legal-links {
       display: flex;
       gap: var(--spacing-6);
   }
   
   .footer-legal-links a {
       color: rgba(255, 255, 255, 0.5);
   }
   
   .footer-legal-links a:hover {
       color: var(--primary);
   }
   
   .site-credit {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.5);
       margin-top: var(--spacing-2);
   }
   
   .site-credit a {
       color: var(--primary);
       font-weight: 500;
       text-decoration: none;
       transition: color 0.2s ease;
   }
   
   .site-credit a:hover {
       color: hsl(155, 82%, 18%);
       text-decoration: underline;
   }
   
   /* ==========================================================================
      WooCommerce Overrides
      ========================================================================== */
   
   /* WooCommerce Button Styles */
   .woocommerce a.button,
   .woocommerce button.button,
   .woocommerce input.button,
   .woocommerce #respond input#submit {
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-radius: var(--radius);
       font-family: var(--font-sans);
       font-weight: 600;
       padding: var(--spacing-3) var(--spacing-6);
       border: none;
       transition: background-color 0.2s ease;
   }
   
   .woocommerce a.button:hover,
   .woocommerce button.button:hover,
   .woocommerce input.button:hover,
   .woocommerce #respond input#submit:hover {
       background-color: hsl(155, 82%, 20%);
       color: var(--primary-foreground);
   }
   
   .woocommerce a.button.alt,
   .woocommerce button.button.alt,
   .woocommerce input.button.alt {
       background-color: var(--primary);
       display: flex;
   }
   
   .woocommerce a.button.alt:hover,
   .woocommerce button.button.alt:hover,
   .woocommerce input.button.alt:hover {
       background-color: hsl(155, 82%, 20%);
   }
   
   /* Shop toolbar: result count + ordering */
   .woocommerce .woocommerce-result-count {
       font-size: var(--font-size-sm);
       color: var(--muted-foreground);
       margin: 0;
       padding: var(--spacing-2) 0;
   }
   
   .woocommerce .woocommerce-ordering {
       margin: 0;
       margin-left: auto;
   }
   
   .woocommerce .woocommerce-ordering select.orderby {
       font-family: var(--font-sans);
       font-size: var(--font-size-sm);
       font-weight: 500;
       color: var(--foreground);
       background-color: var(--card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-4);
       min-height: 2.75rem;
       min-width: 12rem;
       cursor: pointer;
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right var(--spacing-3) center;
       padding-right: var(--spacing-10);
       transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   
   .woocommerce .woocommerce-ordering select.orderby:hover {
       border-color: var(--primary);
   }
   
   .woocommerce .woocommerce-ordering select.orderby:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px hsl(155, 82%, 30%, 0.2);
   }
   
   @media (min-width: 640px) {
       .woocommerce .woocommerce-ordering select.orderby {
           min-width: 14rem;
       }
   }
   
   /* ==========================================================================
      WooCommerce Pagination
      ========================================================================== */
   .woocommerce nav.woocommerce-pagination {
       margin-top: var(--spacing-8);
       text-align: center;
   }
   
   .woocommerce nav.woocommerce-pagination ul.page-numbers {
       display: inline-flex;
       align-items: center;
       gap: var(--spacing-1);
       list-style: none;
       padding: 0;
       margin: 0;
       border: none;
   }
   
   .woocommerce nav.woocommerce-pagination ul.page-numbers li {
       margin: 0;
       padding: 0;
       border: none;
   }
   
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a,
   .woocommerce nav.woocommerce-pagination ul.page-numbers li span {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 40px;
       height: 40px;
       padding: var(--spacing-2) var(--spacing-3);
       font-size: var(--font-size-sm);
       font-weight: 500;
       text-decoration: none;
       border-radius: var(--radius);
       transition: all 0.2s ease;
       border: 1px solid var(--border);
       background-color: var(--card);
       color: var(--foreground);
   }
   
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover {
       border-color: var(--primary);
       color: var(--primary);
       background-color: var(--accent);
   }
   
   /* Active/Current Page - Primary color with white text for WCAG compliance */
   .woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-color: var(--primary);
       font-weight: 600;
   }
   
   /* Dots/Ellipsis */
   .woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
       background-color: transparent;
       border-color: transparent;
       color: var(--muted-foreground);
       min-width: auto;
       padding: var(--spacing-1);
   }
   
   /* Next/Prev arrows */
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a.next,
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev {
       font-size: var(--font-size-base);
   }
   
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a.next:hover,
   .woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev:hover {
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-color: var(--primary);
   }
   
   /* ==========================================================================
      Shop Subcategories Grid
      ========================================================================== */
   .shop-subcategories-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--spacing-4);
       margin-bottom: var(--spacing-6);
       padding: var(--spacing-4);
       background-color: var(--card);
       border-radius: var(--radius);
       box-shadow: var(--card-shadow);
   }
   
   @media (min-width: 640px) {
       .shop-subcategories-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   @media (min-width: 900px) {
       .shop-subcategories-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   .subcategory-card {
       display: flex;
       align-items: center;
       gap: var(--spacing-3);
       padding: var(--spacing-3);
       background-color: var(--background);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       text-decoration: none;
       color: var(--foreground);
       transition: all 0.2s ease;
   }
   
   .subcategory-card:hover {
       border-color: var(--primary);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
       transform: translateY(-2px);
   }
   
   .subcategory-card-image {
       width: 48px;
       height: 48px;
       flex-shrink: 0;
       border-radius: calc(var(--radius) - 4px);
       overflow: hidden;
       background-color: var(--secondary);
   }
   
   .subcategory-card-image img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }
   
   .subcategory-card-name {
       font-size: var(--font-size-sm);
       font-weight: 500;
       line-height: 1.3;
       color: var(--foreground);
   }
   
   /* Larger images on desktop */
   @media (min-width: 768px) {
       .subcategory-card-image {
           width: 56px;
           height: 56px;
       }
       
       .subcategory-card-name {
           font-size: var(--font-size-base);
       }
   }

   /* WooCommerce Product Grid */
   .woocommerce ul.products {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: var(--spacing-6);
       list-style: none;
       padding-top: var(--spacing-6);
       padding-bottom: var(--spacing-6);
       margin: 0;
   }
   
   /* Remove WooCommerce's default float-based layout pseudo-elements */
   .woocommerce ul.products::before,
   .woocommerce ul.products::after {
       display: none !important;
       content: none !important;
   }
   
   @media (min-width: 640px) {
       .woocommerce ul.products {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (min-width: 900px) {
       .woocommerce ul.products {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   
   @media (min-width: 1200px) {
       .woocommerce ul.products {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   .woocommerce ul.products li.product {
       width: 100% !important;
       margin: 0 !important;
       background-color: var(--card);
       border-radius: var(--radius);
       overflow: hidden;
       border: 1px solid var(--border);
       box-shadow: var(--card-shadow);
       transition: all 0.3s ease;
   }
   
   .woocommerce ul.products li.product:hover {
       box-shadow: var(--card-shadow-hover);
       transform: translateY(-4px);
       border-color: var(--primary);
   }
   
   .woocommerce ul.products li.product img {
       margin-bottom: 0;
   }
   
   .woocommerce ul.products li.product .woocommerce-loop-product__title {
       font-family: var(--font-sans);
       font-size: var(--font-size-base);
       font-weight: 600;
       padding: var(--spacing-4);
       padding-bottom: var(--spacing-2);
       color: var(--card-foreground);
   }
   
   .woocommerce ul.products li.product .price {
       color: var(--primary);
       font-weight: 700;
       font-size: var(--font-size-xl);
       padding: 0 var(--spacing-4) var(--spacing-4);
   }
   
   .woocommerce ul.products li.product .price del {
       color: var(--muted-foreground);
       font-size: var(--font-size-sm);
   }
   
   .woocommerce ul.products li.product .button {
       margin: 0 var(--spacing-4) var(--spacing-4);
   }
   
   /* Sale Badge */
   .woocommerce span.onsale {
       background-color: var(--primary);
       color: var(--primary-foreground);
       font-family: var(--font-sans);
       font-weight: 600;
       border-radius: var(--radius);
       padding: var(--spacing-1) var(--spacing-3);
       min-height: auto;
       min-width: auto;
       line-height: 1.5;
   }
   
   /* Star Rating */
   .woocommerce .star-rating {
       color: #facc15;
   }
   
   /* WooCommerce Messages */
   .woocommerce-message,
   .woocommerce-info,
   .woocommerce-error {
       border-radius: var(--radius);
       font-family: var(--font-sans);
   }
   
   .woocommerce-message {
       border-top-color: var(--primary);
   }
   
   .woocommerce-message::before {
       color: var(--primary);
   }
   
   /* Cart Styles */
   .woocommerce-cart-form {
       font-family: var(--font-sans);
   }
   
   .woocommerce table.cart {
       border-radius: var(--radius);
       overflow: hidden;
   }
   
   .woocommerce table.cart th {
       background-color: var(--secondary);
       font-weight: 600;
   }
   
   /* Checkout Styles */
   .woocommerce-checkout {
       font-family: var(--font-sans);
   }
   
   .woocommerce form .form-row label {
       font-weight: 500;
   }
   
   .woocommerce form .form-row input.input-text,
   .woocommerce form .form-row textarea,
   .woocommerce form .form-row select {
       border: 2px solid var(--border);
       border-radius: var(--radius);
       padding: var(--spacing-3);
       font-family: var(--font-sans);
   }
   
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--primary);
    outline: none;
}

/* ==========================================================================
   Single Product Page Styles
   ========================================================================== */

/* Breadcrumb */
.product-breadcrumb {
    font-family: var(--font-sans);
}

.product-breadcrumb .breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
}

.product-breadcrumb .breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: var(--spacing-2);
    color: var(--muted);
}

.product-breadcrumb .breadcrumb-item a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary);
}

.product-breadcrumb .breadcrumb-item:last-child {
    color: var(--foreground);
    font-weight: 500;
}

/* Single Product Layout (uses WooCommerce default .product grid) */
body.single-product div.product {
    font-family: var(--font-sans);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    padding-top: 2rem;
}

@media (min-width: 900px) {
    body.single-product div.product {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-8);
    }
}

@media (min-width: 1200px) {
    body.single-product div.product {
        gap: var(--spacing-12);
    }
}

/* Override WooCommerce & gallery plugin float-based layout — we use CSS Grid */
body.single-product div.product div.summary,
body.single-product div.product .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    clear: none !important;
    overflow: visible !important;
}

body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .wcgs-woocommerce-product-gallery,
body.single-product div.product #wpgs-gallery {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Tabs, related products, upsells span full width below the 2-col grid */
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > .related.products,
body.single-product div.product > .up-sells {
    grid-column: 1 / -1;
}

/* Product Gallery */
body.single-product .woocommerce-product-gallery {
    position: relative;
    margin-bottom: 0;
}

body.single-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: 0;
    list-style: none;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover,
body.single-product .woocommerce-product-gallery .flex-control-thumbs li.flex-active {
    border-color: var(--primary);
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Summary */
body.single-product div.product > .summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Brand Label */
.product-brand-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Product Title */
body.single-product .summary .product_title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    body.single-product .summary .product_title {
        font-size: 2rem;
    }
}

/* Product Price Display */
.product-price-display {
    margin: var(--spacing-2) 0;
}

.product-price-display .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.product-price-display .price del {
    font-size: var(--font-size-lg);
    color: var(--muted-foreground);
    font-weight: 400;
}

.product-price-display .price ins {
    text-decoration: none;
}

/* Product Availability */
.product-availability {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.product-availability.in-stock {
    color: var(--primary);
}

.product-availability.in-stock svg {
    stroke: var(--primary);
}

.product-availability.out-of-stock {
    color: #ef4444;
}

.product-availability.out-of-stock svg {
    stroke: #ef4444;
}

/* Short Description */
.product-short-description {
    color: var(--muted-foreground);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.product-short-description p {
    margin: 0;
}

/* Add to Cart Section */
.product-add-to-cart-section {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-top: var(--spacing-4);
}

.product-add-to-cart-section .cart {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin: 0;
}

/* Quantity Selector */
.product-add-to-cart-section .quantity {
    display: flex;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.product-add-to-cart-section .quantity input.qty {
    width: 50px;
    height: 44px;
    text-align: center;
    border: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: var(--font-sans);
    -moz-appearance: textfield;
}

.product-add-to-cart-section .quantity input.qty::-webkit-outer-spin-button,
.product-add-to-cart-section .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-add-to-cart-section .quantity .qty-btn {
    width: 36px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--muted-foreground);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.product-add-to-cart-section .quantity .qty-btn:hover {
    background-color: var(--secondary);
    color: var(--foreground);
}

/* Add to Cart Button */
.product-add-to-cart-section .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 48px;
    min-width: 200px;
}

.product-add-to-cart-section .single_add_to_cart_button:hover {
    background-color: hsl(155, 82%, 20%);
}

.product-add-to-cart-section .single_add_to_cart_button::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Action Buttons (Share) */
.product-action-buttons {
    display: flex;
    gap: var(--spacing-2);
}

.product-action-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-action-btn svg {
    stroke: var(--muted-foreground);
    transition: stroke 0.2s ease;
}

.product-action-btn:hover {
    border-color: var(--primary);
}

.product-action-btn:hover svg {
    stroke: var(--primary);
}

.product-action-btn.contact-btn:hover svg {
    stroke: var(--primary);
}

/* Product Features Bar */
.product-features-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--secondary);
    border-radius: var(--radius);
    margin-top: var(--spacing-4);
}

@media (max-width: 640px) {
    .product-features-bar {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
}

.product-feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.product-feature-item .feature-icon {
    flex-shrink: 0;
    color: var(--primary);
}

.product-feature-item .feature-icon svg {
    stroke: var(--primary);
}

.product-feature-item .feature-text {
    display: flex;
    flex-direction: column;
}

.product-feature-item .feature-text strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--foreground);
}

.product-feature-item .feature-text span {
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
}

/* Product Characteristics */
.product-characteristics {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border);
}

.characteristics-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 var(--spacing-4) 0;
}

.characteristics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.characteristic-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
}

.characteristic-item svg {
    flex-shrink: 0;
    stroke: var(--primary);
}

/* Product Meta Info */
.product-meta-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
}

.product-meta-info a {
    color: var(--primary);
    text-decoration: none;
}

.product-meta-info a:hover {
    text-decoration: underline;
}

/* Single Product Tabs */
body.single-product div.product > .woocommerce-tabs {
    margin-top: var(--spacing-12);
}

body.single-product .woocommerce-tabs {
    font-family: var(--font-sans);
}

body.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: var(--spacing-1);
    padding: 0;
    margin: 0 0 var(--spacing-6) 0;
    list-style: none;
    border-bottom: 2px solid var(--border);
}

body.single-product .woocommerce-tabs ul.tabs li {
    padding: 0;
    margin: 0 0 -2px 0;
    background: transparent;
    border: none;
}

body.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--muted-foreground);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--foreground);
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

body.single-product .woocommerce-tabs .panel {
    padding: var(--spacing-4) 0;
}

body.single-product .woocommerce-tabs .panel h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

/* Related Products */
body.single-product div.product .related.products {
    margin-top: var(--spacing-12);
}

body.single-product div.product .related.products > h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-6);
}

/* Cart Page Quantity Buttons */
.woocommerce table.cart .quantity,
.woocommerce-cart .quantity {
    display: flex;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    width: fit-content;
}

.woocommerce table.cart .quantity input.qty,
.woocommerce-cart .quantity input.qty {
    width: 50px;
    height: 40px;
    text-align: center;
    border: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: var(--font-sans);
    -moz-appearance: textfield;
}

.woocommerce table.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce table.cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce table.cart .quantity .qty-btn,
.woocommerce-cart .quantity .qty-btn {
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--muted-foreground);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.woocommerce table.cart .quantity .qty-btn:hover,
.woocommerce-cart .quantity .qty-btn:hover {
    background-color: var(--secondary);
    color: var(--foreground);
}

/* Hide default WooCommerce quantity label */
.product-add-to-cart-section .quantity .screen-reader-text,
.woocommerce table.cart .quantity .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
   
   /* ==========================================================================
      Utility Classes
      ========================================================================== */
   
   /* Display */
   .hidden { display: none; }
   .block { display: block; }
   .inline-block { display: inline-block; }
   .inline-flex { display: inline-flex; }
   
   @media (min-width: 640px) {
       .sm\:hidden { display: none !important; }
       .sm\:block { display: block !important; }
       .sm\:flex { display: flex !important; }
       .sm\:inline { display: inline !important; }
   }
   
   @media (min-width: 768px) {
       .md\:hidden { display: none !important; }
       .md\:block { display: block !important; }
       .md\:flex { display: flex !important; }
   }
   
   @media (min-width: 1024px) {
       .lg\:hidden { display: none !important; }
       .lg\:block { display: block !important; }
       .lg\:flex { display: flex !important; }
   }
   
   /* Text Colors */
   .text-primary { color: var(--primary); }
   .text-muted { color: var(--muted-foreground); }
   .text-white { color: white; }
   
   /* Background Colors */
   .bg-primary { background-color: var(--primary); }
   .bg-secondary { background-color: var(--secondary); }
   .bg-muted { background-color: var(--muted); }
   .bg-card { background-color: var(--card); }
   .bg-accent { background-color: var(--accent); }
   
   /* Border Radius */
   .rounded { border-radius: var(--radius); }
   .rounded-full { border-radius: 9999px; }
   .rounded-xl { border-radius: 0.75rem; }
   .rounded-2xl { border-radius: 1rem; }
   
   /* Spacing */
   .mt-4 { margin-top: var(--spacing-4); }
   .mb-4 { margin-bottom: var(--spacing-4); }
   .py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
   .py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
   .py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
   .py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
   
   /* Text Alignment */
   .text-center { text-align: center; }
   .text-left { text-align: left; }
   .text-right { text-align: right; }
   
   /* Width */
   .w-full { width: 100%; }
   
   /* Screen Reader Only */
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border-width: 0;
   }
   
   /* ==========================================================================
      Animations
      ========================================================================== */
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @keyframes scaleIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   
   @keyframes slideInRight {
       from {
           opacity: 0;
           transform: translateX(20px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   .animate-fade-in {
       animation: fadeIn 0.5s ease forwards;
   }
   
   .animate-scale-in {
       animation: scaleIn 0.4s ease forwards;
   }
   
.animate-slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

/* ==========================================================================
   About Page Styles
   ========================================================================== */

.about-page {
    background-color: var(--color-bg);
}

/* About Hero */
.about-hero {
    background-color: var(--color-primary);
    padding: 4rem 0 6rem;
    text-align: center;
}

.about-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.about-hero p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .about-hero {
        padding: 6rem 0 8rem;
    }
    
    .about-hero h1 {
        font-size: 3rem;
    }
    
    .about-hero p {
        font-size: 1.25rem;
    }
}

/* About Story Section */
.about-story {
    padding: 4rem 0;
}

.story-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .about-story {
        padding: 5rem 0;
    }
    
    .story-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.story-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .story-content h2 {
        font-size: 1.875rem;
    }
}

.story-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.story-text p {
    color: var(--color-text-muted);
    line-height: 1.7;
}

.story-stats {
    background-color: var(--color-bg-secondary);
    border-radius: 1rem;
    padding: 2rem;
}

@media (min-width: 768px) {
    .story-stats {
        padding: 3rem;
    }
}

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

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-icon {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.stat-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-text);
    display: block;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* About Values Section */
.about-values {
    padding: 4rem 0;
    background-color: var(--color-bg-secondary);
}

@media (min-width: 768px) {
    .about-values {
        padding: 5rem 0;
    }
}

.about-values h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .about-values h2 {
        font-size: 1.875rem;
    }
}

.values-grid {
    display: grid;
    gap: 2rem;
}

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

.value-card {
    background-color: var(--color-bg);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.value-icon {
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: inline-block;
}

.value-icon svg {
    width: 3rem;
    height: 3rem;
}

.value-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.value-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* About Timeline Section */
.about-timeline {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .about-timeline {
        padding: 5rem 0;
    }
}

.about-timeline h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .about-timeline h2 {
        font-size: 1.875rem;
    }
}

.timeline {
    max-width: 48rem;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-year {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.timeline-line {
    width: 2px;
    flex: 1;
    background-color: var(--color-border);
    margin-top: 0.5rem;
}

.timeline-content {
    padding-top: 0.75rem;
}

.timeline-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.timeline-content p {
    color: var(--color-text-muted);
}

/* About Team Section */
.about-team {
    padding: 4rem 0;
    background-color: var(--color-bg-secondary);
}

@media (min-width: 768px) {
    .about-team {
        padding: 5rem 0;
    }
}

.about-team h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .about-team h2 {
        font-size: 1.875rem;
    }
}

.team-subtitle {
    color: var(--color-text-muted);
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem;
}

.team-grid {
    display: grid;
    gap: 1.5rem;
}

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

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

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

.team-card {
    background-color: var(--color-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.team-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: rgba(22, 163, 74, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--color-primary);
}

.team-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.team-card p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */

.contact-page {
    background-color: var(--color-bg);
}

/* Contact Hero */
.contact-hero {
    background-color: var(--color-primary);
    padding: 4rem 0 6rem;
    text-align: center;
}

.contact-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.contact-hero p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .contact-hero {
        padding: 6rem 0 8rem;
    }
    
    .contact-hero h1 {
        font-size: 3rem;
    }
    
    .contact-hero p {
        font-size: 1.25rem;
    }
}

/* Contact Main Section */
.contact-main {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .contact-main {
        padding: 5rem 0;
    }
}

.contact-grid {
    display: grid;
    gap: 3rem;
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1200px) {
    .contact-grid {
        gap: 3rem;
    }
}

/* Contact Form */
.contact-form-wrapper h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form-wrapper h2 {
        font-size: 1.875rem;
    }
}

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

.form-row {
    display: grid;
    gap: 1rem;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.875rem;
}

.form-group input,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-muted);
}

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

.contact-form .btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form Success/Error Messages */
.form-success,
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.form-success {
    background-color: rgba(22, 163, 74, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.form-success svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.form-success strong {
    display: block;
    margin-bottom: 0.25rem;
}

.form-success p {
    font-size: 0.875rem;
    margin: 0;
}

.form-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.form-error svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.form-error strong {
    display: block;
    margin-bottom: 0.25rem;
}

.form-error p {
    font-size: 0.875rem;
    margin: 0;
}

/* Contact Info */
.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-details h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contact-details h2 {
        font-size: 1.875rem;
    }
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(22, 163, 74, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text strong {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.contact-text a,
.contact-text span {
    color: var(--color-text-muted);
}

.contact-text a:hover {
    color: var(--color-primary);
}

/* Business Hours */
.business-hours {
    background-color: var(--color-bg-secondary);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.hours-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.hours-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
}

.hours-list .hours {
    font-weight: 500;
    color: var(--color-text);
}

/* Contact Map */
.contact-map h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.map-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.map-wrapper iframe {
    display: block;
}

/* Contact CTA */
.contact-cta {
    padding: 3rem 0;
    background-color: var(--color-bg-secondary);
    text-align: center;
}

.contact-cta h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .contact-cta h2 {
        font-size: 1.5rem;
    }
}

.contact-cta p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.contact-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* ==========================================================================
   Contact Form 7 Styles
   ========================================================================== */

.contact-form-wrapper .wpcf7 {
    width: 100%;
}

.contact-form-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-form-wrapper .wpcf7-form p {
    margin: 0;
}

.contact-form-wrapper .wpcf7-form label {
    display: block;
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.contact-form-wrapper .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form-wrapper .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.contact-form-wrapper .wpcf7-form-control::placeholder {
    color: var(--color-text-muted);
}

.contact-form-wrapper .wpcf7-textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-wrapper .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.contact-form-wrapper .wpcf7-submit:hover {
    background-color: hsl(155, 82%, 20%);
}

.contact-form-wrapper .wpcf7-submit:active {
    transform: scale(0.98);
}

/* CF7 Validation Styles */
.contact-form-wrapper .wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.contact-form-wrapper .wpcf7-not-valid {
    border-color: #ef4444 !important;
}

.contact-form-wrapper .wpcf7-response-output {
    margin: 1rem 0 0 0 !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem;
}

.contact-form-wrapper .wpcf7-mail-sent-ok {
    background-color: rgba(22, 163, 74, 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.contact-form-wrapper .wpcf7-validation-errors,
.contact-form-wrapper .wpcf7-acceptance-missing {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* Form notice when CF7 is not installed */
.form-notice {
    padding: 1rem;
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    color: #92400e;
}

/* Two column layout for name fields */
.contact-form-wrapper .wpcf7-form .form-row-two-col {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .contact-form-wrapper .wpcf7-form .form-row-two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   WooCommerce Cart Page Styles
   ========================================================================== */

/* Cart Page Layout - Using CSS Grid for reliable two-column layout */
.woocommerce:has(.woocommerce-cart-form) {
    display: block !important;
}

@media (min-width: 992px) {
    .woocommerce:has(.woocommerce-cart-form) {
        display: grid !important;
        grid-template-columns: 1fr 320px !important;
        gap: var(--spacing-6) !important;
        align-items: start !important;
    }
    
    .woocommerce:has(.woocommerce-cart-form) > .woocommerce-notices-wrapper {
        grid-column: 1 / -1 !important;
    }
    
    .woocommerce:has(.woocommerce-cart-form) .woocommerce-cart-form {
        grid-column: 1 !important;
        min-width: 0 !important;
    }
    
    .woocommerce:has(.woocommerce-cart-form) .cart-collaterals {
        grid-column: 2 !important;
        width: 100% !important;
    }
}

/* Also support body class if present */
.woocommerce-cart .woocommerce {
    display: block !important;
}

@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        display: grid !important;
        grid-template-columns: 1fr 320px !important;
        gap: var(--spacing-6) !important;
        align-items: start !important;
    }
    
    .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
        grid-column: 1 / -1 !important;
    }
    
    .woocommerce-cart .woocommerce-cart-form {
        grid-column: 1 !important;
        min-width: 0 !important;
    }
    
    .woocommerce-cart .cart-collaterals {
        grid-column: 2 !important;
        width: 100% !important;
    }
}

/* Cart Form Container */
.woocommerce-cart-form {
    background-color: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

@media (min-width: 1024px) {
    .woocommerce-cart-form {
        margin-bottom: 0;
    }
}

/* Cart Table */
.woocommerce-cart-form table.shop_table,
table.shop_table.cart {
    border: none;
    border-radius: 0;
    margin: 0;
    width: 100%;
}

.woocommerce-cart-form table.shop_table.cart,
table.shop_table.cart {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

/* Table Header */
table.shop_table.cart thead {
    background-color: var(--secondary);
}

table.shop_table.cart thead th {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground);
    padding: var(--spacing-4) var(--spacing-3);
    border: none;
    white-space: nowrap;
}

table.shop_table.cart thead th.product-remove,
table.shop_table.cart thead th.product-thumbnail {
    width: 50px;
    padding: var(--spacing-4) var(--spacing-2);
}

table.shop_table.cart thead th.product-name {
    text-align: left;
}

table.shop_table.cart thead th.product-quantity {
    width: 120px;
}

/* Cart Items */
table.shop_table.cart tbody tr.cart_item {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease;
}

table.shop_table.cart tbody tr.cart_item:hover {
    background-color: hsl(0, 0%, 98%);
}

table.shop_table.cart tbody td {
    padding: var(--spacing-3);
    vertical-align: middle;
    border: none;
}

/* Product Remove Button */
table.shop_table.cart td.product-remove {
    text-align: center;
    width: 50px;
}

table.shop_table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: hsl(0, 0%, 95%);
    color: var(--muted-foreground) !important;
    border-radius: 50%;
    font-size: var(--font-size-base);
    font-weight: 400;
    transition: all 0.2s ease;
    text-decoration: none;
}

table.shop_table.cart td.product-remove a.remove:hover {
    background-color: var(--destructive);
    color: var(--destructive-foreground) !important;
}

/* Product Thumbnail */
table.shop_table.cart td.product-thumbnail {
    width: 70px;
    padding: var(--spacing-2);
}

table.shop_table.cart td.product-thumbnail a {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: hsl(0, 0%, 96%);
}

table.shop_table.cart td.product-thumbnail img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Product Name */
table.shop_table.cart td.product-name {
    font-weight: 500;
}

table.shop_table.cart td.product-name a {
    color: var(--foreground);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

table.shop_table.cart td.product-name a:hover {
    color: var(--primary);
}

/* Product Price */
table.shop_table.cart td.product-price,
table.shop_table.cart td.product-subtotal {
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
}

table.shop_table.cart td.product-subtotal {
    color: var(--primary);
    font-size: var(--font-size-lg);
}

/* Product Quantity */
table.shop_table.cart td.product-quantity {
    width: 130px;
}

/* Actions Row (Coupon & Update) */
table.shop_table.cart td.actions {
    padding: var(--spacing-4);
    background-color: hsl(0, 0%, 98%);
    border-top: 1px solid var(--border);
}

table.shop_table.cart td.actions .coupon {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

@media (min-width: 480px) {
    table.shop_table.cart td.actions .coupon {
        flex-direction: row;
        align-items: center;
    }
}

table.shop_table.cart td.actions .coupon input.input-text {
    width: 100%;
    max-width: 200px;
    height: 40px;
    padding: 0 var(--spacing-3);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    transition: border-color 0.2s ease;
}

table.shop_table.cart td.actions .coupon input.input-text:focus {
    outline: none;
    border-color: var(--primary);
}

table.shop_table.cart td.actions .coupon input.input-text::placeholder {
    color: var(--muted-foreground);
}

/* Action Buttons */
table.shop_table.cart td.actions button.button {
    height: 40px;
    padding: 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

table.shop_table.cart td.actions .coupon button.button {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 2px solid var(--border);
    width: 100%;
}

@media (min-width: 480px) {
    table.shop_table.cart td.actions .coupon button.button {
        width: auto;
    }
}

table.shop_table.cart td.actions .coupon button.button:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

table.shop_table.cart td.actions button[name="update_cart"] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 2px solid var(--border);
    display: block;
    width: 100%;
}

@media (min-width: 640px) {
    table.shop_table.cart td.actions button[name="update_cart"] {
        display: inline-block;
        width: auto;
    }
    
    table.shop_table.cart td.actions {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }
    
    table.shop_table.cart td.actions .coupon {
        margin-bottom: 0;
    }
}

table.shop_table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
    background-color: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
}

table.shop_table.cart td.actions button[name="update_cart"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cart Collaterals (Totals) */
.cart-collaterals {
    background-color: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: visible;
    float: none !important;
    clear: none !important;
    min-width: 280px;
}

/* Remove any pseudo-elements that may interfere with layout (WooCommerce clearfix reset) */
.woocommerce::before,
.woocommerce::after,
.woocommerce-cart-form::before,
.woocommerce-cart-form::after,
.cart-collaterals::before,
.cart-collaterals::after,
.cart_totals::before,
.cart_totals::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Reset WooCommerce float-based layout */
.woocommerce-cart-form,
.cart-collaterals,
.cart_totals {
    float: none !important;
}

.cart_totals {
    padding: 0;
    width: 100% !important;
}

.cart_totals > h2 {
    font-size: var(--font-size-base);
    font-weight: 700;
    padding: var(--spacing-4);
    margin: 0;
    background-color: var(--secondary);
    border-bottom: 1px solid var(--border);
}

.cart_totals table.shop_table {
    margin: 0;
    border: none;
    width: 100%;
    table-layout: auto;
}

.cart_totals table.shop_table tbody {
    display: table;
    width: 100%;
}

.cart_totals table.shop_table tr {
    display: table-row;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    display: table-cell;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.cart_totals table.shop_table th {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    text-align: left;
    white-space: nowrap;
}

.cart_totals table.shop_table td {
    text-align: right;
    font-weight: 600;
    color: var(--foreground);
    white-space: nowrap;
}

.cart_totals table.shop_table tr.cart-subtotal td {
    font-size: var(--font-size-base);
}

.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
    border-bottom: none;
    padding: var(--spacing-4);
    background-color: hsl(0, 0%, 98%);
}

.cart_totals table.shop_table tr.order-total th {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--foreground);
}

.cart_totals table.shop_table tr.order-total td {
    font-size: var(--font-size-lg);
    color: var(--primary);
}

/* Proceed to Checkout Button */
.wc-proceed-to-checkout {
    padding: var(--spacing-4) !important;
}

.wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background-color: var(--primary);
    color: var(--primary-foreground) !important;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    text-decoration: none;
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: hsl(155, 82%, 20%);
    color: var(--primary-foreground) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(155, 82%, 30%, 0.3);
}

/* Cart Shipping Calculator */
.cart_totals .shipping-calculator-button {
    font-size: var(--font-size-sm);
    color: var(--primary);
    text-decoration: underline;
}

.cart_totals .shipping-calculator-form {
    padding: var(--spacing-4) 0;
}

/* Mobile Cart Responsiveness */
@media (max-width: 767px) {
    table.shop_table_responsive.cart thead {
        display: none;
    }
    
    table.shop_table_responsive.cart tbody {
        display: block;
    }
    
    table.shop_table_responsive.cart tr.cart_item {
        display: flex;
        flex-wrap: wrap;
        padding: var(--spacing-4);
        position: relative;
        border-bottom: 1px solid var(--border);
    }
    
    table.shop_table_responsive.cart tr.cart_item td {
        display: block;
        padding: var(--spacing-2);
        border: none;
        text-align: left;
    }
    
    table.shop_table_responsive.cart tr.cart_item td::before {
        display: none;
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-remove {
        position: absolute;
        top: var(--spacing-3);
        right: var(--spacing-3);
        width: auto;
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-thumbnail {
        width: 80px;
        flex-shrink: 0;
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-thumbnail img {
        width: 64px;
        height: 64px;
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-name {
        flex: 1;
        padding-right: 40px;
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-price,
    table.shop_table_responsive.cart tr.cart_item td.product-quantity,
    table.shop_table_responsive.cart tr.cart_item td.product-subtotal {
        width: 33.33%;
        text-align: center;
        padding-top: var(--spacing-3);
    }
    
    table.shop_table_responsive.cart tr.cart_item td.product-price::before,
    table.shop_table_responsive.cart tr.cart_item td.product-quantity::before,
    table.shop_table_responsive.cart tr.cart_item td.product-subtotal::before {
        content: attr(data-title);
        display: block;
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--muted-foreground);
        margin-bottom: var(--spacing-1);
    }
    
    table.shop_table_responsive.cart tr:not(.cart_item) {
        display: block;
    }
    
    table.shop_table.cart td.actions {
        display: block;
    }
    
    table.shop_table.cart td.actions .coupon {
        width: 100%;
        flex-direction: column;
    }
    
    table.shop_table.cart td.actions .coupon input.input-text {
        width: 100%;
    }
    
    table.shop_table.cart td.actions .coupon button.button {
        width: 100%;
    }
    
    table.shop_table.cart td.actions button[name="update_cart"] {
        width: 100%;
        margin-top: var(--spacing-3);
    }
}

/* Empty Cart Styles */
.woocommerce .cart-empty {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
}

.woocommerce .cart-empty.woocommerce-info {
    background-color: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    border: none;
    color: var(--muted-foreground);
    font-size: var(--font-size-lg);
}

.woocommerce .cart-empty.woocommerce-info::before {
    display: none;
}

.woocommerce .return-to-shop {
    margin-top: var(--spacing-6);
}

.woocommerce .return-to-shop a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--spacing-8);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.woocommerce .return-to-shop a.button:hover {
    background-color: hsl(155, 82%, 20%);
}

/* Override prose styles for cart page and account page */
.prose .woocommerce {
    max-width: none;
}

.prose .woocommerce table {
    margin: 0;
}

.prose .woocommerce th,
.prose .woocommerce td {
    padding: 0;
}

/* Reset prose styles inside My Account so they don't interfere */
.prose .woocommerce-MyAccount-content p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.prose .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
}

/* Cross-sells Section */
.cross-sells {
    margin-top: var(--spacing-8);
}

.cross-sells > h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-6);
}

/* Coupon Applied Badge */
.cart-discount {
    background-color: hsl(155, 82%, 95%);
    color: var(--primary);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
}

.cart-discount .woocommerce-remove-coupon {
    color: var(--destructive);
    margin-left: var(--spacing-2);
}

/* ============================================
   WooCommerce Product Description Tab Styles
   ============================================ */

/* Technical Specifications Table */
.woocommerce-Tabs-panel--description table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
}

.woocommerce-Tabs-panel--description table tbody {
    background-color: var(--card);
}

.woocommerce-Tabs-panel--description table tr {
    transition: background-color 0.2s ease;
}

.woocommerce-Tabs-panel--description table tr:nth-child(odd) {
    background-color: var(--secondary);
}

.woocommerce-Tabs-panel--description table tr:nth-child(even) {
    background-color: var(--card);
}

.woocommerce-Tabs-panel--description table tr:hover {
    background-color: hsl(155, 82%, 95%) !important;
}

.woocommerce-Tabs-panel--description table tr:first-child td {
    border-top: none;
}

.woocommerce-Tabs-panel--description table td {
    padding: var(--spacing-4) var(--spacing-5);
    text-align: left !important;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.woocommerce-Tabs-panel--description table tr:last-child td {
    border-bottom: none;
}

/* First column - Labels */
.woocommerce-Tabs-panel--description table td:first-child {
    font-weight: 600;
    color: var(--foreground);
    background-color: rgba(22, 163, 74, 0.08);
    width: 40%;
    position: relative;
}

.woocommerce-Tabs-panel--description table td:first-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    background-color: var(--primary);
    border-radius: 1px;
}

/* Second column - Values */
.woocommerce-Tabs-panel--description table td:last-child {
    color: var(--muted-foreground);
    font-weight: 500;
}

/* Table Header Style (if present) */
.woocommerce-Tabs-panel--description table th {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: var(--spacing-4) var(--spacing-5);
    font-weight: 600;
    text-align: left;
    font-size: var(--font-size-base);
    letter-spacing: 0.025em;
}

/* Responsive Table */
@media (max-width: 640px) {
    .woocommerce-Tabs-panel--description table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .woocommerce-Tabs-panel--description table td {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-sm);
    }
    
    .woocommerce-Tabs-panel--description table td:first-child {
        width: 50%;
    }
}

/* Additional Table Variants - Attribute Tables */
.woocommerce-product-attributes {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.woocommerce-product-attributes th {
    background-color: var(--secondary);
    color: var(--foreground);
    font-weight: 600;
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    width: 35%;
}

.woocommerce-product-attributes td {
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--muted-foreground);
}

.woocommerce-product-attributes tr {
    border-bottom: 1px solid var(--border);
}

.woocommerce-product-attributes tr:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Tablet-Specific Responsive Styles
   Targeting: iPad Mini (768x1024), iPad Air (820x1180), iPad Pro (1024x1366),
   Surface Pro 7 (912x1368), Asus ZenBook Fold (853x1280), Nethub (1024x600)
   ========================================================================== */

/* Medium Tablets (768px - 900px) - iPad Mini portrait, smaller tablets */
@media (min-width: 768px) and (max-width: 900px) {
    /* Header adjustments */
    .main-header .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        margin-top: var(--spacing-3);
    }
    
    .site-logo img {
        height: 56px;
    }
    
    /* Hero section */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-image {
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Category cards - 2 columns, vertical layout */
    .category-cards-section .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .category-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-5);
    }
    
    /* Products grid - 2 columns */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* WooCommerce products - 2 columns */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Features grid - 2 columns */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-item {
        flex-direction: row;
        text-align: left;
    }
    
    /* Innovative section */
    .innovative-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .innovative-features {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-3);
    }
    
    .innovative-feature {
        padding: var(--spacing-3);
    }
    
    .innovative-feature span {
        font-size: var(--font-size-sm);
    }
    
    /* Newsletter section */
    .newsletter-grid {
        grid-template-columns: 1fr;
    }
    
    .newsletter-image {
        display: none;
    }
    
    /* Footer grid - 2x2 */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    /* Single product layout */
    body.single-product div.product {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    /* Team grid */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Values grid */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Story grid */
    .story-grid {
        grid-template-columns: 1fr;
    }
}

/* Larger Tablets (901px - 1024px) - iPad Air portrait, Surface Pro 7, ZenBook Fold */
@media (min-width: 901px) and (max-width: 1024px) {
    /* Header - full width search */
    .main-header .container {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .header-search {
        max-width: 400px;
    }
    
    .site-logo img {
        height: 60px;
    }
    
    /* Hero - 2 column layout but adjusted */
    .hero-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--spacing-6);
    }
    
    .hero-text h1 {
        font-size: var(--font-size-4xl);
    }
    
    .hero-text p {
        font-size: var(--font-size-base);
    }
    
    /* Category cards - 2 columns with horizontal layout */
    .category-cards-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    
    .category-card {
        flex-direction: row;
        text-align: left;
        padding: var(--spacing-4);
    }
    
    .category-card-content h3 {
        font-size: var(--font-size-sm);
    }
    
    /* Products grid - 3 columns */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }
    
    /* WooCommerce products - 3 columns */
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Product card adjustments */
    .product-card-title {
        font-size: var(--font-size-sm);
    }
    
    .product-price-current {
        font-size: var(--font-size-lg);
    }
    
    /* Features grid - 2 columns on medium tablets */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Innovative section - 2 columns */
    .innovative-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }
    
    .innovative-features {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-3);
    }
    
    .innovative-feature {
        padding: var(--spacing-3);
    }
    
    /* Newsletter - show image */
    .newsletter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .newsletter-image {
        display: block;
    }
    
    /* Footer - 4 column layout but tighter */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-4);
    }
    
    .footer-col h3 {
        font-size: var(--font-size-sm);
    }
    
    /* Contact grid - 2 columns */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-6);
    }
    
    /* Single product layout - 2 columns */
    body.single-product div.product {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-8);
    }
    
    /* Team grid - 4 columns but smaller */
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-3);
    }
    
    .team-member img {
        width: 100%;
        height: auto;
    }
    
    /* Values grid - 3 columns */
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4);
    }
    
    /* Story grid - 2 columns */
    .story-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* iPad Pro Portrait (1024px width) specific adjustments */
@media (min-width: 1024px) and (max-width: 1100px) {
    /* Slightly reduce product grid to 3 columns for better fit */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Category cards - 4 columns but compact */
    .category-cards-section .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-3);
    }
    
    .category-card {
        padding: var(--spacing-4);
        gap: var(--spacing-3);
    }
    
    .category-card-icon {
        padding: var(--spacing-2);
    }
    
    .category-card-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Nethub specific (1024x600 - wide but short) */
@media (min-width: 1024px) and (max-height: 700px) {
    /* Reduce vertical padding throughout - consistent spacing-10 for all sections */
    .hero-content {
        padding: var(--spacing-8) 0;
    }
    
    .category-cards-section,
    .brand-banners-section,
    .newest-products-section,
    .featured-products-section,
    .privileged-products-section,
    .promo-banner-section,
    .features-section,
    .innovative-section,
    .newsletter-content {
        padding: var(--spacing-10) 0;
    }
    
    /* Reduce hero height */
    .hero-grid {
        gap: var(--spacing-4);
    }
    
    .hero-text h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--spacing-4);
    }
    
    .hero-text p {
        margin-bottom: var(--spacing-4);
    }
    
    .hero-stats {
        padding-top: var(--spacing-4);
    }
    
    /* Reduce brand banner height */
    .brand-banner {
        min-height: 220px;
        padding: var(--spacing-4);
    }
    
    /* Footer compact */
    .footer-main {
        padding: var(--spacing-8) 0;
    }
}

/* Landscape Tablet Orientation (height < width and typical tablet heights) */
@media (min-width: 768px) and (max-width: 1400px) and (orientation: landscape) and (max-height: 900px) {
    /* Hero adjustments for landscape */
    .hero-content {
        padding: var(--spacing-10) 0;
    }
    
    .hero-grid {
        grid-template-columns: 1.3fr 1fr;
    }
    
    .hero-image {
        max-width: 400px;
    }
    
    /* Consistent section padding for all sections */
    .category-cards-section,
    .brand-banners-section,
    .newest-products-section,
    .featured-products-section,
    .privileged-products-section,
    .promo-banner-section,
    .features-section,
    .innovative-section,
    .newsletter-content {
        padding: var(--spacing-10) 0;
    }
    
    .section-header {
        margin-bottom: var(--spacing-6);
    }
    
    /* Brand banners smaller */
    .brand-banner {
        min-height: 240px;
    }
}

/* Touch-friendly enhancements for all tablets */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    /* Larger tap targets */
    .btn {
        min-height: 44px;
        padding: var(--spacing-3) var(--spacing-5);
    }
    
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Navigation links */
    .nav-bar__center a {
        padding: var(--spacing-4) var(--spacing-5);
    }
    
    /* Product card buttons */
    .product-add-to-cart {
        width: 44px;
        height: 44px;
    }
    
    /* Search input */
    .header-search input {
        height: 48px;
    }
    
    /* Form inputs */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        min-height: 48px;
        padding: var(--spacing-3) var(--spacing-4);
    }
}

/* Fix navigation visibility on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-bar__center a {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }
}

/* Promo banner tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .promo-banner-content {
        padding: var(--spacing-8) var(--spacing-6);
        gap: var(--spacing-4);
    }
    
    .promo-banner-text {
        gap: var(--spacing-4);
    }
    
    .promo-banner h3 {
        font-size: var(--font-size-lg);
    }
    
    .promo-banner p {
        font-size: var(--font-size-sm);
    }
}

/* About page tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .about-hero {
        padding: 4rem 0 6rem;
    }
    
    .about-hero h1 {
        font-size: var(--font-size-4xl);
    }
    
    .about-story,
    .about-values,
    .about-timeline,
    .about-team {
        padding: 3rem 0;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }
    
    .timeline-year {
        margin-right: 0;
    }
}

/* Contact page tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .contact-hero {
        padding: 4rem 0 6rem;
    }
    
    .contact-hero h1 {
        font-size: var(--font-size-4xl);
    }
    
    .contact-main {
        padding: 3rem 0;
    }
    
    .contact-form-wrapper,
    .contact-details {
        padding: var(--spacing-6);
    }
}

/* Cart page tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .woocommerce-cart .woocommerce,
    .woocommerce:has(.woocommerce-cart-form) {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    .cart-collaterals {
        margin-top: var(--spacing-8);
    }
}

/* WooCommerce shop page tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .woocommerce .woocommerce-result-count {
        font-size: var(--font-size-sm);
    }
    
    .woocommerce .woocommerce-ordering select.orderby {
        min-width: 11rem;
        font-size: var(--font-size-sm);
    }
    
    /* Product card content on tablets */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: var(--font-size-sm);
    }
    
    .woocommerce ul.products li.product .price {
        font-size: var(--font-size-base);
    }
}

/* Single product page tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    body.single-product .summary .product_title {
        font-size: 1.5rem;
    }
    
    body.single-product .summary .product-price-display .price {
        font-size: var(--font-size-2xl);
    }
    
    .product-features-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Improve readability on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: var(--font-size-base);
        line-height: 1.7;
    }
    
    h1 {
        font-size: var(--font-size-4xl);
    }
    
    h2 {
        font-size: var(--font-size-3xl);
    }
    
    h3 {
        font-size: var(--font-size-xl);
    }
    
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

/* ==========================================================================
   Mobile-Specific Fixes (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
    }
    
    /* Container padding for small screens */
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
        max-width: 100%;
    }
    
    /* Footer Trust Section - Fix text overflow */
    .footer-trust {
        margin-top: var(--spacing-8);
        padding-top: var(--spacing-6);
    }
    
    .footer-trust-content {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-5);
        text-align: center;
    }
    
    /* Google Reviews - Stack on mobile */
    .google-reviews {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-4);
        width: 100%;
        max-width: 280px;
    }
    
    .google-reviews-text {
        text-align: center;
    }
    
    /* Payment Methods - Stack on mobile */
    .payment-methods {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);
        width: 100%;
    }
    
    .payment-methods span {
        text-align: center;
        display: block;
        width: 100%;
    }
    
    .payment-icons {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-2);
    }
    
    .payment-icon {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }
    
    /* Business Hours - Center on mobile */
    .business-hours {
        text-align: center;
        width: 100%;
    }
    
    /* Footer Bottom - Stack and center */
    .footer-bottom-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .footer-legal-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-3);
    }
    
    .footer-legal-links a {
        font-size: var(--font-size-xs);
    }
    
    /* Footer Grid - Single column on mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    /* Footer Company Section */
    .footer-company {
        text-align: center;
    }
    
    .footer-company img {
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Footer Links - Center on mobile */
    .footer-links {
        text-align: center;
    }
    
    .footer-links ul {
        align-items: center;
    }
    
    /* Footer Contact - Center on mobile */
    .footer-contact {
        text-align: center;
    }
    
    .footer-contact ul {
        align-items: center;
    }
    
    .footer-contact li {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Innovative Section - Prevent overflow */
    .innovative-section {
        overflow: hidden;
    }
    
    .innovative-content h2 {
        font-size: var(--font-size-2xl);
        word-wrap: break-word;
    }
    
    .innovative-features {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2);
    }
    
    .innovative-feature {
        padding: var(--spacing-2);
    }
    
    .innovative-feature svg {
        width: 20px;
        height: 20px;
    }
    
    .innovative-feature span {
        font-size: var(--font-size-xs);
    }
    
    /* Hero Section Mobile - Prevent internal scrolling */
    .hero-section {
        overflow: hidden !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .hero-content {
        overflow: visible;
        height: auto;
        max-height: none;
    }
    
    .hero-grid {
        overflow: visible;
        height: auto;
    }
    
    .hero-text h1 {
        font-size: var(--font-size-3xl);
        word-wrap: break-word;
    }
    
    .hero-text p {
        font-size: var(--font-size-base);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }
    
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-4);
    }
    
    .hero-stat {
        text-align: center;
        min-width: 80px;
    }
    
    .hero-stat-value {
        font-size: var(--font-size-2xl);
    }
    
    /* Category Cards - Single column on very small screens */
    .category-cards-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    .category-card {
        padding: var(--spacing-3);
        gap: var(--spacing-2);
    }
    
    .category-card-icon {
        padding: var(--spacing-2);
    }
    
    .category-card-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .category-card-content h3 {
        font-size: var(--font-size-xs);
    }
    
    .category-card-content p {
        display: none;
    }
    
    /* Brand Banners - Prevent text overflow */
    .brand-banner {
        min-height: 200px;
        padding: var(--spacing-4);
    }
    
    .brand-banner-content {
        max-width: 60%;
    }
    
    .brand-banner h3 {
        font-size: var(--font-size-lg);
        word-wrap: break-word;
    }
    
    .brand-banner p {
        font-size: var(--font-size-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .brand-banner .btn {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }
    
    .brand-banner-image {
        width: 55%;
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    .product-card-content {
        padding: var(--spacing-3);
    }
    
    .product-card-title {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 2;
    }
    
    .product-price-current {
        font-size: var(--font-size-base);
    }
    
    .product-price-original {
        font-size: var(--font-size-xs);
    }
    
    .product-add-to-cart {
        width: 36px;
        height: 36px;
    }
    
    .product-add-to-cart svg {
        width: 16px;
        height: 16px;
    }
    
    /* Section Headers */
    .section-header h2 {
        font-size: var(--font-size-2xl);
        word-wrap: break-word;
    }
    
    .section-header p {
        font-size: var(--font-size-sm);
    }
    
    /* Promo Banner */
    .promo-banner-content {
        padding: var(--spacing-6) var(--spacing-4);
        text-align: center;
    }
    
    .promo-banner-text {
        flex-direction: column;
        text-align: center;
    }
    
    .promo-banner h3 {
        font-size: var(--font-size-lg);
    }
    
    .promo-banner p {
        font-size: var(--font-size-sm);
    }
    
    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .feature-item {
        flex-direction: row;
        text-align: left;
        align-items: center;
    }
    
    .feature-content h3 {
        font-size: var(--font-size-sm);
    }
    
    .feature-content p {
        font-size: var(--font-size-xs);
    }
    
    /* Newsletter Section */
    .newsletter-content h2 {
        font-size: var(--font-size-xl);
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form input {
        width: 100%;
    }
    
    .newsletter-form button {
        width: 100%;
    }
    
    /* Top Bar Mobile */
    .top-bar {
        padding: var(--spacing-2) 0;
    }
    
    .top-bar__container {
        gap: var(--spacing-1);
    }
    
    .top-bar__phone .text-sm,
    .top-bar__banner .text-sm {
        font-size: var(--font-size-xs);
    }
    
    /* Header Mobile */
    .main-header {
        padding: var(--spacing-3) 0;
    }
    
    .site-logo img {
        height: 44px;
    }
    
    /* Mobile Search */
    .mobile-search {
        margin-top: var(--spacing-3);
    }
    
    .mobile-search input {
        font-size: var(--font-size-sm);
    }
}

/* Extra Small Mobile Screens (< 375px) */
@media (max-width: 374px) {
    .container {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
    
    .hero-text h1 {
        font-size: var(--font-size-2xl);
    }
    
    .hero-stat-value {
        font-size: var(--font-size-xl);
    }
    
    .hero-stat-label {
        font-size: var(--font-size-xs);
    }
    
    .category-cards-section .grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
    
    .category-card {
        flex-direction: row;
        text-align: left;
    }
    
    .category-card-content p {
        display: block;
        font-size: var(--font-size-xs);
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .brand-banners-grid {
        grid-template-columns: 1fr;
    }
    
    .brand-banner {
        min-height: 180px;
    }
    
    .brand-banner-content {
        max-width: 55%;
    }
    
    .innovative-features {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .payment-icons {
        gap: var(--spacing-1);
    }
    
    .payment-icon {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: 10px;
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: var(--spacing-2);
    }
}

/* ==========================================================================
   FiboSearch (DGWT WCAS) Custom Styles
   ========================================================================== */

/* Main wrapper */
.dgwt-wcas-search-wrapp {
    width: 100%;
    max-width: 100%;
}

/* Header Search - Desktop */
.header-search .dgwt-wcas-search-wrapp {
    width: 100%;
}

.header-search .dgwt-wcas-search-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.header-search .dgwt-wcas-sf-wrapp {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--background);
    border: 2px solid var(--border);
    border-radius: 9999px;
    padding: 0;
    height: 44px;
    transition: border-color 0.2s ease;
}

.header-search .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--primary);
}

.header-search .dgwt-wcas-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    padding-right: 48px !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-sans) !important;
    color: var(--foreground) !important;
    height: 40px !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 9999px !important;
}

.header-search .dgwt-wcas-search-input::placeholder {
    color: var(--muted-foreground) !important;
}

.header-search .dgwt-wcas-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.header-search .dgwt-wcas-search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
    padding: 0 !important;
    left: auto !important;
}

.header-search .dgwt-wcas-search-submit:hover {
    background-color: hsl(155, 82%, 20%) !important;
}

.header-search .dgwt-wcas-search-submit svg,
.header-search .dgwt-wcas-ico-magnifier {
    fill: white !important;
    width: 16px !important;
    height: 16px !important;
}

/* Hide voice search if not needed */
.header-search .dgwt-wcas-voice-search {
    display: none;
}

/* Preloader positioning */
.header-search .dgwt-wcas-preloader {
    right: 48px !important;
}

/* Mobile Search */
.mobile-search .dgwt-wcas-search-wrapp {
    width: 100%;
}

.mobile-search .dgwt-wcas-search-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-search .dgwt-wcas-sf-wrapp {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--background);
    border: 2px solid var(--border);
    border-radius: 9999px;
    padding: 0;
    height: 44px;
    transition: border-color 0.2s ease;
}

.mobile-search .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--primary);
}

.mobile-search .dgwt-wcas-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    padding-right: 48px !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-sans) !important;
    color: var(--foreground) !important;
    height: 40px !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 9999px !important;
}

.mobile-search .dgwt-wcas-search-input::placeholder {
    color: var(--muted-foreground) !important;
}

.mobile-search .dgwt-wcas-search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    left: auto !important;
}

.mobile-search .dgwt-wcas-search-submit svg,
.mobile-search .dgwt-wcas-ico-magnifier {
    fill: white !important;
    width: 16px !important;
    height: 16px !important;
}

.mobile-search .dgwt-wcas-voice-search {
    display: none;
}

.mobile-search .dgwt-wcas-preloader {
    right: 48px !important;
}

/* 404 Page Search */
.error-404-search .dgwt-wcas-search-wrapp {
    max-width: 100%;
}

.error-404-search .dgwt-wcas-sf-wrapp {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background-color: var(--background);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing-2);
    transition: border-color 0.2s ease;
}

.error-404-search .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--primary);
}

.error-404-search .dgwt-wcas-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: var(--spacing-2) !important;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-sans) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    min-width: 0;
}

.error-404-search .dgwt-wcas-search-input:focus {
    outline: none !important;
}

.error-404-search .dgwt-wcas-search-submit {
    flex-shrink: 0;
    padding: var(--spacing-2) var(--spacing-4) !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
    font-weight: 500;
    height: auto !important;
    min-height: 40px;
}

.error-404-search .dgwt-wcas-search-submit:hover {
    background-color: hsl(155, 82%, 20%) !important;
}

.error-404-search .dgwt-wcas-voice-search {
    display: none;
}

/* Search Results Page */
.max-w-md .dgwt-wcas-search-wrapp {
    max-width: 100%;
}

.max-w-md .dgwt-wcas-sf-wrapp {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background-color: var(--background);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing-2);
}

.max-w-md .dgwt-wcas-sf-wrapp:focus-within {
    border-color: var(--primary);
}

.max-w-md .dgwt-wcas-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    font-size: var(--font-size-base) !important;
    box-shadow: none !important;
}

.max-w-md .dgwt-wcas-search-submit {
    padding: var(--spacing-2) var(--spacing-4) !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
}

.max-w-md .dgwt-wcas-voice-search {
    display: none;
}

/* FiboSearch Suggestions Dropdown */
.dgwt-wcas-suggestions-wrapp {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--card-shadow) !important;
    background-color: var(--card) !important;
    margin-top: var(--spacing-2) !important;
    overflow: hidden;
}

.dgwt-wcas-suggestion {
    padding: var(--spacing-3) var(--spacing-4) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background-color 0.15s ease !important;
}

.dgwt-wcas-suggestion:last-child {
    border-bottom: none !important;
}

.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
    background-color: var(--secondary) !important;
}

.dgwt-wcas-st {
    color: var(--foreground) !important;
    font-weight: 500 !important;
}

.dgwt-wcas-sp {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.dgwt-wcas-sd {
    color: var(--muted-foreground) !important;
    font-size: var(--font-size-sm) !important;
}

/* Product image in suggestions */
.dgwt-wcas-si {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

/* "See all results" link */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more {
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-align: center;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* Category headers in suggestions */
.dgwt-wcas-suggestion-headline {
    padding: var(--spacing-2) var(--spacing-4) !important;
    background-color: var(--secondary) !important;
    color: var(--muted-foreground) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .header-search .dgwt-wcas-sf-wrapp,
    .mobile-search .dgwt-wcas-sf-wrapp {
        height: 40px;
    }
    
    .header-search .dgwt-wcas-search-submit,
    .mobile-search .dgwt-wcas-search-submit {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .header-search .dgwt-wcas-search-submit svg,
    .mobile-search .dgwt-wcas-search-submit svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .error-404-search .dgwt-wcas-sf-wrapp {
        flex-direction: column;
        padding: var(--spacing-3);
    }
    
    .error-404-search .dgwt-wcas-search-input {
        width: 100%;
        padding: var(--spacing-3) !important;
    }
    
    .error-404-search .dgwt-wcas-search-submit {
        width: 100%;
    }
}

/* ==========================================================================
   WooCommerce My Account Page
   ========================================================================== */

/* Kill WooCommerce default float layout on My Account nav + content */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Grid layout: sidebar nav + content (only when nav is present) */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    font-family: var(--font-sans);
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 240px 1fr;
    }
}

@media (min-width: 1024px) {
    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 260px 1fr;
        gap: var(--spacing-10);
    }
}

/* Navigation Sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-2) !important;
    height: fit-content;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4) !important;
    border-radius: var(--radius);
    font-size: var(--font-size-sm) !important;
    font-weight: 500;
    color: var(--muted-foreground) !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    background-color: var(--secondary) !important;
    color: var(--foreground) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    font-weight: 600;
}

/* Nav icons via ::before pseudo-element */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover::before,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::before {
    opacity: 1;
}

/* Icon: Dashboard */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--dashboard.is-active a::before,
.woocommerce-MyAccount-navigation-link--dashboard a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

/* Icon: Orders */
.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders.is-active a::before,
.woocommerce-MyAccount-navigation-link--orders a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

/* Icon: Downloads */
.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads.is-active a::before,
.woocommerce-MyAccount-navigation-link--downloads a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

/* Icon: Addresses */
.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address.is-active a::before,
.woocommerce-MyAccount-navigation-link--edit-address a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Icon: Account Details */
.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account.is-active a::before,
.woocommerce-MyAccount-navigation-link--edit-account a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
}

/* Icon: Logout */
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #ef4444 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
    opacity: 1;
}

/* Account Content Area */
.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
}

/* Dashboard welcome greeting */
.woocommerce-MyAccount-content > p:first-of-type {
    font-size: var(--font-size-lg);
    color: var(--foreground);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border);
}

.woocommerce-MyAccount-content > p:first-of-type strong {
    color: var(--primary);
    font-weight: 700;
}

/* Dashboard description paragraph */
.woocommerce-MyAccount-content > p:nth-of-type(2) {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

/* Links inside dashboard content */
.woocommerce-MyAccount-content > p a {
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.woocommerce-MyAccount-content > p a:hover {
    border-bottom-color: var(--primary);
}

.woocommerce-MyAccount-content > p strong {
    color: var(--foreground);
    font-weight: 600;
}

/* Info / Notice boxes */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border: none !important;
}

.woocommerce-account .woocommerce-info {
    background-color: #f0fdf4 !important;
    color: var(--foreground);
    border-left: 4px solid var(--primary) !important;
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before {
    display: none !important;
}

.woocommerce-account .woocommerce-message {
    background-color: #f0fdf4 !important;
    color: var(--foreground);
    border-left: 4px solid var(--primary) !important;
}

.woocommerce-account .woocommerce-error {
    background-color: #fef2f2 !important;
    color: var(--foreground);
    border-left: 4px solid #ef4444 !important;
}

.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border-radius: var(--radius) !important;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-message .button:hover {
    background-color: hsl(155, 82%, 20%) !important;
}

/* Orders table */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.woocommerce-account .woocommerce-orders-table thead th {
    text-align: left;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--secondary);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
}

.woocommerce-account .woocommerce-orders-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a:hover {
    background-color: hsl(155, 82%, 20%);
}

/* ==========================================================================
   Account forms (edit account, edit address)
   ========================================================================== */

/* Kill ::before / ::after clearfix on the form, its rows, fieldset, and .clear divs */
.woocommerce-account .woocommerce-EditAccountForm::before,
.woocommerce-account .woocommerce-EditAccountForm::after,
.woocommerce-account .woocommerce-EditAccountForm .form-row::before,
.woocommerce-account .woocommerce-EditAccountForm .form-row::after,
.woocommerce-account .woocommerce-EditAccountForm fieldset::before,
.woocommerce-account .woocommerce-EditAccountForm fieldset::after,
.woocommerce-account .woocommerce-address-fields::before,
.woocommerce-account .woocommerce-address-fields::after,
.woocommerce-account .woocommerce-address-fields .form-row::before,
.woocommerce-account .woocommerce-address-fields .form-row::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide WooCommerce .clear divs — not needed with CSS grid */
.woocommerce-account .woocommerce-EditAccountForm > .clear,
.woocommerce-account .woocommerce-address-fields > .clear {
    display: none !important;
}

/* Form container */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
    max-width: 640px;
    font-family: var(--font-sans);
}

/* Use CSS grid so first-name / last-name sit side-by-side, others span full width */
.woocommerce-account .woocommerce-EditAccountForm {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

/* Wide rows and every other element span full width */
.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
.woocommerce-account .woocommerce-EditAccountForm > .clear,
.woocommerce-account .woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
    grid-column: 1 / -1;
}

/* First name (form-row-first) → col 1, Last name (form-row-last) → col 2 */
.woocommerce-account .woocommerce-EditAccountForm .form-row-first {
    grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
    grid-column: 2 / 3;
}

/* Reset float-based layout on all form rows */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Labels */
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--spacing-1);
}

/* Description text under display name */
.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
    display: block;
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
    line-height: 1.5;
}

.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description em {
    font-style: normal;
}

/* Text / email / password inputs */
.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields select {
    display: block !important;
    width: 100% !important;
    padding: var(--spacing-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.1);
}

/* Password field wrapper */
.woocommerce-account .woocommerce-EditAccountForm .password-input {
    display: block !important;
    position: relative;
    width: 100% !important;
}

.woocommerce-account .woocommerce-EditAccountForm .password-input .show-password-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--muted-foreground);
}

/* Fieldset — password change section */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6) !important;
    margin: var(--spacing-2) 0 0 0 !important;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--foreground);
    padding: 0 var(--spacing-2);
}

/* Space between password rows inside fieldset */
.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row {
    margin-bottom: var(--spacing-4) !important;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row:last-child {
    margin-bottom: 0 !important;
}

/* Submit button */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-account .woocommerce-address-fields .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 0;
}

.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button:hover,
.woocommerce-account .woocommerce-address-fields .button:hover {
    background-color: hsl(155, 82%, 20%) !important;
}

/* On mobile, stack first/last name too */
@media (max-width: 480px) {
    .woocommerce-account .woocommerce-EditAccountForm {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-EditAccountForm .form-row-first,
    .woocommerce-account .woocommerce-EditAccountForm .form-row-last {
        grid-column: 1 / -1;
    }
}

/* Address cards (billing / shipping) —
   Kill clearfix pseudo-elements on the col2-set wrapper & children */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address::before,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set .col-1::before,
.woocommerce-account .col2-set .col-1::after,
.woocommerce-account .col2-set .col-2::before,
.woocommerce-account .col2-set .col-2::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .u-column1::before,
.woocommerce-account .u-column1::after,
.woocommerce-account .u-column2::before,
.woocommerce-account .u-column2::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Kill WooCommerce default float layout on address columns */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 640px) {
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr;
    }
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header h2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address header h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header a {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address header a:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address address {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    line-height: 1.7;
    font-style: normal;
}

/* Hide the default page title on account page */
.woocommerce-account .entry-title,
.woocommerce-account article > header {
    display: none !important;
}

/* ==========================================================================
   Login / Register Form Styling
   ========================================================================== */

/* Kill ALL ::before / ::after on login/register forms and their children
   (WooCommerce clearfix pseudo-elements break stacked layouts) */
.woocommerce-account .woocommerce form.login::before,
.woocommerce-account .woocommerce form.login::after,
.woocommerce-account .woocommerce form.register::before,
.woocommerce-account .woocommerce form.register::after,
.woocommerce-account .woocommerce-form-login::before,
.woocommerce-account .woocommerce-form-login::after,
.woocommerce-account .woocommerce-form-register::before,
.woocommerce-account .woocommerce-form-register::after,
.woocommerce-account .woocommerce form.login .form-row::before,
.woocommerce-account .woocommerce form.login .form-row::after,
.woocommerce-account .woocommerce form.register .form-row::before,
.woocommerce-account .woocommerce form.register .form-row::after,
.woocommerce-account .woocommerce-form-login .form-row::before,
.woocommerce-account .woocommerce-form-login .form-row::after,
.woocommerce-account .woocommerce-form-register .form-row::before,
.woocommerce-account .woocommerce-form-register .form-row::after,
.woocommerce form.woocommerce-form-login::before,
.woocommerce form.woocommerce-form-login::after,
.woocommerce form.woocommerce-form-login .form-row::before,
.woocommerce form.woocommerce-form-login .form-row::after,
form.woocommerce-form-login::before,
form.woocommerce-form-login::after,
form.woocommerce-form-login .form-row::before,
form.woocommerce-form-login .form-row::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force form rows to stack vertically (kill WooCommerce float/inline layout) */
.woocommerce-account .woocommerce form.login .form-row,
.woocommerce-account .woocommerce form.register .form-row,
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row,
form.woocommerce-form-login .form-row,
form.woocommerce-form-login p.woocommerce-form-row {
    display: block !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin-bottom: var(--spacing-4) !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
form.woocommerce-form-login {
    max-width: 480px;
    margin: 0 auto;
    font-family: var(--font-sans);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8) !important;
}

.woocommerce-account .woocommerce form.login h2,
.woocommerce-account .woocommerce form.register h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 var(--spacing-6) 0;
}

.woocommerce-account .woocommerce form.login label,
.woocommerce-account .woocommerce form.register label,
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label,
form.woocommerce-form-login label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--spacing-2) !important;
}

.woocommerce-account .woocommerce form.login input.input-text,
.woocommerce-account .woocommerce form.register input.input-text,
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text,
.woocommerce-account .woocommerce form.login input[type="text"],
.woocommerce-account .woocommerce form.login input[type="password"],
.woocommerce-account .woocommerce form.login input[type="email"],
form.woocommerce-form-login input.input-text,
form.woocommerce-form-login input[type="text"],
form.woocommerce-form-login input[type="password"] {
    display: block !important;
    width: 100% !important;
    padding: var(--spacing-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-sans);
    background: var(--background) !important;
    color: var(--foreground);
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Password input wrapper (span.password-input) – make it block so it doesn't sit inline */
form.woocommerce-form-login .password-input,
.woocommerce-account .woocommerce form.login .password-input {
    display: block !important;
    position: relative;
    width: 100% !important;
}

form.woocommerce-form-login .password-input .show-password-input,
.woocommerce-account .woocommerce form.login .password-input .show-password-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--muted-foreground);
}

.woocommerce-account .woocommerce form.login input:focus,
.woocommerce-account .woocommerce form.register input:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.1);
}

/* Remember me checkbox row */
.woocommerce-account .woocommerce form.login .woocommerce-form__label-for-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
    cursor: pointer;
}

/* Submit button */
.woocommerce-account .woocommerce form.login .woocommerce-button,
.woocommerce-account .woocommerce form.login button[type="submit"],
.woocommerce-account .woocommerce form.register .woocommerce-button,
.woocommerce-account .woocommerce form.register button[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: var(--spacing-3) var(--spacing-6) !important;
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: var(--spacing-4);
    text-align: center;
}

.woocommerce-account .woocommerce form.login .woocommerce-button:hover,
.woocommerce-account .woocommerce form.register .woocommerce-button:hover {
    background-color: hsl(155, 82%, 20%) !important;
}

/* Lost password link */
.woocommerce-account .woocommerce .woocommerce-LostPassword {
    margin-top: var(--spacing-3);
}

.woocommerce-account .woocommerce .woocommerce-LostPassword a {
    font-size: var(--font-size-sm);
    color: var(--primary) !important;
    text-decoration: none;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* Mobile: horizontal scroll nav on small screens */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        gap: var(--spacing-1);
        white-space: nowrap;
        padding-bottom: var(--spacing-1);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation-link a {
        padding: var(--spacing-2) var(--spacing-3) !important;
        font-size: var(--font-size-xs) !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: var(--spacing-5);
    }
}