/*
Theme Name: Starhouse
Theme URI: https://example.com/starhouse
Author: Gemini
Author URI: https://gemini.google.com
Description: Theme e-commerce premium para WooCommerce con diseño elegante, widgets personalizados, y soporte completo para Gutenberg. Optimizado para tiendas de materiales decorativos y acabados arquitectónicos. Integración híbrida con productos WooCommerce.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, woocommerce, custom-theme, block-editor, accessibility-ready, translation-ready, responsive-design, custom-widgets
Text Domain: starhouse
Domain Path: /languages
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
# Normalize
# Typography
# Elements
# Forms
# Navigation
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
  ## Posts and pages
  ## Comments
# Media
# Captions
# Galleries
# Site Header
# Site Footer
# Layout
# Colors
# Design System & Tokens
# Premium Luxury Design
--------------------------------------------------------------*/

/* === FUENTES === */
/* Fonts loaded via Google Fonts in inc/enqueue.php */
/* Inter and Montserrat are loaded from Google Fonts API */

/* Ensure font is loaded or fallback */
@font-face {
    font-family: "star";
    src: url("../../plugins/woocommerce/assets/fonts/star.eot");
    src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"),
        url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"),
        url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"),
        url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* === PALETA DE COLORES PREMIUM === */

    /* Dorados Elegantes */
    --gold-light: hsl(45, 45%, 85%);
    /* Champagne claro */
    --gold: hsl(32, 36%, 52%);
    /* Oro medio */
    --gold-dark: hsl(28, 40%, 38%);
    /* Oro oscuro */
    --primary: hsl(32, 36%, 52%);
    /* Alias de gold */
    --primary-hsl: 32, 36%, 52%;

    /* Tonos Complementarios */
    --accent: hsl(158, 19%, 49%);
    /* Teal elegante */
    --teal: hsl(158, 19%, 49%);

    /* Tonos Tierra Sofisticados */
    --earth-terracota: hsl(15, 35%, 65%);
    /* Terracota suave */
    --earth-beige: hsl(38, 25%, 75%);
    /* Beige cálido */
    --earth-tone: hsl(32, 29%, 50%);

    /* Backgrounds Premium (Crema/Marfil) */
    --background: hsl(40, 25%, 97%);
    /* Crema suave (no blanco puro) */
    --background-alt: hsl(35, 20%, 94%);
    /* Beige muy claro */
    --foreground: hsl(0, 0%, 5%);
    /* Negro suave */
    --primary-foreground: hsl(0, 0%, 98%);
    /* Blanco/crema para texto sobre primary */
    --accent-foreground: hsl(0, 0%, 98%);
    /* Blanco/crema para texto sobre accent */

    /* Colores Neutrales Refinados */
    --secondary: hsl(40, 15%, 93%);
    /* Gris cálido claro */
    --muted: hsl(35, 12%, 90%);
    /* Gris beige */
    --muted-foreground: hsl(30, 8%, 45%);
    /* Gris medio cálido */

    /* Versiones Desaturadas (Más Sofisticadas) */
    --primary-muted: hsl(32, 20%, 52%);
    /* Dorado desaturado */
    --accent-muted: hsl(158, 10%, 49%);
    /* Teal desaturado */

    /* Estados y Utilidades */
    --destructive: hsl(0, 84%, 60%);
    --border: hsl(35, 15%, 85%);
    /* Border cálido */
    --border-gold: hsl(32, 36%, 52%);
    /* Border dorado para elementos premium */
    --ring: var(--primary);

    /* === RADIO DE BORDES === */
    --radius-xl: 1rem;
    /* 16px - Extra grande */
    --radius-lg: 0.75rem;
    /* 12px - Grande */
    --radius-md: 0.625rem;
    /* 10px - Medio */
    --radius-sm: 0.5rem;
    /* 8px - Pequeño */
    --radius-full: 9999px;
    /* Circular completo */

    /* === SISTEMA DE ESPACIADO GENEROSO === */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 4rem;
    /* 64px */
    --spacing-xl: 6rem;
    /* 96px */
    --spacing-2xl: 8rem;
    /* 128px */

    /* === TIPOGRAFÍA === */
    --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Usando Inter para headings y Montserrat para cuerpo */

    /* === TIMING DE ANIMACIONES ELEGANTES === */
    --duration-instant: 150ms;
    --duration-fast: 300ms;
    --duration-normal: 450ms;
    --duration-slow: 600ms;
    --duration-slower: 800ms;

    /* === EASING SUAVE === */
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-elegant: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* === ESTILOS GLOBALES PREMIUM === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.7;
    /* Aumentado de 1.6 a 1.7 para más respiro */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === TIPOGRAFÍA PREMIUM === */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    /* Serif elegante para títulos */
    letter-spacing: 0.02em;
    /* Tracking elegante */
    font-weight: 600;
    line-height: 1.3;
    color: var(--foreground);
    margin-top: 0;
}

h1 {
    font-size: 2.5rem;
    /* 40px */
    font-weight: 700;
    letter-spacing: 0.015em;
}

h2 {
    font-size: 2rem;
    /* 32px */
    letter-spacing: 0.02em;
}

h3 {
    font-size: 1.5rem;
    /* 24px */
    letter-spacing: 0.025em;
}

/* === TABLAS === */
table {
    font-family: var(--font-sans);
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    font-family: var(--font-sans);
    padding: 0.75rem;
}

th {
    font-weight: 600;
}

td {
    font-weight: 400;
}

p,
li,
span {
    font-family: var(--font-sans);
    /* Sans-serif para cuerpo */
    line-height: 1.8;
    /* Espaciado generoso */
}

.container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    /* Espaciado generoso */
    padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--spacing-lg);
        /* Más generoso en desktop */
        padding-right: var(--spacing-lg);
    }
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--duration-normal) var(--easing-elegant);
}

a:hover {
    color: var(--accent-foreground);
}

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

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 1. Promo Banner --- */
/* Banner promocional con countdown timer */
.promo-banner {
    background: var(--destructive);
    color: var(--primary-foreground);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Fondo animado sutil */
.promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.promo-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .promo-banner-content {
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
    }
}

/* Título con icono */
.promo-banner-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 768px) {
    .promo-banner-title-wrapper {
        justify-content: flex-start;
    }
}

.promo-flame-icon {
    display: inline-flex;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-size: 1.25rem;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.promo-banner-text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.025em;
    margin: 0;
}

@media (min-width: 768px) {
    .promo-banner-text {
        font-size: 1.125rem;
    }
}

/* Countdown wrapper */
.promo-countdown-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.promo-countdown-label {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.025em;
}

/* Countdown container */
.countdown {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

@media (min-width: 768px) {
    .countdown {
        gap: 0.5rem;
    }
}

/* Cada unidad de tiempo */
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Número del countdown - Diseño premium con cajas */
.countdown-number {
    background: rgba(255, 255, 255, 0.95);
    color: var(--destructive);
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    min-width: 48px;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: all 300ms ease;
    position: relative;
    overflow: hidden;
}

/* Borde dorado sutil */
.countdown-number::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.375rem;
    border: 1px solid var(--primary);
    opacity: 0.15;
    pointer-events: none;
}

/* Animación cuando se actualiza el número */
.countdown-number.countdown-updating {
    animation: flip 300ms ease;
}

@keyframes flip {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(90deg);
        opacity: 0.5;
    }

    100% {
        transform: rotateX(0deg);
    }
}

/* Label debajo del número */
.countdown-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-top: 0.125rem;
}

/* Separadores entre números */
.countdown-separator {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.8;
    margin: 0 0.125rem;
    align-self: center;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .countdown-separator {
        margin: 0 0.25rem;
        font-size: 1.75rem;
    }
}

/* Responsive para móviles */
@media (max-width: 767px) {
    .promo-banner {
        padding: 0.875rem 0;
    }

    .promo-banner-text {
        font-size: 0.875rem;
    }

    .promo-countdown-label {
        font-size: 0.75rem;
    }

    .countdown-number {
        min-width: 40px;
        font-size: 1.125rem;
        padding: 0.375rem 0.5rem;
    }

    .countdown-label {
        font-size: 0.5625rem;
    }

    .countdown-separator {
        font-size: 1.25rem;
    }
}

/* Responsive para tablets */
@media (min-width: 768px) and (max-width: 1023px) {
    .countdown-number {
        min-width: 52px;
        font-size: 1.375rem;
        padding: 0.5rem 0.75rem;
    }

    .countdown-label {
        font-size: 0.6875rem;
    }
}

/* Responsive para desktop grande */
@media (min-width: 1024px) {
    .countdown-number {
        min-width: 56px;
        font-size: 1.5rem;
        padding: 0.625rem 0.875rem;
    }

    .countdown-label {
        font-size: 0.75rem;
    }

    .countdown {
        gap: 0.625rem;
    }
}

/* --- 2. Site Header --- */
.site-header {
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.site-header.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header-top-bar {
    background-color: var(--muted);
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
}

.header-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-links {
    display: flex;
    gap: 1.5rem;
}

.top-bar-links a {
    color: var(--muted-foreground);
}

.header-main {
    padding: 1.5rem 0;
}

.header-main .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.site-branding .site-title {
    font-size: 2rem;
    font-weight: 900;
    font-family: var(--font-sans);
    color: var(--foreground);
    margin: 0;
}

.search-bar {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
    max-width: 450px;
    margin: 0 auto;
}

.search-bar input {
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    background: transparent;
}

.search-bar input:focus {
    outline: none;
}

.search-bar button {
    border: none;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 400ms ease;
}

.search-bar button:hover {
    background-color: hsl(32, 36%, 42%);
    /* Primary dark */
}

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

.header-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--foreground);
    transition: background-color 400ms ease, color 400ms ease;
}

.header-action-btn:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--destructive);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.main-navigation {
    border-top: 1px solid var(--border);
}

.main-navigation ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

.main-navigation a {
    display: block;
    padding: 1rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted-foreground);
    position: relative;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 400ms ease;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after {
    transform: scaleX(1);
}

.main-navigation .nav-offer {
    color: var(--destructive);
    font-weight: 700;
}

/* --- 3. Category Icons --- */
/* --- 3. Category Icons Section --- */
.category-icons-section {
    padding: 2rem 0;
    background-color: var(--background);
}

.category-icons-scroll-wrapper {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

.category-icons-scroll-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.category-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.category-icon-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-icon-item:hover .category-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.category-icon-circle svg {
    color: var(--primary-foreground);
    stroke: var(--primary-foreground);
}

.category-icon-name {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    color: var(--foreground);
    transition: color 0.3s ease;
}

.category-icon-item:hover .category-icon-name {
    color: var(--primary);
}

/* Badge Sale */
.category-sale-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--destructive);
    color: var(--primary-foreground);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    line-height: 1;
}

/* Color classes para categorías */
.bg-destructive {
    background-color: hsl(0, 84%, 60%);
}

.bg-destructive:hover {
    background-color: hsl(0, 84%, 50%);
}

.bg-earth {
    background-color: hsl(32, 36%, 52%);
}

.bg-earth:hover {
    background-color: hsl(32, 36%, 42%);
}

.bg-accent {
    background-color: hsl(158, 19%, 49%);
}

.bg-accent:hover {
    background-color: hsl(158, 19%, 39%);
}

.bg-muted {
    background-color: hsl(240, 4.8%, 75%);
}

.bg-muted:hover {
    background-color: hsl(240, 4.8%, 65%);
}

/* --- 4. Hero Banner --- */
/* --- 4. Hero Banner Section --- */
.hero-banner-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
    min-height: 450px;
}

@media (min-width: 768px) {
    .hero-banner-wrapper {
        margin: 1.5rem 2rem;
    }
}

/* Overlay con gradiente triple */
.hero-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, hsl(32, 36%, 52%), hsl(32, 36%, 52%), hsl(158, 19%, 49%));
    opacity: 0.95;
    z-index: 1;
}

/* Imagen de fondo con mix-blend */
.hero-background-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

/* === WHATSAPP COMMERCE === */

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    font-size: 1rem;
    text-decoration: none;
    width: 100%;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    /* WhatsApp Dark Green */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(37, 211, 102, 0.3);
    color: white;
}

.btn-whatsapp svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Header Button Variant */
.whatsapp-header-btn {
    color: #25D366 !important;
    /* Override default header link color */
    background-color: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.2);
}

.whatsapp-header-btn:hover {
    background-color: #25D366 !important;
    color: white !important;
}

.whatsapp-header-btn .header-btn-text {
    display: none;
}

@media (min-width: 1024px) {
    .whatsapp-header-btn .header-btn-text {
        display: inline-block;
        font-size: 0.85rem;
    }
}

/* Hide standard WC elements when mode is active (CSS fallback) */
body.whatsapp-mode-active .add_to_cart_button,
body.whatsapp-mode-active .single_add_to_cart_button,
body.whatsapp-mode-active form.cart,
body.whatsapp-mode-active .wc-block-grid__product-add-to-cart {
    display: none !important;
}



/* Contenido */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    text-align: center;
    padding: 4rem 2rem;
}

/* Badge "Se acerca" */
.hero-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero-flame-icon {
    display: inline-flex;
}

.hero-flame-icon svg {
    color: var(--accent-foreground);
    stroke: var(--accent-foreground);
}

.hero-badge-text {
    color: var(--accent-foreground);
    font-weight: 600;
    font-size: 1.125rem;
}

/* Título principal */
.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-foreground);
    margin-bottom: 2rem;
    line-height: 1.2;
    max-width: 900px;
}

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

/* Botón CTA */
.hero-cta-button {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--primary);
    padding: 1.5rem 3rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.hero-cta-button:hover {
    background-color: var(--primary-foreground);
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gradiente decorativo inferior */
.hero-bottom-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent, rgba(32, 36%, 52%, 0.2));
    pointer-events: none;
    z-index: 3;
}

/* --- 5. Product Grid (Ofertas Hot) --- */
.product-grid-section {
    padding: 5rem 0;
}

/* Most Searched Section con background especial */
.most-searched-section {
    background-color: rgba(240, 245, 249, 0.3);
    /* bg-secondary/30 */
}

.section-title {
    font-size: 2.5rem;
    font-family: var(--font-serif);
    text-align: center;
    margin-bottom: 3rem;
}

.section-emoji {
    font-size: 2.5rem;
}

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

.product-card {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 400ms ease, box-shadow 400ms ease;
}

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

.product-image-wrapper {
    position: relative;
    overflow: hidden;
}

.product-image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 600ms ease;
}

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

.product-badge,
.product-discount-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--primary-foreground);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
}

.product-discount-badge {
    background-color: var(--destructive);
}

.product-new-badge {
    background-color: var(--primary);
}

.product-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.product-name a {
    color: var(--foreground);
    transition: color 300ms ease;
}

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

.product-price {
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
    font-size: 1.2rem;
}

.woocommerce-Price-amount,
.amount {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
}

del .woocommerce-Price-amount,
del .amount {
    color: #4a4a4a;
    font-weight: 400;
    /* Optional: make strikethrough less heavy if desired, but keeping consistent */
}

.price-old {
    text-decoration: line-through;
    color: #4a4a4a;
    font-size: 0.9rem;
    margin-right: 0.5rem;
}



.price-new {
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
}

.product-button {
    margin-top: auto;
    width: 100%;
    text-align: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background-color 400ms ease, color 400ms ease;
}

.product-button:hover {
    background-color: hsl(32, 36%, 42%);
    /* Primary dark */
    color: var(--primary-foreground);
}

/* --- 6. Promo Banners --- */
/* --- 6. Promo Banners Section --- */
.promo-banners-section {
    padding: 2rem 0;
    background-color: var(--background);
}

.promo-banners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

.promo-banner-card {
    position: relative;
    height: 320px;
    /* h-80 */
    border-radius: 1rem;
    /* rounded-2xl */
    overflow: hidden;
    display: flex;
    text-decoration: none;
    cursor: pointer;
}

.promo-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.group:hover .promo-banner-image {
    transform: scale(1.05);
}

.promo-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem;
    z-index: 10;
}

/* Gradientes para overlays */
.overlay-primary {
    background: linear-gradient(to right, hsl(32, 36%, 52%, 0.9), hsl(32, 36%, 52%, 0.6));
}

.overlay-earth {
    background: linear-gradient(to right, hsl(32, 36%, 52%, 0.8), hsl(32, 36%, 52%, 0.4));
}

.promo-banner-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.promo-banner-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.promo-banner-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--primary-foreground);
    color: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.promo-banner-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Badge de descuento */
.promo-badge-discount {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background-color: var(--accent);
    color: var(--accent-foreground);
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .promo-banner-title {
        font-size: 1.875rem;
    }

    .promo-banner-overlay {
        padding: 2rem;
    }

    .promo-badge-discount {
        font-size: 1.25rem;
        padding: 0.375rem 1rem;
    }
}

.banner-light .promo-banner-title {
    color: var(--accent-foreground);
}

.banner-light .promo-banner-link {
    color: var(--accent-foreground);
}

/* --- 7. Best Sellers Section --- */
.bestsellers-section {
    padding: 3rem 0;
    background-color: var(--background);
}

.bestsellers-section .section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 2rem;
}

/* Grid principal: 2 columnas en desktop */
.bestsellers-collections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

/* Card de colección */
.bestseller-collection-card {
    border-radius: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.bestseller-collection-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Grid interno: 2 columnas (imagen colección + producto) */
.bestseller-card-internal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bestseller-card-internal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lado izquierdo: Imagen de colección */
.bestseller-collection-image-wrapper {
    position: relative;
    height: 16rem;
    /* h-64 */
    overflow: hidden;
}

@media (min-width: 768px) {
    .bestseller-collection-image-wrapper {
        height: 100%;
    }
}

.bestseller-collection-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay con gradiente */
.bestseller-collection-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
    display: flex;
    align-items: center;
    padding: 2rem;
}

.bestseller-collection-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

/* Lado derecho: Información del producto */
.bestseller-product-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Imagen del producto (aspect-square) */
.bestseller-product-image-container {
    aspect-ratio: 1 / 1;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--muted);
}

.bestseller-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.bestseller-collection-card:hover .bestseller-product-image {
    transform: scale(1.1);
}

/* Contenido del producto */
.bestseller-product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bestseller-product-name {
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precios */
.bestseller-prices {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bestseller-price-current {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.bestseller-price-original {
    font-size: 0.875rem;
    color: #4a4a4a;
    text-decoration: line-through;
}

/* Botón CTA full-width */
.bestseller-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bestseller-button:hover {
    background-color: hsl(32, 36%, 42%);
}

.bestseller-button svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.bestseller-button:hover svg {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .bestseller-collection-title {
        font-size: 1.5rem;
    }

    .bestseller-product-name {
        font-size: 0.875rem;
    }

    .bestseller-price-current {
        font-size: 1.25rem;
    }
}

/* --- 8. WhatsApp CTA Banner --- */
.whatsapp-cta-section {
    padding: 2rem 0;
    background-color: var(--muted);
}

.whatsapp-cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.whatsapp-cta-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin: 0 0 1rem;
}

.whatsapp-cta-text {
    color: var(--muted-foreground);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.whatsapp-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background-color: #25D366;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.whatsapp-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    color: white;
}

.whatsapp-cta-button svg {
    width: 24px;
    height: 24px;
}

/* --- 10. WhatsApp Float --- */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 400ms ease, box-shadow 400ms ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: white;
    /* Force white fill */
}

.whatsapp-float svg path {
    fill: white;
    /* Ensure path is also white */
}

/* --- 11. Site Footer --- */
.site-footer {
    background-color: var(--background-alt);
    /* Beige claro del sistema */
    color: var(--foreground);
    /* Negro suave para texto */
    padding: var(--spacing-xl) 0 0;
    /* 6rem arriba, sin padding abajo (lo tiene footer-bottom) */
    margin-top: var(--spacing-xl);
    /* 6rem de separación */
    border-top: 1px solid var(--border);
    /* Separador sutil */
    font-size: 0.9375rem;
    /* 15px - tamaño base para texto secundario */
}

/* Grid de columnas del footer */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    /* 4rem - espaciado consistente */
    margin-bottom: var(--spacing-lg);
    /* 4rem antes del footer-bottom */
}

/* Logo/Título principal del footer */
.footer-column .site-title {
    font-family: var(--font-sans);
    /* Montserrat */
    font-size: 1.5rem;
    /* 24px - Logo destacado */
    font-weight: 700;
    color: var(--foreground);
    /* Negro suave */
    margin-bottom: var(--spacing-sm);
    /* 1rem */
    letter-spacing: 0.05em;
}

/* Descripción del footer (párrafo principal) */
.footer-column p {
    font-family: var(--font-sans);
    /* Montserrat */
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.7;
    color: var(--muted-foreground);
    /* Gris cálido */
    margin-bottom: var(--spacing-sm);
    /* 1rem */
}

/* Títulos de columnas (h4) */
.footer-column h4 {
    font-family: var(--font-sans);
    /* Montserrat */
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    color: var(--foreground);
    /* Negro suave */
    margin-bottom: 1.5rem;
    letter-spacing: 0.025em;
}

/* Listas del footer */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 0.75rem;
}

/* Links del footer */
.footer-column a {
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 300ms ease;
    /* Transición estandarizada */
    display: inline-block;
}

.footer-column a:hover {
    color: var(--primary);
    /* Dorado en hover */
}

/* Iconos sociales con círculos */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    /* 40px - tamaño circular */
    height: 2.5rem;
    border-radius: var(--radius-full);
    /* Circular */
    background-color: var(--muted);
    /* Gris beige sobre fondo claro */
    color: var(--foreground);
    /* Negro suave */
    transition: all 300ms ease;
    /* Transición suave para múltiples propiedades */
}

.social-links a:hover {
    background-color: var(--primary);
    /* Dorado en hover */
    color: var(--primary-foreground);
    /* Blanco para contraste */
    transform: scale(1.1);
    /* Efecto de crecimiento */
}

.social-links svg {
    width: 1.25rem;
    /* 20px - tamaño del icono */
    height: 1.25rem;
    display: block;
}

/* Newsletter form */
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    /* 8px - separación entre input y botón */
    margin-top: var(--spacing-sm);
    /* 1rem */
}

.newsletter-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    /* Crema suave */
    color: var(--foreground);
    /* Negro suave */
    font-family: var(--font-sans);
    font-size: 0.875rem;
    /* 14px */
    transition: border-color 300ms ease;
}

.newsletter-form input::placeholder {
    color: var(--muted-foreground);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
    /* Dorado en focus */
    box-shadow: 0 0 0 3px rgba(179, 136, 99, 0.1);
    /* Sutil glow dorado */
}

.newsletter-form button {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 300ms ease;
    /* Transición suave */
    white-space: nowrap;
}

.sticky-btn {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    /* Slightly smaller font for longer text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sticky-whatsapp-btn {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
}

.sticky-whatsapp-btn:hover {
    background-color: #128C7E !important;
    border-color: #128C7E !important;
}

/* Hide product title on very small screens to make room for button */
@media (max-width: 360px) {
    .sticky-title {
        display: none;
    }
}

.newsletter-form button:hover {
    background: hsl(32, 36%, 42%);
    /* Primary dark - dorado oscuro */
}

.newsletter-form button:active {
    transform: translateY(1px);
    /* Efecto de presión */
}

/* Footer bottom - copyright y contacto */
.footer-bottom {
    margin-top: var(--spacing-lg);
    /* 4rem de separación */
    padding: var(--spacing-md) 0;
    /* 2rem arriba y abajo */
    border-top: 1px solid var(--border);
    /* Línea sutil */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    /* 14px */
    color: var(--muted-foreground);
    margin: 0;
}

/* Contacto en footer bottom */
.footer-contact {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-contact span {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.footer-contact a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 300ms ease;
}

.footer-contact a:hover {
    color: var(--primary);
    /* Dorado en hover */
}

/* Payment Methods */
.footer-payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.payment-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 48px;
    /* Fixed width for consistency */
    height: 32px;
    /* Fixed height */
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.payment-icon-wrapper:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* Allow width to adjust */
    height: auto;
    /* Allow height to adjust */
    object-fit: contain;
    /* Ensure image fits without distortion */
    display: block;
}

.payment-text-icon {
    font-weight: 700;
    font-size: 0.7rem;
    color: #333;
    font-family: sans-serif;
}

/* --- Responsive --- */
/* Tablet - 1024px and below */
@media (max-width: 1024px) {
    .header-main .container {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin-top: 1rem;
    }

    .main-navigation {
        overflow-x: auto;
    }

    .main-navigation ul {
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* Footer responsive - Tablet */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        /* 2rem en tablet */
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .promo-banner .container {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .header-top-bar {
        font-size: 0.7rem;
    }

    .top-bar-links {
        gap: 1rem;
    }

    .header-main .container {
        display: flex;
        justify-content: space-between;
    }

    .search-bar {
        display: none;
        /* Hide for simplicity, could be a modal btn */
    }

    .header-actions .header-action-btn:not(.cart-btn) {
        display: none;
        /* Hide text buttons */
    }

    /* Footer responsive - Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        /* 2rem en móvil */
        text-align: center;
    }

    .footer-column .site-title,
    .footer-column h4 {
        text-align: center;
    }

    .footer-column p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }

    .social-links {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-contact {
        justify-content: center;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* --- Single Product Page --- */
.single-product-container {
    padding: 2rem 0;
    /* Generous 6rem vertical spacing */
}

.product-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    /* 4rem generous gap */
}

@media (min-width: 768px) {
    .product-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
        /* 6rem on desktop */
    }
}

/* Gallery */
.product-gallery .main-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    /* 2rem spacing */
    border: 1px solid var(--gold-light);
    /* Gold border */
    box-shadow: 0 4px 16px rgba(145, 108, 63, 0.1);
}

.product-gallery .main-image-wrapper img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--easing-elegant);
}

.product-gallery .main-image-wrapper:hover img {
    transform: scale(1.05);
    /* Subtle zoom */
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    /* 1rem generous gap */
}

.thumbnail-item {
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-slow) var(--easing-elegant);
}

.thumbnail-item.active {
    border-color: var(--gold);
    /* Gold active border */
}

.thumbnail-item:hover {
    border-color: var(--gold-light);
    transform: translateY(-2px);
}

.thumbnail-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Product Info */
.product-info-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    /* 2rem generous spacing */
}

.product-badge-new {
    background-color: var(--gold);
    color: var(--background);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.product-title {
    font-size: 2.75rem;
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.015em;
    margin: 0;
    line-height: 1.2;
    color: var(--foreground);
    position: relative;
    padding-bottom: 1rem;
}

.product-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.product-rating .stars {
    color: var(--gold);
}

.product-price-section .price-new {
    font-size: 2.25rem;
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--foreground);
}

.product-price-section .price-old {
    font-size: 1.25rem;
    color: var(--muted-foreground);
}

.product-key-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-key-features li {
    margin-bottom: 0.5rem;
}

.product-availability p {
    margin: 0;
    font-size: 0.9rem;
}

.product-availability .locations {
    color: var(--muted-foreground);
}

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

.quantity-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.quantity-input input {
    border: none;
    width: 50px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    -moz-appearance: textfield;
}

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

.quantity-input button {
    border: none;
    background: var(--muted);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1.2rem;
}

.quantity-input button:first-child {
    border-right: 1px solid var(--border);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.quantity-input button:last-child {
    border-left: 1px solid var(--border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.btn {
    padding: 1rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--background);
}

.btn-primary:hover {
    background-color: var(--earth-tone);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--foreground);
    border-color: var(--border);
}

.btn-secondary:hover {
    background-color: var(--muted);
}

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

.info-card {
    background-color: var(--muted);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.product-share {
    display: flex;
    align-items: center;
    gap: 1rem;
}

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

.share-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--muted);
    color: var(--foreground);
}

.share-buttons a:hover {
    background-color: var(--primary);
    color: var(--background);
}

/* --- Product Info Tabs --- */
.product-info-tabs {
    padding: 4rem 0;
    border-top: 1px solid var(--border);
    margin-top: 4rem;
}

.tab-navigation {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    display: flex;
    gap: 2rem;
}

.tab-link {
    border: none;
    background: none;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted-foreground);
    position: relative;
    border-bottom: 2px solid transparent;
}

.tab-link.active {
    color: var(--foreground);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
    padding: 1rem 0;
    animation: fadeIn 0.5s;
}

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

.features-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Product Benefits Section --- */
.product-benefits-section {
    padding: 4rem 0;
}

.benefits-card {
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    padding: 3rem;
}

.benefits-card .section-title {
    margin-bottom: 2rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
}

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

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 500;
}

.benefit-item svg {
    flex-shrink: 0;
    color: var(--accent);
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

/* --- Installation Guide (Accordion) --- */
.installation-guide-section {
    padding: 4rem 0;
}

.accordion {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.accordion-item {
    border-bottom: 1px solid var(--border);
}

.accordion-button {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
}

.accordion-button .icon-plus-minus {
    font-size: 1.8rem;
    font-weight: 300;
    transition: transform 0.4s ease;
}

.accordion-button[aria-expanded="true"] .icon-plus-minus {
    transform: rotate(45deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease;
    padding: 0 1rem;
}

.accordion-panel.active {
    padding: 1rem;
}

.panel-content {
    padding: 0.5rem 0;
}

.tools-grid {
    padding: 1rem 0 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.tool-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--muted);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
}

.tool-item svg {
    color: var(--primary);
}

/* --- Installation Steps Section --- */
.installation-steps-section {
    padding: 4rem 0;
    background-color: var(--muted);
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

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

.step-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: var(--background);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.step-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.step-title {
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

.step-description {
    margin: 0;
    color: var(--muted-foreground);
}

/* --- Tech Specs Table Section --- */
.tech-specs-section {
    padding: 0 0 2rem 0;
    /* Reduced top padding to 0 */
}

.tech-specs-table-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tech-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.tech-specs-table th,
.tech-specs-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.tech-specs-table th {
    font-weight: 600;
    width: 30%;
}

.tech-specs-table tr:last-child th,
.tech-specs-table tr:last-child td {
    border-bottom: none;
}

.tech-specs-table tr:nth-child(even) {
    background-color: var(--muted);
}

/* --- Customer Reviews Section --- */
.reviews-section {
    padding: 4rem 0;
    background-color: var(--muted);
}

.reviews-header {
    text-align: center;
    margin-bottom: 3rem;
}

.reviews-header .section-title {
    margin-bottom: 0.5rem;
}

.average-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.average-rating .stars {
    color: var(--gold);
    font-size: 1.2rem;
}

.reviews-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.review-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    border-color: var(--primary-muted);
}

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

.review-author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.review-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--background);
    box-shadow: 0 0 0 2px var(--primary-muted);
}

.author-meta {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
}

.author-location {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.review-rating {
    color: var(--primary);
    font-size: 0.875rem;
}

.review-body {
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.review-body p {
    color: var(--foreground);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

.review-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #16a34a;
    /* Green 600 */
    background-color: #f0fdf4;
    /* Green 50 */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .review-card {
        padding: 1.5rem;
    }

    .review-header {
        flex-direction: column;
        gap: 1rem;
    }
}

/* --- Payment Methods Section --- */
.payment-methods-section {
    padding: 4rem 0;
}

.payment-methods-card {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--muted);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.payment-methods-title {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
}

.payment-icons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    font-weight: 600;
    color: var(--muted-foreground);
}

.security-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.security-info svg {
    color: var(--accent);
}

.payment-methods-description {
    max-width: 500px;
    margin: -1rem auto 1.5rem;
    color: var(--muted-foreground);
}

/* --- Category Page: Testimonials Section --- */
.testimonials-section {
    padding: 5rem 0;
    background-color: var(--muted);
}

/* --- Category Page: Final CTA --- */
.final-cta-section {
    background-color: var(--primary);
    color: var(--background);
    padding: 6rem 0;
    text-align: center;
}

.final-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.final-cta-title {
    font-size: 2.5rem;
    color: var(--background);
    max-width: 600px;
    line-height: 1.2;
}

.final-cta-description {
    max-width: 600px;
    opacity: 0.9;
    font-size: 1.1rem;
}

.final-cta-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* --- Blog Page --- */
.blog-page-container {
    padding: 3rem 0;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 3rem;
}

.blog-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .blog-layout-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }

    .blog-sidebar {
        grid-column: span 1 / span 1;
    }

    .blog-posts-main {
        grid-column: span 3 / span 3;
    }
}

.sidebar-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 1rem;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-weight: 500;
    transition: color 300ms ease;
}

.category-list a:hover {
    color: var(--primary);
}

.blog-posts-grid {
    display: grid;
    gap: 2rem;
}

.post-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.post-card {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 300ms ease, transform 300ms ease;
    display: grid;
    grid-template-columns: 1fr;
}

.post-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

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

.post-image-column {
    overflow: hidden;
}

.post-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.post-card:hover .post-image-column img {
    transform: scale(1.05);
}

.post-content-column {
    grid-column: span 2 / span 2;
    padding: 1.5rem;
}

.post-badge {
    display: inline-block;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.post-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.75rem;
    transition: color 300ms ease;
}

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

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.post-excerpt {
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.post-read-more {
    color: var(--primary);
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: text-decoration 300ms ease;
}

.post-card:hover .post-read-more {
    text-decoration: underline;
}

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

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    font-weight: 600;
    transition: all 300ms ease;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* --- Single Post Page --- */
.single-post-container {
    padding: 3rem 0;
}

.post-article .container {
    max-width: 896px;
    /* 4xl */
    margin: 0 auto;
}

.back-to-blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: color 300ms ease;
}

.back-to-blog-btn:hover {
    color: var(--primary);
}

.post-header {
    text-align: center;
    margin-bottom: 2rem;
}

.post-header .entry-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.2;
    margin: 0.5rem 0 1rem;
}

@media (min-width: 768px) {
    .post-header .entry-title {
        font-size: 3.5rem;
    }
}

.post-header .post-meta {
    justify-content: center;
    margin-bottom: 0;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background: none;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 300ms ease;
}

.share-button:hover {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.featured-image-wrapper {
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 3rem;
}

.featured-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prose styles for entry-content */
.entry-content {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--foreground);
}

.entry-content>*+* {
    margin-top: 1.5em;
}

.entry-content h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-top: 2.5em;
    margin-bottom: 1.25em;
}

.entry-content h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--foreground);
    margin-top: 2em;
    margin-bottom: 1em;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
    max-width: 75ch;
    /* Optimal reading width */
}

.entry-content ul {
    list-style: disc;
    padding-left: 1.5em;
}

.entry-content ol {
    list-style: decimal;
    padding-left: 1.5em;
}

.entry-content a {
    color: var(--primary);
    text-decoration: underline;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 1em;
    font-style: italic;
    color: var(--muted-foreground);
}

.entry-content img {
    border-radius: var(--radius-lg);
}

.tags-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
}

.tags-label {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--muted-foreground);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-badge {
    display: inline-block;
    border: 1px solid var(--border);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
    transition: all 300ms ease;
}

.tag-badge:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* Related Posts Section */
.related-posts-section {
    padding: 5rem 0;
    margin-top: 4rem;
    background-color: var(--background-alt);
}

.related-posts-section .container {
    max-width: 1152px;
    /* 6xl */
}

.related-posts-grid {
    grid-template-columns: 1fr;
}

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

.related-posts-grid .post-title {
    font-size: 1.25rem;
    line-height: 1.3;
}

.related-posts-grid .post-meta {
    margin-bottom: 0;
}

.related-posts-grid .post-excerpt,
.related-posts-grid .post-read-more {
    display: none;
}

/* --- Archive Page (Blog, Categories, Tags, Date Archives) --- */
.archive-container {
    padding: 3rem 0;
}

.archive-container .page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.archive-container .page-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .archive-container .page-title {
        font-size: 3.5rem;
    }
}

.archive-container .archive-description {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 800px;
    margin: 0 auto;
}

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

.archive-item {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 300ms ease, transform 300ms ease;
    display: grid;
    grid-template-columns: 1fr;
}

.archive-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

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

.archive-item .post-thumbnail {
    overflow: hidden;
}

.archive-item .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    transition: transform 300ms ease;
}

.archive-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

.archive-item .post-content {
    grid-column: span 2 / span 2;
    padding: 1.5rem;
}

.archive-item .entry-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.archive-item .entry-title a {
    color: var(--foreground);
    text-decoration: none;
    transition: color 300ms ease;
}

.archive-item:hover .entry-title a {
    color: var(--primary);
}

.archive-item .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.archive-item .entry-meta time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.archive-item .entry-summary {
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.archive-item .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: gap 300ms ease;
}

.archive-item:hover .read-more {
    gap: 0.75rem;
}

.archive-item .read-more svg {
    width: 16px;
    height: 16px;
}

.no-results {
    text-align: center;
    padding: 5rem 2rem;
}

.no-results h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.no-results p {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

/* --- Single Product Page v2 - High-Level Design --- */

/* Main Grid */
.single-product-container .product-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .single-product-container .product-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

/* Gallery */
.main-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgba(var(--secondary-rgb), 0.1);
}

.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.main-image-wrapper:hover img {
    transform: scale(1.05);
}

.product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--background);
    text-transform: uppercase;
}

.badge-destructive {
    background-color: var(--destructive);
}

.wishlist-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--foreground);
    transition: all 0.2s ease;
    z-index: 2;
}

.wishlist-button:hover {
    background-color: var(--muted);
    transform: scale(1.1);
}

.wishlist-button svg {
    transition: fill 0.3s, stroke 0.3s;
}

.wishlist-button:hover svg {
    fill: var(--destructive);
    stroke: var(--destructive);
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.thumbnail-item {
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.thumbnail-item:hover {
    opacity: 0.7;
}

.thumbnail-item.active {
    border-color: var(--primary);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Column */
.product-info-column .product-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .product-info-column .product-title {
        font-size: 2.75rem;
    }
}

.price-container {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
}

.price-container .price {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
}

.price-container .price del {
    font-size: 1.5rem;
    color: #4a4a4a;
    margin-left: 0.75rem;
}

.quick-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    space-y: 0.5rem;
}

.quick-features-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
}

.quick-features-list li svg {
    color: var(--primary);
    flex-shrink: 0;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: rgba(var(--secondary-rgb), 0.2);
    border-radius: var(--radius);
    font-weight: 500;
}

.stock-badge svg {
    color: #28a745;
}

.product-description {
    color: var(--muted-foreground);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.product-actions-wrapper {
    margin-bottom: 1.5rem;
}

.product-actions-wrapper .quantity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.product-actions-wrapper .quantity .quantity-input {
    display: flex;
    align-items: center;
}

.product-actions-wrapper .quantity input {
    width: 4rem;
    text-align: center;
    border-left: 0;
    border-right: 0;
    height: 44px;
}

.product-actions-wrapper .quantity .button {
    height: 44px;
    width: 44px;
}

.product-actions-wrapper .single_add_to_cart_button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.info-cards-grid .info-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(var(--secondary-rgb), 0.1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s ease;
}

.info-cards-grid .info-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-cards-grid .info-card svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--primary);
    margin-top: 0.25rem;
}

.product-meta {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    /* Ensure no bottom margin */
}

.whatsapp-card {
    margin-bottom: 0 !important;
}

.product-details-section {
    padding-top: 1rem !important;
}

.product-meta>span {
    display: block;
    margin-bottom: 0.5rem;
}

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

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

/* --- Detailed Features Section --- */
.product-details-section {
    padding: 2rem 0;
    /* Reduced vertical spacing */
    margin-bottom: 2rem;
}

.card-layout {
    background-color: var(--card);
    border: 1px solid var(--gold-light);
    /* Gold borders */
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    /* 4rem generous padding */
    box-shadow: 0 4px 16px rgba(145, 108, 63, 0.08);
    /* Subtle gold shadow */
}

.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-md);
    /* 2rem generous spacing */
    color: var(--foreground);
}

.section-title-with-icon svg {
    color: var(--gold);
    stroke-width: 1.5;
    /* Refined icon weight */
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    /* 2rem generous spacing */
}

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

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: rgba(145, 108, 63, 0.03);
    /* Subtle gold tint */
    padding: var(--spacing-md);
    /* 2rem generous padding */
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-light);
    transition: all var(--duration-slow) var(--easing-elegant);
}

.feature-item:hover {
    background-color: rgba(145, 108, 63, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(145, 108, 63, 0.12);
}

.feature-icon svg {
    color: var(--gold);
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    stroke-width: 1.5;
    /* Refined icon weight */
}

.feature-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
    margin: 0 0 0.5rem;
    color: var(--foreground);
}

.feature-text p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* --- Benefits Section --- */
.benefits-card {
    background: linear-gradient(to bottom right, rgba(145, 108, 63, 0.05), rgba(145, 108, 63, 0.08));
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* 1rem spacing */
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(var(--background-rgb), 0.7);
    padding: var(--spacing-sm) var(--spacing-md);
    /* Generous padding */
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-light);
    font-weight: 500;
    transition: all var(--duration-slow) var(--easing-elegant);
}

.benefit-item:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(145, 108, 63, 0.15);
    background-color: rgba(var(--background-rgb), 0.9);
}

.benefit-item svg {
    color: var(--gold);
    flex-shrink: 0;
    stroke-width: 1.5;
}

/* --- Related Products Section --- */
.related-products-section {
    background-color: var(--muted);
}

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

/* --- Category Page: Hero Section --- */
.category-hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 6rem 0;
    overflow: hidden;
}

.video-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.video-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Background (alternative to video) */
.image-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.image-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

.category-hero-section .hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.category-hero-section .hero-badge {
    background-color: var(--primary);
    color: var(--background);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
}

.category-hero-section .hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .category-hero-section .hero-title {
        font-size: 5xl;
    }
}

.category-hero-section .hero-description {
    font-size: 1.25rem;
    max-width: 600px;
    opacity: 0.9;
}

.category-hero-section .hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-outline-white {
    background-color: transparent;
    color: white;
    border-color: white;
}

.btn-outline-white:hover {
    background-color: white;
    color: var(--foreground);
}

/* --- Category Page: Stock Alert --- */
.stock-alert-section {
    padding: 2rem 0;
}

.stock-alert-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: hsl(0, 84%, 97%);
    border: 1px solid var(--destructive);
    color: var(--destructive);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}

.stock-alert-card .alert-icon {
    color: var(--destructive);
}

.stock-alert-card .alert-text {
    font-weight: 600;
}

.stock-alert-card .countdown {
    color: var(--destructive);
}

.stock-alert-card .countdown-item span:last-child {
    opacity: 0.7;
}

/* --- Category Page: Description Section --- */
.category-description-section {
    padding: 5rem 0;
}

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

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

.description-video-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.video-aspect-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
}

.video-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.description-content-wrapper {
    background-color: var(--muted);
    padding: 3rem;
    border-radius: var(--radius-lg);
}

.description-content-wrapper p {
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
}

.description-content-wrapper ul {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.description-content-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.description-content-wrapper ul li svg {
    color: var(--accent);
}

/* --- Category Page: Key Features --- */
.key-features-section {
    padding: 5rem 0;
}

.key-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

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

.feature-card {
    background-color: var(--background);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.feature-icon {
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.feature-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

.feature-description {
    color: var(--muted-foreground);
    margin: 0;
}

/* --- Category Page: Why Choose Section --- */
.why-choose-section {
    padding: 5rem 0;
}

.why-choose-card {
    background-color: hsla(var(--primary-hsl), 0.05);
    border: 1px solid hsla(var(--primary-hsl), 0.1);
    padding: 3rem;
    border-radius: var(--radius-lg);
}

.why-choose-section .section-title {
    margin-bottom: 2rem;
}

/* Re-using .benefits-grid and .benefit-item from single-product styles */
.why-choose-section .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem;
}

@media (min-width: 768px) {
    .why-choose-section .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.why-choose-section .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 500;
}

.why-choose-section .benefit-item svg {
    flex-shrink: 0;
    color: var(--primary);
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

/* Adding specific styles for accordion panel content */
.accordion-panel .panel-content {
    padding-bottom: 1rem;
}

.accordion-panel .panel-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 1rem;
}

.accordion-panel .panel-content li {
    margin-bottom: 0.5rem;
}

/* --- Category Page: Product Grid Section --- */
.product-grid-section {
    padding: 5rem 0;
}

/* ========================================
   NUEVOS ESTILOS PARA SINGLE PRODUCT PAGE
   ======================================== */

/* --- Selector de Cantidad Personalizado --- */
.product-quantity-label {
    margin-bottom: 0.5rem;
}

.product-quantity-label label {
    font-size: 0.875rem;
    font-weight: 600;
    display: block;
}

.product-quantity-actions {
    margin-bottom: 1.5rem;
}

.quantity-selector-custom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
}

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

.qty-btn:hover {
    border-color: var(--primary);
    background-color: var(--secondary);
}

.qty-btn svg {
    color: var(--foreground);
}

.quantity-input {
    width: 64px;
    height: 40px;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--background);
}

/* --- Botones de Acción (Agregar al Carrito + Comprar Ahora) --- */
.product-action-buttons {
    display: flex;
    gap: var(--spacing-sm);
    /* 1rem generous spacing */
    margin-bottom: var(--spacing-md);
}

.btn-add-to-cart,
.btn-buy-now {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    /* More generous padding */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--duration-slow) var(--easing-elegant);
}

.btn-add-to-cart {
    background-color: var(--gold);
    color: white;
    border: 1px solid var(--gold-dark);
}

.btn-add-to-cart:hover {
    background-color: var(--gold-dark);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(145, 108, 63, 0.25);
}

.btn-buy-now {
    background-color: transparent;
    color: var(--gold-dark);
    border: 2px solid var(--gold);
}

.btn-buy-now:hover {
    background-color: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(145, 108, 63, 0.15);
}

@media (max-width: 768px) {
    .product-action-buttons {
        flex-direction: column;
    }
}

/* --- Info Cards Mejoradas (con título + subtítulo) --- */
.info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: var(--spacing-md);
    /* 2rem generous padding */
    background-color: var(--card);
    border: 1px solid var(--gold-light);
    /* Gold border */
    border-radius: var(--radius-md);
    transition: all var(--duration-slow) var(--easing-elegant);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(145, 108, 63, 0.12);
}

.info-card svg {
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 2px;
    stroke-width: 1.5;
    /* Refined icon weight */
}

.info-card-text {
    flex: 1;
}

.info-card-title {
    font-family: var(--font-serif);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--foreground);
}

.info-card-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
}

/* --- Disponibilidad por Ubicación --- */
.product-availability-card {
    background-color: rgba(145, 108, 63, 0.03);
    border: 1px solid var(--gold-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    /* 2rem generous padding */
    margin-bottom: var(--spacing-md);
}

.availability-title {
    font-family: var(--font-serif);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--foreground);
}

.availability-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--background);
    border: 1px solid var(--gold-light);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--duration-slow) var(--easing-elegant);
}

.location-badge:hover {
    background-color: rgba(145, 108, 63, 0.05);
    transform: translateY(-2px);
}

.location-badge svg {
    color: var(--gold);
    stroke-width: 1.5;
}

/* --- Compartir en Redes Sociales --- */
.product-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.share-label {
    font-size: 0.875rem;
    font-weight: 600;
}

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

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.share-facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
}

.share-facebook:hover svg {
    color: white;
}

.share-facebook svg {
    color: #1877f2;
}

.share-twitter:hover {
    background-color: #1da1f2;
    border-color: #1da1f2;
}

.share-twitter:hover svg {
    color: white;
}

.share-twitter svg {
    color: #1da1f2;
}

.share-whatsapp:hover {
    background-color: #25d366;
    border-color: #25d366;
}

.share-whatsapp:hover svg {
    color: white;
}

.share-whatsapp svg {
    color: #25d366;
}

.share-link:hover {
    background-color: var(--muted);
    border-color: var(--muted);
}

/* --- WhatsApp CTA Específico del Producto --- */
.product-whatsapp-cta {
    margin-bottom: 1.5rem;
}

.whatsapp-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all 0.3s ease;
}

.whatsapp-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.whatsapp-cta-btn svg {
    flex-shrink: 0;
}

/* --- Sistema de Tabs (para Guía de Instalación) --- */
.tabs-container {
    margin-top: var(--spacing-md);
    /* 2rem generous spacing */
}

.tabs-list {
    display: flex;
    border-bottom: 2px solid var(--gold-light);
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
}

.tab-button {
    padding: 1rem 2rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--muted-foreground);
    transition: all var(--duration-slow) var(--easing-elegant);
    margin-bottom: -2px;
}

.tab-button:hover {
    color: var(--foreground);
    background-color: rgba(145, 108, 63, 0.05);
}

.tab-button.active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
    font-weight: 600;
}

.tabs-content {
    position: relative;
}

.tab-content-panel {
    display: none;
}

.tab-content-panel.active {
    display: block;
    animation: fadeIn var(--duration-slow) var(--easing-elegant);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Grid de Herramientas Responsive --- */
.tools-grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    /* 1rem generous spacing */
}

@media (min-width: 640px) {
    .tools-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

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

.tool-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--spacing-sm);
    /* 1rem generous padding */
    background-color: rgba(145, 108, 63, 0.03);
    border: 1px solid var(--gold-light);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    transition: all var(--duration-slow) var(--easing-elegant);
}

.tool-item:hover {
    background-color: rgba(145, 108, 63, 0.05);
    transform: translateY(-2px);
}

.tool-item svg {
    color: var(--gold);
    flex-shrink: 0;
    stroke-width: 1.5;
    /* Refined icon weight */
}

/* --- Lista de Precauciones --- */
.precauciones-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.precaucion-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: hsl(38, 92%, 50%, 0.05);
    border-left: 3px solid hsl(38, 92%, 50%);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.precaucion-item svg {
    color: hsl(38, 92%, 50%);
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Ajustes adicionales de galería (simular aspect-square) --- */
.main-image-wrapper {
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
    background-color: hsl(240, 4.8%, 95.9%, 0.3);
    position: relative;
}

.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.main-image-wrapper:hover img {
    transform: scale(1.05);
}

.thumbnail-item {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.thumbnail-item:hover {
    opacity: 0.7;
}

.thumbnail-item.active {
    border-color: var(--primary);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Responsive ajustes --- */
@media (max-width: 768px) {
    .tabs-list {
        flex-direction: column;
    }

    .tab-button {
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }

    .tab-button.active {
        border-bottom: none;
        border-left-color: var(--primary);
    }
}

/* ==========================================
   SINGLE PRODUCT - NUEVOS ESTILOS DISEÑO
   ========================================== */

/* === UTILITY CLASSES === */
/* Aspect ratio */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Grid columns */
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

/* Spacing utilities */
.space-y-3>*+* {
    margin-top: 0.75rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

/* Margin/Padding */
.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Border radius */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.top-4 {
    top: 1rem;
}

.right-4 {
    right: 1rem;
}

/* Flex */
.flex {
    display: flex;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

/* Width/Height */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.w-14 {
    width: 3.5rem;
}

.h-14 {
    height: 3.5rem;
}

.h-12 {
    height: 3rem;
}

/* Object fit */
.object-cover {
    object-fit: cover;
}

/* Typography */
.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.line-through {
    text-decoration-line: line-through;
}

.underline {
    text-decoration-line: underline;
}

.leading-relaxed {
    line-height: 1.625;
}

/* Text colors */
.text-foreground {
    color: var(--foreground);
}

.text-background {
    color: var(--background);
}

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

.text-muted-foreground {
    color: var(--muted-foreground);
}

.text-primary-foreground {
    color: var(--primary-foreground);
}

.text-accent {
    color: hsl(158, 19%, 49%);
}

.text-green-600 {
    color: #16a34a;
}

.text-green-800 {
    color: #166534;
}

/* Background colors */
.bg-muted {
    background-color: var(--muted);
}

.bg-muted\/50 {
    background-color: rgba(240, 240, 243, 0.5);
}

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

.bg-sale {
    background-color: hsl(0, 84%, 60%);
}

.bg-green-50 {
    background-color: #f0fdf4;
}

.bg-green-500 {
    background-color: #22c55e;
}

.bg-\[#25D366\] {
    background-color: #25D366;
}

/* Border */
.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-border {
    border-color: var(--border);
}

.border-primary {
    border-color: var(--primary);
}

.border-green-200 {
    border-color: #bbf7d0;
}

.border-\[#25D366\]\/20 {
    border-color: rgba(37, 211, 102, 0.2);
}

/* Ring */
.ring-2 {
    box-shadow: 0 0 0 2px currentColor;
}

.ring-primary\/20 {
    box-shadow: 0 0 0 2px rgba(145, 108, 63, 0.2);
}

/* Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Opacity */
.opacity-0 {
    opacity: 0;
}

/* Group hover */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Hover states */
.hover\:text-primary:hover {
    color: var(--primary);
}

.hover\:bg-foreground\/90:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.hover\:border-primary\/50:hover {
    border-color: rgba(145, 108, 63, 0.5);
}

.hover\:border-\[#25D366\]:hover {
    border-color: #25D366;
}

.hover\:bg-\[#128C7E\]:hover {
    background-color: #128C7E;
}

/* Dark mode */
.dark\:bg-green-950\/20 {
    background-color: rgba(5, 46, 22, 0.2);
}

.dark\:border-green-900 {
    border-color: #14532d;
}

.dark\:text-green-400 {
    color: #4ade80;
}

/* === BADGES === */
.badge.text-base {
    font-size: 1rem;
}

.badge-outline {
    border: 1px solid var(--border);
    background-color: transparent;
    color: var(--foreground);
}

.badge-outline svg {
    flex-shrink: 0;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn.w-full {
    width: 100%;
}

.btn.gap-2 {
    gap: 0.5rem;
}

.btn-earth {
    background-color: hsl(32, 36%, 52%);
    color: white;
}

.btn-earth:hover {
    background-color: hsl(32, 36%, 42%);
}

.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
}

.btn-ghost:hover {
    background-color: var(--muted);
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
}

.btn-outline:hover {
    background-color: var(--muted);
}

.rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* === CARD === */
.card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-content {
    padding: 1rem;
}

/* === SEPARATOR === */
.separator {
    height: 1px;
    background-color: var(--border);
    width: 100%;
}

/* === PROSE === */
.prose {
    max-width: 65ch;
}

.prose-sm {
    font-size: 0.875rem;
}

.prose.max-w-none {
    max-width: none;
}

/* === ANIMATIONS === */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* === WhatsApp specific === */
.text-white {
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-4xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .grid-cols-5 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* === BOTONES ESPECÍFICOS - CORRECCIONES === */
/* Botón "Comprar ahora" hover */
.hover-bg-foreground-90:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* === WHATSAPP CARD - DISEÑO COMPLETO === */
.whatsapp-card {
    border: 2px solid rgba(37, 211, 102, 0.2);
    transition: border-color 0.3s ease;
}

.whatsapp-card:hover {
    border-color: #25D366;
}

.whatsapp-icon-circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.whatsapp-btn {
    background-color: #25D366;
    color: white;
    font-weight: 600;
    height: 3rem;
    transition: background-color 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

.whatsapp-btn svg {
    color: white;
    stroke: white;
}


/* --- 8. Contact Page --- */
.contact-page-wrapper {
    background-color: var(--background);
}

.contact-hero {
    background-color: var(--secondary);
    padding: 6rem 0 4rem;
    text-align: center;
    margin-bottom: 4rem;
}

.contact-hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--secondary-foreground);
    margin-bottom: 1rem;
}

.contact-hero-subtitle {
    font-size: 1.2rem;
    color: var(--muted-foreground);
    max-width: 600px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr 1.5fr;
    }
}

.contact-section-title {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    color: var(--foreground);
}

.contact-description {
    color: var(--muted-foreground);
    margin-bottom: 2rem;
}

/* Contact Info Card */
.contact-info-card {
    background-color: var(--card);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

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

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

.contact-icon {
    width: 48px;
    height: 48px;
    background-color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.contact-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--foreground);
}

.contact-text p,
.contact-text a {
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.95rem;
}

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

/* Contact Form Card */
.contact-form-card {
    background-color: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--foreground);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

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

.btn-whatsapp-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: #25D366;
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-whatsapp-submit:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* === MOBILE MENU STYLES === */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--foreground);
    cursor: pointer;
    z-index: 60;
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background-color: var(--background);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.mobile-menu-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background-color: var(--background-alt);
}

.mobile-menu-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
}

.mobile-menu-close {
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 0.2s;
}

.mobile-menu-close:hover {
    color: var(--destructive);
}

.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-list li {
    border-bottom: 1px solid var(--border);
}

.mobile-nav-list li:last-child {
    border-bottom: none;
}

.mobile-nav-list a {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--foreground);
    transition: color 0.2s;
}

.mobile-nav-list a:hover {
    color: var(--primary);
    padding-left: 0.5rem;
}

.mobile-menu-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background-color: var(--background-alt);
}

/* Mobile Menu Active State */
body.mobile-menu-open {
    overflow: hidden;
}

body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

body.mobile-menu-open .mobile-menu-container {
    transform: translateX(0);
}

/* Mobile Search Toggle */
.mobile-search-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--foreground);
    cursor: pointer;
}

.mobile-search-container {
    display: none;
    padding: 1rem;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    animation: slideDown 0.3s ease;
}

.mobile-search-container.active {
    display: block;
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    /* Header Adjustments */
    .mobile-menu-toggle,
    .mobile-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-navigation {
        display: none;
        /* Hide desktop nav */
    }

    .header-actions .header-action-btn {
        display: none;
        /* Hide text buttons on mobile */
    }

    .header-actions .cart-btn {
        display: flex;
        /* Keep cart visible */
    }

    .header-main .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        /* For absolute positioning of logo */
    }

    /* Center Logo on Mobile */
    .site-branding .site-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: max-content;
        margin: 0;
        text-align: center;
        z-index: 10;
        font-size: 1.5rem;
        /* Slightly smaller for mobile if needed */
    }

    /* Product Grid Optimization for Mobile */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Force 2 columns */
        gap: 0.75rem;
        /* Smaller gap */
    }

    .product-card {
        border-radius: var(--radius-md);
        /* Smaller radius */
    }

    .product-info {
        padding: 0.75rem;
        /* Less padding */
    }

    .product-name {
        font-size: 0.9rem;
        /* Smaller text */
        margin-bottom: 0.25rem;
    }

    .product-price {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Premium Compact WhatsApp Button on Mobile */
    .product-card .btn-whatsapp {
        padding: 0.5rem 0.25rem;
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 0.5rem;

        /* Typography */
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
    }

    .product-card .btn-whatsapp svg {
        margin: 0;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .product-button {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    /* Global Spacing Reduction */
    :root {
        --spacing-xl: 3rem;
        /* Reduce from 6rem */
        --spacing-lg: 2rem;
        /* Reduce from 4rem */
    }

    .site-footer {
        padding-top: 3rem;
        margin-top: 3rem;
    }
}

@media (max-width: 380px) {

    /* Very small screens fallback */
    .product-grid {
        grid-template-columns: 1fr;
        /* Back to 1 column for tiny screens */
    }
}

/* === UTILITY CLASSES === */
.text-primary {
    color: var(--primary) !important;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

/* === SINGLE PRODUCT GALLERY (SWIPER) === */
.product-gallery {
    position: relative;
    min-width: 0;
    /* Prevent grid blowout */
    width: 100%;
    max-width: 100%;
}

/* Main Slider */
.gallery-main {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    /* Enforce square aspect ratio */
    border-radius: 1rem;
    /* rounded-2xl */
    overflow: hidden !important;
    position: relative;
    display: flex;
    /* Ensure proper containment */
}

.gallery-main .swiper-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

.gallery-main .swiper-slide {
    background-color: #fff;
    height: 100% !important;
    /* Force fill */
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Contain children */
    box-sizing: border-box;
}

.gallery-main .swiper-button-next,
.gallery-main .swiper-button-prev {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    z-index: 20;
    /* Ensure above zoom container */
}

.gallery-main .swiper-button-next:after,
.gallery-main .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.gallery-main .swiper-button-next:hover,
.gallery-main .swiper-button-prev:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Thumbnail Slider */
.gallery-thumbs {
    margin-top: 1rem;
    padding: 2px;
    /* Prevent border cut-off */
}

.gallery-thumbs .swiper-slide {
    width: 20%;
    height: 100%;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 0.5rem;
    /* rounded-lg */
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
    /* Ring effect */
}



/* === STAR RATING STYLING (SVG MASK) === */
/* Override WooCommerce Defaults with High Specificity */
.woocommerce .star-rating,
.reviews-section .star-rating,
.review-rating .star-rating,
.average-rating .star-rating {
    float: none !important;
    display: inline-block !important;
    font-size: 1.4em !important;
    font-family: sans-serif !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 1em !important;
    line-height: 1 !important;
    width: 5em !important;
    /* 5 stars * 1em */
    color: var(--border) !important;
    /* Empty stars color */
    background: transparent !important;
    margin: 0 !important;
}

.woocommerce .star-rating::before,
.reviews-section .star-rating::before,
.review-rating .star-rating::before,
.average-rating .star-rating::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
    -webkit-mask-size: 1em 1em !important;
    mask-size: 1em 1em !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    opacity: 1 !important;
}

.woocommerce .star-rating span,
.reviews-section .star-rating span,
.review-rating .star-rating span,
.average-rating .star-rating span {
    overflow: hidden !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    padding-top: 1.5em !important;
}

.woocommerce .star-rating span::before,
.reviews-section .star-rating span::before,
.review-rating .star-rating span::before,
.average-rating .star-rating span::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--primary) !important;
    /* Filled stars color */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
    -webkit-mask-size: 1em 1em !important;
    mask-size: 1em 1em !important;
    top: 0 !important;
    position: absolute !important;
    left: 0 !important;
    opacity: 1 !important;
}

/* === SIMPLE HOVER ZOOM === */
.image-zoom-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    flex-shrink: 0;
}

.image-zoom-container:hover .zoom-image {
    transform: scale(1.5);
}

/* Ensure swiper slide contains the zoom container properly */
.gallery-main .swiper-slide {
    overflow: hidden !important;
}

.gallery-main .swiper-slide .image-zoom-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* =========================================
   Mobile UX Improvements
   ========================================= */

/* Gallery Optimization */
.swiper-pagination-bullet {
    background: var(--foreground);
    opacity: 0.3;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary);
    width: 20px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .gallery-thumbs {
        display: none !important;
        /* Hide thumbnails on mobile */
    }

    .gallery-main {
        margin-bottom: 0 !important;
        /* Remove bottom margin */
    }

    .gallery-main .swiper-pagination {
        bottom: 10px !important;
    }
}

/* Sticky Add to Cart Bar */
.sticky-add-to-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--background);
    border-top: 1px solid var(--border);
    padding: 0.75rem 0;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.sticky-add-to-cart.visible {
    transform: translateY(0);
}

.sticky-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sticky-product-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
}

.sticky-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.sticky-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sticky-title {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 769px) {
    .sticky-add-to-cart {
        display: none !important;
    }
}

/* Force WhatsApp Green on Loop Button */
.product-card .btn-whatsapp {
    background-color: #25D366 !important;
    color: white !important;
    border: none !important;
}

.product-card .btn-whatsapp:hover {
    background-color: #128C7E !important;
}

.sticky-price {
    font-size: 0.875rem;
    color: var(--primary);
    font-weight: 700;
}

.sticky-price del {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-weight: 400;
    margin-right: 4px;
}

.sticky-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Hide sticky bar on desktop if desired, or keep it responsive */
@media (min-width: 769px) {
    .sticky-add-to-cart {
        display: none;
    }
}
/* =========================================
   Category Description Section (L�minas)
   ========================================= */
.category-description-section {
    padding: 6rem 0;
    background-color: var(--color-background-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.description-video-wrapper {
    flex: 1 1 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    aspect-ratio: 16/9;
}

.description-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.description-content-wrapper {
    flex: 1 1 500px;
}

.category-description-section .section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
    color: var(--color-text-main);
}

.description-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.description-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.description-features li {
    position: relative;
    padding-left: 2rem;
    font-size: 1.05rem;
    color: var(--color-text-main);
    font-weight: 500;
}

.description-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: bold;
}

@media (max-width: 991px) {
    .category-description-section {
        flex-direction: column;
        padding: 4rem 1.5rem;
        gap: 2rem;
    }

    .description-video-wrapper,
    .description-content-wrapper {
        flex: 1 1 100%;
        width: 100%;
    }

    .category-description-section .section-title {
        font-size: 2rem;
        text-align: center;
    }

    .description-text {
        text-align: center;
    }
}


/* =========================================
   Button Styles (Fix)
   ========================================= */
.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark, #b8860b);
    border-color: var(--color-primary-dark, #b8860b);
    color: #fff;
}

.btn-outline-white {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-outline-white:hover {
    background-color: #fff;
    color: var(--accent);
}


/* Payment Icons Size Increase (15%) */
.footer-payment-methods .payment-icon-wrapper img,
.payment-methods-section .payment-icon-wrapper img {
    height: 37px;
    width: auto;
}

/* Accordion Fixes */
.accordion-panel {
    border-bottom: 1px solid #eee;
}
.accordion-panel .panel-heading {
    cursor: pointer;
    padding: 1rem 0;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-panel .panel-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-panel.active .panel-content {
    max-height: 2000px;
}

/* Fix for single product stretching in Marmolizadas page */
.product-grid-section .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}