/*
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.22
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%, 96%);
       --foreground: hsl(0, 0%, 9%);
       --card: hsl(0, 0%, 98%);
       --card-foreground: hsl(0, 0%, 9%);
       --popover: hsl(0, 0%, 89%);
       --popover-foreground: hsl(0, 0%, 9%);
       --primary: hsl(155, 82%, 30%);
       --primary-foreground: hsl(0, 0%, 100%);
       --secondary: hsl(0, 0%, 92%);
       --secondary-foreground: hsl(0, 0%, 15%);
       --muted: hsl(0, 0%, 75%);
       --muted-foreground: hsl(0, 0%, 35%);
       --accent: hsl(166, 76%, 96%);
       --accent-foreground: hsl(155, 82%, 30%);
       --destructive: hsl(0, 72%, 50%);
       --destructive-foreground: hsl(0, 85%, 97%);
       --border: hsl(0, 0%, 83%);
       --input: hsl(0, 0%, 83%);
       --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, hsl(210, 11%, 15%) 0%, hsl(210, 11%, 22%) 100%);
       --card-shadow: 0 4px 20px hsl(210, 11%, 15%, 0.08);
       --card-shadow-hover: 0 8px 30px hsl(210, 11%, 15%, 0.15);
   
       /* 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;
   }
   
   /* 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)); }
       .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%, 25%);
       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 */
   .btn-hero {
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-color: var(--primary);
       padding: var(--spacing-4) var(--spacing-8);
       font-size: var(--font-size-base);
   }
   
   .btn-hero:hover {
       background-color: hsl(155, 82%, 35%);
       color: var(--primary-foreground);
   }
   
   .btn-hero-outline {
       background-color: transparent;
       color: white;
       border-color: white;
       padding: var(--spacing-4) var(--spacing-8);
       font-size: var(--font-size-base);
   }
   
   .btn-hero-outline:hover {
       background-color: white;
       color: hsl(210, 11%, 15%);
   }
   
   /* 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 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;
   }
   
   /* Logo */
   .site-logo img {
       height: 48px;
       width: auto;
   }
   
   @media (min-width: 768px) {
       .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%, 25%);
   }
   
   /* 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%, 25%);
   }
   
   /* Header Actions */
   .header-actions {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
       flex-shrink: 0;
   }
   
   .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);
   }
   
   .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) {
       .main-nav ul {
           display: flex;
           flex-direction: row;
           align-items: center;
           gap: var(--spacing-1);
       }
   }
   
   .main-nav li {
       width: 100%;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .main-nav li:last-child {
       border-bottom: none;
   }
   
   @media (min-width: 768px) {
       .main-nav li {
           width: auto;
           border-bottom: none;
       }
   }
   
   .main-nav a {
       display: block;
       padding: var(--spacing-3) var(--spacing-4);
       color: var(--primary-foreground);
       font-weight: 500;
       transition: background-color 0.2s ease;
   }
   
   .main-nav a:hover,
   .main-nav .current-menu-item a {
       background-color: rgba(255, 255, 255, 0.1);
       color: var(--primary-foreground);
   }
   
   /* Mobile nav slide animation */
   @media (max-width: 767px) {
       .main-nav.is-open {
           animation: slideDown 0.3s ease;
       }
   }
   
   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ==========================================================================
      Hero Section
      ========================================================================== */
   .hero-section {
       position: relative;
       overflow: hidden;
       background: var(--hero-gradient);
   }
   
   .hero-section::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 33%;
       height: 100%;
       background-color: rgba(255, 255, 255, 0.1);
       transform: skewX(-12deg) translateX(25%);
   }
   
   .hero-section::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 256px;
       height: 256px;
       background-color: rgba(255, 255, 255, 0.05);
       border-radius: 50%;
       transform: translate(-50%, 50%);
   }
   
   .hero-content {
       position: relative;
       z-index: 10;
       padding: var(--spacing-12) 0;
   }
   
   @media (min-width: 1024px) {
       .hero-content {
           padding: var(--spacing-20) 0;
       }
   }
   
   .hero-grid {
       display: grid;
       gap: var(--spacing-8);
       align-items: center;
   }
   
   @media (min-width: 1024px) {
       .hero-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .hero-text {
       color: white;
   }
   
   .hero-text .badge {
       display: inline-block;
       padding: var(--spacing-2) var(--spacing-4);
       background-color: var(--primary);
       color: var(--primary-foreground);
       border-radius: 9999px;
       font-size: var(--font-size-sm);
       font-weight: 600;
       margin-bottom: var(--spacing-6);
   }
   
   .hero-text h1 {
       color: white;
       margin-bottom: var(--spacing-6);
   }
   
   .hero-text p {
       font-size: var(--font-size-lg);
       color: rgba(255, 255, 255, 0.9);
       max-width: 32rem;
       margin-bottom: var(--spacing-6);
   }
   
   .hero-buttons {
       display: flex;
       flex-wrap: wrap;
       gap: var(--spacing-4);
   }
   
   /* Hero Stats */
   .hero-stats {
       display: flex;
       gap: var(--spacing-8);
       padding-top: var(--spacing-6);
   }
   
   .hero-stat-value {
       font-size: var(--font-size-3xl);
       font-weight: 700;
       color: var(--primary);
   }
   
   .hero-stat-label {
       font-size: var(--font-size-sm);
       color: rgba(255, 255, 255, 0.8);
   }
   
   /* Hero Image */
   .hero-image {
       position: relative;
   }
   
   .hero-image img {
       width: 100%;
       height: auto;
       position: relative;
       z-index: 10;
       animation: float 3s ease-in-out infinite;
   }
   
   .hero-image-bg {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .hero-image-bg::before {
       content: '';
       width: 80%;
       aspect-ratio: 1;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.05);
   }
   
   @keyframes float {
       0%, 100% {
           transform: translateY(0);
       }
       50% {
           transform: translateY(-10px);
       }
   }
   
   /* ==========================================================================
      Category Cards Section
      ========================================================================== */
   .category-cards-section {
       padding: var(--spacing-8) 0;
       margin-top: -32px;
       position: relative;
       z-index: 10;
   }
   
   .category-card {
       display: flex;
       align-items: center;
       gap: var(--spacing-4);
       padding: var(--spacing-6);
       background-color: var(--card);
       border-radius: var(--radius);
       box-shadow: var(--card-shadow);
       transition: all 0.3s ease;
       text-decoration: none;
   }
   
   .category-card:hover {
       box-shadow: var(--card-shadow-hover);
       transform: translateY(-4px);
       color: var(--card-foreground);
   }
   
   .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;
   }
   
   .category-card-icon.bg-primary {
       background-color: var(--primary);
   }
   
   .category-card-icon.bg-accent {
       background-color: var(--accent);
       color: var(--accent-foreground);
   }
   
   .category-card:hover .category-card-icon {
       transform: scale(1.1);
   }
   
   .category-card-content h3 {
       font-size: var(--font-size-base);
       font-weight: 700;
       color: var(--card-foreground);
       margin-bottom: var(--spacing-1);
   }
   
   .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-12) 0;
   }
   
   .brand-banners-grid {
       display: grid;
       gap: var(--spacing-6);
   }
   
   @media (min-width: 768px) {
       .brand-banners-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .brand-banner {
       position: relative;
       overflow: hidden;
       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: 55%;
   }
   
   .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: 0;
       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);
   }
   
   /* ==========================================================================
      Featured Products Section
      ========================================================================== */
   .featured-products-section,
   .privileged-products-section {
       padding: var(--spacing-16) 0;
   }
   
   .privileged-products-section {
       background-color: hsl(0, 0%, 94%);
   }
   
   .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-6);
   }
   
   @media (min-width: 640px) {
       .products-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }
   
   @media (min-width: 1024px) {
       .products-grid {
           grid-template-columns: repeat(4, minmax(0, 1fr));
       }
   }
   
   /* ==========================================================================
      Product Card Styles
      ========================================================================== */
   .product-card {
       background-color: var(--card);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--card-shadow);
       transition: all 0.3s ease;
   }
   
   .product-card:hover {
       box-shadow: var(--card-shadow-hover);
       transform: translateY(-4px);
   }
   
   .product-card-image {
       position: relative;
       aspect-ratio: 1;
       padding: var(--spacing-4);
       background-color: hsl(0, 0%, 94%);
   }
   
   .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(--secondary);
       color: var(--secondary-foreground);
   }
   
   .product-badge.sale {
       background-color: var(--primary);
       color: var(--primary-foreground);
   }
   
   .product-wishlist {
       position: absolute;
       top: var(--spacing-3);
       right: var(--spacing-3);
       padding: var(--spacing-2);
       background-color: rgba(255, 255, 255, 0.8);
       border-radius: 50%;
       border: none;
       cursor: pointer;
       opacity: 0;
       transition: opacity 0.2s ease;
       z-index: 10;
   }
   
   .product-card:hover .product-wishlist {
       opacity: 1;
   }
   
   .product-wishlist:hover {
       background-color: white;
   }
   
   .product-wishlist svg {
       color: var(--muted-foreground);
       transition: color 0.2s ease;
   }
   
   .product-wishlist:hover svg {
       color: var(--primary);
   }
   
   .product-card-image img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       transition: transform 0.3s ease;
   }
   
   .product-card:hover .product-card-image img {
       transform: scale(1.05);
   }
   
   .product-card-content {
       padding: var(--spacing-4);
   }
   
   .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: var(--card-foreground);
       margin: var(--spacing-2) 0 var(--spacing-3);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   .product-card-footer {
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
   }
   
   .product-card-price {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
   }
   
   .product-price-current {
       font-size: var(--font-size-xl);
       font-weight: 700;
       color: var(--primary);
   }
   
   .product-price-original {
       font-size: var(--font-size-sm);
       color: var(--muted-foreground);
       text-decoration: line-through;
   }
   
   .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%, 25%);
   }
   
   /* ==========================================================================
      Promo Banner Section
      ========================================================================== */
   .promo-banner-section {
       padding: var(--spacing-8) 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
      ========================================================================== */
   .features-section {
       padding: var(--spacing-12) 0;
       background-color: hsl(0, 0%, 94%);
   }
   
   .features-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--spacing-6);
   }
   
   @media (min-width: 1024px) {
       .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-20) 0;
       background-color: var(--card);
       overflow: hidden;
   }
   
   .innovative-grid {
       display: grid;
       gap: var(--spacing-12);
       align-items: center;
   }
   
   @media (min-width: 1024px) {
       .innovative-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   .innovative-image {
       position: relative;
   }
   
   .innovative-image-corner {
       position: absolute;
       top: -32px;
       right: 0;
       width: 128px;
       height: 128px;
       background-color: var(--primary);
       clip-path: polygon(100% 0, 0 0, 100% 100%);
   }
   
   @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(--card);
       height: 64px;
   }
   
   .newsletter-curve svg {
       position: absolute;
       bottom: calc(100% - 64px);
       width: 100%;
       height: 64px;
   }
   
   .newsletter-content {
       background-color: var(--background);
       padding: var(--spacing-16) 0;
   }
   
   .newsletter-grid {
       display: grid;
       gap: var(--spacing-8);
       align-items: center;
   }
   
   @media (min-width: 1024px) {
       .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(--card);
       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;
       }
       
       .newsletter-image img {
           max-width: 32rem;
           margin-left: auto;
           transform: translateX(32px);
       }
   }
   
   /* ==========================================================================
      Footer Styles
      ========================================================================== */
   .site-footer {
       background-color: var(--secondary);
       color: var(--secondary-foreground);
   }
   
   .footer-main {
       padding: var(--spacing-12) 0;
   }
   
   .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: 1024px) {
       .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: hsl(0, 0%, 15%, 0.7);
       margin-bottom: var(--spacing-4);
   }
   
   .footer-social {
       display: flex;
       gap: var(--spacing-3);
   }
   
   .footer-social a {
       padding: var(--spacing-2);
       background-color: hsl(0, 0%, 15%, 0.1);
       border-radius: 8px;
       transition: all 0.2s ease;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .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);
   }
   
   .footer-links ul {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-2);
   }
   
   .footer-links a {
       font-size: var(--font-size-sm);
       color: hsl(0, 0%, 15%, 0.8);
       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);
   }
   
   .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: hsl(0, 0%, 15%, 0.8);
   }
   
   .footer-contact svg {
       color: var(--primary);
       flex-shrink: 0;
       margin-top: 2px;
   }
   
   .footer-contact a {
       color: hsl(0, 0%, 15%, 0.8);
   }
   
   .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 hsl(0, 0%, 15%, 0.1);
   }
   
   .footer-trust-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-6);
   }
   
   @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: hsl(0, 0%, 15%, 0.05);
       padding: var(--spacing-3) var(--spacing-4);
       border-radius: 8px;
   }
   
   .google-reviews-stars {
       display: flex;
       gap: 2px;
   }
   
   .google-reviews-stars svg {
       color: #facc15;
       fill: #facc15;
   }
   
   .google-reviews-text {
       font-size: var(--font-size-sm);
   }
   
   .google-reviews-text strong {
       color: var(--secondary-foreground);
   }
   
   /* Payment Methods */
   .payment-methods {
       display: flex;
       align-items: center;
       gap: var(--spacing-4);
   }
   
   .payment-methods span {
       font-size: var(--font-size-sm);
       color: var(--secondary-foreground);
   }
   
   .payment-icons {
       display: flex;
       gap: var(--spacing-3);
   }
   
   .payment-icon {
       background-color: white;
       padding: var(--spacing-1) var(--spacing-2);
       border-radius: 4px;
       font-size: var(--font-size-xs);
       font-weight: 700;
   }
   
   .payment-icon.visa { color: hsl(220, 80%, 30%); }
   .payment-icon.mastercard { color: hsl(0, 70%, 40%); }
   .payment-icon.paypal { color: hsl(210, 70%, 35%); }
   .payment-icon.bank { color: hsl(140, 60%, 30%); }
   
   /* Business Hours */
   .business-hours {
       font-size: var(--font-size-sm);
       color: hsl(0, 0%, 15%, 0.8);
   }
   
   .business-hours strong {
       font-weight: 600;
       color: var(--secondary-foreground);
   }
   
   /* Footer Bottom */
   .footer-bottom {
       margin-top: var(--spacing-8);
       padding-top: var(--spacing-6);
       border-top: 1px solid hsl(0, 0%, 15%, 0.1);
   }
   
   .footer-bottom-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--spacing-4);
       font-size: var(--font-size-sm);
       color: hsl(0, 0%, 15%, 0.8);
   }
   
   @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: hsl(0, 0%, 15%, 0.8);
   }
   
   .footer-legal-links a:hover {
       color: var(--primary);
   }
   
   /* ==========================================================================
      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%, 25%);
       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%, 25%);
   }
   
   /* 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 Product Grid */
   .woocommerce ul.products {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: var(--spacing-6);
       list-style: none;
       padding: 0;
       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: 1024px) {
       .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;
       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);
   }
   
   .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);
   }
   
   .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(--border);
}

.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 */
.single-product-wrapper {
    font-family: var(--font-sans);
}

.single-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

@media (min-width: 1024px) {
    .single-product-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-12);
    }
}

/* Product Gallery */
.single-product-gallery {
    position: relative;
}

.single-product-gallery .woocommerce-product-gallery {
    margin-bottom: 0;
}

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

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

.single-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;
}

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

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

/* Product Summary */
.single-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 */
.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) {
    .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;
    align-items: center;
    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%, 25%);
}

.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 (Wishlist, 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.wishlist-btn:hover svg {
    fill: var(--primary);
    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 */
.single-product-tabs {
    margin-top: var(--spacing-12);
}

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

.single-product-tabs .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);
}

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

.single-product-tabs .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;
}

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

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

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

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

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

.single-product-wrapper .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: 1024px) {
    .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: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 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%, 25%);
}

.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;
    }
}