/* Method 1: Target all footers on WooCommerce pages */
.woocommerce-page .site-footer,
.woocommerce-page footer {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Method 2: Override container restrictions specifically for footer */
.site-footer .container,
.footer .container,
.woocommerce-footer .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Method 3: Target your custom wrapper (from your functions.php) */
.site-footer .mexican-tacos-container,
.footer .mexican-tacos-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 20px 0; /* Keep vertical padding, remove horizontal */
}

/* Method 4: Force full width for footer sections */
.site-footer,
.main-footer,
.footer-wrapper {
    width: 100vw; /* Full viewport width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Method 5: Simple override for most themes */
footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}











/* Method 1: Target the main WooCommerce container */
.woocommerce.single-product {
    width: 100%;
    margin: 0 auto;
    
}
 
/* Method 2: Target shop page specifically */
.woocommerce-shop .site-content {
    width: 100%;
    margin: 0 auto;
      padding: 0 20px;
}

 
/* Method 2: Target single product page specifically */
.single-product .site-content {
    width: 100%;
    margin: 0 auto;
          padding: 0 20px;
}
 
/* Mobile adjustments */
@media (max-width: 768px) {
    .woocommerce.single-product {
        padding: 0 10px;
    }
    
    .woocommerce.single-product .product {
        flex-direction: column;
        gap: 20px;
    }
    
    .woocommerce-product-gallery,
    .summary.entry-summary {
        width: 100%;
    }
}

/* ==========================================================================
   AI HEADER CORE FLEX GRID CSS - Complete CSS File
   Includes: Grid System + WooCommerce Orange Theme
   ========================================================================== */

.middle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40%; /* Optional: minimum height to see the centering effect */
    height: 100%; /* Takes full height of parent container */
    width:100%;
}

/* Alternative method using grid */
.middle-grid {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 30px; /* Optional: minimum height to see the centering effect */
    height: 100%; /* Takes full height of parent container */
}

.middle-grid-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 90px; /* Optional: minimum height to see the centering effect */
    height: 130px; /* Takes full height of parent container */
}

.middle-bullet-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 130px; /* Optional: minimum height to see the centering effect */
    height: 190px; /* Takes full height of parent container */
}

.middle-large-banner {
    display: grid;
    place-items: center;
    width:100%;
    min-height: 480px; /* Optional: minimum height to see the centering effect */
}

/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  font-family: Ubuntu, sans-serif;
}

html {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  
}

body {
  margin: 0;
  padding: 0;
  font-size: .8em;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   WOOCOMMERCE ORANGE THEME - MODERN & FANCY DESIGN
   ========================================================================== */

/* CSS Variables for Orange Theme */
:root {
  --wc-orange-primary: #ff6b35;
  --wc-orange-secondary: #ff8c42;
  --wc-orange-dark: #e55a2b;
  --wc-orange-light: #ffab7d;
  --wc-white: #ffffff;
  --wc-light-grey: #f8f9fa;
  --wc-medium-grey: #dee2e6;
  --wc-dark-grey: #6c757d;
  --wc-black: #212529;
  --wc-border-radius: 0px;
  --wc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --wc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --wc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --wc-shadow-lg: 0 8px 24px rgba(255, 107, 53, 0.2);
  --wc-gradient: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
}

/* ==========================================================================
   MODERN WOOCOMMERCE BUTTONS - PREMIUM DESIGN
   ========================================================================== */

/* Primary Buttons - All variations with fancy styling */
.woocommerce .button,
.woocommerce button,
.woocommerce input[type="submit"],
.woocommerce input[type="button"],
.woocommerce a.button,
.woocommerce-page .button,
.woocommerce-page button,
.woocommerce-page input[type="submit"],
.woocommerce-page input[type="button"],
.woocommerce-page a.button,
button.single_add_to_cart_button,
.single_add_to_cart_button,
.add_to_cart_button,
.product_type_simple,
.product_type_variable,
.checkout-button,
.wc-proceed-to-checkout a,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--wc-gradient) !important;
  color: var(--wc-white) !important;
  border: none !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
  transition: var(--wc-transition) !important;
  box-shadow: var(--wc-shadow-md) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 48px !important;
}

/* Button hover effects with scale and glow */
.woocommerce .button:hover,
.woocommerce button:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover,
.woocommerce-page button:hover,
.woocommerce-page input[type="submit"]:hover,
.woocommerce-page input[type="button"]:hover,
.woocommerce-page a.button:hover,
button.single_add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.product_type_simple:hover,
.product_type_variable:hover,
.checkout-button:hover,
.wc-proceed-to-checkout a:hover {
  background: linear-gradient(135deg, #e55a2b 0%, #ff6b35 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--wc-shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4) !important;
}

/* Button active state */
.woocommerce .button:active,
.woocommerce button:active,
button.single_add_to_cart_button:active {
  transform: translateY(-1px) scale(1.01) !important;
}

/* ==========================================================================
   MODERN WOOCOMMERCE LINKS WITH SMOOTH ANIMATIONS
   ========================================================================== */

.woocommerce a,
.woocommerce-page a,
.woocommerce .woocommerce-loop-product__title,
.woocommerce h3 a,
.woocommerce h2 a {
  color: var(--wc-orange-primary) !important;
  text-decoration: none !important;
  transition: var(--wc-transition) !important;
  position: relative !important;
}

.woocommerce a:hover,
.woocommerce-page a:hover,
.woocommerce .woocommerce-loop-product__title:hover,
.woocommerce h3 a:hover,
.woocommerce h2 a:hover {
  color: var(--wc-orange-dark) !important;
  transform: translateX(3px) !important;
}

/* Fancy underline animation */
.woocommerce a:hover::after,
.woocommerce-page a:hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--wc-gradient);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

/* ==========================================================================
   PREMIUM PRODUCT CARDS WITH GLASS MORPHISM
   ========================================================================== */

.woocommerce .products li,
.woocommerce ul.products li,
.woocommerce-page .products li,
.woocommerce-page ul.products li,
.woocommerce .product,
.woocommerce-page .product,
li.product,
.product {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 24px !important;
  margin-bottom: 30px !important;
  transition: var(--wc-transition) !important;
  box-shadow: var(--wc-shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Product card hover with 3D effect */
.woocommerce .products li:hover,
.woocommerce ul.products li:hover,
.woocommerce-page .products li:hover,
.woocommerce-page ul.products li:hover,
.woocommerce .product:hover,
.woocommerce-page .product:hover,
li.product:hover,
.product:hover {
  box-shadow: var(--wc-shadow-lg) !important;
  transform: translateY(-8px) rotateX(2deg) !important;
  border-color: var(--wc-orange-light) !important;
}

/* Gradient overlay on hover */
.woocommerce .products li:hover::before,
.woocommerce ul.products li:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 140, 66, 0.05) 100%);
  pointer-events: none;
}

/* Product titles with premium typography */
.woocommerce .woocommerce-loop-product__title,
.woocommerce h3,
.woocommerce h2.woocommerce-loop-product__title,
.woocommerce-page .woocommerce-loop-product__title,
.woocommerce-page h3,
.woocommerce-page h2.woocommerce-loop-product__title {
  color: var(--wc-black) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
  transition: var(--wc-transition) !important;
}

/* ==========================================================================
   ELEGANT PRICE DISPLAYS WITH GRADIENTS
   ========================================================================== */

.woocommerce .price,
.woocommerce .price .amount,
.woocommerce .price .woocommerce-Price-amount,
.woocommerce-page .price,
.woocommerce-page .price .amount,
.woocommerce-page .price .woocommerce-Price-amount,
.price,
.amount,
.woocommerce-Price-amount,
span.price,
p.price,
.price ins,
.price ins .amount,
.price ins .woocommerce-Price-amount {
  background: var(--wc-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  display: inline-block !important;
}

.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce-page .price del,
.woocommerce-page .price del .amount,
.price del,
.price del .amount {
  color: var(--wc-dark-grey) !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

/* ==========================================================================
   MODERN SALE BADGES WITH ANIMATION
   ========================================================================== */

.woocommerce span.onsale,
.woocommerce-page span.onsale,
span.onsale,
.onsale {
  background: var(--wc-gradient) !important;
  color: var(--wc-white) !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  animation: pulse 2s infinite !important;
  box-shadow: var(--wc-shadow-md) !important;
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
}

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

/* ==========================================================================
   PREMIUM TABLE STYLING
   ========================================================================== */

.woocommerce table,
.woocommerce-page table,
.woocommerce-cart table,
.shop_table,
table.cart,
table.shop_table {
  background: var(--wc-white) !important;
  border-radius: var(--wc-border-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--wc-shadow-md) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.woocommerce table th,
.woocommerce-page table th,
.woocommerce-cart table th,
.shop_table th,
table.cart th,
table.shop_table th {
  background: var(--wc-gradient) !important;
  color: var(--wc-white) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 20px !important;
  border: none !important;
  font-size: 14px !important;
}

.woocommerce table td,
.woocommerce-page table td,
.woocommerce-cart table td,
.shop_table td,
table.cart td,
table.shop_table td {
  padding: 20px !important;
  border-bottom: 1px solid var(--wc-medium-grey) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  vertical-align: middle !important;
  transition: var(--wc-transition) !important;
}

.woocommerce table tr:hover td,
.woocommerce-page table tr:hover td {
  background-color: rgba(255, 107, 53, 0.05) !important;
}

/* ==========================================================================
   ELEGANT CART TOTALS WITH GLASSMORPHISM
   ========================================================================== */

.cart-collaterals,
.cart_totals,
.woocommerce .cart-collaterals,
.woocommerce .cart_totals,
.woocommerce-page .cart-collaterals,
.woocommerce-page .cart_totals {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 32px !important;
  box-shadow: var(--wc-shadow-lg) !important;
  margin-top: 30px !important;
  position: relative !important;
  overflow: hidden !important;
}

.cart_totals h2,
.woocommerce .cart_totals h2,
.woocommerce-page .cart_totals h2 {
  color: var(--wc-black) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid transparent !important;
  border-image: var(--wc-gradient) 1 !important;
  position: relative !important;
}

/* ==========================================================================
   MODERN FORM INPUTS WITH FLOATING LABELS
   ========================================================================== */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page textarea,
.woocommerce-page select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.input-text,
.qty {
  border: 2px solid var(--wc-medium-grey) !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  transition: var(--wc-transition) !important;
  background-color: var(--wc-white) !important;
  color: var(--wc-black) !important;
  box-shadow: var(--wc-shadow-sm) !important;
  position: relative !important;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input[type="text"]:focus,
.woocommerce-page input[type="email"]:focus,
.woocommerce-page input[type="tel"]:focus,
.woocommerce-page input[type="password"]:focus,
.woocommerce-page input[type="number"]:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.input-text:focus,
.qty:focus {
  border-color: var(--wc-orange-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15), var(--wc-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   PREMIUM CHECKOUT DESIGN
   ========================================================================== */

.woocommerce-checkout,
.woocommerce-page.woocommerce-checkout,
#customer_details,
#order_review,
#payment {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  padding: 00px !important;
  border-radius: var(--wc-border-radius) !important;
  margin-bottom: 30px !important;
  box-shadow: var(--wc-shadow-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.woocommerce-checkout h3,
.woocommerce-page.woocommerce-checkout h3,
#order_review h3,
#payment h3 {
  color: var(--wc-black) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid transparent !important;
  border-image: var(--wc-gradient) 1 !important;
}

/* ==========================================================================
   ELEGANT NOTIFICATION MESSAGES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  border-radius: var(--wc-border-radius) !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  border: none !important;
  box-shadow: var(--wc-shadow-md) !important;
  position: relative !important;
  overflow: hidden !important;
}

.woocommerce-message,
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 66, 0.1) 100%) !important;
  color: var(--wc-orange-dark) !important;
  border-left: 4px solid var(--wc-orange-primary) !important;
}

.woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
  background: rgba(108, 117, 139, 0.1) !important;
  color: var(--wc-dark-grey) !important;
  border-left: 4px solid var(--wc-dark-grey) !important;
}

.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #721c24 !important;
  border-left: 4px solid #dc3545 !important;
}

/* ==========================================================================
   MODERN PAGINATION WITH SMOOTH ANIMATIONS
   ========================================================================== */

.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination,
.page-numbers {
  margin: 10px 0 !important;
  text-align: center !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li,
.page-numbers li {
  display: inline-block !important;
  margin: 0 6px !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.page-numbers a,
.page-numbers span {
  background: var(--wc-white) !important;
  color: var(--wc-black) !important;
  border: 0px solid var(--wc-medium-grey) !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 12px 18px !important;
  text-decoration: none !important;
  transition: var(--wc-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  font-weight: 600 !important;
  box-shadow: var(--wc-shadow-sm) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current,
.page-numbers a:hover,
.page-numbers .current {
  background: var(--wc-gradient) !important;
  color: var(--wc-white) !important;
 /* border-color: var(--wc-orange-primary) !important; */
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: var(--wc-shadow-lg) !important;
}

/* ==========================================================================
   ELEGANT WIDGETS WITH CARD DESIGN
   ========================================================================== */

.woocommerce .widget,
.woocommerce-page .widget,
.widget {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: var(--wc-border-radius) !important;
  padding: 28px !important;
  margin-bottom: 32px !important;
  box-shadow: var(--wc-shadow-md) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: var(--wc-transition) !important;
}

.woocommerce .widget:hover,
.woocommerce-page .widget:hover,
.widget:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wc-shadow-lg) !important;
}

.woocommerce .widget h3,
.woocommerce .widget h4,
.woocommerce-page .widget h3,
.woocommerce-page .widget h4,
.widget h3,
.widget h4 {
  color: var(--wc-black) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid transparent !important;
  border-image: var(--wc-gradient) 1 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .woocommerce .products li,
  .woocommerce ul.products li,
  .woocommerce-page .products li,
  .woocommerce-page ul.products li,
  .woocommerce .product,
  .woocommerce-page .product,
  li.product,
  .product {
    margin-bottom: 20px !important;
    padding: 20px !important;
  }
  
  .cart-collaterals,
  .cart_totals,
  .woocommerce .cart-collaterals,
  .woocommerce .cart_totals,
  .woocommerce-page .cart-collaterals,
  .woocommerce-page .cart_totals,
  .woocommerce .widget,
  .woocommerce-page .widget,
  .widget {
    padding: 24px !important;
    margin-bottom: 20px !important;
  }
  
  .woocommerce-checkout,
  .woocommerce-page.woocommerce-checkout,
  #customer_details,
  #order_review,
  #payment {
    padding: 24px !important;
    margin-bottom: 20px !important;
  }

  .woocommerce .button,
  .woocommerce button,
  button.single_add_to_cart_button,
  .single_add_to_cart_button,
  .add_to_cart_button {
    padding: 16px 24px !important;
    font-size: 16px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}


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

        :root {
            --primary-orange: #ff6b35;
            --secondary-orange: #ff8c42;
            --primary-black: #2c2c2c;
            --secondary-black: #1a1a1a;
            --primary-white: #ffffff;
            --light-grey: #f5f5f5;
            --medium-grey: #cccccc;
            --dark-grey: #666666;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--primary-black);
            background-color: var(--primary-white);
        }

        /* Header Styles */
        .header {
            background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
            color: var(--primary-white);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-menu a {
            color: var(--primary-white);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            font-size:21px;
            border-radius: 25px;
        }

        .nav-menu a:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .cart-icon {
            background: var(--primary-white);
            color: var(--primary-orange);
            padding: 0.8rem;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .cart-icon:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--secondary-black);
            color: var(--primary-white);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(44,44,44,0.7), rgba(44,44,44,0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23ff6b35" width="1200" height="600"/><circle fill="%23ff8c42" cx="300" cy="150" r="80"/><circle fill="%23ff8c42" cx="900" cy="450" r="60"/><path fill="%23ffffff" opacity="0.1" d="M0,300 Q300,200 600,300 T1200,300 V600 H0 Z"/></svg>');
            background-size: cover;
            background-position: center;
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--primary-white);
        }

        .hero-content h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            animation: fadeInUp 1s ease-out;
        }

        .hero-content p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        .cta-button {
            background: var(--primary-orange);
            color: var(--primary-white);
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            animation: fadeInUp 1s ease-out 0.6s both;
        }

        .cta-button:hover {
            background: var(--secondary-orange);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255,107,53,0.4);
        }

        /* Product Grid */
        .products-section {
            padding: 4rem 0;
            background: var(--light-grey);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: var(--primary-black);
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--primary-orange);
            border-radius: 2px;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .product-card {
            background: var(--primary-white);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .product-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, var(--primary-orange), var(--secondary-orange));
            position: relative;
            overflow: hidden;
        }

        .product-image::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: shimmer 3s infinite;
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: var(--primary-black);
        }

        .product-description {
            color: var(--dark-grey);
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-orange);
            margin-bottom: 1rem;
        }

        .add-to-cart {
            width: 100%;
            background: var(--primary-orange);
            color: var(--primary-white);
            border: none;
            padding: 0.8rem;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-to-cart:hover {
            background: var(--secondary-orange);
            transform: translateY(-2px);
        }

        /* Features Section */
        .features {
            padding: 4rem 0;
            background: var(--primary-white);
        }

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

        .feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: 15px;
            background: var(--light-grey);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary-orange);
            margin-bottom: 1rem;
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: var(--primary-black);
        }

        .feature-description {
            color: var(--dark-grey);
            line-height: 1.6;
        }

        /* Footer */
        .footer {
            background: var(--primary-black);
            color: var(--primary-white);
            padding: 3rem 0 1rem;
            text-align: center;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h3 {
            color: var(--primary-orange);
            margin-bottom: 1rem;
        }

        .footer-section p,
        .footer-section a {
            color: var(--medium-grey);
            text-decoration: none;
            line-height: 1.8;
        }

        .footer-section a:hover {
            color: var(--primary-orange);
        }

        .footer-bottom {
            border-top: 1px solid var(--dark-grey);
            padding-top: 1rem;
            color: var(--medium-grey);
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes shimmer {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Enhanced Fancy Product Pages */
        .fancy-product {
            background: linear-gradient(135deg, var(--light-grey) 0%, var(--primary-white) 100%);
        }

        .fancy-product-detail {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 3rem 2rem;
            background: var(--primary-white);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            overflow: hidden;
            position: relative;
        }

        .fancy-product-detail::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-orange), var(--secondary-orange), var(--primary-orange));
        }

        .fancy-gallery {
            position: relative;
        }

        .fancy-main-image {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
            box-shadow: 0 15px 35px rgba(255,107,53,0.3);
            transition: all 0.3s ease;
        }

        .fancy-main-image:hover {
            transform: scale(1.02);
            box-shadow: 0 20px 50px rgba(255,107,53,0.4);
        }

        .fancy-main-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
        }

        .fancy-main-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(transparent, rgba(0,0,0,0.1));
        }

        .image-zoom-indicator {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.9);
            padding: 8px;
            border-radius: 50%;
            font-size: 1.2rem;
            color: var(--primary-orange);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .image-zoom-indicator:hover {
            background: var(--primary-white);
            transform: scale(1.1);
        }

        .fancy-thumbnails {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            padding: 0.5rem 0;
        }

        .fancy-thumbnail {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, var(--medium-grey), var(--dark-grey));
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 3px solid transparent;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .fancy-thumbnail::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
        }

        .fancy-thumbnail:hover,
        .fancy-thumbnail.active {
            border-color: var(--primary-orange);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255,107,53,0.3);
        }

        .fancy-product-info {
            padding: 2rem;
        }

        .product-badge {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary-orange), var(--secondary-orange));
            color: var(--primary-white);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .fancy-product-title {
            font-size: 3rem;
            font-weight: bold;
            color: var(--primary-black);
            margin-bottom: 1rem;
            line-height: 1.2;
            background: linear-gradient(135deg, var(--primary-black), var(--dark-grey));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .fancy-price-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .fancy-price {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-orange);
        }

        .original-price {
            font-size: 1.5rem;
            color: var(--dark-grey);
            text-decoration: line-through;
        }

        .discount-badge {
            background: #e74c3c;
            color: var(--primary-white);
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.9rem;
            font-weight: bold;
        }

        .fancy-rating {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            padding: 1rem;
            background: var(--light-grey);
            border-radius: 10px;
        }

        .fancy-stars {
            color: var(--primary-orange);
            font-size: 1.5rem;
            letter-spacing: 2px;
        }

        .rating-details {
            color: var(--dark-grey);
            font-weight: 500;
        }

        .trust-badges {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .trust-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--light-grey);
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--dark-grey);
        }

        .fancy-description {
            color: var(--primary-black);
            line-height: 1.8;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        .highlight-features {
            background: linear-gradient(135deg, var(--light-grey), var(--primary-white));
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            border-left: 4px solid var(--primary-orange);
        }

        .highlight-features h4 {
            color: var(--primary-orange);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            color: var(--primary-black);
        }

        .feature-list li::before {
            content: '✓';
            color: var(--primary-orange);
            font-weight: bold;
            font-size: 1.2rem;
        }

        .fancy-options {
            margin-bottom: 2rem;
        }

        .fancy-option-group {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: var(--light-grey);
            border-radius: 10px;
        }

        .fancy-option-label {
            font-weight: bold;
            color: var(--primary-black);
            margin-bottom: 1rem;
            display: block;
            font-size: 1.1rem;
        }

        .option-buttons {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .option-button {
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--medium-grey);
            background: var(--primary-white);
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .option-button:hover,
        .option-button.selected {
            border-color: var(--primary-orange);
            background: var(--primary-orange);
            color: var(--primary-white);
            transform: translateY(-2px);
        }

        .fancy-quantity {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: var(--light-grey);
            border-radius: 10px;
        }

        .fancy-quantity-label {
            font-weight: bold;
            color: var(--primary-black);
            font-size: 1.1rem;
        }

        .fancy-quantity-controls {
            display: flex;
            align-items: center;
            border: 2px solid var(--primary-orange);
            border-radius: 50px;
            overflow: hidden;
            background: var(--primary-white);
        }

        .fancy-quantity-btn {
            background: var(--primary-orange);
            border: none;
            padding: 1rem 1.5rem;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-white);
            transition: all 0.3s ease;
        }

        .fancy-quantity-btn:hover {
            background: var(--secondary-orange);
        }

        .fancy-quantity-input {
            border: none;
            padding: 1rem;
            width: 80px;
            text-align: center;
            font-size: 1.1rem;
            font-weight: bold;
            background: var(--primary-white);
        }

        .fancy-actions {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .fancy-add-to-cart {
            flex: 2;
            background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange));
            color: var(--primary-white);
            border: none;
            padding: 1.5rem 2rem;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .fancy-add-to-cart:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255,107,53,0.4);
        }

        .wishlist-btn, .compare-btn {
            flex: 1;
            background: var(--primary-white);
            border: 2px solid var(--medium-grey);
            padding: 1.5rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            color: var(--dark-grey);
        }

        .wishlist-btn:hover, .compare-btn:hover {
            border-color: var(--primary-orange);
            color: var(--primary-orange);
            transform: translateY(-3px);
        }

        .security-info {
            display: flex;
            justify-content: space-between;
            padding: 1.5rem;
            background: linear-gradient(135deg, var(--light-grey), var(--primary-white));
            border-radius: 10px;
            margin-bottom: 2rem;
        }

        .security-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--dark-grey);
            font-size: 0.9rem;
        }

        .fancy-meta {
            border-top: 2px solid var(--light-grey);
            padding-top: 2rem;
        }

        .fancy-meta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .fancy-meta-item {
            display: flex;
            justify-content: space-between;
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--light-grey);
        }

        .fancy-meta-label {
            font-weight: bold;
            color: var(--primary-black);
        }

        .fancy-meta-value {
            color: var(--dark-grey);
        }

        /* Enhanced Tabs */
        .fancy-tabs {
            max-width: 1400px;
            margin: 4rem auto 0;
            padding: 0 2rem;
        }

        .fancy-tab-nav {
            display: flex;
            background: var(--primary-white);
            border-radius: 15px 15px 0 0;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .fancy-tab-btn {
            flex: 1;
            background: var(--light-grey);
            border: none;
            padding: 1.5rem 2rem;
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--dark-grey);
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 4px solid transparent;
            position: relative;
        }

        .fancy-tab-btn::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-orange), var(--secondary-orange));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .fancy-tab-btn.active {
            background: var(--primary-white);
            color: var(--primary-black);
        }

        .fancy-tab-btn.active::before {
            transform: scaleX(1);
        }

        .fancy-tab-content {
            background: var(--primary-white);
            padding: 3rem;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            min-height: 300px;
        }
        .single-product {
            padding: 4rem 0;
            background: var(--light-grey);
        }

        .product-detail {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            background: var(--primary-white);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .product-gallery {
            position: relative;
        }

        .main-product-image {
            width: 100%;
            height: 400px;
            background: linear-gradient(45deg, var(--primary-orange), var(--secondary-orange));
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .main-product-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
        }

        .thumbnail-gallery {
            display: flex;
            gap: 0.5rem;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, var(--medium-grey), var(--dark-grey));
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .thumbnail:hover,
        .thumbnail.active {
            border-color: var(--primary-orange);
            transform: scale(1.05);
        }

        .product-details-content {
            padding: 2rem;
        }

        .product-title-page {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-black);
            margin-bottom: 1rem;
        }

        .product-price-page {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-orange);
            margin-bottom: 1.5rem;
        }

        .product-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .stars {
            color: var(--primary-orange);
            font-size: 1.2rem;
        }

        .rating-text {
            color: var(--dark-grey);
        }

        .product-description-full {
            color: var(--primary-black);
            line-height: 1.8;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        .product-options {
            margin-bottom: 2rem;
        }

        .option-group {
            margin-bottom: 1.5rem;
        }

        .option-label {
            font-weight: bold;
            color: var(--primary-black);
            margin-bottom: 0.5rem;
            display: block;
        }

        .option-select {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--medium-grey);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--primary-white);
            transition: border-color 0.3s ease;
        }

        .option-select:focus {
            outline: none;
            border-color: var(--primary-orange);
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .quantity-label {
            font-weight: bold;
            color: var(--primary-black);
        }

        .quantity-controls {
            display: flex;
            align-items: center;
            border: 2px solid var(--medium-grey);
            border-radius: 8px;
            overflow: hidden;
        }

        .quantity-btn {
            background: var(--light-grey);
            border: none;
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-black);
            transition: background 0.3s ease;
        }

        .quantity-btn:hover {
            background: var(--primary-orange);
            color: var(--primary-white);
        }

        .quantity-input {
            border: none;
            padding: 0.5rem;
            width: 60px;
            text-align: center;
            font-size: 1rem;
            background: var(--primary-white);
        }

        .add-to-cart-single {
            width: 100%;
            background: var(--primary-orange);
            color: var(--primary-white);
            border: none;
            padding: 1.2rem 2rem;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 1rem;
        }

        .add-to-cart-single:hover {
            background: var(--secondary-orange);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255,107,53,0.4);
        }

        .product-meta {
            border-top: 1px solid var(--medium-grey);
            padding-top: 1.5rem;
        }

        .meta-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            color: var(--dark-grey);
        }

        .meta-label {
            font-weight: bold;
        }

        /* Product Tabs */
        .product-tabs {
            max-width: 1200px;
            margin: 3rem auto 0;
            padding: 0 2rem;
        }

        .tab-navigation {
            display: flex;
            background: var(--primary-white);
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .tab-button {
            flex: 1;
            background: var(--light-grey);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--dark-grey);
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }

        .tab-button.active {
            background: var(--primary-white);
            color: var(--primary-black);
            border-bottom-color: var(--primary-orange);
        }

        .tab-content {
            background: var(--primary-white);
            padding: 2rem;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            min-height: 200px;
        }

        .tab-panel {
            display: none;
            line-height: 1.8;
            color: var(--primary-black);
        }

        .tab-panel.active {
            display: block;
            animation: fadeIn 0.3s ease-in-out;
        }

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

        /* Reviews Section */
        .reviews-section h3 {
            color: var(--primary-orange);
            margin-bottom: 1.5rem;
        }

        .review-item {
            background: var(--light-grey);
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .reviewer-name {
            font-weight: bold;
            color: var(--primary-black);
        }

        .review-date {
            color: var(--dark-grey);
            font-size: 0.9rem;
        }

        .review-stars {
            color: var(--primary-orange);
            margin-bottom: 0.5rem;
        }

        /* Related Products */
        .related-products {
            padding: 4rem 0;
            background: var(--primary-white);
        }

        .related-products .section-title {
            margin-bottom: 2rem;
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .related-product {
            background: var(--light-grey);
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .related-product:hover {
            transform: translateY(-5px);
        }

        .related-image {
            width: 100%;
            height: 150px;
            background: linear-gradient(45deg, var(--primary-orange), var(--secondary-orange));
        }

        .related-info {
            padding: 1rem;
        }

        .related-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: var(--primary-black);
        }

        .related-price {
            color: var(--primary-orange);
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 1rem;
            }

            .nav-menu {
                flex-direction: column;
                gap: 1rem;
                align-items: center;
                width: 100%;
                text-align: center;
            }

            .nav-menu a {
                display: block;
                width: 100%;
                text-align: center;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

            .hero-content p {
                font-size: 1.2rem;
            }

            .products-grid {
                grid-template-columns: 1fr;
            }
        }