/**
 * PidePaya Product Catalog Styles - Version 2.1
 * SIEMPRE dos columnas: Tabs IZQUIERDA | Productos DERECHA
 */

/* ========================================
   RESET Y BASE
======================================== */

/* Override any inline overflow:hidden on html/body to allow page scroll */
html, body {
    overflow: visible !important;
    height: auto !important;
}

* {
    box-sizing: border-box;
}

/* ========================================
   HEADER CON LOGO
======================================== */

.pidepaya-catalog-header {
    width: 100%;
    background: #000;
    border-bottom: 2px solid #333;
    position: relative;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pidepaya-header-inner {
    padding: 15px 20px;
    text-align: center;
}

.pidepaya-logo {
    max-height: 60px;
    max-width: 250px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.pidepaya-site-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ========================================
   LAYOUT PRINCIPAL - SIEMPRE 2 COLUMNAS
======================================== */


.pidepaya-catalog-wrapper {
    width: 100%;
    min-height: 100vh;
    background: #1a1a1a;
}

.pidepaya-catalog-container {
    /* Container flex solo para sidebar + products */
    display: flex;
    width: 100%;
}

/* ========================================
   SIDEBAR DE CATEGORÍAS (IZQUIERDA)
   SIEMPRE FIJA A LA IZQUIERDA
   Estilos actualizados para coincidir con qrgrila.pidepaya.com
======================================== */

.pidepaya-categories-sidebar {
    width: 160px;
    min-width: 160px;
    background: #1a1a1a; /* Fondo más oscuro como qrgrila */
    padding: 15px 8px;
    position: sticky;
    top: 91px; /* altura del header en móvil */
    max-height: calc(100vh - 91px);
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 2px solid #333;
}

.pidepaya-categories-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Gap consistente como qrgrila */
}

.pidepaya-category-tab {
    background: #1b1b1b; /* Fondo específico como qrgrila */
    border: 1px solid #2c2c2c; /* Borde como qrgrila */
    color: #ddd; /* Color de texto como qrgrila */
    padding: 12px 14px; /* Padding consistente como qrgrila */
    text-align: left;
    cursor: pointer;
    font-size: 15px; /* Tamaño de fuente como qrgrila */
    font-weight: normal; /* Peso normal como qrgrila */
    letter-spacing: 0.3px;
    border-radius: 12px; /* Radius consistente como qrgrila */
    transition: all 0.3s ease;
    white-space: normal;
    word-wrap: break-word;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.pidepaya-category-tab:hover {
    background: #252525; /* Hover específico como qrgrila */
    border-color: #3c3c3c;
}

.pidepaya-category-tab.active {
    background: #ffffff; /* Activo blanco como qrgrila */
    color: #000000; /* Texto negro como qrgrila */
    border-color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

/* Smooth scroll en la sidebar */
.pidepaya-categories-sidebar {
    scroll-behavior: smooth;
}

/* ========================================
   ÁREA DE PRODUCTOS (DERECHA)
======================================== */

.pidepaya-products-area {
    flex: 1;
    padding: 15px 10px;
    background: #1a1a1a;
    overflow-y: auto;
    scroll-behavior: smooth;
    max-height: calc(100vh - var(--bembos-header-height, 91px));
}

.pidepaya-category-section {
    margin-bottom: 40px;
    scroll-margin-top: 20px;
}

.pidepaya-category-title {
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 12px;
}

.pidepaya-category-title h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.pidepaya-category-description {
    color: #999;
    font-size: 12px;
    margin: 8px 0 0 0;
    line-height: 1.4;
}

/* Grid de productos - UNA COLUMNA en móvil */
.pidepaya-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px; /* Gap consistente como qrgrila */
    margin-bottom: 30px;
}

.pidepaya-no-products,
.pidepaya-no-categories {
    color: #999;
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
}

/* ========================================
   SENTINEL PARA INTERSECTION OBSERVER
======================================== */

.pidepaya-load-more-sentinel {
    height: 10px;
    margin: 20px 0;
    pointer-events: none;
}

/* ========================================
   LOADING & END MESSAGE
======================================== */

.pidepaya-loading {
    text-align: center;
    padding: 30px 15px;
    color: #999;
}

.pidepaya-spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

/* ========================================
   TEMPLATE GRILA (DARK) - DEFAULT
======================================== */

.pidepaya-product-card.grila-template {
    background: #000;
    border-radius: 16px; /* Border radius de card como qrgrila */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pidepaya-product-card.grila-template:hover {
    transform: translateY(-4px); /* Efecto hover más pronunciado como qrgrila */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pidepaya-product-card.grila-template .pidepaya-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #1a1a1a;
    border-radius: 12px 12px 0 0; /* Border radius interno de imagen como qrgrila */
}

.pidepaya-product-card.grila-template .pidepaya-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.pidepaya-product-card.grila-template .pidepaya-product-content {
    padding: 16px; /* Padding ajustado como qrgrila */
}

.pidepaya-product-card.grila-template .pidepaya-product-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.pidepaya-product-card.grila-template .pidepaya-product-title a {
    color: #fff;
    text-decoration: none;
}

.pidepaya-product-card.grila-template .pidepaya-product-price {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 8px 0;
}

.pidepaya-product-card.grila-template .pidepaya-product-description {
    color: #999;
    font-size: 13px;
    line-height: 1.4;
    margin: 8px 0;
}

.pidepaya-product-card.grila-template .pidepaya-product-button {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin-top: 12px;
    transition: all 0.3s ease;
}

.pidepaya-product-card.grila-template .pidepaya-product-button:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

/* ========================================
   TEMPLATE MODERN (LIGHT)
======================================== */

[data-template="modern"] .pidepaya-catalog-header {
    background: #fff;
    border-bottom-color: #e0e0e0;
}

[data-template="modern"] .pidepaya-site-title {
    color: #333;
}

[data-template="modern"] .pidepaya-categories-sidebar {
    background: #f8f8f8;
}

[data-template="modern"] .pidepaya-category-tab {
    color: #333;
}

[data-template="modern"] .pidepaya-category-tab.active {
    background: #4CAF50;
    color: #fff;
}

[data-template="modern"] .pidepaya-products-area {
    background: #fff;
}

[data-template="modern"] .pidepaya-category-title h2 {
    color: #333;
}

[data-template="modern"] .pidepaya-category-title {
    border-bottom-color: #e0e0e0;
}

[data-template="modern"] .pidepaya-category-description {
    color: #666;
}

.pidepaya-product-card.modern-template {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.pidepaya-product-card.modern-template:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.pidepaya-product-card.modern-template .pidepaya-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.pidepaya-product-card.modern-template .pidepaya-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pidepaya-product-card.modern-template .pidepaya-product-content {
    padding: 15px;
}

.pidepaya-product-card.modern-template .pidepaya-product-price {
    font-size: 20px;
    font-weight: 700;
    color: #4CAF50;
    margin: 0 0 8px 0;
}

.pidepaya-product-card.modern-template .pidepaya-product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.3;
}

.pidepaya-product-card.modern-template .pidepaya-product-title a {
    color: #333;
    text-decoration: none;
}

.pidepaya-product-card.modern-template .pidepaya-product-description {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
}

.pidepaya-product-card.modern-template .pidepaya-product-button {
    display: inline-block;
    background: #4CAF50;
    color: #fff;
    padding: 8px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin-top: 8px;
    transition: background 0.3s ease;
}

.pidepaya-product-card.modern-template .pidepaya-product-button:hover {
    background: #45a049;
}

/* ========================================
   TEMPLATE MINIMAL
======================================== */

[data-template="minimal"] .pidepaya-catalog-header {
    background: #fff;
    border-bottom-color: #e0e0e0;
}

[data-template="minimal"] .pidepaya-site-title {
    color: #333;
}

[data-template="minimal"] .pidepaya-products-area {
    background: #fff;
}

[data-template="minimal"] .pidepaya-categories-sidebar {
    background: #fafafa;
    border-right-color: #e0e0e0;
}

[data-template="minimal"] .pidepaya-category-tab {
    color: #333;
}

[data-template="minimal"] .pidepaya-category-tab.active {
    background: #333;
    color: #fff;
}

[data-template="minimal"] .pidepaya-category-title h2 {
    color: #333;
}

[data-template="minimal"] .pidepaya-category-title {
    border-bottom-color: #e0e0e0;
}

[data-template="minimal"] .pidepaya-category-description {
    color: #666;
}

.pidepaya-product-card.minimal-template {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pidepaya-product-card.minimal-template:hover {
    border-color: #333;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.pidepaya-product-card.minimal-template .pidepaya-product-card-inner {
    display: block;
    text-decoration: none;
}

.pidepaya-product-card.minimal-template .pidepaya-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #fff;
}

.pidepaya-product-card.minimal-template .pidepaya-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pidepaya-product-card.minimal-template .pidepaya-product-content {
    padding: 15px;
}

.pidepaya-product-card.minimal-template .pidepaya-product-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.3;
}

.pidepaya-product-card.minimal-template .pidepaya-product-price {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* ========================================
   TEMPLATE COLORFUL
======================================== */

[data-template="colorful"] .pidepaya-catalog-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-template="colorful"] .pidepaya-products-area {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-template="colorful"] .pidepaya-categories-sidebar {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-right-color: rgba(255, 255, 255, 0.2);
}

[data-template="colorful"] .pidepaya-category-title h2 {
    color: #fff;
}

[data-template="colorful"] .pidepaya-category-title {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

[data-template="colorful"] .pidepaya-category-description {
    color: rgba(255, 255, 255, 0.9);
}

.pidepaya-product-card.colorful-template {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.pidepaya-product-card.colorful-template:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.pidepaya-product-card.colorful-template .pidepaya-product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.pidepaya-product-card.colorful-template .pidepaya-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pidepaya-product-card.colorful-template .pidepaya-product-content {
    padding: 15px;
    background: rgba(255, 255, 255, 0.95);
}

.pidepaya-product-card.colorful-template .pidepaya-product-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #333;
    line-height: 1.3;
}

.pidepaya-product-card.colorful-template .pidepaya-product-title a {
    color: #333;
    text-decoration: none;
}

.pidepaya-product-card.colorful-template .pidepaya-product-price {
    font-size: 19px;
    font-weight: 700;
    color: var(--gradient-start);
    margin: 8px 0;
}

.pidepaya-product-card.colorful-template .pidepaya-product-description {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    margin: 8px 0;
}

.pidepaya-product-card.colorful-template .pidepaya-product-button {
    display: inline-block;
    background: var(--gradient-start);
    color: #fff;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin-top: 12px;
    transition: all 0.3s ease;
}

.pidepaya-product-card.colorful-template .pidepaya-product-button:hover {
    background: var(--gradient-end);
    transform: scale(1.05);
}

/* ========================================
   RESPONSIVE PARA TABLETS Y DESKTOP
======================================== */

/* Tablets grandes (768px+) - Estilos ajustados para coincidir con qrgrila */
@media (min-width: 768px) {
    .pidepaya-header-inner {
        padding: 20px 30px;
    }

    .pidepaya-logo {
        max-height: 70px;
        max-width: 280px;
    }

    .pidepaya-site-title {
        font-size: 28px;
    }

    .pidepaya-categories-sidebar {
        width: 260px; /* Como qrgrila */
        min-width: 260px;
        padding: 20px 12px; /* Padding ajustado */
        top: 111px;
        max-height: calc(100vh - 111px);
    }

    .pidepaya-categories-wrapper {
        gap: 12px; /* Gap consistente */
    }

    .pidepaya-category-tab {
        padding: 12px 14px; /* Padding consistente como qrgrila */
        font-size: 15px; /* Tamaño consistente como qrgrila */
        border-radius: 12px; /* Radius consistente como qrgrila */
    }

    .pidepaya-products-area {
        padding: 25px 20px;
    }

    .pidepaya-products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas fijas como qrgrila */
        gap: 24px; /* Gap consistente como qrgrila */
    }

    .pidepaya-category-title h2 {
        font-size: 24px;
    }

    .pidepaya-category-section {
        margin-bottom: 50px;
    }

    .pidepaya-product-card .pidepaya-product-image {
        height: 200px !important;
    }
}

/* Desktop (1024px+) - Estilos ajustados para coincidir con qrgrila */
@media (min-width: 1024px) {
    .pidepaya-header-inner {
        padding: 20px 30px;
    }

    .pidepaya-logo {
        max-height: 80px;
        max-width: 300px;
    }

    .pidepaya-site-title {
        font-size: 32px;
    }

    .pidepaya-categories-sidebar {
        width: 260px; /* Como qrgrila */
        min-width: 260px;
        padding: 20px 12px; /* Padding ajustado */
        top: 124px;
        max-height: calc(100vh - 124px);
    }

    .pidepaya-categories-wrapper {
        gap: 12px; /* Gap consistente */
    }

    .pidepaya-category-tab {
        padding: 12px 14px; /* Padding consistente como qrgrila */
        font-size: 15px; /* Tamaño consistente como qrgrila */
        border-radius: 12px; /* Radius consistente como qrgrila */
        text-align: left;
    }

    .pidepaya-products-area {
        padding: 30px;
    }

    .pidepaya-products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas fijas como qrgrila */
        gap: 24px; /* Gap consistente como qrgrila */
    }

    .pidepaya-category-title h2 {
        font-size: 28px;
    }

    .pidepaya-category-title {
        margin-bottom: 30px;
    }

    .pidepaya-category-section {
        margin-bottom: 60px;
    }

    .pidepaya-product-card .pidepaya-product-image {
        height: 220px !important;
    }

    .pidepaya-product-card.grila-template .pidepaya-product-title {
        font-size: 18px;
    }

    .pidepaya-product-card.grila-template .pidepaya-product-price {
        font-size: 20px;
    }

    .pidepaya-product-card.grila-template .pidepaya-product-description {
        font-size: 14px;
    }

    .pidepaya-product-card.grila-template .pidepaya-product-button {
        padding: 12px 30px;
        font-size: 14px;
    }
}

/* Desktop grande (1440px+) */
@media (min-width: 1440px) {
    .pidepaya-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }
}

/* ========================================
   LAZY LOADING DE IMÁGENES
======================================== */

.pidepaya-product-image {
    position: relative;
    background: #2a2a2a;
    overflow: hidden;
}

.pidepaya-product-image img {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.pidepaya-product-image img.loaded {
    opacity: 1;
}

/* Placeholder animado mientras carga */
.pidepaya-product-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #3a3a3a 50%,
        #2a2a2a 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

.pidepaya-product-image img.loaded ~ ::before,
.pidepaya-product-image:has(img.loaded)::before {
    display: none;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Optimización para scroll suave */
.pidepaya-products-area {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ========================================
   FIXES PARA MODO DESKTOP
======================================== */

/* Permitir scroll natural de página con slider */
body.catalog-fullwidth-page {
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que el wrapper permita contenido natural */
.catalog-fullwidth-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.pidepaya-catalog-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.pidepaya-catalog-container {
    flex: 1 !important;
    display: flex !important;
}

/* El área de productos tiene scroll interno si es necesario */
.pidepaya-products-area {
    overflow-y: auto !important;
}

/* Fix para el fondo blanco del body */
body.catalog-fullwidth-page {
    background-color: #000 !important;
}

body.catalog-fullwidth-page html {
    background-color: #000 !important;
}

/* Asegurar que no haya espacios blancos */
.catalog-fullwidth-wrapper {
    background-color: #000 !important;
}

/* ========================================
   TEMPLATE WECHAT (SOCIAL COMMERCE)
   Mobile-First Chinese E-commerce Style
======================================== */

/* WeChat Theme - Wrapper & Container Styles */
[data-template="wechat"] .pidepaya-catalog-header {
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

[data-template="wechat"] .pidepaya-site-title {
    color: #333;
    font-size: 20px;
    letter-spacing: 0.5px;
}

[data-template="wechat"] .pidepaya-categories-sidebar {
    background: #fff;
    border-right: 1px solid #E0E0E0;
}

[data-template="wechat"] .pidepaya-category-tab {
    background: #F5F5F5;
    color: #333;
    border: 1px solid #E0E0E0;
    font-weight: 500;
    border-radius: 20px;
    padding: 10px 14px;
    font-size: 14px;
}

[data-template="wechat"] .pidepaya-category-tab:hover {
    background: #FFE5DC;
    border-color: #FF6B35;
    color: #FF6B35;
}

[data-template="wechat"] .pidepaya-category-tab.active {
    background: #FF6B35;
    color: #fff;
    border-color: #FF6B35;
    font-weight: 700;
}

[data-template="wechat"] .pidepaya-products-area {
    background: #F5F5F5;
}

[data-template="wechat"] .pidepaya-category-title h2 {
    color: #333;
    font-size: 22px;
}

[data-template="wechat"] .pidepaya-category-title {
    border-bottom-color: #E0E0E0;
}

[data-template="wechat"] .pidepaya-category-description {
    color: #757575;
}

/* WeChat Product Card Styles */
.pidepaya-product-card.wechat-template {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.pidepaya-product-card.wechat-template:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.pidepaya-product-card.wechat-template:active {
    transform: scale(0.98);
}

/* WeChat Badge Styles */
.wechat-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    letter-spacing: 0.5px;
}

.wechat-badge--hot {
    background: #FF6B35;
    color: #fff;
}

.wechat-badge--new {
    background: #FFC107;
    color: #333;
}

.wechat-badge--sale {
    background: #E53935;
    color: #fff;
}

/* WeChat Image Wrapper */
.wechat-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F5F5F5;
    position: relative;
}

.wechat-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pidepaya-product-card.wechat-template:hover .wechat-image {
    transform: scale(1.05);
}

/* WeChat Product Info */
.wechat-info {
    padding: 12px;
}

/* WeChat Title */
.wechat-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    margin: 0 0 6px 0;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wechat-title a {
    color: #333;
    text-decoration: none;
}

.wechat-title a:hover {
    color: #FF6B35;
}

/* WeChat Description */
.wechat-description {
    font-size: 12px;
    color: #757575;
    line-height: 1.3;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* WeChat Categories */
.wechat-categories {
    font-size: 11px;
    color: #999;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* WeChat Price Wrapper */
.wechat-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 8px 0;
}

.wechat-price {
    font-size: 18px;
    font-weight: 700;
    color: #E53935;
    line-height: 1;
}

.wechat-price-symbol {
    font-size: 14px;
}

.wechat-old-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

/* WeChat Actions */
.wechat-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #F5F5F5;
}

.wechat-button {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #757575;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.wechat-button:hover {
    border-color: #FF6B35;
    color: #FF6B35;
    background: #FFF5F2;
}

.wechat-button--primary {
    background: #FF6B35;
    color: #fff;
    border-color: #FF6B35;
    font-weight: 600;
}

.wechat-button--primary:hover {
    background: #E55A28;
    border-color: #E55A28;
}

/* WeChat Template - Responsive Breakpoints */
@media (min-width: 768px) {
    [data-template="wechat"] .pidepaya-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wechat-title {
        font-size: 15px;
    }

    .wechat-price {
        font-size: 20px;
    }

    .wechat-info {
        padding: 14px;
    }
}

@media (min-width: 1024px) {
    [data-template="wechat"] .pidepaya-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .wechat-title {
        font-size: 16px;
    }

    .wechat-description {
        font-size: 13px;
    }

    .wechat-price {
        font-size: 22px;
    }

    .wechat-button {
        font-size: 14px;
        padding: 10px 14px;
    }
}

@media (min-width: 1440px) {
    [data-template="wechat"] .pidepaya-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch optimization for WeChat template */
.wechat-button,
.pidepaya-product-card.wechat-template {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure images dont break aspect ratio */
.wechat-image-wrapper::after {
    content: "";
    display: block;
    padding-bottom: 100%; /* 1:1 aspect ratio */
}

.wechat-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
}

/* ========================================
   HERO BANNER - GENERAL STYLES
======================================== */

.pidepaya-hero-banner {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pidepaya-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.pidepaya-hero-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #fff;
    line-height: 1.2;
}

.pidepaya-hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.4;
}

.pidepaya-hero-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 1;
}

/* ========================================
   HERO BANNER - WECHAT STYLE
======================================== */

.pidepaya-hero-banner--wechat {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.pidepaya-hero-banner--wechat .pidepaya-hero-title {
    font-size: 22px;
    letter-spacing: 0.5px;
}

.pidepaya-hero-banner--wechat .pidepaya-hero-subtitle {
    font-size: 14px;
}

/* ========================================
   HERO BANNER - INSTAGRAM STYLE
======================================== */

.pidepaya-hero-banner--instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 4px 16px rgba(193, 53, 132, 0.4);
    min-height: 180px;
}

.pidepaya-hero-banner--instagram .pidepaya-hero-title {
    font-size: 26px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pidepaya-hero-banner--instagram .pidepaya-hero-subtitle {
    font-size: 15px;
}

/* ========================================
   HERO BANNER - AMAZON STYLE
======================================== */

.pidepaya-hero-banner--amazon {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.pidepaya-hero-banner--amazon .pidepaya-hero-title {
    color: #232F3E;
    font-size: 24px;
    font-weight: 700;
}

.pidepaya-hero-banner--amazon .pidepaya-hero-subtitle {
    color: #232F3E;
    font-weight: 500;
}

/* ========================================
   HERO BANNER - NEON STYLE
======================================== */

.pidepaya-hero-banner--neon {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    border: 2px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5), inset 0 0 20px rgba(0, 255, 136, 0.1);
    min-height: 180px;
}

.pidepaya-hero-banner--neon .pidepaya-hero-title {
    color: #00ff88;
    font-size: 28px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pidepaya-hero-banner--neon .pidepaya-hero-subtitle {
    color: #00d9ff;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
}

/* Hero Banner Responsive */
@media (max-width: 767px) {
    .pidepaya-hero-banner {
        min-height: 140px;
        padding: 20px;
    }

    .pidepaya-hero-title {
        font-size: 20px;
    }

    .pidepaya-hero-subtitle {
        font-size: 14px;
    }

    .pidepaya-hero-image {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .pidepaya-hero-banner {
        min-height: 180px;
        padding: 32px;
    }

    .pidepaya-hero-banner--instagram,
    .pidepaya-hero-banner--neon {
        min-height: 200px;
    }
}

/* ========================================
   TEMPLATE INSTAGRAM (VISUAL MODERN)
   Influencer Commerce Style
======================================== */

/* Instagram Theme - Wrapper & Container */
[data-template="instagram"] .pidepaya-catalog-header {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-bottom: none;
}

[data-template="instagram"] .pidepaya-site-title {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

[data-template="instagram"] .pidepaya-categories-sidebar {
    background: #fafafa;
    border-right: 1px solid #dbdbdb;
}

[data-template="instagram"] .pidepaya-category-tab {
    background: #fff;
    color: #262626;
    border: 1px solid #dbdbdb;
    font-weight: 600;
    border-radius: 8px;
}

[data-template="instagram"] .pidepaya-category-tab:hover {
    background: #f0f0f0;
}

[data-template="instagram"] .pidepaya-category-tab.active {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    border-color: transparent;
}

[data-template="instagram"] .pidepaya-products-area {
    background: #fafafa;
}

[data-template="instagram"] .pidepaya-category-title h2 {
    color: #262626;
    font-size: 24px;
    font-weight: 700;
}

[data-template="instagram"] .pidepaya-category-title {
    border-bottom: 1px solid #dbdbdb;
}

/* Instagram Product Card */
.pidepaya-product-card.instagram-template {
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pidepaya-product-card.instagram-template:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Instagram Image Container */
.instagram-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0f0f0;
}

.instagram-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pidepaya-product-card.instagram-template:hover .instagram-image {
    transform: scale(1.05);
}

/* Instagram Overlay */
.instagram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pidepaya-product-card.instagram-template:hover .instagram-overlay {
    opacity: 1;
}

.instagram-actions {
    display: flex;
    gap: 20px;
}

.instagram-action-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #262626;
}

.instagram-action-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.instagram-action-btn svg {
    width: 24px;
    height: 24px;
}

.instagram-sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e53935;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Instagram Info Section */
.instagram-info {
    padding: 16px;
}

.instagram-title {
    font-size: 16px;
    font-weight: 700;
    color: #262626;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.instagram-title a {
    color: #262626;
    text-decoration: none;
}

.instagram-title a:hover {
    color: #c13584;
}

.instagram-description {
    font-size: 14px;
    color: #8e8e8e;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.instagram-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px 0;
}

.instagram-price {
    font-size: 20px;
    font-weight: 700;
    color: #262626;
}

.instagram-old-price {
    font-size: 14px;
    color: #8e8e8e;
    text-decoration: line-through;
}

.instagram-button {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.instagram-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 53, 132, 0.4);
}

/* ========================================
   TEMPLATE AMAZON (MARKETPLACE CLASSIC)
   Western E-commerce Style
======================================== */

/* Amazon Theme - Wrapper & Container */
[data-template="amazon"] .pidepaya-catalog-header {
    background: #232F3E;
    border-bottom: none;
}

[data-template="amazon"] .pidepaya-site-title {
    color: #fff;
    font-size: 22px;
}

[data-template="amazon"] .pidepaya-categories-sidebar {
    background: #fff;
    border-right: 1px solid #d5d9d9;
}

[data-template="amazon"] .pidepaya-category-tab {
    background: #fff;
    color: #0F1111;
    border: 1px solid #d5d9d9;
    font-weight: 400;
    border-radius: 8px;
    font-size: 14px;
}

[data-template="amazon"] .pidepaya-category-tab:hover {
    background: #f7f8f8;
    border-color: #FF9900;
}

[data-template="amazon"] .pidepaya-category-tab.active {
    background: #FFF;
    color: #000;
    border-color: #FF9900;
    border-width: 2px;
    font-weight: 700;
}

[data-template="amazon"] .pidepaya-products-area {
    background: #fff;
}

[data-template="amazon"] .pidepaya-category-title h2 {
    color: #0F1111;
    font-size: 24px;
}

[data-template="amazon"] .pidepaya-category-title {
    border-bottom: 1px solid #d5d9d9;
}

/* Amazon Product Card */
.pidepaya-product-card.amazon-template {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.pidepaya-product-card.amazon-template:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #C45500;
}

/* Amazon Image */
.amazon-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.amazon-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.pidepaya-product-card.amazon-template:hover .amazon-image {
    transform: scale(1.03);
}

.amazon-deal-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #CC0C39;
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

/* Amazon Info */
.amazon-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.amazon-bestseller-badge {
    background: #FF9900;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 8px;
    width: fit-content;
}

.amazon-title {
    font-size: 14px;
    font-weight: 400;
    color: #0F1111;
    margin: 0 0 8px 0;
    line-height: 1.4;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.amazon-title a {
    color: #007185;
    text-decoration: none;
}

.amazon-title a:hover {
    color: #C7511F;
    text-decoration: underline;
}

/* Amazon Rating */
.amazon-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.amazon-stars {
    display: flex;
    gap: 2px;
}

.amazon-star {
    color: #ddd;
    font-size: 16px;
}

.amazon-star.filled {
    color: #FF9900;
}

.amazon-star.half {
    background: linear-gradient(90deg, #FF9900 50%, #ddd 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.amazon-review-count {
    font-size: 12px;
    color: #007185;
}

/* Amazon Price */
.amazon-price-section {
    margin-bottom: 12px;
}

.amazon-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.amazon-discount-label {
    background: #CC0C39;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
}

.amazon-price {
    font-size: 24px;
    font-weight: 400;
    color: #0F1111;
}

.amazon-currency {
    font-size: 14px;
    vertical-align: super;
}

.amazon-old-price-row {
    font-size: 12px;
    color: #565959;
}

.amazon-old-price {
    text-decoration: line-through;
}

.amazon-description {
    font-size: 13px;
    color: #565959;
    line-height: 1.4;
    margin-bottom: 12px;
    flex: 1;
}

/* Amazon Actions */
.amazon-actions {
    margin-top: auto;
}

.amazon-button {
    display: block;
    width: 100%;
    background: #FFD814;
    color: #0F1111;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FCD200;
    transition: all 0.2s ease;
}

.amazon-button:hover {
    background: #F7CA00;
    border-color: #F2C200;
}

.amazon-button--primary {
    background: #FF9900;
    color: #fff;
    border-color: #FF9900;
}

.amazon-button--primary:hover {
    background: #FA8900;
}

/* ========================================
   TEMPLATE NEON (CYBERPUNK DARK)
   Futuristic Style
======================================== */

/* Neon Theme - Wrapper & Container */
[data-template="neon"] .pidepaya-catalog-header {
    background: #0a0a0a;
    border-bottom: 2px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

[data-template="neon"] .pidepaya-site-title {
    color: #00ff88;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

[data-template="neon"] .pidepaya-categories-sidebar {
    background: #0f0f1e;
    border-right: 2px solid #00ff88;
}

[data-template="neon"] .pidepaya-category-tab {
    background: rgba(0, 255, 136, 0.05);
    color: #00ff88;
    border: 1px solid #00ff88;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

[data-template="neon"] .pidepaya-category-tab:hover {
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

[data-template="neon"] .pidepaya-category-tab.active {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border-color: #00ff88;
    border-width: 2px;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.8), inset 0 0 10px rgba(0, 255, 136, 0.3);
}

[data-template="neon"] .pidepaya-products-area {
    background: #0a0a0a;
}

[data-template="neon"] .pidepaya-category-title h2 {
    color: #00ff88;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

[data-template="neon"] .pidepaya-category-title {
    border-bottom: 2px solid #00ff88;
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.3);
}

/* Neon Product Card */
.pidepaya-product-card.neon-template {
    background: #0f0f1e;
    border: 2px solid #00ff88;
    border-radius: 0;
    overflow: visible;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3), inset 0 0 15px rgba(0, 255, 136, 0.05);
    transition: all 0.3s ease;
}

.pidepaya-product-card.neon-template:hover {
    border-color: #00d9ff;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.6), 0 0 50px rgba(0, 217, 255, 0.3), inset 0 0 20px rgba(0, 255, 136, 0.1);
    transform: translateY(-4px);
}

/* Neon Border Animation */
.neon-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00ff88, #00d9ff, #00ff88);
    background-size: 400% 400%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    animation: neonGradient 3s ease infinite;
}

.pidepaya-product-card.neon-template:hover .neon-border {
    opacity: 0.3;
}

@keyframes neonGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Neon Image */
.neon-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
}

.neon-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.3s ease;
}

.pidepaya-product-card.neon-template:hover .neon-image {
    filter: brightness(1.1) contrast(1.2);
    transform: scale(1.05);
}

.neon-glow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pidepaya-product-card.neon-template:hover .neon-glow-overlay {
    opacity: 1;
}

.neon-hot-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ff0066;
    color: #fff;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 2px solid #ff0066;
    box-shadow: 0 0 20px rgba(255, 0, 102, 0.8);
    text-shadow: 0 0 10px rgba(255, 0, 102, 0.8);
}

/* Neon Info */
.neon-info {
    padding: 16px;
    position: relative;
    z-index: 1;
}

.neon-title {
    font-size: 16px;
    font-weight: 900;
    color: #00ff88;
    margin: 0 0 8px 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    min-height: 40px;
}

.neon-title a {
    color: #00ff88;
    text-decoration: none;
}

.neon-title a:hover {
    color: #00d9ff;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.8);
}

.neon-description {
    font-size: 12px;
    color: #8e8e8e;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

/* Neon Price */
.neon-price-wrapper {
    margin-bottom: 16px;
}

.neon-price-label {
    font-size: 10px;
    color: #00d9ff;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 4px;
}

.neon-price-amount {
    font-size: 28px;
    font-weight: 900;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    line-height: 1;
}

.neon-old-price {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

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

/* Neon Button */
.neon-button {
    display: block;
    width: 100%;
    background: transparent;
    color: #00ff88;
    padding: 14px;
    border: 2px solid #00ff88;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.neon-button:hover {
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.8), inset 0 0 20px rgba(0, 255, 136, 0.2);
    color: #fff;
}

.neon-button-text {
    position: relative;
    z-index: 2;
}

.neon-button-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.5) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.5s ease;
}

.neon-button:hover .neon-button-glow {
    width: 300px;
    height: 300px;
    opacity: 1;
}

/* Neon Corner Accents */
.neon-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #00d9ff;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.neon-corner--tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.neon-corner--tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.neon-corner--bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.neon-corner--br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.pidepaya-product-card.neon-template:hover .neon-corner {
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.8);
}

/* Responsive adjustments for new templates */
@media (min-width: 768px) {
    [data-template="instagram"] .pidepaya-products-grid,
    [data-template="amazon"] .pidepaya-products-grid,
    [data-template="neon"] .pidepaya-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    [data-template="instagram"] .pidepaya-products-grid,
    [data-template="amazon"] .pidepaya-products-grid,
    [data-template="neon"] .pidepaya-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    [data-template="instagram"] .pidepaya-products-grid,
    [data-template="amazon"] .pidepaya-products-grid,
    [data-template="neon"] .pidepaya-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

   Styles for grila-* classes used in PHP templates
======================================== */

/* Product Card - grila-template classes */
[data-template="grila"] .grila-card-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: center !important;
}

[data-template="grila"] .grila-image-container {
    position: relative !important;
    width: var(--grila-product-image-size) !important;
    height: var(--grila-product-image-size) !important;
    flex-shrink: 0 !important;
}

[data-template="grila"] .grila-image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

[data-template="grila"] .grila-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--grila-card-radius) !important;
    background: #fff !important;
}

[data-template="grila"] .grila-sale-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: var(--grila-primary) !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

[data-template="grila"] .grila-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}

[data-template="grila"] .grila-title {
    font-family: 'Poppins' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 120% !important;
    color: var(--grila-text) !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

[data-template="grila"] .grila-title a {
    color: var(--grila-text) !important;
    text-decoration: none !important;
}

[data-template="grila"] .grila-description {
    font-size: 12px !important;
    line-height: 140% !important;
    color: var(--grila-text) !important;
    margin: 0 !important;
    display: none !important; /* Hidden per design */
}

[data-template="grila"] .grila-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
}

[data-template="grila"] .grila-price {
    font-family: 'Poppins' !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 110% !important;
    color: var(--grila-primary) !important;
    margin: 0 !important;
}

[data-template="grila"] .grila-old-price {
    font-size: 12px !important;
    color: var(--grila-text-inactive) !important;
    text-decoration: line-through !important;
    margin-left: 5px !important;
}

[data-template="grila"] .grila-action-btn {
    width: 23.84px !important;
    height: 23.84px !important;
    min-width: 23.84px !important;
    padding: 0 !important;
    background: var(--grila-primary) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    color: #000 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

[data-template="grila"] .grila-action-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(209, 169, 82, 0.4) !important;
}

/* ========================================
   GRILA SINGLE PRODUCT PAGE
======================================== */

.grila-single-body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--grila-bg, #F6F6F6) !important;
    font-family: 'Poppins', sans-serif !important;
}

.grila-single-wrapper {
    min-height: 100vh !important;
    background: var(--grila-bg, #F6F6F6) !important;
}

.grila-single-header {
    background: #000000 !important;
    border-radius: 0 0 20px 20px !important;
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
}

.grila-header-inner {
    text-align: center !important;
}

.grila-single-logo {
    max-width: 200px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
}

.grila-single-product {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    position: relative !important;
}

.grila-back-button {
    position: absolute !important;
    top: 30px !important;
    left: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--grila-primary, #D1A952) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.grila-back-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(209, 169, 82, 0.4) !important;
}

/* Grila styles moved to themes/grila.css */
    height: auto !important;
    border-radius: 10px !important;
}

.grila-no-image {
    width: 300px !important;
    height: 300px !important;
    background: #E7E7E7 !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
}

/* Grila single product styles moved to themes/grila.css */

/* Desktop (1024px+) - 3 columnas para Grila */
@media (min-width: 1024px) {
    [data-template="grila"] .pidepaya-products-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* ========================================
   TEMPLATE HAMPAO (LIGHT RED)
   Tema Claro con acento rojo
======================================== */

/* Hampao Theme - Container */
[data-template="hampao"] {
    background: #F1F1F1 !important;
}

/* Hampao Theme - Header */
[data-template="hampao"] ~ .pidepaya-catalog-header,
.pidepaya-catalog-wrapper:has([data-template="hampao"]) .pidepaya-catalog-header {
    background: #DF2B1D !important;
    border-bottom: none !important;
    border-radius: 0 0 20px 20px !important;
}

/* Hampao Theme - Sidebar */
[data-template="hampao"] .pidepaya-categories-sidebar {
    background: #FFFFFF !important;
    border-right: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-template="hampao"] .pidepaya-categories-wrapper {
    background: #FFFFFF !important;
    gap: 0 !important;
}

[data-template="hampao"] .pidepaya-category-tab {
    background: #FFFFFF !important;
    color: #050505 !important;
    border: none !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

[data-template="hampao"] .pidepaya-category-tab:hover {
    background: #F5F5F5 !important;
    color: #DF2B1D !important;
}

[data-template="hampao"] .pidepaya-category-tab.active {
    background: #DF2B1D !important;
    color: #FFFFFF !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
}

/* Hampao Theme - Products Area */
[data-template="hampao"] .pidepaya-products-area {
    background: #F1F1F1 !important;
}

[data-template="hampao"] .pidepaya-category-title h2 {
    color: #000000 !important;
}

[data-template="hampao"] .pidepaya-category-title {
    border-bottom-color: #E0E0E0 !important;
}

[data-template="hampao"] .pidepaya-category-description {
    color: #666666 !important;
}