/* SYSTEM DESIGN & CORE VARIABLES */
:root {
    --bg-primary: #fcfaf8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8e8ea;
    --text-primary: #071a37;
    --text-secondary: #4f5a69;
    --text-muted: #7b8491;
    --accent-gold: #e64b57;
    --accent-gold-hover: #c83d4a;
    --accent-gold-dark: #741b37;
    --accent-pink: #f8e8ea;
    --accent-pink-dark: #741b37;
    --accent-orange: #e64b57;
    --status-available: #15803d;
    --status-available-dark: #166534;
    --status-unavailable: #b91c1c;
    --status-unavailable-dark: #991b1b;
    --highlight-gold: rgba(230, 75, 87, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(116, 27, 55, 0.18);
    --font-serif: 'Montserrat', sans-serif;
    --font-sans: 'Montserrat', sans-serif;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --shadow-sm: 0 4px 12px rgba(11, 31, 58, 0.06);
    --shadow-md: 0 12px 24px rgba(11, 31, 58, 0.10);
    --shadow-lg: 0 20px 48px rgba(11, 31, 58, 0.14);
    --shadow-gold: 0 8px 30px rgba(11, 31, 58, 0.12);
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#inicio, #productos, #hombre, #mujer, #quiz, #testimonios, #contacto {
    scroll-margin-top: 100px;
}

body {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
    outline: none;
    border: none;
    background: none;
}

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

ul {
    list-style: none;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

/* SECTION CONTAINER */
.section-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}

/* BADGES & TITLES */
.section-badge {
    display: inline-block;
    color: var(--accent-gold);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #f7f9fc 30%, #0b1f3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 40px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
    letter-spacing: 0.5px;
}

.btn-primary {
    background: #0b1f3a;
    color: #f7f9fc;
    box-shadow: none;
}
.btn-primary:hover {
    background: #0b1f3a;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--accent-gold);
}
.btn-outline:hover {
    background-color: var(--accent-gold);
    color: #0b1f3a;
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

.category-content .btn {
    background: #0b1f3a;
    color: #f7f9fc;
    border: none;
    padding: 16px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}
.category-content .btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 30px rgba(11, 31, 58, 0.5);
    background: linear-gradient(135deg, var(--accent-gold-hover) 0%, var(--accent-gold-dark) 100%);
}

.btn-danger {
    background-color: #0b1f3a;
    color: white;
}
.btn-danger:hover {
    background-color: #3e4e68;
}

/* ANNOUNCEMENT BAR */
.announcement-bar {
    background: linear-gradient(135deg, #0b1f3a 0%, #0b1f3a 50%, #0b1f3a 100%);
    color: #f7f9fc;
    font-size: 0.8rem;
    font-weight: 600;
    height: 38px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(11, 31, 58,0.25);
}

.announcement-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.announcement-item {
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f7f9fc;
    text-shadow: 0 1px 3px rgba(11, 31, 58,0.15);
    animation: rotateAnnouncements 20s infinite linear;
}

@keyframes rotateAnnouncements {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-100%); }
    50%, 70% { transform: translateY(-200%); }
    75%, 95% { transform: translateY(-300%); }
    100% { transform: translateY(0); }
}

/* HEADER & NAVIGATION */
.main-header {
    background: linear-gradient(135deg, #f7f9fc 0%, #dce4ee 50%, #dce4ee 100%);
    border-bottom: 1px solid rgba(11, 31, 58, 0.06);
    box-shadow: 0 2px 12px rgba(11, 31, 58, 0.04);
    position: sticky;
    top: 0;
    z-index: 900;
    transition: var(--transition-smooth);
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

.main-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 40px; right: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(11, 31, 58,0.08) 30%, rgba(11, 31, 58,0.12) 50%, rgba(11, 31, 58,0.08) 70%, transparent 100%);
}

.header-container {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 16px;
}

.logo-img {
    height: 40px;
    width: auto;
}

.brand-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.brand-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.logo-text {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 500;
    color: #0b1f3a;
    letter-spacing: 1px;
    white-space: nowrap;
    line-height: 1.05;
    text-align: center;
}

.logo-sub {
    font-size: 0.78rem;
    color: #0b1f3a;
    margin-top: 2px;
    text-transform: none;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding: 0 8px;
    font-family: var(--font-serif);
}

.logo-sub::before,
.logo-sub::after {
    content: none;
}

.logo-icon svg {
    width: 36px;
    height: 36px;
}

.logo-text {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    color: #0b1f3a;
    letter-spacing: 1px;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #0b1f3a;
    line-height: 1;
}

.brand-sub {
    font-size: 0.55rem;
    letter-spacing: 4px;
    color: #0b1f3a;
    margin-top: -1px;
    font-weight: 700;
}

.nav-menu ul {
    display: flex;
    gap: 14px;
    align-items: center;
}


.nav-menu a {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(11, 31, 58, 0.85);
    transition: var(--transition-smooth);
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b1f3a;
    transition: var(--transition-smooth);
}

.nav-menu a:hover, .nav-menu a.active {
    color: #0b1f3a;
}

.nav-menu a:hover::after, .nav-menu a.active::after {
    width: 100%;
}

.nav-search-item {
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
}

.header-search-direct {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    color: rgba(11, 31, 58, 0.9);
    padding: 4px 0;
    width: 120px;
    border-bottom: 1px solid rgba(11, 31, 58, 0.3);
    transition: border-color 0.3s ease;
}

.header-search-direct:focus {
    border-bottom-color: #0b1f3a;
}

.header-search-direct::placeholder {
    color: rgba(11, 31, 58, 0.5);
    font-size: 0.75rem;
}

.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -80px;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(11, 31, 58,0.1), inset 0 1px 0 rgba(255, 255, 255,0.8);
    z-index: 1000;
    padding: 6px;
}

.search-dropdown.active {
    display: block;
}

.search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: var(--text-primary);
}

.search-dropdown-item:hover {
    background: rgba(11, 31, 58,0.06);
}

.search-dropdown-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.search-dropdown-item .sd-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.search-dropdown-item .sd-brand {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.search-dropdown-item .sd-price {
    font-size: 0.75rem;
    color: var(--accent-gold);
    font-weight: 600;
}

.search-dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1f3a;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid rgba(11, 31, 58, 0.28);
    background: #f7f9fc;
}

.action-btn:hover {
    color: #f7f9fc;
    background: #0b1f3a;
    border-color: #0b1f3a;
}

.cart-trigger-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--accent-gold);
    color: #f7f9fc;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    line-height: 1;
    padding: 0 3px;
}

/* HERO SECTION */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 550px;
    overflow: hidden;
    background: #0b1f3a;
    display: flex;
    align-items: center;
    padding: 0 10%;
    margin-top: -80px;
    padding-top: 80px;
}

.hero-slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0b1f3a;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1.06);
    z-index: 1;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(11, 31, 58,0.65) 0%, rgba(11, 31, 58,0.8) 50%, rgba(11, 31, 58,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}


/* Hero dots */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
}
.hero-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 18px;
    position: relative;
}
.hero-dot::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255,0.65); }
.hero-dot.active {
    border-radius: 50%;
}
.hero-dot.active::after { width: 16px; border-radius: 4px; background: #f7f9fc; }

.hero-content {
    max-width: 650px;
    animation: fadeInUp 1s ease-out;
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    color: #dce4ee;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 20px;
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(11, 31, 58,0.9), 0 2px 12px rgba(11, 31, 58,0.6);
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 25px;
    color: #f7f9fc;
    text-shadow: 0 2px 8px rgba(11, 31, 58,0.9), 0 4px 16px rgba(11, 31, 58,0.7), 0 0 40px rgba(11, 31, 58,0.5);
}

.hero-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255,0.95);
    margin-bottom: 40px;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(11, 31, 58,0.8), 0 2px 16px rgba(11, 31, 58,0.5);
}

.hero-buttons {
    display: flex;
    gap: 20px;
}
.hero-buttons .btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    padding: 14px 28px;
}
.hero-buttons .btn-primary {
    background: #0b1f3a;
}
.hero-buttons .btn-primary:hover {
    background: #0b1f3a;
}

/* HERO FEATURES */
.hero-features {
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    padding: 30px 10%;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.feature-icon {
    font-size: 1.8rem;
    color: var(--accent-gold);
}

.feature-text h3 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.feature-text p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.feature-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.08);
}

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

/* CATEGORIES GRID */
.categories-section {
    background-color: var(--bg-primary);
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.category-card {
    position: relative;
    height: 400px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: var(--transition-smooth);
}

.category-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.category-card:hover .category-bg {
    transform: scale(1.08);
}

.category-content {
    position: relative;
    z-index: 2;
    max-width: 400px;
}

.category-content span {
    color: var(--accent-gold);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
}

.category-content h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 12px;
    color: white;
}

.category-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* BRANDS */
.brands-section {
    background-color: transparent;
    padding: 16px 0;
    border-top: none;
    border-bottom: none;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.brands-title {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 16px 0;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.brands-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.brands-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.brands-slider {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: infiniteScroll 30s linear infinite;
    align-items: center;
}

.brand-card {
    padding: 10px 24px;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    cursor: default;
    flex-shrink: 0;
}

.brand-card:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: translateY(-2px);
}

.brand-card-name {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.brand-card:hover .brand-card-name {
    color: var(--accent-gold);
}

@keyframes infiniteScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}

/* CATALOG & FILTERS */
.catalog-section {
    background-color: var(--bg-primary);
}

.catalog-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.catalog-search {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin-bottom: 30px;
}

.catalog-search input {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 14px 20px 14px 48px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.catalog-search input:focus {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-gold);
    background-color: var(--bg-tertiary);
}

.catalog-search .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
}

.filter-tabs {
    display: flex;
    gap: 10px;
    background-color: var(--bg-secondary);
    padding: 6px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tab-btn.active, .tab-btn:hover {
    color: #0b1f3a;
    background: linear-gradient(135deg, #dce4ee 0%, var(--accent-gold) 100%);
}

/* PRODUCT GRID & CARDS */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 30px;
}

.product-card {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.product-image-container {
    height: 220px;
    background: linear-gradient(135deg, rgba(255, 255, 255,0.06) 0%, rgba(11, 31, 58,0.05) 100%);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image-carousel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.product-image-carousel img {
    min-width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.5s ease;
}

.product-image-carousel img.carousel-active {
    opacity: 1;
}

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

.product-image-container .product-main-img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #0b1f3a; /* dark flat green for Disponible default */
    color: #f7f9fc;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-radius: 12px;
    z-index: 20;
    box-shadow: none;
    text-shadow: none;
}

.product-badge.badge-agotado {
    background: var(--status-unavailable);
    color: #fff;
    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.28);
}

.product-badge.badge-disponible {
    background: var(--status-available);
    color: #fff;
    box-shadow: 0 3px 10px rgba(21, 128, 61, 0.22);
    left: 8px;
    right: auto;
}

.product-discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    background: #0b1f3a;
    color: #f7f9fc;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-radius: 12px;
    z-index: 20;
    box-shadow: none;
    text-shadow: none;
}

/* Force uniform card positioning if some templates set inline styles */
.product-card { position: relative !important; }

.original-price {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.8rem;
    margin-right: 4px;
}

.product-price-discounted {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-card-actions {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    display: flex;
    gap: 10px;
    z-index: 10;
    transition: var(--transition-smooth);
    width: 90%;
}

.product-image-container:hover .product-card-actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.card-action-btn {
    flex: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.card-action-btn:hover {
    background-color: var(--accent-gold);
    color: #f7f9fc;
    border-color: var(--accent-gold);
}

.card-action-btn.quick-view {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    color: #f7f9fc;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 18px;
    border: none;
    font-size: 0.85rem;
    gap: 6px;
    width: 100%;
}

.product-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
}

.product-info .add-to-cart-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    margin-top: 0;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b1f3a, #0b1f3a, #0b1f3a);
    color: #f7f9fc;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-weight: 600;
}
.product-info .add-to-cart-btn:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 4px 16px rgba(11, 31, 58, 0.4);
}

.product-info .add-to-cart-btn:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 4px 16px rgba(11, 31, 58, 0.4);
}

.product-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.product-price-row .product-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.product-price-row .add-to-cart-btn {
    padding: 6px 14px;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 50px;
}

.product-brand {
    color: var(--accent-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.product-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #0b1f3a;
    margin-bottom: 4px;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #74829a;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.product-reviews {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 6px;
}

.product-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b1f3a;
}

.add-to-cart-quick {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    background: #0b1f3a;
    border: none;
    color: #f7f9fc;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.add-to-cart-quick:hover {
    background: #0b1f3a;
    color: #f7f9fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(11, 31, 58, 0.4);
}

/* RECOMENDADOR / QUIZ SECTION */
.quiz-section {
    background-color: var(--bg-secondary);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.quiz-container {
    width: 90%;
    max-width: 750px;
    margin: 0 auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: 60px 40px;
    text-align: center;
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.quiz-decorations .circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 1;
    opacity: 0.15;
}

.quiz-decorations .gold-glow {
    width: 300px;
    height: 300px;
    background-color: var(--accent-gold);
    top: -50px;
    left: -50px;
}

.quiz-decorations .pink-glow {
    width: 300px;
    height: 300px;
    background-color: var(--accent-pink-dark);
    bottom: -50px;
    right: -50px;
}

.quiz-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-gold);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.quiz-intro h2, .quiz-step-content h2, .quiz-result-container h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.quiz-intro p, .quiz-result-container p {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto 35px auto;
}

.quiz-progress-bar {
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold-hover) 100%);
    transition: var(--transition-smooth);
}

.quiz-step-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.quiz-question-text {
    margin-bottom: 35px !important;
}

.quiz-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.quiz-option-btn {
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px 30px;
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

.quiz-option-btn:hover {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    border-color: var(--accent-gold);
    color: #f7f9fc;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.quiz-option-btn::after {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.quiz-option-btn:hover::after {
    color: var(--accent-gold);
    transform: translateX(5px);
}

.quiz-result-card {
    max-width: 320px;
    margin: 30px auto;
}

.quiz-actions {
    margin-top: 30px;
}

/* REVIEWS & TESTIMONIALS */
.reviews-section {
    background-color: transparent;
}

.reviews-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.review-card {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-md);
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

.review-card:hover {
    border-color: rgba(11, 31, 58, 0.15);
    transform: translateY(-5px);
}

.review-rating {
    color: var(--accent-orange);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.review-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 25px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.user-verify {
    font-size: 0.75rem;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* BENEFITS SECTION */
.benefits-section {
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 60px 10%;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.benefit-card {
    text-align: center;
    padding: 20px;
}

.benefit-icon {
    font-size: 2.2rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.benefit-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* REVIEWS SECTION */
.reviews-section {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 20px;
    overflow: hidden;
}
.reviews-section .section-header {
    text-align: center;
    margin-bottom: 32px;
}
.reviews-section .section-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.reviews-section .section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: #74829a;
    font-style: italic;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.reviews-track-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.reviews-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollReviews 30s linear infinite;
}
.reviews-track:hover {
    animation-play-state: paused;
}
@keyframes scrollReviews {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}
.review-card {
    background: rgba(255, 255, 255,0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255,0.5);
    border-radius: 16px;
    padding: 20px;
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(11, 31, 58,0.04), inset 0 1px 0 rgba(255, 255, 255,0.5);
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
}
.review-stars {
    display: flex;
    gap: 2px;
}
.review-stars i {
    font-size: 0.75rem;
    color: #0b1f3a;
}
.review-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.55;
    flex: 1;
    font-style: italic;
}
.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.review-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 31, 58,0.1);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.review-author strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    color: var(--text-primary);
    display: block;
}
.review-author span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    color: #74829a;
}
.review-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    color: var(--accent-gold);
    background: rgba(11, 31, 58,0.07);
    padding: 3px 8px;
    border-radius: 50px;
    align-self: flex-start;
    font-weight: 600;
}

/* TRUST PANEL */
.trust-panel {
    margin: 40px auto 0;
    max-width: 1100px;
    padding: 0 20px;
}
.trust-panel-inner {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(255, 255, 255,0.45);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255,0.5);
    border-radius: 20px;
    padding: 24px 32px;
    box-shadow: 0 8px 32px rgba(11, 31, 58,0.06), inset 0 1px 0 rgba(255, 255, 255,0.6);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 200px;
    min-width: 180px;
}
.trust-item i {
    font-size: 1.6rem;
    color: #0b1f3a;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 31, 58, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}
/* Paleta fija de beneficios: se conserva igual en todas las páginas. */
.trust-item i.fa-truck-fast { color: #0b1f3a; background: rgba(11, 31, 58, 0.11); }
.trust-item i.fa-shield-halved { color: #0b1f3a; background: rgba(11, 31, 58, 0.11); }
.trust-item i.fa-rotate-left { color: #74829a; background: rgba(11, 31, 58, 0.16); }
.trust-item i.fa-star { color: #0b1f3a; background: rgba(11, 31, 58, 0.11); }
.trust-item div {
    display: flex;
    flex-direction: column;
}
.trust-item strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 700;
}
.trust-item span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #74829a;
    line-height: 1.3;
}

/* FOOTER */
.main-footer {
    background: linear-gradient(135deg, #f7f9fc 0%, #dce4ee 50%, #dce4ee 100%);
    border-top: 1px solid rgba(11, 31, 58, 0.06);
    box-shadow: 0 -4px 30px rgba(11, 31, 58, 0.04);
    padding: 24px 0 0 0;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 31, 58,0.08), transparent);
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: start;
}

.footer-col h3 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(11, 31, 58, 0.85);
    margin-bottom: 8px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    align-items: center;
}

.footer-logo-img {
    height: 36px;
    width: auto;
}

.brand-col p {
    color: rgba(11, 31, 58, 0.6);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 10px;
    max-width: 220px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.social-links a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 31, 58, 0.08);
    color: #3e4e68;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition-smooth);
    border: 1px solid rgba(11, 31, 58, 0.22);
}

.social-links a:hover {
    background: #f7f9fc;
    color: #0b1f3a;
    border-color: #3e4e68;
    transform: translateY(-2px);
}

.social-icon-img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.social-links a:hover .social-icon-img {
    transform: scale(1.08);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.links-col ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.links-col a {
    color: rgba(11, 31, 58, 0.6);
    font-size: 0.78rem;
    transition: var(--transition-smooth);
}

.links-col a:hover {
    color: rgba(11, 31, 58, 0.85);
    padding-left: 4px;
}

.newsletter-col p {
    color: rgba(11, 31, 58, 0.6);
    font-size: 0.78rem;
    margin-bottom: 8px;
    line-height: 1.4;
}

.newsletter-form {
    display: flex;
    gap: 6px;
}

.newsletter-form input {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(11, 31, 58, 0.25);
    border-radius: 50px;
    padding: 7px 16px;
    color: rgba(11, 31, 58, 0.85);
    font-size: 0.78rem;
}

.newsletter-form input::placeholder {
    color: rgba(11, 31, 58, 0.35);
}

.newsletter-form input:focus {
    border-color: #0b1f3a;
    outline: none;
    background: rgba(255, 255, 255, 0.7);
}

.newsletter-form .btn {
    background: #0b1f3a;
    color: #f7f9fc;
    border: none;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.newsletter-form .btn:hover {
    background: #74829a;
    transform: translateY(-1px);
}

.payment-methods {
    width: 90%;
    max-width: 1200px;
    margin: 22px auto 0;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(11, 31, 58, 0.1);
    text-align: center;
}

.legacy-footer { display: none !important; }

.payment-methods-title {
    margin: 0 0 10px;
    color: rgba(11, 31, 58, 0.62);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.payment-methods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.payment-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 52px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0b1f3a;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: normal;
}

.payment-logo img {
    width: 100%;
    max-width: 86px;
    height: 42px;
    margin-right: 0;
    object-fit: contain;
}

.payment-logo--wide img {
    max-width: 100px;
}

.payment-logo--inverse img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.payment-logo--image-only {
    padding: 4px 8px;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-contact a:hover { color: var(--accent-gold); }
.footer-contact i { width: 16px; color: var(--accent-gold); }
.footer-contact-item { margin: 0 0 13px; }
.footer-contact-item strong { display: block; margin-bottom: 4px; font-size: 0.84rem; }
.footer-contact-item span { font-size: 0.77rem; opacity: 0.7; }
.footer-contact-form-link { font-weight: 800; }
.footer-contact-email { font-size: 0.82rem; }
.social-link--disabled {
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
}

.footer-bottom {
    border-top: 1px solid rgba(11, 31, 58, 0.1);
    padding: 10px 0;
    text-align: center;
    width: 90%;
    max-width: 1200px;
    margin: 16px auto 0;
}

.footer-bottom p {
    color: rgba(11, 31, 58, 0.45);
    font-size: 0.68rem;
}

@media (max-width: 480px) {
    .payment-methods { width: 92%; }
    .payment-methods-list { gap: 6px; }
    .payment-logo { width: 106px; height: 54px; padding: 5px 8px; font-size: 0.62rem; }
    .payment-logo img { width: 76px; height: 40px; }
}

/* HELP MODALS */
.help-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11, 31, 58, 0.35);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}
.help-modal-overlay.active {
    display: flex;
}
.help-modal {
    background: rgba(255, 255, 255,0.85);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255,0.8);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 20px 60px rgba(11, 31, 58, 0.15);
    font-family: 'Montserrat', sans-serif;
}
.help-modal h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1f3a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
}
.help-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    background: none; border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}
.help-modal-close:hover {
    color: var(--text-primary);
}
.help-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.help-faq-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: 'Montserrat', sans-serif;
}
.help-faq-item p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* SHOPPING CART DRAWER */
.cart-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 31, 58, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background-color: var(--bg-secondary);
    border-left: 1px solid rgba(11, 31, 58, 0.15);
    box-shadow: -10px 0 40px rgba(11, 31, 58,0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.cart-drawer.active {
    right: 0;
}

.cart-drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-drawer-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.close-drawer-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition-smooth);
    border: none;
}

.close-drawer-btn:hover {
    color: var(--accent-gold);
    transform: rotate(90deg);
}

/* Shipping progress bar in cart */
.shipping-progress-container {
    padding: 16px 24px;
    background-color: rgba(11, 31, 58, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.shipping-progress-container p {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-family: 'Montserrat', sans-serif;
}

.shipping-progress-bar {
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.shipping-progress-fill {
    height: 100%;
    background-color: var(--accent-gold);
    transition: var(--transition-smooth);
}

.cart-drawer-body {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Al abrir el carrito, el documento queda inmóvil y solo su cuerpo interno
   conserva desplazamiento. Esto también evita el scroll encadenado en móvil. */
html.cart-scroll-locked,
body.cart-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.cart-scroll-locked .cart-drawer-overlay {
    touch-action: none;
}

body.cart-scroll-locked .cart-drawer {
    overscroll-behavior: contain;
}

body.cart-scroll-locked .cart-drawer-body {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Empty cart state */
.empty-cart-message {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.empty-icon {
    font-size: 3.5rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.empty-cart-message p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Cart Item Card */
.cart-item {
    display: flex;
    gap: 15px;
    background-color: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    transition: var(--transition-smooth);
}

.cart-item:hover {
    border-color: rgba(11, 31, 58, 0.1);
}

.cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-tertiary);
}

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

.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0b1f3a;
    line-height: 1.3;
}

.cart-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

.cart-item-price {
    font-size: 0.95rem;
    color: var(--accent-gold);
    font-weight: 700;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    width: max-content;
    overflow: hidden;
    margin-top: 8px;
}

.qty-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
}

.qty-btn:hover {
    color: var(--accent-gold);
    background-color: var(--bg-secondary);
}

.qty-value {
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.remove-item-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(11, 31, 58,0.03);
}

.remove-item-btn:hover {
    color: #0b1f3a;
}

/* Cart Footer Panel */
.cart-drawer-footer {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--bg-primary);
}

.cart-promo-code {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.cart-promo-code input {
    flex-grow: 1;
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    outline: none;
}

.cart-promo-code input:focus {
    border-color: var(--accent-gold);
}

.cart-promo-code button {
    padding: 10px 16px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    background: var(--accent-gold);
    color: #f7f9fc;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.cart-promo-code button:hover {
    opacity: 0.9;
}

.promo-discount-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--accent-orange);
    margin-bottom: 12px;
}

.cart-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-family: 'Montserrat', sans-serif;
}

.grand-total-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.grand-total-row span:last-child {
    color: var(--accent-gold);
}

.checkout-btn {
    width: 100%;
    padding: 16px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    border-radius: 50px;
}

/* MODALS GENERAL STYLE */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 31, 58, 0.8);
    backdrop-filter: blur(12px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 40px;
    box-shadow: var(--shadow-lg), var(--shadow-gold);
    transform: scale(0.95) translateY(20px);
    transition: var(--transition-smooth);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

.close-modal-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition-smooth);
    z-index: 100;
}

.close-modal-btn:hover {
    color: #0b1f3a;
    transform: rotate(90deg);
}

/* QUICK VIEW MODAL - Full Screen */
.quick-view-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(11, 31, 58, 0.95) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: scale(1) translateY(0) !important;
}

.quick-view-content {
    display: flex !important;
    flex-direction: row !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.quick-view-modal > .close-modal-btn {
    background: rgba(11, 31, 58,0.1) !important;
    color: #0b1f3a !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(11, 31, 58,0.2) !important;
    z-index: 20;
}
.quick-view-modal > .close-modal-btn:hover {
    background: #0b1f3a !important;
    color: #f7f9fc !important;
}

.qv-gallery {
    display: flex !important;
    flex-direction: row !important;
    gap: 0;
    background: rgba(255, 255, 255,0.02);
    border-right: 1px solid rgba(255, 255, 255,0.06);
    overflow: hidden;
    flex: 1.4 !important;
    min-width: 0;
    height: 100%;
}

.qv-thumbs-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 10px;
    justify-content: flex-start;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255,0.06);
    overflow-y: auto;
    flex-shrink: 0;
    width: 64px;
    height: 100%;
}
.qv-thumbs-col::-webkit-scrollbar { width: 3px; }
.qv-thumbs-col::-webkit-scrollbar-track { background: transparent; }
.qv-thumbs-col::-webkit-scrollbar-thumb { background: rgba(255, 255, 255,0.1); border-radius: 3px; }

.qv-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255,0.08);
    background: rgba(255, 255, 255,0.04);
    padding: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}
.qv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}
.qv-thumb:hover {
    border-color: rgba(11, 31, 58,0.5);
    background: rgba(11, 31, 58,0.08);
}
.qv-thumb.active {
    border-color: #0b1f3a;
    background: rgba(11, 31, 58,0.12);
    box-shadow: 0 0 12px rgba(11, 31, 58,0.25);
}

.qv-main-img-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 24px;
    min-height: 0;
    overflow: hidden;
}

.qv-main-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.qv-main-img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: none;
    animation: none;
    filter: drop-shadow(0 4px 8px rgba(11, 31, 58,0.12));
}

@keyframes qvFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.qv-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(11, 31, 58, 0.9);
    color: #f7f9fc;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255,0.15);
    z-index: 5;
}

.qv-badge.badge-agotado {
    background: var(--status-unavailable);
    color: #fff;
    border-color: var(--status-unavailable-dark);
    box-shadow: 0 3px 12px rgba(185, 28, 28, 0.28);
}

.qv-badge.badge-disponible {
    background: var(--status-available);
    color: #fff;
    border-color: var(--status-available-dark);
    box-shadow: 0 3px 12px rgba(21, 128, 61, 0.24);
}

.qv-discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    background: #0b1f3a;
    color: #0b1f3a;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 5;
}

.qv-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255,0.1);
    background: rgba(255, 255, 255,0.06);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    z-index: 10;
}
.qv-arrow:hover {
    background: rgba(11, 31, 58,0.2);
    border-color: rgba(11, 31, 58,0.4);
    color: #0b1f3a;
}
.qv-arrow-left { left: 16px; }
.qv-arrow-right { right: 16px; }

.qv-info {
    padding: 36px 32px;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto;
    flex: 1 !important;
    min-width: 0;
    height: 100%;
    gap: 0;
}
.qv-info::-webkit-scrollbar { width: 4px; }
.qv-info::-webkit-scrollbar-track { background: transparent; }
.qv-info::-webkit-scrollbar-thumb { background: rgba(255, 255, 255,0.1); border-radius: 4px; }

.qv-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #0b1f3a;
    margin-bottom: 8px;
}

.qv-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #0b1f3a;
    margin-bottom: 4px;
    line-height: 1.2;
}

.qv-family {
    font-size: 0.8rem;
    color: rgba(255, 255, 255,0.4);
    display: block;
    margin-bottom: 2px;
}

.qv-brand {
    font-size: 0.85rem;
    color: rgba(255, 255, 255,0.6);
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.qv-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 0.8rem;
}
.qv-rating i { color: #0b1f3a; font-size: 0.7rem; }
.qv-rating span { color: rgba(255, 255, 255,0.4); font-size: 0.75rem; }

.qv-price {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.qv-price-original {
    text-decoration: line-through;
    color: rgba(255, 255, 255,0.3);
    font-size: 1rem;
}
.qv-price-current {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0b1f3a;
}

.qv-desc {
    color: rgba(255, 255, 255,0.55);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.qv-notes {
    margin-bottom: 20px;
}
.qv-notes-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255,0.35);
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.qv-notes-title i { color: rgba(11, 31, 58,0.5); }

.qv-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}
.qv-note-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(11, 31, 58,0.08);
    border: 1px solid rgba(11, 31, 58,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.qv-note-icon i {
    font-size: 0.65rem;
    color: #0b1f3a;
}
.qv-note div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.qv-note strong {
    color: rgba(255, 255, 255,0.7);
    font-size: 0.75rem;
}
.qv-note span {
    color: rgba(255, 255, 255,0.45);
    font-size: 0.8rem;
}

.qv-sizes {
    margin-bottom: 20px;
}
.qv-sizes-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.qv-size-btn {
    border: 1px solid rgba(255, 255, 255,0.1);
    background: rgba(255, 255, 255,0.04);
    border-radius: 12px;
    padding: 10px 16px;
    color: rgba(255, 255, 255,0.6);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qv-size-btn strong {
    font-size: 0.85rem;
    color: rgba(255, 255, 255,0.8);
}
.qv-size-btn small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255,0.35);
}
.qv-size-btn:hover {
    border-color: rgba(11, 31, 58,0.4);
    background: rgba(11, 31, 58,0.06);
}
.qv-size-btn.active {
    border-color: #0b1f3a;
    background: rgba(11, 31, 58,0.1);
    box-shadow: 0 0 16px rgba(11, 31, 58,0.15);
}
.qv-size-btn.active strong { color: #0b1f3a; }
.qv-size-btn.active small { color: rgba(11, 31, 58,0.7); }

.qv-actions {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
}
.qv-qty {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255,0.1);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255,0.04);
}
.qv-qty button {
    width: 40px;
    height: 44px;
    color: rgba(255, 255, 255,0.5);
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qv-qty button:hover {
    background: rgba(11, 31, 58,0.15);
    color: #0b1f3a;
}
.qv-qty span {
    padding: 0 14px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0b1f3a;
    min-width: 36px;
    text-align: center;
}

.qv-add-btn {
    flex: 1;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #0b1f3a 0%, #0b1f3a 100%);
    color: #f7f9fc;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(11, 31, 58,0.25);
    letter-spacing: 0.3px;
}
.qv-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(11, 31, 58,0.35);
}

.qv-out {
    width: 100%;
    text-align: center;
    color: #0b1f3a;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px;
    border: 1px solid rgba(11, 31, 58,0.2);
    border-radius: 12px;
    background: rgba(11, 31, 58,0.06);
}

.qv-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255,0.06);
    padding-top: 16px;
    margin-top: auto;
}
.qv-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.qv-benefit i {
    font-size: 0.9rem;
    color: #0b1f3a;
    opacity: 0.7;
}
.qv-benefit span {
    font-size: 0.6rem;
    color: rgba(255, 255, 255,0.35);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FORM ELEMENTS FOR MODALS */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input {
    background-color: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.form-group input:focus {
    border-color: var(--accent-gold);
    background-color: var(--bg-tertiary);
}

.form-group select {
    background-color: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    cursor: pointer;
    appearance: auto;
}

.form-group select:focus {
    border-color: var(--accent-gold);
    background-color: var(--bg-tertiary);
    outline: none;
}

/* CHECKOUT MODAL STYLES */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
    padding: 20px 10px 25px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    position: relative;
    z-index: 1;
}

.step-indicator .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--bg-primary);
    transition: var(--transition-smooth);
}

.step-indicator .step-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--bg-tertiary);
    margin: 0 4px;
    margin-bottom: 22px;
    max-width: 70px;
    transition: var(--transition-smooth);
}

.step-connector.active {
    background: var(--accent-gold);
}

.step-indicator.active {
    color: var(--accent-gold);
}

.step-indicator.active .step-num {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
    color: #f7f9fc;
    box-shadow: 0 0 0 4px rgba(11, 31, 58, 0.1);
}

.step-indicator.done .step-num {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
    color: #f7f9fc;
}

.step-indicator.done {
    color: var(--accent-gold);
}

/* CHECKOUT SHIPPING HEADER */
.checkout-shipping-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.checkout-shipping-header .checkout-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(11, 31, 58,0.08), rgba(11, 31, 58,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent-gold);
    flex-shrink: 0;
}

.checkout-shipping-header h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 2px;
    color: var(--text-primary);
}

.checkout-shipping-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* MINI CART SUMMARY IN CHECKOUT */
.checkout-cart-summary {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid rgba(11, 31, 58,0.04);
}

.cart-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    transition: var(--transition-smooth);
}

.cart-summary-header:hover {
    background: rgba(11, 31, 58,0.02);
}

.cart-summary-header .cs-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-summary-header .cs-left i {
    color: var(--accent-gold);
    font-size: 0.85rem;
}

.cart-summary-header .cs-count {
    background: var(--accent-gold);
    color: #f7f9fc;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
}

.cart-summary-toggle {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.checkout-cart-summary.expanded .cart-summary-toggle {
    transform: rotate(180deg);
}

.cart-summary-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.checkout-cart-summary.expanded .cart-summary-body {
    max-height: 400px;
    overflow-y: auto;
}

.cart-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.8rem;
    border-top: 1px solid rgba(11, 31, 58,0.04);
}

.cart-summary-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-summary-item-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.82rem;
}

.cart-summary-item-detail {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cart-summary-item-price {
    font-weight: 600;
    color: var(--accent-gold);
    white-space: nowrap;
    margin-left: 12px;
    font-size: 0.82rem;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(11, 31, 58,0.08);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.cart-summary-total .total-price {
    color: var(--accent-gold);
    font-size: 1rem;
}

/* CHECKOUT SECTIONS */
.checkout-section {
    margin-bottom: 28px;
}

.checkout-section:last-of-type {
    margin-bottom: 8px;
}

.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(11, 31, 58,0.06);
}

.checkout-section-title i {
    font-size: 0.8rem;
    color: var(--accent-gold);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 31, 58, 0.06);
    border-radius: 8px;
}

.checkout-section-title h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-step-pane {
    display: none;
}

.checkout-step-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

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

.checkout-step-pane h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.payment-disclaimer {
    font-size: 0.8rem;
    color: var(--accent-gold);
    background-color: rgba(11, 31, 58, 0.05);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-step-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(11, 31, 58,0.06);
}

.checkout-step-footer .btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.checkout-step-footer .btn-back:hover {
    color: var(--text-primary);
}

.checkout-step-footer .btn-continue {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CARD VISUAL SIMULATOR */
.card-visual-wrapper {
    perspective: 1000px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.credit-card {
    width: 320px;
    height: 190px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-lg);
}

.credit-card.flipped {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--border-radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-front {
    background: linear-gradient(135deg, #0b1f3a 0%, #0b1f3a 100%);
    border: 1px solid rgba(11, 31, 58, 0.2);
}

.card-back {
    background: linear-gradient(135deg, #0b1f3a 0%, #0b1f3a 100%);
    border: 1px solid rgba(11, 31, 58, 0.2);
    transform: rotateY(180deg);
    padding: 20px 0;
    justify-content: flex-start;
    gap: 20px;
}

.card-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #dce4ee 0%, #74829a 100%);
    border-radius: 4px;
}

.card-number-display {
    font-family: monospace;
    font-size: 1.25rem;
    letter-spacing: 3px;
    color: white;
    margin: 15px 0;
}

.card-holder-display {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.card-expiry-display {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.card-logo-display {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 2rem;
    color: var(--accent-gold);
}

.card-magnetic-strip {
    height: 40px;
    background-color: #0b1f3a;
    width: 100%;
}

.card-cvv-box {
    width: 80%;
    height: 35px;
    background-color: white;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
}

.card-cvv-display {
    color: #0b1f3a;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 2px;
}

/* SUCCESS PANEL IN CHECKOUT */
.success-pane {
    text-align: center;
    padding: 30px 0;
}

.success-icon-wrapper {
    font-size: 4.5rem;
    color: var(--accent-gold);
    margin-bottom: 25px;
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.order-id-text {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.success-order-details {
    margin: 30px auto;
    padding: 20px;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    max-width: 400px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255,0.03);
}

.success-order-details h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.success-order-details p {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* GLOBAL SEARCH MODAL */
.search-modal {
    max-width: 720px;
    width: 95%;
    padding: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.search-modal h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin: 0;
    padding: 28px 36px 0;
    color: var(--text-primary);
    text-align: center;
}

.search-modal .search-subtitle {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 6px 0 0;
    padding: 0 36px;
}

.search-input-group {
    position: relative;
    margin: 20px 36px 0;
    padding-bottom: 0;
}

.search-input-group input {
    width: 100%;
    background-color: #0b1f3a;
    border: 1px solid rgba(11, 31, 58, 0.08);
    border-radius: 12px;
    padding: 18px 20px 18px 54px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.04);
}

.search-input-group input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.08), 0 4px 12px rgba(11, 31, 58, 0.06);
    outline: none;
}

.search-input-group input::placeholder {
    color: #74829a;
}

.search-input-group i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--text-muted);
}

.search-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 31, 58,0.06), transparent);
    margin: 20px 36px 0;
}

.search-results {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 16px 16px;
}

.search-results::-webkit-scrollbar {
    width: 5px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(11, 31, 58,0.12);
    border-radius: 10px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.search-result-item:hover {
    border-color: rgba(11, 31, 58, 0.08);
    background-color: #f7f9fc;
    transform: translateX(4px);
}

.search-result-item:active {
    transform: translateX(2px);
}

.search-result-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(11, 31, 58, 0.06);
}

.search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex-grow: 1;
    min-width: 0;
}

.search-result-title {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.search-result-brand {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-price {
    font-size: 0.9rem;
    color: var(--accent-gold);
    font-weight: 700;
    white-space: nowrap;
}

.search-footer {
    padding: 14px 36px;
    border-top: 1px solid rgba(11, 31, 58, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #f7f9fc;
}

.search-footer-hint {
    font-size: 0.7rem;
    color: #74829a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-footer-hint kbd {
    background: #f7f9fc;
    border: 1px solid #dce4ee;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-family: inherit;
    color: #74829a;
}

/* ACCOUNT AUTH MODAL */
.account-modal {
    max-width: 420px;
    padding: 40px;
}

.auth-box h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.auth-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.auth-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-box .full-width {
    width: 100%;
    padding: 14px 0;
    margin-top: 10px;
}

.auth-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-gold);
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* HAMBURGER MENU BUTTON */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    width: 40px;
    height: 40px;
}
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* MOBILE NAV OVERLAY */
.mobile-nav-overlay {
    display: none;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.2rem;
    }
    .footer-container {
        gap: 24px;
    }
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
    .review-card:last-child {
        grid-column: span 2;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Uiverse AlimurtuzaCodes: acabado azul a violeta para todos los botones comerciales. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary,
.checkout-step-footer .btn.btn-primary,
.pagos-footer .btn.btn-primary,
#pay-submit-btn,
#p-epayco-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible;
    border: 0 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(12, 64, 118, .24) !important;
    cursor: pointer;
    opacity: 1;
    scale: 1;
    transform: none;
    transition: background 450ms ease-in-out, box-shadow 450ms ease-in-out, transform 450ms ease-in-out, color 450ms ease-in-out !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary,
.checkout-step-footer .btn.btn-primary,
.pagos-footer .btn.btn-primary,
#pay-submit-btn,
#p-epayco-btn {
    min-width: min(200px, 100%) !important;
    min-height: 46px;
    padding: 13px 22px !important;
    border-radius: 3em !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: none;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.vista-buy-section .vista-buy-btn:not(:disabled)::before,
.vista-buy-section .vista-buy-btn:not(:disabled)::after,
.cart-actions .btn.btn-primary::before,
.cart-actions .btn.btn-primary::after,
.checkout-step-footer .btn.btn-primary::before,
.checkout-step-footer .btn.btn-primary::after,
.pagos-footer .btn.btn-primary::before,
.pagos-footer .btn.btn-primary::after,
#pay-submit-btn::before,
#pay-submit-btn::after,
#p-epayco-btn::before,
#p-epayco-btn::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.add-to-cart-icon-only .cart-spark-layer {
    display: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible),
.cart-actions .btn.btn-primary:is(:hover, :focus-visible),
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible),
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible),
#pay-submit-btn:is(:hover, :focus-visible),
#p-epayco-btn:is(:hover, :focus-visible) {
    background: linear-gradient(0deg, #a47cf3, #683fea) !important;
    background-color: #683fea !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -4px 0 rgba(0, 0, 0, .2),
        0 0 0 4px rgba(255, 255, 255, .2),
        0 18px 55px rgba(153, 23, 255, .42) !important;
    opacity: 1;
    scale: 1;
    transform: translateY(-2px);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.vista-buy-section .vista-buy-btn:not(:disabled):active,
.cart-actions .btn.btn-primary:active,
.checkout-step-footer .btn.btn-primary:active,
.pagos-footer .btn.btn-primary:active,
#pay-submit-btn:active,
#p-epayco-btn:active {
    transform: translateY(0) scale(.97);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.vista-buy-section .vista-buy-btn:not(:disabled) > i,
.cart-actions .btn.btn-primary > i,
.checkout-step-footer .btn.btn-primary > i,
.pagos-footer .btn.btn-primary > i,
#pay-submit-btn > i,
#p-epayco-btn > i {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border-radius: 0;
    background: transparent !important;
    color: #e7eef8 !important;
    fill: currentColor;
    box-shadow: none !important;
    animation: none !important;
    transform: scale(1);
    transition: color 800ms ease, transform 800ms ease !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span {
    position: relative;
    z-index: 1;
    display: inline;
    max-width: none;
    padding: 0;
    overflow: visible;
    color: #e7eef8 !important;
    white-space: normal;
    text-overflow: clip;
    transition: color 800ms ease !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible) > i,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible) > i,
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible) > i,
.cart-actions .btn.btn-primary:is(:hover, :focus-visible) > i,
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible) > i,
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible) > i,
#pay-submit-btn:is(:hover, :focus-visible) > i,
#p-epayco-btn:is(:hover, :focus-visible) > i {
    color: #ffffff !important;
    transform: scale(1.2);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible) > span,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible) > span {
    color: #ffffff !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    --active: 0;
    background: linear-gradient(0deg, #a47cf3, #683fea) !important;
    animation: commerce-button-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

@keyframes commerce-button-click {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(1px) scale(.9); }
    70% { transform: translateY(-2px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn {
        min-width: 0 !important;
        min-height: 44px;
        padding: 12px 17px !important;
    }
}

@media (max-width: 768px) {
    html { font-size: 14px; }

    /* HAMBURGER SHOW */
    .hamburger-btn { display: flex; }

    /* NAV */
    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background: rgba(255, 255, 255,0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 999;
        padding: 80px 24px 24px;
        transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
        box-shadow: -4px 0 24px rgba(11, 31, 58,0.1);
        overflow-y: auto;
    }
    .nav-menu.active { display: block; right: 0; }
    .nav-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav-menu ul li { border-bottom: 1px solid rgba(11, 31, 58,0.05); }
    .nav-menu a {
        display: block;
        padding: 14px 0;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    .nav-menu a::after { display: none; }
    .nav-search-item { flex-direction: row; gap: 8px; padding: 12px 0; }
    .header-search-direct { width: 100%; }

    /* HEADER */
    .header-container {
        height: 60px;
        padding: 0 12px;
    }
    .main-header {
        margin: 0 8px;
        border-radius: 25px;
        width: calc(100% - 16px);
        top: 8px;
    }
    .header-actions {
        gap: 8px;
    }
    .header-search-direct {
        width: 80px;
        font-size: 0.75rem;
    }
    .search-dropdown {
        width: 260px;
        left: auto;
        right: 0;
    }

    .mobile-nav-overlay { display: block; pointer-events: none; }
    .mobile-nav-overlay.active { pointer-events: all; }

    /* HERO */
    .hero-section {
        height: auto;
        padding-top: 50px;
        min-height: 60vh;
    }
    .hero-slide {
        padding: 50px 5%;
        height: auto;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 0.8rem;
    }
    .hero-description {
        font-size: 0.85rem;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .hero-buttons .btn { width: 100%; }
    .hero-features {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 5%;
    }
    .feature-divider { display: none; }

    /* SECTIONS */
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.9rem; }
    .section-header { text-align: center; }
    .destacados-section, .categories-section, .reviews-section, .benefits-section {
        padding: 50px 5%;
    }

    /* CATEGORIES */
    .category-grid { grid-template-columns: 1fr; }
    .category-card { height: 280px; padding: 24px; }

    /* PRODUCTS */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* DESTACADOS */
    .destacados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* REVIEWS */
    .reviews-grid { grid-template-columns: 1fr; }
    .review-card:last-child { grid-column: auto; }

    /* BENEFITS */
    .benefits-grid { grid-template-columns: 1fr; gap: 20px; }

    /* FOOTER */
    .main-footer { padding: 40px 5% 20px; }
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .footer-col { text-align: center; }
    .footer-col ul { align-items: center; }
    .footer-col ul li { margin-bottom: 6px; }
    .social-links { justify-content: center; }

    /* FILTER BAR */
    .filter-bar { flex-direction: column; gap: 10px; padding: 0 5%; }
    .filter-bar-left, .filter-bar-right { width: 100%; }

    /* CATALOG LAYOUT */
    .catalog-layout {
        grid-template-columns: 1fr;
        padding: 0 5% 40px;
    }
    .catalog-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(11, 31, 58,0.06);
        padding: 16px 0;
    }
    .catalog-main { padding: 16px 0 0; }
    .catalog-main .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* QUICK VIEW */
    .quick-view-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .quick-view-content {
        flex-direction: column !important;
        height: 100vh !important;
    }
    .qv-gallery {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255,0.06);
        flex: none !important;
        height: 40%;
    }
    .qv-thumbs-col {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255,0.06);
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .qv-thumb { width: 44px; height: 44px; }
    .qv-main-img-wrap { padding: 16px; }
    .qv-info { padding: 20px; flex: 1; }
    .qv-title { font-size: 1.4rem; }
    .qv-benefits { grid-template-columns: repeat(2, 1fr); }

    /* CART DRAWER */
    .cart-drawer { width: 100% !important; }

    /* CHECKOUT */
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: auto; }
    .checkout-shipping-header h2 { font-size: 1.2rem; }
    .checkout-shipping-header .checkout-header-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
    .step-connector { max-width: 40px; }
    .step-indicator .step-num { width: 30px; height: 30px; font-size: 0.7rem; }
    .step-indicator .step-label { font-size: 0.6rem; }
    .checkout-section-title h3 { font-size: 0.78rem; }

    /* RECOMMENDER */
    .recommender-container { padding: 20px 5%; }
}

@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .destacados-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .footer-container { grid-template-columns: 1fr; gap: 20px; }
    .hero-title { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; }
    .catalog-main .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .step-indicator .step-num {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .step-indicator .step-label {
        font-size: 0.6rem;
    }
    .checkout-section-title h3 {
        font-size: 0.78rem;
    }
}

/* Acciones del catálogo: volver y ordenar con mayor presencia visual. */
.filter-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #3e4e68;
    font: 700 .82rem 'Montserrat', sans-serif;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}
.filter-back-btn i { color: #0b1f3a; }
.filter-back-btn:hover { transform: translateX(-3px); color: #0b1f3a; }
.filter-bar .filter-bar-sort {
    min-height: 44px !important;
    padding: 10px 42px 10px 16px !important;
    border: 1.5px solid #dce4ee !important;
    border-radius: 13px !important;
    background-color: #f7f9fc !important;
    box-shadow: 0 4px 13px rgba(11, 31, 58, .08) !important;
    color: #3e4e68 !important;
    font-weight: 700 !important;
}
.filter-bar .filter-bar-sort:hover,
.filter-bar .filter-bar-sort:focus { border-color: #0b1f3a !important; box-shadow: 0 0 0 3px rgba(11, 31, 58, .12) !important; outline: none; }

/* Botón de compra visible y uniforme en todas las tarjetas de perfumes. */
.product-bottom .add-to-cart-quick,
.product-price-row .add-to-cart-btn {
    width: auto !important;
    min-width: 124px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.product-bottom .add-to-cart-quick i,
.product-price-row .add-to-cart-btn i {
    font-size: 1rem;
}

/* En inicio se conserva solo el ícono, sin dejar espacio para el texto. */
.home-page .product-bottom .add-to-cart-quick {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

@media (max-width: 480px) {
    .product-bottom .add-to-cart-quick,
    .product-price-row .add-to-cart-btn {
        min-width: 112px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 13px !important;
        font-size: 0.76rem !important;
    }
}

/* ==========================================
   LIQUID GLASS DESIGN SYSTEM
   ========================================== */

:root {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.7);
    --glass-bg-subtle: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-border-subtle: rgba(255, 255, 255, 0.3);
    --glass-blur: 20px;
    --glass-blur-strong: 32px;
    --glass-shadow: 0 8px 32px rgba(11, 31, 58, 0.06);
    --glass-shadow-hover: 0 16px 48px rgba(11, 31, 58, 0.1);
    --glass-shadow-gold: 0 8px 32px rgba(11, 31, 58, 0.08);
    --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255,0.8) 0%, rgba(255, 255, 255,0.1) 50%, rgba(255, 255, 255,0) 100%);
    --glass-refraction: linear-gradient(135deg, rgba(255, 255, 255,0.5) 0%, rgba(255, 255, 255,0.05) 40%, rgba(11, 31, 58,0.03) 60%, rgba(255, 255, 255,0.3) 100%);
    --glass-shine: linear-gradient(135deg, rgba(255, 255, 255,0.9) 0%, rgba(255, 255, 255,0.4) 30%, transparent 60%);
}

/* Body background */
body {
    background: #f7f9fc;
    background-attachment: fixed;
}

/* Glass classes disabled - no panels except footer */
.glass, .glass-strong, .glass-subtle, .glass-shine, .glass-refract { display: none; }

/* PRODUCT CARDS - Clean */
.product-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.04);
}

.product-card::before {
    display: none;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(11, 31, 58, 0.15);
    box-shadow: 0 20px 60px rgba(11, 31, 58,0.08), 0 4px 20px rgba(11, 31, 58,0.06);
}

.product-image-container {
    background: transparent;
    border-bottom: 1px solid rgba(11, 31, 58,0.04);
}

/* PRODUCT GRID - Clean */
.product-grid {
    background: transparent;
}

/* CATALOG SECTION backgrounds */
.catalog-section {
    background: transparent;
}

/* COLLECTION HERO - Clean */
.collection-hero {
    position: relative;
    overflow: hidden;
}

.collection-hero::before {
    display: none;
}

/* CATEGORY CARDS - Clean */
.category-card {
    background: rgba(255, 255, 255,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255,0.6);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(11, 31, 58,0.04);
    transition: var(--transition-smooth);
}

.category-card::before {
    display: none;
}

.category-card:hover {
    border-color: rgba(11, 31, 58, 0.15);
    box-shadow: 0 20px 60px rgba(11, 31, 58,0.08), 0 4px 20px rgba(11, 31, 58,0.06);
}

/* BENEFITS SECTION - Clean */
.benefits-section {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(11, 31, 58,0.04);
    border-bottom: 1px solid rgba(11, 31, 58,0.04);
    position: relative;
}

.benefits-section::before {
    display: none;
}

.benefit-card {
    background: rgba(255, 255, 255,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255,0.5);
    border-radius: var(--border-radius-md);
    padding: 30px 20px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11, 31, 58,0.02);
}

.benefit-card::before {
    display: none;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(11, 31, 58,0.06);
    border-color: rgba(11, 31, 58,0.1);
}

/* CART DRAWER - Clean */
.cart-drawer {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-left: 1px solid rgba(11, 31, 58,0.08);
    box-shadow: -8px 0 40px rgba(11, 31, 58,0.08);
    font-family: 'Montserrat', sans-serif;
}

.cart-drawer::before {
    display: none;
}

.cart-item {
    background: rgba(255, 255, 255,0.5) !important;
    border: 1px solid rgba(11, 31, 58,0.06) !important;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.cart-item:hover {
    border-color: rgba(11, 31, 58,0.1) !important;
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.04);
}

.cart-item-img {
    background: rgba(255, 255, 255,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 31, 58,0.04);
}

.cart-drawer-footer {
    background: rgba(255, 255, 255,0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(11, 31, 58,0.06) !important;
}

/* MODALS - Clean */
.modal-overlay {
    background: rgba(11, 31, 58, 0.4) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#quick-view-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 31, 58, 0.3) !important;
}

.modal-container:not(.quick-view-modal) {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255,0.8) !important;
    box-shadow: 0 24px 80px rgba(11, 31, 58,0.12) !important;
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
}

.modal-container::before {
    display: none;
}

.modal-container > * {
    position: relative;
    z-index: 1;
}
.quick-view-content {
    position: static !important;
    z-index: auto !important;
}

.close-modal-btn {
    background: rgba(255, 255, 255,0.7) !important;
    border: 1px solid rgba(11, 31, 58,0.08) !important;
}
.quick-view-modal > .close-modal-btn {
    background: rgba(11, 31, 58,0.1) !important;
    color: #0b1f3a !important;
    border: 1px solid rgba(11, 31, 58,0.2) !important;
}
.quick-view-modal > .close-modal-btn:hover {
    background: #0b1f3a !important;
    color: #f7f9fc !important;
    border-color: #0b1f3a !important;
}

.close-modal-btn:hover {
    background: rgba(255, 255, 255,0.9) !important;
    border-color: rgba(11, 31, 58,0.15) !important;
}

/* BUTTONS - Clean */
.btn-primary {
    background: #0b1f3a;
    color: #f7f9fc;
    border: none;
    box-shadow: none;
}

.btn-primary:hover {
    background: #0b1f3a;
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255,0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255,0.3) !important;
    color: #f7f9fc;
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.1), inset 0 1px 0 rgba(255, 255, 255,0.15);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255,0.25) !important;
    border-color: rgba(255, 255, 255,0.5) !important;
    box-shadow: 0 8px 24px rgba(11, 31, 58,0.15), inset 0 1px 0 rgba(255, 255, 255,0.25);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent !important;
    border: 1px solid rgba(11, 31, 58,0.3) !important;
    color: var(--accent-gold);
}

.btn-outline:hover {
    background: rgba(11, 31, 58,0.9) !important;
    border-color: var(--accent-gold) !important;
    color: #f7f9fc;
}

/* QUIZ SECTION - Clean */
.quiz-section {
    background: rgba(255, 255, 255,0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255,0.6);
    border-bottom: 1px solid rgba(255, 255, 255,0.6);
}

.quiz-container {
    background: rgba(255, 255, 255,0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255,0.7) !important;
    border-radius: var(--border-radius-lg);
}

.quiz-container::before {
    display: none;
}

.quiz-option {
    background: rgba(255, 255, 255,0.5) !important;
    border: 1px solid rgba(11, 31, 58,0.06) !important;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.quiz-option:hover {
    border-color: rgba(11, 31, 58,0.2) !important;
    background: rgba(255, 255, 255,0.7) !important;
}

/* SEARCH MODAL - Clean */
.search-modal {
    background: rgba(255, 255, 255,0.85) !important;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255,0.8) !important;
    border-radius: var(--border-radius-lg);
}

.search-input-group input {
    background: rgba(255, 255, 255,0.6) !important;
    border: 1px solid rgba(11, 31, 58,0.08) !important;
}

.search-input-group input:focus {
    border-color: rgba(11, 31, 58,0.25) !important;
    box-shadow: 0 0 0 4px rgba(11, 31, 58,0.06) !important;
    background: rgba(255, 255, 255,0.8) !important;
}

.search-result-item {
    border: 1px solid rgba(11, 31, 58,0.05);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.search-result-item:hover {
    background: rgba(11, 31, 58,0.04) !important;
    border-color: rgba(11, 31, 58,0.1);
}

/* FORM ELEMENTS - Clean */
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255,0.6) !important;
    border: 1px solid rgba(11, 31, 58,0.1) !important;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(11, 31, 58,0.25) !important;
    box-shadow: 0 0 0 3px rgba(11, 31, 58,0.06) !important;
    background: rgba(255, 255, 255,0.8) !important;
}

/* CART PROMO INPUTS */
.cart-promo-code input {
    background: rgba(255, 255, 255,0.6) !important;
    border: 1px solid rgba(11, 31, 58,0.1) !important;
}

.cart-promo-code input:focus {
    border-color: rgba(11, 31, 58,0.25) !important;
}

/* ANNOUNCEMENT BAR - Clean */
.announcement-bar {
    background: linear-gradient(135deg, #0b1f3a 0%, #0b1f3a 50%, #0b1f3a 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(11, 31, 58,0.25) !important;
}

/* COLLECTION HERO - Clean */
.hero-collection-badge {
    background: rgba(255, 255, 255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255,0.2);
    border-radius: 20px;
    padding: 8px 20px;
}

/* CATALOG HEADER - Clean */
.catalog-header {
    background: transparent;
    border: none;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.catalog-header::before {
    display: none;
}

/* CATALOG SEARCH */
.catalog-search {
    background: rgba(255, 255, 255,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 31, 58,0.06);
    border-radius: var(--border-radius-sm);
}

.catalog-search input {
    background: transparent !important;
    border: none !important;
}

/* FILTER TABS - Clean */
.tab-btn {
    background: rgba(255, 255, 255,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 31, 58,0.06);
    border-radius: 20px;
    transition: var(--transition-smooth);
}

.tab-btn:hover {
    background: rgba(255, 255, 255,0.7);
    border-color: rgba(11, 31, 58,0.15);
}

.tab-btn.active {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 2px 12px rgba(11, 31, 58,0.2);
}

/* TOAST - Clean */
.toast-notification {
    background: rgba(11, 31, 58,0.95) !important;
    border: 1px solid rgba(255, 255, 255,0.15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* PERFUME CARDS (app.js rendered) - Clean */
.perfume-card {
    background: rgba(255, 255, 255,0.6) !important;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255,0.7) !important;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.04);
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.perfume-card::before {
    display: none;
}

.perfume-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(11, 31, 58,0.08), 0 4px 16px rgba(11, 31, 58,0.06) !important;
    border-color: rgba(11, 31, 58,0.12) !important;
}

/* Mayor contraste visual para las tarjetas en todos los catálogos y secciones. */
.product-card,
.perfume-card {
    border: 1.5px solid #dce4ee !important;
    box-shadow: 0 8px 22px rgba(11, 31, 58, 0.08) !important;
}
.product-card:hover,
.perfume-card:hover {
    border-color: #dce4ee !important;
    box-shadow: 0 18px 34px rgba(11, 31, 58, 0.13), 0 5px 15px rgba(11, 31, 58, 0.12) !important;
}
.category-card,
.benefit-card,
.review-card,
.quiz-result-card,
.credit-card,
.info-card,
.perfume-collection-card {
    border: 1.5px solid rgba(11, 31, 58, 0.48) !important;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.08) !important;
}
.category-card:hover,
.benefit-card:hover,
.review-card:hover,
.quiz-result-card:hover,
.credit-card:hover,
.info-card:hover,
.perfume-collection-card:hover {
    border-color: rgba(11, 31, 58, 0.48) !important;
    box-shadow: 0 16px 32px rgba(11, 31, 58, 0.13) !important;
}

/* Buscador del encabezado: contenedor rectangular redondeado con lupa visible. */
.nav-search-item {
    min-height: 40px;
    box-sizing: border-box;
    gap: 8px;
    padding: 4px 10px 4px 5px;
    border: 1.5px solid rgba(11, 31, 58, 0.5);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 3px 12px rgba(11, 31, 58, 0.08);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-search-item:focus-within {
    border-color: #0b1f3a;
    background: #f7f9fc;
    box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.16), 0 5px 15px rgba(11, 31, 58, 0.1);
}
.nav-search-item > .fa-magnifying-glass {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: rgba(11, 31, 58, 0.14);
}
.nav-search-item .header-search-direct {
    width: 128px;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 5px 0;
    color: #3e4e68;
}
.nav-search-item .header-search-direct:focus { border-bottom: 0 !important; }

/* Identidad textual de la marca en el encabezado. */
.main-header .brand-texts {
    align-items: flex-start;
    gap: 4px;
}

.main-header .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.34rem;
    font-weight: 800;
    letter-spacing: 2.4px;
    line-height: 1;
    text-transform: uppercase;
}

.main-header .logo-sub {
    margin-top: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.75px;
    line-height: 1.2;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .main-header .brand-texts { gap: 2px; }
    .main-header .logo-text { font-size: 1rem; letter-spacing: 1.55px; }
    .main-header .logo-sub { font-size: 0.43rem; letter-spacing: 1.05px; }
}

@media (max-width: 380px) {
    .main-header .logo-sub { display: none; }
}

/* Acciones del encabezado integradas al fondo, sin recuadros adicionales. */
.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn,
.main-header .header-search-toggle:hover,
.main-header .action-btn:hover,
.main-header .hamburger-btn:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.main-header .nav-search-item > i,
.main-header .header-search-toggle i,
.main-header .action-btn i {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 480px) {
    .main-header .nav-search-item:not(.mobile-search-open) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* Búsqueda del encabezado: el icono abre un campo completo y accesible en móvil. */
.header-search-toggle {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(11, 31, 58, .14);
    color: inherit;
    cursor: pointer;
}

.header-search-toggle:focus-visible {
    outline: 3px solid rgba(11, 31, 58, .35);
    outline-offset: 2px;
}

@media (min-width: 481px) and (max-width: 768px) {
    .nav-search-item .header-search-direct {
        width: min(96px, 18vw) !important;
    }
}

@media (max-width: 480px) {
    .nav-search-item {
        width: 40px;
        max-width: 40px !important;
        min-height: 40px;
        padding: 4px !important;
    }

    .nav-search-item .header-search-direct {
        display: none;
    }

    .nav-search-item.mobile-search-open {
        position: fixed;
        top: max(66px, calc(env(safe-area-inset-top) + 56px));
        right: 12px;
        left: 12px;
        z-index: 2005;
        width: auto;
        max-width: none !important;
        min-height: 48px;
        padding: 7px 10px !important;
        background: #f7f9fc;
        border-color: rgba(11, 31, 58, .55);
        box-shadow: 0 12px 28px rgba(11, 31, 58, .16);
    }

    .nav-search-item.mobile-search-open .header-search-direct {
        display: block;
        width: 100% !important;
        min-width: 0;
        padding: 5px 2px;
        font-size: .9rem;
    }

    .nav-search-item.mobile-search-open .search-dropdown {
        top: calc(100% + 8px) !important;
        right: 0;
        left: 0 !important;
        width: 100% !important;
        max-height: min(55dvh, 360px);
    }
}

/* Encabezado blanco con la identidad azul marino de Jasmine Scents. */
.main-header {
    background: #ffffff !important;
    color: #0b1f3a !important;
    border-bottom-color: #dce4ee !important;
}

.main-header .logo-text,
.main-header .logo-sub,
.main-header .brand-name,
.main-header .brand-sub,
.main-header .nav-menu a,
.main-header .header-search-direct,
.main-header .header-search-direct::placeholder,
.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn {
    color: #0b1f3a !important;
}

.main-header .nav-menu a::after {
    background-color: #0b1f3a !important;
}

.main-header .header-search-direct:focus {
    border-color: #0b1f3a !important;
    background-color: #ffffff !important;
}

.main-header .nav-search-item,
.main-header .header-search-toggle,
.main-header .action-btn {
    background: #ffffff !important;
    border-color: #0b1f3a !important;
}

.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn {
    background: #f0f3f8 !important;
    border: 1px solid #0b1f3a !important;
}

.main-header .header-search-toggle:hover,
.main-header .action-btn:hover,
.main-header .hamburger-btn:hover {
    background: #e4eaf2 !important;
}

.main-header .hamburger-btn span {
    background: #0b1f3a !important;
}

.main-header .cart-badge {
    background: #0b1f3a !important;
    color: #f7f9fc !important;
}

/* Navegación de regreso consistente en las páginas internas. */
.site-back-nav {
    width: min(1200px, 92%);
    margin: 18px auto 0;
}
.site-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #3e4e68;
    font: 700 .82rem 'Montserrat', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}
.pago-success-back { margin-top: 20px; }
.site-back-btn i { color: #0b1f3a; }
.site-back-btn:hover,
.site-back-btn:focus-visible {
    color: #0b1f3a;
    transform: translateX(-3px);
    outline: none;
}
.site-back-btn:focus-visible { text-decoration: underline; }

/* Fondo árabe cálido en las superficies generales; las tarjetas quedan claras para conservar legibilidad. */
.categories-section,
.catalog-section,
.quiz-section,
.reviews-section {
    background-color: transparent !important;
}
.benefits-section,
.destacados-section {
    background-color: rgba(255, 255, 255, .58) !important;
}

/* Marco redondeado para las imágenes de cada producto, incluidas las nuevas. */
.product-card .product-image-container {
    overflow: hidden !important;
    border: 1px solid rgba(11, 31, 58, .28) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #f7f9fc, #f7f9fc) !important;
}
.product-card .product-image-carousel {
    overflow: hidden;
    border-radius: inherit;
}
.product-card .product-image-container > .product-main-img,
.product-card .product-image-carousel img {
    border-radius: 12px;
}

/* La fotografía ocupa y respeta el marco redondeado de la tarjeta. */
.product-card .product-image-container > .product-main-img,
.product-card .product-image-carousel img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

/* Panel de filtros consistente en Todos, Caballero, Dama y Unisex. */
.catalog-layout > .catalog-sidebar {
    align-self: start !important;
    margin: 28px 12px 0 0 !important;
    padding: 23px 20px !important;
    border: 1.5px solid #dce4ee !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 10px 26px rgba(11, 31, 58, .09) !important;
}
.catalog-sidebar .sb-section {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f7f9fc !important;
}
.catalog-sidebar .sb-chip {
    border: 1px solid #dce4ee !important;
    border-radius: 11px !important;
    background: #f7f9fc !important;
}
.catalog-sidebar .sb-chip:hover,
.catalog-sidebar .sb-chip.active {
    border-color: #dce4ee !important;
    background: rgba(11, 31, 58, .08) !important;
}
.catalog-sidebar .sb-reset {
    border: 1.5px solid #dce4ee !important;
    border-radius: 11px !important;
    background: #f7f9fc !important;
}
@media (max-width: 768px) {
    .catalog-layout > .catalog-sidebar {
        margin: 14px 0 12px !important;
        padding: 20px !important;
        border: 1.5px solid #dce4ee !important;
        border-radius: 18px !important;
    }
}
.search-dropdown { top: calc(100% + 8px); left: 0; }

/* SIZE BUTTONS - Clean */
.size-btn {
    background: rgba(255, 255, 255,0.5) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 31, 58,0.08) !important;
    transition: var(--transition-smooth);
}

.size-btn:hover, .size-btn.active {
    background: rgba(255, 255, 255,0.7) !important;
    border-color: rgba(11, 31, 58,0.2) !important;
}

/* CARD ACTION BUTTONS - Clean */
.card-action-btn {
    background: rgba(255, 255, 255,0.7) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(11, 31, 58,0.06) !important;
    border-radius: 50px !important;
}

.card-action-btn:hover {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover)) !important;
    border-color: rgba(11, 31, 58,0.5) !important;
    color: #f7f9fc;
}

.card-action-btn.quick-view {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover)) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(11, 31, 58,0.2);
}

/* ADD TO CART QUICK BUTTON - Clean */
.add-to-cart-quick {
    background: #0b1f3a !important;
    border: none !important;
    color: #f7f9fc !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.add-to-cart-quick:hover {
    background: #0b1f3a !important;
    box-shadow: 0 4px 16px rgba(11, 31, 58, 0.4);
}

/* REVIEW CARDS - Clean */
.review-card {
    background: rgba(255, 255, 255,0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255,0.6) !important;
    border-radius: var(--border-radius-md);
    position: relative;
    overflow: hidden;
}

.review-card::before {
    display: none;
}

/* CONTACT / INFO CARDS - Clean */
.contact-card,
.info-card {
    background: rgba(255, 255, 255,0.5);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255,0.6);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.03);
}

/* PERFUME COLLECTION CARDS - Clean */
.perfume-collection-card {
    background: rgba(255, 255, 255,0.55) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255,0.6) !important;
    box-shadow: 0 4px 16px rgba(11, 31, 58,0.03);
}

/* SIDEBAR FILTERS (hombre) - Clean */
.catalog-sidebar {
    background: rgba(255, 255, 255,0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255,0.5) !important;
    box-sizing: border-box;
    overflow: hidden;
}

.sb-section {
    overflow: hidden;
    border-bottom-color: rgba(11, 31, 58,0.04) !important;
}

.sb-chip {
    background: rgba(255, 255, 255,0.5) !important;
    border: 1px solid rgba(11, 31, 58,0.06) !important;
}

.sb-chip:hover {
    background: rgba(11, 31, 58,0.06) !important;
    border-color: rgba(11, 31, 58,0.15) !important;
}

.sb-chip.active {
    background: rgba(11, 31, 58,0.08) !important;
    border-color: rgba(11, 31, 58,0.2) !important;
}

.sb-reset {
    background: rgba(255, 255, 255,0.5) !important;
    border: 1px solid rgba(11, 31, 58,0.08) !important;
}

.sb-reset:hover {
    background: rgba(255, 255, 255,0.7) !important;
}

/* ACTIVE FILTER TAGS - Clean */
.active-filter-tag {
    background: rgba(11, 31, 58,0.06) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 31, 58,0.12) !important;
}

/* BENEFITS BAR (hombre) - Clean */
.benefits-bar {
    background: rgba(255, 255, 255,0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(11, 31, 58,0.05) !important;
    border-bottom: 1px solid rgba(11, 31, 58,0.05) !important;
}

.benefit-bar-item {
    border-right-color: rgba(11, 31, 58,0.04) !important;
}

/* HERO SECTION - Liquid Glass overlays */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* DESTACADOS SECTION - Liquid Glass */
.destacados-section {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    padding: 60px 10%;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.8), 0 8px 32px rgba(11, 31, 58,0.04);
}

.destacados-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 31, 58,0.25), transparent);
}

.destacados-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 31, 58,0.25), transparent);
}

.destacados-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.destacados-header {
    text-align: center;
    margin-bottom: 40px;
}

.destacados-badge {
    display: inline-block;
    color: var(--accent-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.destacados-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.destacados-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.destacados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

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

@media (max-width: 600px) {
    .destacados-grid {
        grid-template-columns: 1fr;
    }
    .destacados-section {
        padding: 40px 5%;
    }
    .reviews-section .section-header h2 {
        font-size: 1.3rem;
    }
    .review-card {
        width: 240px;
        min-width: 240px;
    }
}

/* SCROLLBAR - Clean */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255,0.8);
}
::-webkit-scrollbar-thumb {
    background: rgba(11, 31, 58,0.15);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255,0.8);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 31, 58,0.3);
}

/* ==========================================
   RESPONSIVE SYSTEM (final overrides)
   Placed last so mobile rules win over earlier styles
   ========================================== */

/* Prevent horizontal overflow site-wide */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

img, video, iframe, svg {
    max-width: 100%;
}

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px) {
    .hamburger-btn {
        display: flex !important;
        position: static;
        top: auto;
        right: auto;
        order: 3;
        margin-left: 8px;
        z-index: 1005;
    }

    .logo {
        order: 1;
        flex-shrink: 1;
        min-width: 0;
        margin-right: 8px;
    }

    .logo-text {
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        right: -300px;
        width: min(300px, 85vw);
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 1002;
        padding: 88px 24px 32px;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 24px rgba(11, 31, 58, 0.12);
        overflow-y: auto;
        order: 4;
    }

    .nav-menu.active {
        display: block;
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-menu ul li {
        border-bottom: 1px solid rgba(11, 31, 58, 0.06);
    }

    .nav-menu a {
        display: block;
        padding: 16px 4px;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }

    .nav-menu a::after {
        display: none;
    }

    .header-container {
        height: 60px;
        padding: 0 12px;
        gap: 8px;
    }

    .main-header {
        width: 100%;
        top: 0;
        border-radius: 0;
        margin: 0;
    }

    .hero-title {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }

    .hero-section {
        padding: 0 6%;
        padding-top: 72px;
        min-height: 70vh;
        height: auto;
    }

    .destacados-section {
        padding: 48px 5%;
    }

    .destacados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .trust-panel-inner {
        padding: 20px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .quick-view-modal {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
    }

    .quick-view-content {
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* ---- Mobile phones ---- */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .header-search-direct {
        width: 72px;
        font-size: 0.72rem;
        padding: 4px 0;
    }

    .nav-search-item {
        max-width: 110px;
    }

    .search-dropdown {
        width: min(280px, calc(100vw - 24px));
        left: auto;
        right: 0;
    }

    .action-btn {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .hero-section {
        margin-top: -70px;
        padding-top: 80px;
        min-height: 55vh;
        height: auto;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 40px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(1.55rem, 7vw, 2.1rem);
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 0.75rem;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .hero-description {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-video-bg {
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%) scale(1.05);
    }

    .section-container {
        width: 92%;
        padding: 48px 0;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .destacados-section,
    .categories-section,
    .reviews-section,
    .benefits-section {
        padding-left: 4%;
        padding-right: 4%;
    }

    .destacados-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .destacados-title {
        font-size: 1.4rem;
    }

    .destacados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-image-container {
        height: 160px;
    }

    .product-info {
        padding: 12px !important;
    }

    .product-title {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .product-description {
        display: none;
    }

    .product-brand {
        font-size: 0.7rem;
    }

    .product-price,
    .product-price-discounted {
        font-size: 0.9rem;
    }

    .product-card-actions {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        bottom: 8px;
        width: 92%;
    }

    .card-action-btn.quick-view {
        font-size: 0.68rem;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .product-bottom {
        flex-wrap: wrap;
        gap: 8px;
    }

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

    .category-card {
        height: 240px;
        padding: 20px;
    }

    .reviews-section {
        padding: 0 12px;
        margin-top: 32px;
    }

    .reviews-section .section-header h2 {
        font-size: 1.35rem;
    }

    .review-card {
        width: 240px;
        min-width: 240px;
        padding: 16px;
    }

    .trust-panel {
        padding: 0 12px;
        margin-top: 28px;
    }

    .trust-panel-inner {
        flex-direction: column;
        padding: 16px;
        gap: 14px;
        border-radius: 16px;
    }

    .trust-item {
        min-width: 0;
        flex: 1 1 auto;
    }

    .main-footer {
        padding: 32px 4% 16px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 100%;
    }

    .footer-col {
        text-align: center;
    }

    .footer-col ul {
        align-items: center;
    }

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

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

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

    /* Catalog */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 4% 0;
    }

    .filter-bar-left,
    .filter-bar-right {
        width: 100%;
    }

    .filter-bar-sort {
        width: 100%;
    }

    .catalog-layout {
        grid-template-columns: 1fr !important;
        padding: 0 4% 40px !important;
    }

    .catalog-sidebar {
        border-right: none !important;
        border-bottom: 1px solid rgba(11, 31, 58, 0.06);
        padding: 12px 0 16px !important;
        position: static !important;
        max-height: none !important;
    }

    .catalog-main {
        padding: 16px 0 0 !important;
    }

    .catalog-main .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .sb-chips {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Quick View mobile */
    .quick-view-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .quick-view-content {
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
    }

    .qv-gallery {
        flex-direction: column !important;
        flex: none !important;
        height: 220px !important;
        max-height: 38vh;
        border-right: none !important;
        border-bottom: 1px solid rgba(11, 31, 58, 0.06);
        width: 100%;
    }

    .qv-thumbs-col {
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 10px !important;
    }

    .qv-main-img-wrap {
        padding: 12px !important;
        min-height: 140px;
    }

    .qv-info {
        padding: 16px 18px 24px !important;
        height: auto !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
    }

    .qv-title {
        font-size: 1.3rem !important;
    }

    .qv-price-current {
        font-size: 1.25rem !important;
    }

    .qv-benefits {
        grid-template-columns: repeat(2, 1fr) !important;
    }

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

    .qv-add-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Cart & checkout */
    .cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
        right: -100%;
    }

    .cart-drawer.active {
        right: 0;
    }

    .modal-container {
        width: 94% !important;
        max-width: 94vw !important;
        padding: 24px 16px !important;
        max-height: 92vh;
    }

    .checkout-modal {
        width: 96vw !important;
        max-width: 96vw !important;
        padding: 20px 14px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-group.full-width {
        grid-column: auto !important;
    }

    .checkout-steps {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .step-connector {
        max-width: 28px;
        min-width: 16px;
    }

    .step-indicator .step-num {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .step-indicator .step-label {
        font-size: 0.55rem;
    }

    .checkout-step-footer {
        flex-direction: column;
        gap: 10px;
    }

    .checkout-step-footer .btn {
        width: 100%;
    }

    .card-visual-wrapper {
        transform: scale(0.9);
        transform-origin: center top;
    }

    /* Recommender */
    .recommender-container,
    .quiz-section-standalone {
        padding: 24px 4% !important;
    }

    .result-layout {
        grid-template-columns: 1fr !important;
    }

    .collection-hero {
        min-height: 50vh !important;
        padding: 40px 0;
    }

    .hero-collection-title {
        font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    }

    .hero-collection-content {
        padding: 0 1.25rem !important;
    }

    .breadcrumb {
        padding: 0.75rem 1rem !important;
        font-size: 0.75rem !important;
    }

    /* Help modals */
    .help-modal {
        width: 94%;
        max-height: 85vh;
        padding: 20px 16px;
    }

    /* Auth */
    .auth-box {
        padding: 0;
    }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
    .logo-text {
        font-size: 1.05rem;
    }

    .header-search-direct {
        display: none;
    }

    .nav-search-item {
        max-width: 36px;
    }

    .nav-search-item i {
        font-size: 0.95rem !important;
    }

    .hero-title {
        font-size: 1.45rem;
    }

    .destacados-grid,
    .product-grid,
    .catalog-main .product-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .product-image-container {
        height: 140px;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .footer-logo-img {
        height: 72px !important;
    }

    .trust-item i {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }

    .main-header {
        width: 100%;
        top: 0;
        border-radius: 0;
        margin: 0;
    }

    .header-container {
        height: 54px;
        padding: 0 10px;
    }

    .qv-gallery {
        height: 180px !important;
    }

    .btn {
        padding: 12px 20px;
        font-size: 0.88rem;
    }

    .product-badge {
        font-size: 0.58rem;
        padding: 4px 8px;
        letter-spacing: 0.5px;
    }
}

/* ---- Very small screens ---- */
@media (max-width: 360px) {
    .destacados-grid,
    .product-grid,
    .catalog-main .product-grid {
        grid-template-columns: 1fr !important;
    }

    .product-image-container {
        height: 200px;
    }

    .logo-text {
        font-size: 0.95rem;
    }
}

/* Touch devices: always show quick-view actions (no hover) */
@media (hover: none) and (pointer: coarse) {
    .product-card-actions {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
    }

    .product-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   ALKOSTO STYLE PRODUCT CARD REDESIGN
   ========================================================================== */

/* Base Card */
.product-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e7ee !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(11, 31, 58, 0.04) !important;
    padding: 12px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hover effect on Card */
.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(11, 31, 58, 0.08) !important;
    border-color: #dce4ee !important;
}

/* Image Container */
.product-image-container {
    background: transparent !important;
    border-bottom: none !important;
    height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
}

/* Image styling */
.product-image-container img,
.product-main-img,
.product-image-carousel img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

/* Image Zoom & Darkening on Hover */
.product-card:hover .product-image-container img,
.product-card:hover .product-main-img,
.product-card:hover .product-image-carousel img {
    transform: scale(1.06) !important;
    filter: brightness(0.9) !important;
}

/* Acciones unificadas del carrito */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.cart-actions .btn {
    width: 100%;
}

/* Badge Descuento */
.product-discount-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    background: #0b1f3a !important;
    color: #f7f9fc !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.64rem !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    z-index: 10 !important;
    box-shadow: none !important;
}

/* El descuento se muestra dentro de la tarjeta, sobre la marca, sin etiqueta. */
.product-info .product-discount-badge {
    position: static !important;
    display: block !important;
    width: fit-content;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #0b1f3a !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px !important;
    line-height: 1.1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Product Info wrapper */
.product-info {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Brand styling */
.product-brand {
    font-size: 0.75rem !important;
    color: #74829a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

/* Product Title (max 2 lines bold black) */
.product-title {
    font-size: 0.95rem !important;
    color: #0b1f3a !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.7em !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Price row styling */
.product-price-row,
.product-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #f7f9fc !important;
}

/* Original price crossed out */
.product-price-row span[style*="line-through"],
.original-price {
    font-size: 0.78rem !important;
    color: #74829a !important;
    text-decoration: line-through !important;
    margin-right: 0 !important;
}

/* Current price large black/dark-green */
.product-price,
.product-price-discounted {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0b1f3a !important;
    display: block !important;
}

/* Action button overlay on hover */
.product-card-actions {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(11, 31, 58, 0.2) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 0.3s ease !important;
    z-index: 5 !important;
    border-radius: 8px !important;
    padding: 0 !important;
}

.product-image-container:hover .product-card-actions {
    opacity: 1 !important;
    transform: none !important;
}

/* Button in overlay */
.product-card-actions .quick-view {
    background: #0b1f3a !important; /* Alkosto Deep Blue */
    color: #f7f9fc !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 10px rgba(11, 31, 58, 0.2) !important;
    width: 80% !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
}

.product-card-actions .quick-view:hover {
    background: #0b1f3a !important; /* Alkosto Red on hover */
    transform: scale(1.03) !important;
}

/* Keep add-to-cart button visible */

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
    .product-image-container {
        height: 150px !important;
    }
    
    .product-title {
        font-size: 0.85rem !important;
    }
    
    .product-price {
        font-size: 1.05rem !important;
    }
    
    /* Touch support: show actions cleanly or trigger on click */
    .product-card-actions {
        display: none !important; /* Hide overlay in favor of simpler mobile layout or show it when active */
    }

    .product-info .add-to-cart-btn {
        display: flex !important;
        margin-top: 6px !important;
        background: #0b1f3a !important;
        color: #f7f9fc !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
    }
}

/* Prioridad final: estas reglas prevalecen sobre los estilos heredados de tarjetas. */
.product-card,
.perfume-card {
    border: 1.5px solid #dce4ee !important;
    box-shadow: 0 8px 22px rgba(11, 31, 58, .08) !important;
}
.product-card:hover,
.perfume-card:hover {
    border-color: #dce4ee !important;
    box-shadow: 0 18px 34px rgba(11, 31, 58, .13), 0 5px 15px rgba(11, 31, 58, .12) !important;
}
.category-card,
.benefit-card,
.review-card,
.quiz-result-card,
.credit-card,
.info-card,
.perfume-collection-card {
    border: 1.5px solid rgba(11, 31, 58, .48) !important;
    box-shadow: 0 8px 24px rgba(11, 31, 58, .08) !important;
}
.category-card:hover,
.benefit-card:hover,
.review-card:hover,
.quiz-result-card:hover,
.credit-card:hover,
.info-card:hover,
.perfume-collection-card:hover {
    border-color: rgba(11, 31, 58, .48) !important;
    box-shadow: 0 16px 32px rgba(11, 31, 58, .13) !important;
}
.nav-search-item {
    min-height: 40px; gap: 8px; padding: 4px 10px 4px 5px;
    border: 1.5px solid rgba(11, 31, 58, .5); border-radius: 12px;
    background: rgba(255, 255, 255, .78); box-shadow: 0 3px 12px rgba(11, 31, 58, .08);
}
.nav-search-item:focus-within { border-color: #0b1f3a; background: #f7f9fc; box-shadow: 0 0 0 3px rgba(11, 31, 58, .16), 0 5px 15px rgba(11, 31, 58, .1); }
.nav-search-item > .fa-magnifying-glass { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: rgba(11, 31, 58, .14); }
.nav-search-item .header-search-direct { width: 128px; border: 0 !important; border-bottom: 0 !important; padding: 5px 0; color: #3e4e68; }
.nav-search-item .header-search-direct:focus { border-bottom: 0 !important; }

/* Estados de inventario: el color comunica disponibilidad de forma uniforme. */
.availability-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff !important;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.availability-status.status-available {
    background: var(--status-available) !important;
    box-shadow: 0 2px 8px rgba(21, 128, 61, 0.2);
}

.availability-status.status-unavailable {
    background: var(--status-unavailable) !important;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.2);
}

.availability-status * {
    color: #fff !important;
}

.cart-item-availability.availability-status {
    display: inline-flex !important;
    margin-top: 5px !important;
}

/* Encabezado y pie de página azul: identidad consistente en toda la tienda. */
.main-header {
    background: #0b1f3a !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 3px 16px rgba(6, 21, 45, .28) !important;
}

.main-header::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent) !important;
}

.main-header .brand-logo-img {
    filter: brightness(0) invert(1);
}

.main-header .logo-text,
.main-header .logo-sub,
.main-header .brand-name,
.main-header .brand-sub,
.main-header .nav-menu a,
.main-header .header-search-direct,
.main-header .header-search-direct::placeholder,
.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn {
    color: #fff !important;
}

.main-header .nav-menu a::after {
    background-color: rgba(255, 255, 255, .92) !important;
}

.main-header .nav-search-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .34) !important;
    box-shadow: none !important;
}

.main-header .nav-search-item:focus-within {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .8) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12) !important;
}

.main-header .nav-search-item > i,
.main-header .header-search-toggle i,
.main-header .action-btn i {
    color: rgba(255, 255, 255, .72) !important;
    background: transparent !important;
    opacity: .82;
    transition: opacity .2s ease, color .2s ease;
}

.main-header .nav-search-item:hover > i,
.main-header .header-search-toggle:hover i,
.main-header .action-btn:hover i {
    color: #fff !important;
    opacity: 1;
}

.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn,
.main-header .header-search-toggle:hover,
.main-header .action-btn:hover,
.main-header .hamburger-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.main-header .hamburger-btn span {
    background: rgba(255, 255, 255, .8) !important;
}

.main-header .cart-badge {
    background: rgba(255, 255, 255, .92) !important;
    color: #0b1f3a !important;
}

.main-footer {
    background: #0b1f3a !important;
    color: rgba(255, 255, 255, .82) !important;
    border-top-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 -4px 24px rgba(6, 21, 45, .2) !important;
}

.main-footer::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent) !important;
}

.main-footer .footer-logo-img {
    filter: brightness(0) invert(1);
}

.main-footer .footer-col h3,
.main-footer .links-col a,
.main-footer .brand-col p,
.main-footer .newsletter-col p,
.main-footer .footer-contact a,
.main-footer .footer-contact-item strong,
.main-footer .footer-contact-item span,
.main-footer .footer-contact-form-link,
.main-footer .payment-methods-title,
.main-footer .footer-bottom p {
    color: rgba(255, 255, 255, .82) !important;
}

.main-footer .links-col a:hover,
.main-footer .footer-contact a:hover {
    color: #fff !important;
}

.main-footer .social-links a {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: rgba(255, 255, 255, .82) !important;
}

.main-footer .social-links a:hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .6) !important;
    color: #fff !important;
}

.main-footer .footer-contact i {
    color: rgba(255, 255, 255, .82) !important;
}

.main-footer .payment-methods,
.main-footer .footer-bottom {
    border-color: rgba(255, 255, 255, .18) !important;
}

.main-footer .payment-logo {
    color: rgba(255, 255, 255, .88) !important;
}

@media (max-width: 1024px) {
    .main-header .nav-menu a {
        color: #0b1f3a !important;
    }

    .main-header .nav-menu a::after {
        background-color: #0b1f3a !important;
    }
}

@media (max-width: 480px) {
    .main-header .nav-search-item.mobile-search-open {
        background: #0b1f3a !important;
        border-color: rgba(255, 255, 255, .72) !important;
    }
}

/* Paleta Jasmine: azul marino, vino, coral y blanco cálido.
   Los colores de Disponibilidad y Agotado se conservan en sus reglas propias. */
body,
.catalog-section,
.categories-section,
.perfumes-page,
.perfumes-todos-page,
.perfumes-caballero-page,
.vista-page,
.recomendador-page {
    background-color: #fcfaf8 !important;
}

.announcement-bar {
    background: linear-gradient(90deg, #741b37 0%, #8f2747 50%, #741b37 100%) !important;
}

@media (max-width: 480px) {
    .main-header .nav-search-item.mobile-search-open {
        background: #071a37 !important;
    }
}

.section-badge,
.destacados-badge,
.product-brand,
.catalog-sidebar .sb-title i,
.sb-title i {
    color: #c83d4a !important;
}

.btn-primary,
.hero-buttons .btn-primary,
.newsletter-form .btn,
.vista-buy-btn,
.qv-add-btn,
.add-to-cart-quick,
.product-info .add-to-cart-btn {
    background: #e64b57 !important;
    color: #fff !important;
    border-color: #e64b57 !important;
    box-shadow: 0 8px 20px rgba(230, 75, 87, .22) !important;
}

.btn-primary:hover,
.hero-buttons .btn-primary:hover,
.newsletter-form .btn:hover,
.vista-buy-btn:hover,
.qv-add-btn:hover,
.add-to-cart-quick:hover,
.product-info .add-to-cart-btn:hover {
    background: #c83d4a !important;
    border-color: #c83d4a !important;
}

.btn-secondary,
.btn-outline {
    color: #741b37 !important;
    border-color: #741b37 !important;
    background: rgba(255, 255, 255, .55) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    color: #fff !important;
    border-color: #741b37 !important;
    background: #741b37 !important;
}

.product-card,
.perfume-card,
.catalog-sidebar,
.filter-card,
.benefits-bar,
.trust-panel-inner,
.vista-rec-card {
    border-color: #ead8dc !important;
}

.product-card:hover,
.perfume-card:hover,
.vista-rec-card:hover {
    border-color: rgba(200, 61, 74, .45) !important;
    box-shadow: 0 16px 32px rgba(116, 27, 55, .13) !important;
}

.product-discount-badge,
.vista-discount-tag,
.qv-discount-badge {
    background: #741b37 !important;
    color: #fff !important;
}

.product-info .product-discount-badge {
    color: #c83d4a !important;
    background: transparent !important;
}

.catalog-sidebar .sb-title,
.sb-title {
    border-bottom-color: #e64b57 !important;
}

.catalog-sidebar .sb-chip.active,
.sb-chip.active,
.active-filter-tag {
    background: rgba(230, 75, 87, .10) !important;
    border-color: rgba(200, 61, 74, .28) !important;
    color: #741b37 !important;
}

.catalog-sidebar .sb-chip.active .chip-count,
.sb-chip.active .chip-count,
.range-slider-fill {
    background: #e64b57 !important;
    color: #fff !important;
}

.main-header,
.main-footer {
    background: #071a37 !important;
}

/* Estructura visual inspirada en la cabecera y pie de página de referencia. */
.store-announcement {
    min-height: 34px;
    background: linear-gradient(90deg, #741b37 0%, #8f2747 50%, #741b37 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}
.store-announcement-inner {
    width: min(1380px, 94%);
    min-height: 34px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 18px;
}
.store-announcement span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}
.store-announcement i { font-size: .78rem; }

.main-header {
    min-height: 86px;
    background: #fff !important;
    color: #071a37 !important;
    border-bottom: 1px solid #e9e8e7 !important;
    box-shadow: 0 3px 14px rgba(7, 26, 55, .05) !important;
}
.main-header::after { display: none !important; }
.main-header .header-container {
    width: min(1480px, 96%);
    height: 86px;
    padding: 0;
    gap: clamp(16px, 2vw, 34px);
}
.main-header .brand-logo-img { height: 60px !important; filter: none !important; }
.main-header .logo { margin-right: 0; gap: 10px; }
.main-header .brand-texts { gap: 3px; }
.main-header .logo-text {
    color: #071a37 !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem);
    font-weight: 500;
    letter-spacing: 2.2px;
}
.main-header .logo-sub { color: #741b37 !important; font-size: .51rem; font-weight: 700; letter-spacing: 2.4px; }
.main-header .nav-menu { margin-left: auto; }
.main-header .nav-menu ul { gap: clamp(14px, 1.75vw, 29px); }
.main-header .nav-menu a { color: #071a37 !important; font-size: .73rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.main-header .nav-menu a:hover,
.main-header .nav-menu a.active { color: #741b37 !important; }
.main-header .nav-menu a::after { height: 1.5px; background: #c83d4a !important; }
.main-header .nav-menu li:nth-child(2) > a::before {
    content: none;
}

@media (min-width: 1025px) {
    .main-header .header-container { position: relative; }
    .main-header .nav-menu {
        position: absolute;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }
}
.main-header .header-actions { gap: 11px; }
.main-header .nav-search-item {
    min-height: 38px; padding: 3px 12px; background: #fff !important;
    border: 1px solid #d9dce2 !important; border-radius: 999px; box-shadow: none !important;
}
.main-header .nav-search-item:focus-within {
    background: #fff !important; border-color: rgba(116, 27, 55, .55) !important;
    box-shadow: 0 0 0 3px rgba(230, 75, 87, .10) !important;
}
.main-header .nav-search-item > i,
.main-header .header-search-toggle i,
.main-header .action-btn i { color: rgba(7, 26, 55, .72) !important; opacity: 1; }
.main-header .header-search-direct,
.main-header .header-search-direct::placeholder { color: #526071 !important; }
.main-header .header-search-direct::placeholder { opacity: .72; }
.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn,
.main-header .header-search-toggle:hover,
.main-header .action-btn:hover,
.main-header .hamburger-btn:hover {
    color: rgba(7, 26, 55, .78) !important; background: transparent !important;
    border-color: transparent !important; box-shadow: none !important;
}
.main-header .action-btn:hover i,
.main-header .header-search-toggle:hover i { color: #741b37 !important; }
.main-header .cart-badge {
    top: 1px; right: 0; min-width: 17px; height: 17px; background: #e64b57 !important;
    color: #fff !important; box-shadow: 0 2px 5px rgba(230, 75, 87, .25);
}
.main-header .hamburger-btn span { background: #071a37 !important; }
.home-page .hero-section { margin-top: 0 !important; }

.main-footer { padding: 42px 0 0 !important; background: #071a37 !important; }
.main-footer .footer-container {
    width: min(1360px, 90%); grid-template-columns: minmax(220px, .85fr) repeat(3, minmax(150px, 1fr));
    grid-template-rows: auto auto; gap: 30px 38px;
}
.main-footer .brand-col {
    grid-row: 1 / span 2; padding: 6px 44px 12px 0;
    border-right: 1px solid rgba(255, 255, 255, .28); text-align: left;
}
.main-footer .footer-logo { align-items: flex-start; margin-bottom: 14px; }
.main-footer .footer-logo-img { height: 76px !important; margin: 0 !important; }
.main-footer .footer-brand-copy {
    max-width: 245px; margin: 0 0 18px; color: rgba(255, 255, 255, .72) !important;
    font-size: .74rem; line-height: 1.7;
}
.main-footer .social-links { justify-content: flex-start; gap: 13px; }
.main-footer .social-links a {
    width: 24px; height: 24px; border: 0 !important; border-radius: 0; background: transparent !important;
    color: rgba(246, 210, 151, .9) !important; font-size: .9rem;
}
.main-footer .social-links a:hover { color: #fff !important; transform: translateY(-2px); }
.main-footer .footer-newsletter {
    grid-column: 2 / -1; padding-bottom: 27px; border-bottom: 1px solid rgba(255, 255, 255, .20);
}
.main-footer .footer-newsletter h3 { margin-bottom: 7px; color: #fff !important; font-size: .78rem; letter-spacing: 1.5px; }
.main-footer .footer-newsletter p { max-width: 480px; margin: 0 0 14px; color: rgba(255, 255, 255, .72) !important; font-size: .78rem; }
.main-footer .newsletter-form { max-width: 465px; gap: 0; }
.main-footer .newsletter-form input {
    min-height: 40px; color: #fff; background: transparent; border: 1px solid rgba(246, 210, 151, .8);
    border-right: 0; border-radius: 999px 0 0 999px;
}
.main-footer .newsletter-form input::placeholder { color: rgba(255, 255, 255, .65); }
.main-footer .newsletter-form .btn {
    min-height: 40px; padding: 7px 19px; background: #e64b57 !important; color: #fff !important;
    border-radius: 0 999px 999px 0; box-shadow: none !important;
}
.main-footer .footer-container > .links-col,
.main-footer .footer-container > .footer-contact { margin: 0; }
.main-footer .footer-col h3 { margin-bottom: 12px; color: #f6d297 !important; font-size: .68rem; letter-spacing: 1.4px; }
.main-footer .links-col ul { gap: 8px; }
.main-footer .links-col a,
.main-footer .footer-contact a,
.main-footer .footer-contact-item span { color: rgba(255, 255, 255, .74) !important; font-size: .74rem; }
.main-footer .footer-contact-item { margin-bottom: 10px; }
.main-footer .footer-contact-item strong { color: #fff !important; font-size: .76rem; }
.main-footer .footer-contact i { color: #f6d297 !important; }
.main-footer .payment-methods { width: min(1360px, 90%); margin-top: 24px; padding-top: 18px; }
.main-footer .footer-bottom { width: min(1360px, 90%); margin-top: 14px; padding: 14px 0 16px; }

@media (max-width: 1120px) {
    .main-header .nav-menu ul { gap: 14px; }
    .main-header .nav-menu a { font-size: .67rem; }
    .main-header .nav-search-item .header-search-direct { width: 108px; }
    .main-footer .footer-container { grid-template-columns: minmax(195px, .8fr) repeat(3, 1fr); gap: 26px; }
    .main-footer .brand-col { padding-right: 26px; }
}
@media (max-width: 1024px) {
    .main-header .header-container { height: 70px; }
    .main-header { min-height: 70px; }
    .main-header .brand-logo-img { height: 48px !important; }
    .main-header .nav-menu a { color: #071a37 !important; }
    .main-header .nav-menu a::after { background-color: #c83d4a !important; }
}
@media (max-width: 720px) {
    .store-announcement-inner { grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 6px 0; }
    .store-announcement span { justify-content: flex-start; font-size: .56rem; white-space: normal; }
    .store-announcement span:nth-child(3) { display: none; }
    .main-footer .footer-container { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 28px 22px; }
    .main-footer .brand-col { grid-column: 1 / -1; grid-row: auto; padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .20); }
    .main-footer .footer-newsletter { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .store-announcement { min-height: 38px; }
    .main-header .header-container { width: 94%; height: 62px; }
    .main-header { min-height: 62px; }
    .main-header .brand-logo-img { height: 41px !important; }
    .main-header .logo-text { font-size: .97rem; letter-spacing: 1.15px; }
    .main-header .logo-sub { font-size: .4rem; letter-spacing: .9px; }
    .main-header .nav-search-item.mobile-search-open { background: #fff !important; border-color: rgba(116, 27, 55, .55) !important; }
    .main-footer .footer-container { grid-template-columns: 1fr; }
    .main-footer .footer-container > .links-col,
    .main-footer .footer-container > .footer-contact { grid-column: 1; }
}

/* Pie de página clásico de la tienda, con azul comercial inspirado en Alkosto. */
.main-footer {
    padding: 28px 0 0 !important;
    /* Azul comercial con contraste alto para que todo el contenido sea legible. */
    background: #0059b3 !important;
    color: #ffffff !important;
}
.main-footer .footer-container {
    width: 90%;
    max-width: 1200px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 30px;
}
.main-footer .brand-col {
    grid-column: auto;
    grid-row: auto;
    padding: 0;
    border: 0;
    text-align: center;
}
.main-footer .footer-logo { align-items: center; margin-bottom: 10px; }
.main-footer .footer-logo-img {
    height: 100px !important;
    margin: 0 auto !important;
    padding: 6px;
    background: #ffffff;
    border: 2px solid #dceeff;
    border-radius: 50%;
}
.main-footer .social-links { justify-content: center; gap: 8px; }
.main-footer .social-links a {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .36) !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 1rem;
}
.main-footer .social-links a:hover {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}
.main-footer .footer-col h3 {
    margin-bottom: 10px;
    color: #ffffff !important;
    font-size: .72rem;
    letter-spacing: 1px;
}
.main-footer .links-col ul { gap: 7px; }
.main-footer .links-col a,
.main-footer .footer-contact a,
.main-footer .footer-contact-item span,
.main-footer .footer-contact-item strong,
.main-footer .footer-contact-form-link {
    color: #ffffff !important;
    font-size: .78rem;
}
.main-footer .links-col a:hover,
.main-footer .footer-contact a:hover { color: #fff !important; }
.main-footer .footer-contact i { color: #fff !important; }
.main-footer .footer-contact-item { margin-bottom: 13px; }
.main-footer .payment-methods,
.main-footer .footer-bottom {
    width: 90%;
    max-width: 1200px;
    border-color: rgba(255, 255, 255, .22) !important;
}
.main-footer .payment-methods { margin-top: 22px; padding-top: 16px; }
.main-footer .payment-methods-title,
.main-footer .footer-bottom p { color: #ffffff !important; }
.main-footer .footer-bottom { margin-top: 16px; padding: 10px 0; }

@media (max-width: 720px) {
    .main-footer .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .main-footer .brand-col {
        grid-column: auto;
        padding: 0;
        border: 0;
    }
}

@media (max-width: 480px) {
    .main-footer .footer-container { grid-template-columns: 1fr; }
    .main-footer .brand-col,
    .main-footer .footer-container > .links-col,
    .main-footer .footer-container > .footer-contact { grid-column: auto; }
}

/* Paleta global: blanco y verde menta.
   Los colores semánticos de Disponibilidad y Agotado se mantienen sin cambios. */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9fbf4;
    --text-primary: #123b35;
    --text-secondary: #54736d;
    --text-muted: #718b86;
    --accent-gold: #20a98b;
    --accent-gold-hover: #12836c;
    --accent-gold-dark: #0d5f50;
    --accent-pink: #d9f7ec;
    --accent-pink-dark: #0d5f50;
    --accent-orange: #20a98b;
    --highlight-gold: rgba(32, 169, 139, .13);
    --glass-bg: rgba(255, 255, 255, .94);
    --glass-border: rgba(32, 169, 139, .22);
    --shadow-sm: 0 4px 14px rgba(18, 59, 53, .07);
    --shadow-md: 0 12px 30px rgba(18, 59, 53, .10);
    --shadow-lg: 0 20px 48px rgba(18, 59, 53, .14);
    --shadow-gold: 0 9px 26px rgba(32, 169, 139, .20);
}

html,
body,
.home-page,
.perfumes-page,
.perfumes-caballero-page,
.perfumes-dama-page,
.perfumes-unisex-page,
.contacto-page,
.pagos-main,
.vista-page-body,
.recomendador-page {
    background: #ffffff !important;
    color: #123b35 !important;
}

::selection { background: #bdeedc; color: #123b35; }

/* Encabezado y acciones principales. */
.main-header {
    background: #ffffff !important;
    color: #123b35 !important;
    border-bottom-color: #c8eee1 !important;
    box-shadow: 0 3px 16px rgba(18, 59, 53, .07) !important;
}
.main-header .logo-text,
.main-header .brand-name,
.main-header .nav-menu a,
.main-header .header-search-direct,
.main-header .header-search-direct::placeholder,
.main-header .header-search-toggle,
.main-header .action-btn,
.main-header .hamburger-btn { color: #123b35 !important; }
.main-header .logo-sub { color: #12836c !important; }
.main-header .nav-menu a:hover,
.main-header .nav-menu a.active,
.main-header .action-btn:hover i,
.main-header .header-search-toggle:hover i { color: #12836c !important; }
.main-header .nav-menu a::after { background: #20a98b !important; }
.main-header .nav-search-item {
    background: #ffffff !important;
    border-color: #bfeadd !important;
}
.main-header .nav-search-item:focus-within {
    border-color: #20a98b !important;
    box-shadow: 0 0 0 3px rgba(32, 169, 139, .14) !important;
}
.main-header .nav-search-item > i,
.main-header .header-search-toggle i,
.main-header .action-btn i { color: #0d6d5b !important; }
.main-header .hamburger-btn span { background: #123b35 !important; }
.main-header .cart-badge {
    background: #20a98b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(32, 169, 139, .32) !important;
}

/* Botones y elementos accionables de toda la tienda. */
.btn-primary,
.hero-buttons .btn-primary,
.newsletter-form .btn,
.vista-buy-btn,
.qv-add-btn,
.add-to-cart-quick,
.product-info .add-to-cart-btn,
.contacto-submit,
.pagos-main .btn-primary {
    background: #20a98b !important;
    border-color: #20a98b !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(32, 169, 139, .20) !important;
}
.btn-primary:hover,
.hero-buttons .btn-primary:hover,
.newsletter-form .btn:hover,
.vista-buy-btn:hover,
.qv-add-btn:hover,
.add-to-cart-quick:hover,
.product-info .add-to-cart-btn:hover,
.contacto-submit:hover,
.pagos-main .btn-primary:hover {
    background: #12836c !important;
    border-color: #12836c !important;
    box-shadow: 0 12px 26px rgba(18, 131, 108, .25) !important;
}
.btn-secondary,
.btn-outline,
.filter-back-btn,
.btn-cancel {
    background: #ffffff !important;
    border-color: #95dcc8 !important;
    color: #0d5f50 !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.filter-back-btn:hover,
.btn-cancel:hover {
    background: #e9fbf4 !important;
    border-color: #20a98b !important;
    color: #0d5f50 !important;
}

/* Tarjetas, filtros y superficie de los catálogos. */
.product-card,
.perfume-card,
.catalog-sidebar,
.filter-card,
.benefits-bar,
.trust-panel-inner,
.vista-rec-card,
.vista-notes-box,
.vista-zoom-stage,
.vista-size-btn,
.vista-qty,
.filter-bar-sort,
.sb-chip,
.sb-reset,
.active-filter-tag,
.pagos-card,
.pagos-cart-summary,
.contacto-card,
.contacto-input {
    background: #ffffff !important;
    border-color: #c8eee1 !important;
}
.product-card,
.perfume-card,
.vista-rec-card,
.catalog-sidebar,
.filter-card,
.pagos-card,
.contacto-card {
    box-shadow: 0 10px 26px rgba(18, 59, 53, .08) !important;
}
.product-card:hover,
.perfume-card:hover,
.vista-rec-card:hover,
.catalog-sidebar:hover,
.filter-card:hover {
    border-color: #69cdb4 !important;
    box-shadow: 0 18px 34px rgba(18, 131, 108, .16) !important;
}
.section-badge,
.destacados-badge,
.product-brand,
.catalog-sidebar .sb-title i,
.sb-title i,
.vista-brand,
.vista-rec-brand { color: #12836c !important; }
.catalog-sidebar .sb-title,
.sb-title { border-bottom-color: #20a98b !important; }
.catalog-sidebar .sb-chip.active,
.sb-chip.active,
.active-filter-tag,
.vista-size-btn.active {
    background: #e9fbf4 !important;
    border-color: #69cdb4 !important;
    color: #0d5f50 !important;
}
.catalog-sidebar .sb-chip.active .chip-count,
.sb-chip.active .chip-count,
.range-slider-fill { background: #20a98b !important; color: #ffffff !important; }
.filter-bar-sort:focus,
.sb-reset:focus,
.vista-size-btn:focus-visible,
.vista-rec-control:focus-visible,
.contacto-input:focus-within {
    border-color: #20a98b !important;
    box-shadow: 0 0 0 3px rgba(32, 169, 139, .14) !important;
}

/* Vista del producto y checkout. */
.vista-name,
.vista-price-current,
.vista-notes-title,
.vista-sizes-title,
.vista-size-btn,
.vista-size-btn .sz-price,
.vista-qty button,
.vista-qty span,
.vista-size-required,
.vista-rec-title,
.vista-rec-name,
.vista-rec-price,
.vista-rec-control,
.pagos-main,
.pagos-main h1,
.pagos-main h2,
.pagos-main h3,
.pagos-main .total-price { color: #123b35 !important; }
.vista-desc,
.vista-notes-text,
.vista-category,
.vista-price-original,
.vista-rec-subtitle,
.pagos-main .form-group label,
.pagos-main .form-group input,
.pagos-main .form-group select,
.pagos-main .form-group textarea { color: #54736d !important; }
.vista-rec-control:hover { background: #20a98b !important; color: #ffffff !important; }
.pagos-main input,
.pagos-main select,
.pagos-main textarea {
    background: #ffffff !important;
    border-color: #c8eee1 !important;
}
.pagos-main .pagos-header-icon,
.pagos-main .pagos-step.active .step-num,
.pagos-main .epayco-badge { background: #e9fbf4 !important; color: #0d5f50 !important; }

/* Formulario de contacto. */
.contacto-aside { background: linear-gradient(145deg, #0d5f50 0%, #12836c 100%) !important; }
.contacto-kicker { color: #12836c !important; }
.contacto-aside .contacto-kicker,
.contacto-aside .contacto-promises i { color: #d9f7ec !important; }
.contacto-form-heading h2,
.contacto-grid label,
.contacto-grid input,
.contacto-grid textarea,
.contacto-back { color: #123b35 !important; }
.contacto-back i { background: #20a98b !important; color: #ffffff !important; }
.contacto-input { background: #ffffff !important; }

/* Pie de página con la misma paleta y contraste alto. */
.main-footer {
    background: #d9f7ec !important;
    color: #123b35 !important;
    border-top-color: #8edbc7 !important;
    box-shadow: 0 -4px 24px rgba(18, 59, 53, .08) !important;
}
.main-footer .footer-logo-img {
    background: #ffffff !important;
    border-color: #8edbc7 !important;
}
.main-footer .footer-col h3,
.main-footer .links-col a,
.main-footer .footer-contact a,
.main-footer .footer-contact-item strong,
.main-footer .footer-contact-item span,
.main-footer .footer-contact-form-link,
.main-footer .payment-methods-title,
.main-footer .footer-bottom p,
.main-footer .payment-logo { color: #123b35 !important; }
.main-footer .links-col a:hover,
.main-footer .footer-contact a:hover { color: #12836c !important; }
.main-footer .footer-contact i { color: #12836c !important; }
.main-footer .social-links a {
    background: #ffffff !important;
    border-color: #69cdb4 !important;
    color: #12836c !important;
}
.main-footer .social-links a:hover { background: #20a98b !important; color: #ffffff !important; }
.main-footer .payment-methods,
.main-footer .footer-bottom { border-color: #8edbc7 !important; }

/* Animaciones suaves y consistentes en todas las pantallas públicas. */
@keyframes jasmine-header-enter {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes jasmine-section-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes jasmine-card-enter {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jasmine-mint-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(32, 169, 139, .20); }
    50% { box-shadow: 0 0 0 7px rgba(32, 169, 139, 0); }
}
.main-header { animation: jasmine-header-enter .48s cubic-bezier(.16, 1, .3, 1) both; }
/* No se aplica transform al contenedor que aloja modales y carrito: un hijo fixed debe referenciar el viewport. */
@keyframes jasmine-content-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
#main-content { animation: jasmine-content-enter .42s ease-out both; }
.perfumes-page > .filter-bar,
.perfumes-page > .catalog-layout,
.vista-page-body,
.pagos-main,
.contacto-main,
.recomendador-page > section { animation: jasmine-section-enter .56s cubic-bezier(.16, 1, .3, 1) both; }
.product-card:nth-child(2), .perfume-card:nth-child(2), .vista-rec-card:nth-child(2), .category-card:nth-child(2) { animation-delay: .06s; }
.product-card:nth-child(3), .perfume-card:nth-child(3), .vista-rec-card:nth-child(3), .category-card:nth-child(3) { animation-delay: .12s; }
.product-card:nth-child(4), .perfume-card:nth-child(4), .vista-rec-card:nth-child(4), .category-card:nth-child(4) { animation-delay: .18s; }
.product-card:nth-child(n+5), .perfume-card:nth-child(n+5), .vista-rec-card:nth-child(n+5), .category-card:nth-child(n+5) { animation-delay: .22s; }
.main-footer { animation: jasmine-section-enter .6s .08s cubic-bezier(.16, 1, .3, 1) both; }
.btn,
.filter-back-btn,
.btn-cancel,
.product-card,
.perfume-card,
.vista-rec-card,
.social-links a,
.nav-menu a,
.action-btn,
.header-search-toggle,
.vista-rec-control,
.vista-size-btn,
.sb-chip,
.filter-bar-sort { transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease, border-color .24s ease, color .24s ease !important; }
.btn:hover:not(:disabled),
.filter-back-btn:hover,
.btn-cancel:hover,
.action-btn:hover,
.header-search-toggle:hover { transform: translateY(-2px); }
.product-card:hover,
.perfume-card:hover,
.vista-rec-card:hover { transform: translateY(-6px); }
.cart-badge { animation: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Uiverse Creatlydev: barrido azul para cualquier acción del flujo de pago. */
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary,
.checkout-step-footer .btn.btn-primary,
.pagos-footer .btn.btn-primary,
#pay-submit-btn,
#p-epayco-btn {
    --payment-clr: #1976d2;
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    min-width: min(200px, 100%) !important;
    min-height: 46px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 1.5rem !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #121212 !important;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .08) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    letter-spacing: .2px;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.vista-buy-section .vista-buy-btn:not(:disabled)::before,
.cart-actions .btn.btn-primary::before,
.checkout-step-footer .btn.btn-primary::before,
.pagos-footer .btn.btn-primary::before,
#pay-submit-btn::before,
#p-epayco-btn::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 0;
    border-radius: inherit;
    background: var(--payment-clr) !important;
    opacity: 1;
    transform: translateX(-101%);
    pointer-events: none;
    animation: none !important;
    transition: transform .3s ease;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.vista-buy-section .vista-buy-btn:not(:disabled)::after,
.cart-actions .btn.btn-primary::after,
.checkout-step-footer .btn.btn-primary::after,
.pagos-footer .btn.btn-primary::after,
#pay-submit-btn::after,
#p-epayco-btn::after {
    content: none !important;
    display: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible),
.cart-actions .btn.btn-primary:is(:hover, :focus-visible),
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible),
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible),
#pay-submit-btn:is(:hover, :focus-visible),
#p-epayco-btn:is(:hover, :focus-visible) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 10px 12px 24px rgba(12, 64, 118, .16) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible)::before,
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible)::before,
.cart-actions .btn.btn-primary:is(:hover, :focus-visible)::before,
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible)::before,
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible)::before,
#pay-submit-btn:is(:hover, :focus-visible)::before,
#p-epayco-btn:is(:hover, :focus-visible)::before {
    transform: translateX(0);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.vista-buy-section .vista-buy-btn:not(:disabled):active,
.cart-actions .btn.btn-primary:active,
.checkout-step-footer .btn.btn-primary:active,
.pagos-footer .btn.btn-primary:active,
#pay-submit-btn:active,
#p-epayco-btn:active {
    transform: translateY(0) scale(.98);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.vista-buy-section .vista-buy-btn:not(:disabled) > i,
.cart-actions .btn.btn-primary > i,
.checkout-step-footer .btn.btn-primary > i,
.pagos-footer .btn.btn-primary > i,
#pay-submit-btn > i,
#p-epayco-btn > i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 46px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 0;
    background: var(--payment-clr) !important;
    color: #ffffff !important;
    box-shadow: none;
    animation: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    padding: 2px 1.5rem 2px .75rem;
    color: inherit !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

/* Uiverse satyamchaudharydev: acceso morado con flecha animada. */
.auth-box form[onsubmit*="handleLogin"] button[type="submit"],
#login-form .btn-submit {
    --login-primary: #645bff;
    --login-secondary: #ffffff;
    --login-hover: #111111;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .7em;
    width: 100%;
    padding: 1em 1.8em !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--login-primary) !important;
    color: var(--login-secondary) !important;
    box-shadow: none !important;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease !important;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]::after,
#login-form .btn-submit::after {
    content: "";
    display: block;
    width: 17px;
    height: 10px;
    flex: 0 0 17px;
    background: var(--login-secondary);
    clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
    transform: translateX(0);
    transition: transform .2s ease;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]:is(:hover, :focus-visible),
#login-form .btn-submit:is(:hover, :focus-visible) {
    background: var(--login-hover) !important;
    color: var(--login-secondary) !important;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]:is(:hover, :focus-visible)::after,
#login-form .btn-submit:is(:hover, :focus-visible)::after {
    transform: translateX(4px);
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]:active,
#login-form .btn-submit:active {
    transform: scale(.98);
}

@media (max-width: 480px) {
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn {
        min-width: 0 !important;
        min-height: 44px;
        font-size: .72rem !important;
    }

    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
    .vista-buy-section .vista-buy-btn:not(:disabled) > i,
    .cart-actions .btn.btn-primary > i,
    .checkout-step-footer .btn.btn-primary > i,
    .pagos-footer .btn.btn-primary > i,
    #pay-submit-btn > i,
    #p-epayco-btn > i {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* Prioridad definitiva: botones comerciales azules con interacción Uiverse. */
:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) {
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible;
    border: 0 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(12, 64, 118, .24) !important;
    cursor: pointer;
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: background 450ms ease-in-out, box-shadow 450ms ease-in-out,
        transform 450ms ease-in-out, color 450ms ease-in-out !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)
) {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Compensa la especificidad de los IDs de pago incluidos en el grupo común. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#commerce-ripple-specificity),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#commerce-ripple-specificity) {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
}

:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) {
    min-width: min(200px, 100%) !important;
    min-height: 46px;
    padding: 13px 22px !important;
    border-radius: 3em !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: none;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::before,
:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
):is(:hover, :focus-visible) {
    background: linear-gradient(0deg, #a47cf3, #683fea) !important;
    background-color: #683fea !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -4px 0 rgba(0, 0, 0, .2),
        0 0 0 4px rgba(255, 255, 255, .2),
        0 18px 55px rgba(153, 23, 255, .42) !important;
    opacity: 1;
    transform: translateY(-2px);
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
):active {
    transform: translateY(0) scale(.97);
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) i {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border-radius: 0;
    background: transparent !important;
    color: #e7eef8 !important;
    fill: currentColor;
    box-shadow: none !important;
    animation: none !important;
    transform: scale(1);
    transition: color 800ms ease, transform 800ms ease !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
):is(:hover, :focus-visible) i {
    color: #ffffff !important;
    transform: scale(1.2);
}

:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)
) > span {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 0;
    overflow: visible;
    color: #e7eef8 !important;
    white-space: normal;
    text-overflow: clip;
    transition: color 800ms ease !important;
}

.add-to-cart-icon-only .cart-spark-layer {
    display: none !important;
}

:is(
    .product-card .add-to-cart-icon-only,
    .perfume-card .add-to-cart-icon-only
).cart-click-animating {
    background: linear-gradient(0deg, #a47cf3, #683fea) !important;
    animation: commerce-button-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

@media (max-width: 480px) {
    :is(
        .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .vista-buy-section .vista-buy-btn:not(:disabled),
        .cart-actions .btn.btn-primary,
        .checkout-step-footer .btn.btn-primary,
        .pagos-footer .btn.btn-primary,
        #pay-submit-btn,
        #p-epayco-btn
    ) {
        min-width: 0 !important;
        min-height: 44px;
        padding: 12px 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .product-card .add-to-cart-icon-only,
        .perfume-card .add-to-cart-icon-only,
        .product-card .add-to-cart-quick,
        .perfume-card .add-to-cart-quick,
        .vista-buy-section .vista-buy-btn,
        .cart-actions .btn.btn-primary,
        .checkout-step-footer .btn.btn-primary,
        .pagos-footer .btn.btn-primary,
        #pay-submit-btn,
        #p-epayco-btn
    ) {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Efecto glow de Uiverse para los controles que muestran únicamente el carrito. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) {
    --glow-color: rgb(217, 176, 255);
    --glow-spread-color: rgba(191, 123, 255, .781);
    --enhanced-glow-color: rgb(231, 206, 255);
    --btn-color: rgb(100, 61, 136);
    position: relative;
    isolation: isolate;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    overflow: visible;
    border: .18em solid var(--glow-color) !important;
    border-radius: 50% !important;
    outline: none;
    background: var(--btn-color) !important;
    color: var(--glow-color) !important;
    box-shadow:
        0 0 .8em .2em var(--glow-color),
        0 0 2.4em .7em var(--glow-spread-color),
        inset 0 0 .6em .2em var(--glow-color) !important;
    text-shadow: 0 0 .5em var(--glow-color);
    transition: color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after {
    content: "";
    position: absolute;
    top: 112%;
    left: 5%;
    width: 90%;
    height: 82%;
    pointer-events: none;
    z-index: -1;
    background-color: var(--glow-spread-color);
    filter: blur(1.35em);
    opacity: .68;
    transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover {
    color: var(--btn-color) !important;
    background: var(--glow-color) !important;
    box-shadow:
        0 0 1em .25em var(--glow-color),
        0 0 4em 1.25em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color) !important;
    transform: translateY(-3px) scale(1.04);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover::after {
    opacity: .9;
    filter: blur(1.7em);
    transform: perspective(1.5em) rotateX(35deg) scale(1.08, .68);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active {
    box-shadow:
        0 0 .6em .25em var(--glow-color),
        0 0 2.5em 1em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color) !important;
    transform: translateY(-1px) scale(.97);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):focus-visible,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):focus-visible {
    outline: 3px solid var(--enhanced-glow-color);
    outline-offset: 5px;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    transition: transform .3s ease;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover i {
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   Encabezado premium: blanco y verde menta
   -------------------------------------------------------------------------- */
.premium-utility-bar {
    position: relative;
    z-index: 105;
    background: #fafcfb;
    border-bottom: 1px solid #eef3f2;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
}
.premium-utility-inner {
    width: min(1320px, 94%);
    min-height: 34px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 18px;
}
.premium-utility-inner span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6b7280;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.premium-utility-inner i { color: #5bc8a8; font-size: .82rem; }

/* Identidad azul plana de Jasmine Scents.
   Disponible y Agotado mantienen sus colores semánticos propios. */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eaf3fc;
    --text-primary: #0b1f3a;
    --text-secondary: #51657d;
    --text-muted: #718299;
    --accent-gold: #004b93;
    --accent-gold-hover: #003a72;
    --accent-gold-dark: #003a72;
    --accent-pink: #eaf3fc;
    --accent-pink-dark: #003a72;
    --accent-orange: #004b93;
    --highlight-gold: rgba(0, 75, 147, .12);
    --glass-border: rgba(0, 75, 147, .20);
    --shadow-gold: 0 9px 26px rgba(0, 75, 147, .18);
}
html, body, .home-page, .perfumes-page, .vista-page-body, .pagos-main, .contacto-page, .recomendador-page {
    background: #ffffff !important;
    color: #0b1f3a !important;
}
::selection { background: #cfe5fa; color: #0b1f3a; }

/* Acciones, tarjetas y filtros. */
.btn-primary,
.hero-buttons .btn-primary,
.newsletter-form .btn,
.vista-buy-btn,
.qv-add-btn,
.add-to-cart-quick,
.product-info .add-to-cart-btn,
.contacto-submit,
.pagos-main .btn-primary {
    background: #004b93 !important;
    border-color: #004b93 !important;
    box-shadow: 0 8px 20px rgba(0, 75, 147, .20) !important;
}
.btn-primary:hover,
.hero-buttons .btn-primary:hover,
.newsletter-form .btn:hover,
.vista-buy-btn:hover,
.qv-add-btn:hover,
.add-to-cart-quick:hover,
.product-info .add-to-cart-btn:hover,
.contacto-submit:hover,
.pagos-main .btn-primary:hover {
    background: #003a72 !important;
    border-color: #003a72 !important;
    box-shadow: 0 12px 26px rgba(0, 58, 114, .24) !important;
}
.btn-secondary, .btn-outline, .filter-back-btn, .btn-cancel {
    color: #004b93 !important;
    border-color: #9bc7ed !important;
    background: #ffffff !important;
}
.btn-secondary:hover, .btn-outline:hover, .filter-back-btn:hover, .btn-cancel:hover {
    color: #003a72 !important;
    border-color: #004b93 !important;
    background: #eaf3fc !important;
}
.product-card, .perfume-card, .catalog-sidebar, .filter-card, .benefits-bar,
.trust-panel-inner, .vista-rec-card, .vista-notes-box, .vista-zoom-stage,
.vista-size-btn, .vista-qty, .filter-bar-sort, .sb-chip, .sb-reset,
.active-filter-tag, .pagos-card, .pagos-cart-summary, .contacto-card, .contacto-input {
    border-color: #d4e7f8 !important;
}
.product-card:hover, .perfume-card:hover, .vista-rec-card:hover, .catalog-sidebar:hover, .filter-card:hover {
    border-color: #78b5e6 !important;
    box-shadow: 0 18px 34px rgba(0, 75, 147, .13) !important;
}
.section-badge, .destacados-badge, .product-brand, .catalog-sidebar .sb-title i,
.sb-title i, .vista-brand, .vista-rec-brand { color: #004b93 !important; }
.catalog-sidebar .sb-title, .sb-title { border-bottom-color: #004b93 !important; }
.catalog-sidebar .sb-chip.active, .sb-chip.active, .active-filter-tag, .vista-size-btn.active {
    background: #eaf3fc !important;
    border-color: #9bc7ed !important;
    color: #004b93 !important;
}
.catalog-sidebar .sb-chip.active .chip-count, .sb-chip.active .chip-count, .range-slider-fill { background: #004b93 !important; }
.filter-bar-sort:focus, .sb-reset:focus, .vista-size-btn:focus-visible,
.vista-rec-control:focus-visible, .contacto-input:focus-within {
    border-color: #004b93 !important;
    box-shadow: 0 0 0 3px rgba(0, 75, 147, .14) !important;
}
.vista-name, .vista-price-current, .vista-notes-title, .vista-sizes-title,
.vista-size-btn, .vista-size-btn .sz-price, .vista-qty button, .vista-qty span,
.vista-size-required, .vista-rec-title, .vista-rec-name, .vista-rec-price,
.vista-rec-control, .pagos-main, .pagos-main h1, .pagos-main h2,
.pagos-main h3, .pagos-main .total-price { color: #0b1f3a !important; }
.vista-rec-control:hover { background: #004b93 !important; color: #ffffff !important; }
.pagos-main .pagos-header-icon, .pagos-main .pagos-step.active .step-num,
.pagos-main .epayco-badge { background: #eaf3fc !important; color: #004b93 !important; }

/* Contacto y footer. */
.contacto-aside { background: #004b93 !important; }
.contacto-kicker, .contacto-back { color: #004b93 !important; }
.contacto-aside .contacto-kicker, .contacto-aside .contacto-promises i { color: #dbeeff !important; }
.contacto-back i { background: #004b93 !important; }

/* Header verde menta oscuro. */
.main-header {
    background: linear-gradient(180deg, #144d45 0%, #0c3832 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 4px 8px rgba(0,0,0,.35),
        0 8px 24px rgba(0,0,0,.25),
        0 2px 4px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.main-header .logo-text,
.main-header .logo-sub,
.main-header .nav-menu a {
    color: rgba(255,255,255,.82) !important;
}
.main-header .nav-menu a:hover,
.main-header .nav-menu a.active {
    color: #ffffff !important;
}
.main-header .nav-menu a::after {
    background: #f6d297 !important;
}
.main-header .nav-search-item > i {
    color: rgba(255,255,255,.45) !important;
}
.main-header .header-search-direct,
.main-header .header-search-direct::placeholder {
    color: rgba(255,255,255,.72) !important;
}
.main-header .nav-search-item {
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.06) !important;
}
.main-header .nav-search-item:focus-within {
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.10) !important;
}
.main-header .action-btn,
.main-header .hamburger-btn {
    color: rgba(255,255,255,.78) !important;
}
.main-header .action-btn:hover,
.main-header .hamburger-btn:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
}
.main-header .hamburger-btn span {
    background: rgba(255,255,255,.78) !important;
}
.main-header .cart-badge {
    background: #f6d297 !important;
    color: #071a37 !important;
    border-color: #04101f !important;
}

.main-footer {
    background: #004b93 !important;
    color: #ffffff !important;
    border-top-color: #004b93 !important;
}
.main-footer .footer-logo-img { border-color: #ffffff !important; }
.main-footer .footer-col h3, .main-footer .links-col a, .main-footer .footer-contact a,
.main-footer .footer-contact-item strong, .main-footer .footer-contact-item span,
.main-footer .footer-contact-form-link, .main-footer .payment-methods-title,
.main-footer .footer-bottom p, .main-footer .payment-logo { color: #ffffff !important; }
.main-footer .links-col a:hover, .main-footer .footer-contact a:hover, .main-footer .footer-contact i { color: #cfe5fa !important; }
.main-footer .social-links a { border-color: rgba(255,255,255,.52) !important; color: #ffffff !important; background: rgba(255,255,255,.10) !important; }
.main-footer .social-links a:hover { background: #ffffff !important; color: #004b93 !important; }
.main-footer .payment-methods, .main-footer .footer-bottom { border-color: rgba(255,255,255,.26) !important; }

.main-footer {
    background: #071a37 !important;
    color: #ffffff !important;
    border-top-color: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
}
.main-footer .footer-logo-img {
    background: transparent !important;
    border-color: rgba(255,255,255,.15) !important;
}
.main-footer .footer-col h3,
.main-footer .links-col a,
.main-footer .footer-contact a,
.main-footer .footer-contact-item strong,
.main-footer .footer-contact-item span,
.main-footer .footer-contact-form-link,
.main-footer .payment-methods-title,
.main-footer .footer-bottom p,
.main-footer .payment-logo {
    color: rgba(255,255,255,.82) !important;
}
.main-footer .links-col a:hover,
.main-footer .footer-contact a:hover,
.main-footer .footer-contact i,
.main-footer .footer-bottom a {
    color: #f6d297 !important;
}
.main-footer .social-links a {
    border-color: rgba(255,255,255,.25) !important;
    color: rgba(255,255,255,.72) !important;
    background: #ffffff !important;
    overflow: hidden;
}
.main-footer .social-links a:hover {
    background: #ffffff !important;
    color: #ffffff !important;
}
.main-footer .payment-methods,
.main-footer .footer-bottom {
    border-color: rgba(255,255,255,.15) !important;
}
.main-footer .footer-bottom a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Colores consistentes y semánticos para los beneficios de la tienda. */
.trust-item i.fa-truck-fast {
    color: #2563eb !important;
    background: #dbeafe !important;
}
.trust-item i.fa-shield-halved {
    color: #15803d !important;
    background: #dcfce7 !important;
}
.trust-item i.fa-rotate-left {
    color: #c2410c !important;
    background: #ffedd5 !important;
}
.trust-item i.fa-star {
    color: #a16207 !important;
    background: #fef3c7 !important;
}

/* Marca legible en el pie de página claro. */
.main-footer .footer-logo {
    align-items: center !important;
    justify-content: center;
    gap: 3px;
    margin-bottom: 16px;
    text-decoration: none;
}
.main-footer .footer-logo-img {
    display: block !important;
    width: 108px !important;
    height: 108px !important;
    margin: 0 auto 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain;
}
.main-footer .footer-logo-name {
    color: #ffffff !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.main-footer .footer-logo-tagline {
    color: rgba(255,255,255,.55) !important;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* El carrito siempre se ancla al viewport, con el mismo tamaño en cada Blade.
   Esto evita que una animación o contenedor de una vista altere su altura. */
.cart-drawer {
    width: 420px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
}
.cart-drawer-overlay {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Azul más luminoso exclusivamente para las tarjetas de productos.
   Mantiene contraste legible y no modifica los estados Disponible o Agotado. */
.product-card,
.perfume-card {
    border-color: #c6e1f6 !important;
}
.product-card:hover,
.perfume-card:hover {
    border-color: #78bce9 !important;
    box-shadow: 0 18px 34px rgba(25, 118, 210, .14) !important;
}
.product-card .product-brand,
.perfume-card .product-brand,
.product-card .section-badge,
.perfume-card .section-badge {
    color: #1976d2 !important;
}
.product-card .add-to-cart-quick,
.perfume-card .add-to-cart-quick,
.product-card .add-to-cart-btn,
.perfume-card .add-to-cart-btn {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    box-shadow: 0 8px 20px rgba(25, 118, 210, .20) !important;
}
.product-card .add-to-cart-quick:hover,
.perfume-card .add-to-cart-quick:hover,
.product-card .add-to-cart-btn:hover,
.perfume-card .add-to-cart-btn:hover {
    background: #125ea6 !important;
    border-color: #125ea6 !important;
    box-shadow: 0 12px 26px rgba(18, 94, 166, .24) !important;
}

/* Jerarquía de color para diferenciar la información de cada tarjeta. */
.product-card .product-brand,
.perfume-card .product-brand {
    color: #006f8f !important;
}
.product-card .product-title,
.perfume-card .product-title {
    color: #5b3f9d !important;
}
.product-card .product-price,
.product-card .product-price-discounted,
.perfume-card .product-price,
.perfume-card .product-price-discounted {
    color: #b03a68 !important;
}
.product-card .product-discount-badge,
.perfume-card .product-discount-badge {
    color: #9a5b08 !important;
}

/* Acciones principales unificadas con el azul claro de Agregar al carrito. */
:root {
    --accent-gold: #1976d2;
    --accent-gold-hover: #125ea6;
    --accent-gold-dark: #125ea6;
    --accent-orange: #1976d2;
    --highlight-gold: rgba(25, 118, 210, .12);
    --shadow-gold: 0 9px 26px rgba(25, 118, 210, .18);
}
.btn-primary,
.hero-buttons .btn-primary,
.newsletter-form .btn,
.vista-buy-btn,
.qv-add-btn,
.add-to-cart-quick,
.product-info .add-to-cart-btn,
.contacto-submit,
.pagos-main .btn-primary {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    box-shadow: 0 8px 20px rgba(25, 118, 210, .20) !important;
}
.btn-primary:hover:not(:disabled),
.hero-buttons .btn-primary:hover:not(:disabled),
.newsletter-form .btn:hover:not(:disabled),
.vista-buy-btn:hover:not(:disabled),
.qv-add-btn:hover:not(:disabled),
.add-to-cart-quick:hover:not(:disabled),
.product-info .add-to-cart-btn:hover:not(:disabled),
.contacto-submit:hover:not(:disabled),
.pagos-main .btn-primary:hover:not(:disabled) {
    background: #125ea6 !important;
    border-color: #125ea6 !important;
    box-shadow: 0 12px 26px rgba(18, 94, 166, .24) !important;
}
.add-to-cart-unavailable,
.add-to-cart-unavailable:disabled {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: .48 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Header, footer, búsqueda y adaptación integral para cualquier pantalla. */
:root {
    --jasmine-header-top: #144d45;
    --jasmine-header-bottom: #0c3832;
    --jasmine-header-gold: #f4c95d;
    --jasmine-header-gold-strong: #ffdc7a;
    --jasmine-header-text: #fffaf0;
}

.main-header {
    min-height: 78px;
    background: linear-gradient(180deg, var(--jasmine-header-top) 0%, var(--jasmine-header-bottom) 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(244, 201, 93, .28) !important;
    box-shadow: 0 7px 22px rgba(4, 24, 21, .24) !important;
}

.main-header .header-container {
    width: min(100%, 1500px);
    height: 78px;
    margin-inline: auto;
    padding-inline: clamp(14px, 2.3vw, 36px);
    gap: clamp(12px, 1.4vw, 24px);
}

.main-header .logo {
    min-width: 0;
    margin-right: 0;
    gap: 8px;
}

.main-header .brand-logo-img {
    width: auto !important;
    height: 54px !important;
    flex: 0 0 auto;
}

.main-header .brand-texts {
    min-width: 0;
    align-items: flex-start;
}

.main-header .logo-text {
    color: var(--jasmine-header-gold-strong) !important;
    font-size: clamp(1.35rem, 1.45vw, 1.7rem) !important;
    font-weight: 900 !important;
    letter-spacing: clamp(1.5px, .18vw, 2.8px) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 0 18px rgba(244, 201, 93, .12);
}

.main-header .logo-sub {
    color: var(--jasmine-header-gold) !important;
    font-size: clamp(.54rem, .54vw, .65rem) !important;
    font-weight: 800 !important;
    letter-spacing: clamp(1px, .14vw, 1.9px) !important;
}

.main-header .nav-menu {
    min-width: 0;
}

.main-header .nav-menu ul {
    gap: clamp(12px, 1.15vw, 20px);
}

.main-header .nav-menu a {
    color: var(--jasmine-header-gold) !important;
    font-size: clamp(.76rem, .72vw, .86rem) !important;
    font-weight: 800 !important;
    letter-spacing: .65px !important;
}

.main-header .nav-menu a:hover,
.main-header .nav-menu a.active {
    color: var(--jasmine-header-gold-strong) !important;
}

.main-header .nav-menu a::after {
    height: 3px;
    background: var(--jasmine-header-gold-strong) !important;
}

.main-header .header-actions {
    min-width: 0;
    flex: 0 1 auto;
}

.main-header .nav-search-item {
    width: clamp(170px, 15vw, 230px);
    min-width: 0;
    flex: 0 1 auto;
    padding: 5px 10px !important;
    border: 1px solid rgba(244, 201, 93, .58) !important;
    background: rgba(12, 56, 50, .42) !important;
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}

.main-header .nav-search-item:focus-within {
    border-color: var(--jasmine-header-gold-strong) !important;
    background: rgba(20, 77, 69, .66) !important;
    box-shadow: 0 0 0 3px rgba(244, 201, 93, .18), inset 0 1px 0 rgba(255, 220, 122, .16) !important;
}

.main-header .nav-search-item > i,
.main-header .header-search-toggle,
.main-header .header-search-toggle i,
.main-header .action-btn,
.main-header .hamburger-btn {
    color: var(--jasmine-header-gold-strong) !important;
}

.main-header .header-search-direct,
.main-header .header-search-direct:focus {
    display: block;
    width: 100% !important;
    min-width: 0;
    padding: 6px 2px !important;
    background: transparent !important;
    color: var(--jasmine-header-gold-strong) !important;
    caret-color: var(--jasmine-header-gold-strong);
    font-size: .92rem !important;
    font-weight: 650;
    line-height: 1.25;
    opacity: 1;
    -webkit-text-fill-color: var(--jasmine-header-gold-strong);
}

.main-header .header-search-direct::placeholder {
    color: rgba(244, 201, 93, .7) !important;
    -webkit-text-fill-color: rgba(244, 201, 93, .7);
    opacity: 1;
}

.main-header .header-search-direct::-webkit-search-cancel-button {
    filter: invert(85%) sepia(44%) saturate(813%) hue-rotate(348deg) brightness(103%);
    opacity: .9;
    cursor: pointer;
}

.main-header .search-dropdown {
    top: calc(100% + 9px);
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-height: min(58dvh, 420px);
    padding: 8px;
    overflow-x: hidden;
    background: linear-gradient(145deg, rgba(20, 77, 69, .88), rgba(12, 56, 50, .93));
    border: 1px solid rgba(255, 220, 122, .46);
    box-shadow:
        0 22px 48px rgba(4, 24, 21, .38),
        inset 0 1px 0 rgba(255, 245, 210, .18),
        inset 0 -1px 0 rgba(4, 24, 21, .22);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.main-header .search-dropdown-item {
    min-width: 0;
    border: 1px solid transparent;
    color: var(--jasmine-header-gold-strong);
}

.main-header .search-dropdown-item:hover,
.main-header .search-dropdown-item:focus-visible {
    background: linear-gradient(135deg, rgba(255, 220, 122, .17), rgba(255, 255, 255, .07));
    border-color: rgba(255, 220, 122, .32);
    outline: 2px solid rgba(255, 220, 122, .26);
    outline-offset: -2px;
}

.main-header .search-dropdown-item > div {
    min-width: 0;
}

.main-header .search-dropdown-item .sd-name,
.main-header .search-dropdown-item .sd-brand {
    overflow-wrap: anywhere;
}

.main-header .search-dropdown-item .sd-name {
    color: var(--jasmine-header-gold-strong);
    font-weight: 800;
}

.main-header .search-dropdown-item .sd-brand {
    color: rgba(244, 201, 93, .78);
}

.main-header .search-dropdown-item .sd-price {
    color: var(--jasmine-header-gold-strong);
}

.main-header .search-dropdown-empty {
    color: var(--jasmine-header-gold-strong);
    line-height: 1.45;
}

.main-header .action-btn,
.main-header .hamburger-btn,
.main-header .header-search-toggle {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(244, 201, 93, .32) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.main-header .action-btn:hover,
.main-header .hamburger-btn:hover,
.main-header .header-search-toggle:hover {
    color: #0c3832 !important;
    background: var(--jasmine-header-gold-strong) !important;
}

.main-header .hamburger-btn span {
    background: var(--jasmine-header-gold-strong) !important;
}

.main-header .hamburger-btn:hover span {
    background: #0c3832 !important;
}

.main-header .cart-badge {
    background: var(--jasmine-header-gold-strong) !important;
    color: #0c3832 !important;
    border-color: #0c3832 !important;
}

/* El footer usa exactamente el mismo fondo del header. */
.main-footer {
    padding: clamp(30px, 4vw, 48px) 0 0 !important;
    background: linear-gradient(180deg, var(--jasmine-header-top) 0%, var(--jasmine-header-bottom) 100%) !important;
    color: var(--jasmine-header-text) !important;
    border-top: 1px solid rgba(244, 201, 93, .28) !important;
    box-shadow: 0 -7px 22px rgba(4, 24, 21, .16) !important;
}

.main-footer .footer-container {
    width: min(1200px, calc(100% - 32px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: clamp(24px, 3vw, 42px);
}

.main-footer .brand-col {
    grid-row: auto;
    padding: 0;
    border: 0;
    text-align: center;
}

.main-footer .footer-col {
    min-width: 0;
}

.main-footer .footer-col h3,
.main-footer .footer-logo-name {
    color: var(--jasmine-header-gold-strong) !important;
}

.main-footer .footer-logo-tagline,
.main-footer .links-col a,
.main-footer .footer-contact a,
.main-footer .footer-contact-item strong,
.main-footer .footer-contact-item span,
.main-footer .footer-contact-form-link,
.main-footer .payment-methods-title,
.main-footer .footer-bottom p,
.main-footer .payment-logo {
    color: rgba(255, 250, 240, .84) !important;
}

.main-footer .links-col a:hover,
.main-footer .footer-contact a:hover,
.main-footer .footer-contact i,
.main-footer .footer-bottom a {
    color: var(--jasmine-header-gold-strong) !important;
}

.main-footer .payment-methods,
.main-footer .footer-bottom {
    width: min(1200px, calc(100% - 32px));
    border-color: rgba(244, 201, 93, .24) !important;
}

.main-footer .footer-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Previene desbordamientos y mantiene controles cómodos en Android y iOS. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

main,
section,
.header-container,
.footer-container,
.catalog-layout,
.product-grid,
.destacados-grid,
.reviews-grid {
    min-width: 0;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 1180px) {
    .main-header,
    .main-header .header-container {
        min-height: 70px;
        height: 70px;
    }

    .main-header {
        top: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .main-header .hamburger-btn {
        display: flex;
        flex: 0 0 44px;
    }

    .main-header .nav-menu {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        width: min(84vw, 340px);
        height: 100vh;
        height: 100dvh;
        padding: calc(82px + env(safe-area-inset-top)) 26px max(28px, env(safe-area-inset-bottom));
        overflow-y: auto;
        background: linear-gradient(180deg, var(--jasmine-header-top) 0%, var(--jasmine-header-bottom) 100%);
        box-shadow: -14px 0 38px rgba(4, 24, 21, .34);
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, visibility .3s ease;
        z-index: 999;
    }

    .main-header .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .main-header .nav-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-header .nav-menu ul li {
        border-bottom: 1px solid rgba(244, 201, 93, .18);
    }

    .main-header .nav-menu a {
        display: block;
        padding: 15px 4px;
        font-size: .92rem !important;
    }

    .main-header .nav-menu a::after {
        display: none;
    }
}

@media (max-width: 900px) {
    .main-footer .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-footer .brand-col {
        grid-column: 1 / -1;
        padding-bottom: 22px;
        border-bottom: 1px solid rgba(244, 201, 93, .2);
    }
}

/* Uiverse JkHuger, adaptado al control circular que solo muestra el carrito. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) {
    --active: 0;
    --spark-speed: 1.8s;
    --spark-transition: .3s cubic-bezier(.2, .8, .2, 1);
    --spark-bg:
        radial-gradient(40% 50% at center 100%, hsl(270 calc(var(--active) * 97%) 72% / var(--active)), transparent),
        radial-gradient(80% 100% at center 120%, hsl(260 calc(var(--active) * 97%) 70% / var(--active)), transparent),
        hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
    isolation: isolate;
    overflow: visible;
    border: 0 !important;
    background: var(--spark-bg) !important;
    color: hsl(0 0% calc((var(--active) * 70%) + 72%)) !important;
    box-shadow:
        0 0 calc(var(--active) * 2.4em) calc(var(--active) * .55em) hsl(260 97% 61% / .6),
        0 0 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
        0 -.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset !important;
    scale: calc(1 + (var(--active) * .08));
    transition: box-shadow var(--spark-transition), scale var(--spark-transition), background var(--spark-transition), color var(--spark-transition) !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    --active: 1;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: -.2em;
    z-index: -2;
    border: .2em solid hsl(260 97% 50% / .5);
    border-radius: 50%;
    opacity: var(--active);
    pointer-events: none;
    transition: opacity var(--spark-transition), transform var(--spark-transition);
    transform: scale(calc(.94 + (var(--active) * .06)));
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 320deg, rgba(255, 255, 255, .98) 350deg, transparent 360deg);
    opacity: calc((var(--active) * .82) + .08);
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: cart-spark-rotate var(--spark-speed) linear infinite;
    animation-play-state: paused;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible)::after,
.product-card .add-to-cart-icon-only.cart-click-animating::after,
.perfume-card .add-to-cart-icon-only.cart-click-animating::after {
    animation-play-state: running;
}

.add-to-cart-icon-only .cart-spark-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    opacity: var(--active);
    pointer-events: none;
    box-shadow:
        -25px -14px 0 -1px rgba(255, 255, 255, .9),
        23px -17px 0 -1px rgba(232, 214, 255, .9),
        27px 10px 0 -1px rgba(255, 255, 255, .78),
        -22px 17px 0 -1px rgba(218, 190, 255, .88),
        4px -28px 0 -1px rgba(255, 255, 255, .72),
        -5px 27px 0 -1px rgba(242, 231, 255, .82);
    transform: translate(-50%, -50%) rotate(0deg) scale(calc(.7 + (var(--active) * .3)));
    transition: opacity var(--spark-transition), transform var(--spark-transition);
    animation: cart-particles-float 2.4s linear infinite;
    animation-play-state: paused;
}

.add-to-cart-icon-only:is(:hover, :focus-visible) .cart-spark-layer,
.add-to-cart-icon-only.cart-click-animating .cart-spark-layer {
    animation-play-state: running;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) i {
    position: relative;
    z-index: 2;
    color: currentColor;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i {
    animation: cart-spark-icon-bounce .6s ease both;
}

.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    animation: cart-spark-button-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

@keyframes cart-spark-rotate {
    to { transform: rotate(360deg); }
}

@keyframes cart-particles-float {
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes cart-spark-icon-bounce {
    35%, 65% { scale: 1.28; }
}

@keyframes cart-spark-button-click {
    0% { transform: translateY(0); scale: 1; }
    30% { transform: translateY(1px); scale: .92; }
    68% { transform: translateY(-2px); scale: 1.1; }
    100% { transform: translateY(0); scale: 1; }
}

@media (max-width: 600px) {
    .main-header .header-container {
        padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
        gap: 5px;
    }

    .main-header .logo {
        gap: 3px;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .main-header .brand-logo-img {
        height: 42px !important;
    }

    .main-header .logo-text {
        font-size: clamp(.88rem, 4.2vw, 1.1rem) !important;
        letter-spacing: clamp(.7px, .32vw, 1.25px) !important;
    }

    .main-header .logo-sub {
        font-size: clamp(.38rem, 1.65vw, .46rem) !important;
        letter-spacing: clamp(.55px, .24vw, .9px) !important;
    }

    .main-header .header-actions {
        flex: 0 0 auto;
        gap: 3px;
    }

    .main-header .action-btn,
    .main-header .hamburger-btn,
    .main-header .header-search-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }

    .main-footer .footer-container {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .main-footer .brand-col {
        grid-column: auto;
    }

    .main-footer .footer-col,
    .main-footer .links-col,
    .main-footer .footer-contact {
        text-align: center;
    }

    .main-footer .links-col ul {
        align-items: center;
    }

    .main-footer .footer-contact a {
        justify-content: center;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 900px) {
    .main-header .nav-search-item {
        width: 40px;
        min-width: 40px;
        max-width: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .main-header .nav-search-item.mobile-search-open {
        top: calc(76px + env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        width: auto;
        max-width: none !important;
        padding: 7px 10px !important;
        border: 1px solid var(--jasmine-header-gold) !important;
        background: var(--jasmine-header-bottom) !important;
        box-shadow: 0 14px 34px rgba(4, 24, 21, .34) !important;
    }

    .main-header .nav-search-item.mobile-search-open .header-search-direct {
        display: block;
        color: var(--jasmine-header-gold-strong) !important;
        -webkit-text-fill-color: var(--jasmine-header-gold-strong);
    }

    .main-header .nav-search-item.mobile-search-open .search-dropdown {
        max-height: min(58dvh, 380px);
    }

}

@media (max-width: 480px) {
    .main-footer .payment-methods-list {
        gap: 8px 4px;
    }

    .main-footer .payment-logo {
        width: min(100px, 30vw);
        height: 50px;
    }
}

@media (max-width: 360px) {
    .main-header .brand-logo-img {
        height: 36px !important;
    }

    .main-header .logo-text {
        font-size: .82rem !important;
        letter-spacing: .55px !important;
    }

    .main-header .logo-sub {
        display: none;
    }

    .main-header .action-btn,
    .main-header .hamburger-btn,
    .main-header .header-search-toggle,
    .main-header .nav-search-item {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .product-grid,
    .destacados-grid,
    .catalog-main .product-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Compra contextual del perfume visible en el carrusel principal. */
.hero-purchase-cta {
    position: absolute;
    right: 16px;
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px));
    left: 16px;
    z-index: 6;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.hero-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    padding: 14px 28px;
    border: 1px solid rgba(255, 220, 122, .72);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(20, 77, 69, .86), rgba(12, 56, 50, .92));
    color: var(--jasmine-header-gold-strong) !important;
    box-shadow: 0 14px 34px rgba(4, 24, 21, .34), inset 0 1px 0 rgba(255, 245, 210, .2);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    font: 850 .9rem/1 'Montserrat', sans-serif;
    letter-spacing: .55px;
    text-decoration: none;
    pointer-events: auto;
    touch-action: manipulation;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hero-buy-btn[hidden] {
    display: none !important;
}

.hero-buy-btn:hover,
.hero-buy-btn:focus-visible {
    background: var(--jasmine-header-gold-strong);
    color: var(--jasmine-header-bottom) !important;
    box-shadow: 0 17px 42px rgba(4, 24, 21, .42), 0 0 28px rgba(255, 220, 122, .34);
    transform: translateY(-3px);
    outline: none;
}

.hero-buy-btn:active {
    transform: translateY(-1px) scale(.98);
}

.hero-buy-btn i {
    transition: transform .25s ease;
}

.hero-buy-btn:hover i,
.hero-buy-btn:focus-visible i {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .hero-section .hero-slider-bg,
    .hero-section .hero-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        padding: 0 !important;
    }

    .hero-purchase-cta {
        bottom: max(68px, calc(env(safe-area-inset-bottom) + 60px));
    }

    .hero-buy-btn {
        width: min(100%, 320px);
        min-height: 50px;
        padding: 13px 20px;
        font-size: .84rem;
    }
}

/* El carrito conserva su lugar original y responde con una microinteracción premium. */
.home-page .product-card .product-bottom {
    align-items: center;
}

.home-page .product-card .add-to-cart-icon-only {
    position: relative;
    right: auto;
    bottom: auto;
    flex: 0 0 46px;
    align-self: center;
    margin: 0 0 0 auto;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border: 2px solid var(--enhanced-glow-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(.58);
}

.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    animation: cart-button-click .46s cubic-bezier(.2, .9, .25, 1) both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating::before,
.perfume-card .add-to-cart-icon-only.cart-click-animating::before {
    animation: cart-click-ring .46s ease-out both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating::after,
.perfume-card .add-to-cart-icon-only.cart-click-animating::after {
    animation: cart-reflection-click .46s ease-out both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating i,
.perfume-card .add-to-cart-icon-only.cart-click-animating i {
    animation: cart-icon-click .46s cubic-bezier(.2, .9, .25, 1) both !important;
}

@keyframes cart-button-click {
    0% {
        transform: translateY(0) scale(1);
    }
    22% {
        transform: translateY(2px) scale(.88);
        box-shadow: 0 0 .45em .12em var(--glow-color), inset 0 0 .9em .35em var(--glow-color);
    }
    58% {
        transform: translateY(-4px) scale(1.1);
        box-shadow: 0 0 1.2em .32em var(--glow-color), 0 0 4.2em 1.25em var(--glow-spread-color), inset 0 0 .7em .22em var(--enhanced-glow-color);
    }
    100% {
        transform: translateY(-2px) scale(1);
    }
}

@keyframes cart-icon-click {
    0% {
        transform: translateX(0) rotate(0) scale(1);
    }
    25% {
        transform: translateX(-2px) rotate(-10deg) scale(.8);
    }
    62% {
        transform: translateX(4px) rotate(7deg) scale(1.22);
    }
    100% {
        transform: translateX(0) rotate(0) scale(1);
    }
}

@keyframes cart-click-ring {
    0% {
        opacity: .9;
        transform: scale(.58);
    }
    100% {
        opacity: 0;
        transform: scale(1.82);
    }
}

@keyframes cart-reflection-click {
    0% {
        opacity: .68;
        transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
    }
    55% {
        opacity: 1;
        transform: perspective(1.5em) rotateX(35deg) scale(1.2, .76);
    }
    100% {
        opacity: .5;
        transform: perspective(1.5em) rotateX(35deg) scale(.9, .5);
    }
}

/* Acabado sobrio del carrito: volumen y movimiento sin halos luminosos. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    background: linear-gradient(145deg, #6a4cac 0%, #4f378d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 16px rgba(54, 35, 100, .25), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
    text-shadow: none;
    transition: transform .24s ease, box-shadow .24s ease, background .24s ease !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after {
    display: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):hover {
    background: linear-gradient(145deg, #7658b7 0%, #59409a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(54, 35, 100, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    transform: translateY(-2px);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active {
    box-shadow: 0 4px 10px rgba(54, 35, 100, .24), inset 0 2px 4px rgba(31, 20, 59, .24) !important;
    transform: translateY(1px) scale(.96);
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):focus-visible,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):focus-visible {
    outline: 3px solid rgba(106, 76, 172, .32);
    outline-offset: 3px;
}

.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    animation: cart-button-professional-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating i,
.perfume-card .add-to-cart-icon-only.cart-click-animating i {
    animation: cart-icon-professional-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

@keyframes cart-button-professional-click {
    0% { transform: translateY(0) scale(1); }
    24% { transform: translateY(2px) scale(.9); }
    62% { transform: translateY(-2px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes cart-icon-professional-click {
    0% { transform: translateX(0) rotate(0) scale(1); }
    28% { transform: translateX(-2px) rotate(-8deg) scale(.86); }
    68% { transform: translateX(3px) rotate(6deg) scale(1.12); }
    100% { transform: translateX(0) rotate(0) scale(1); }
}

.vista-availability-row {
    margin: 2px 0 0;
}

/* Header y footer en negro puro; la búsqueda se integra sin recuadro decorativo. */
:root {
    --jasmine-header-top: #000000;
    --jasmine-header-bottom: #000000;
}

.main-header,
.main-footer {
    background: #000000 !important;
}

.main-header .header-search-toggle,
.main-header .header-search-toggle:hover,
.main-header .header-search-toggle:active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.main-header .nav-search-item > .fa-magnifying-glass,
.main-header .header-search-toggle i {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 901px) {
    .main-header .nav-search-item,
    .main-header .nav-search-item:focus-within {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 900px) {
    .main-header .nav-search-item:not(.mobile-search-open) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Prioridad final del diseño sparkle frente a los estilos históricos del carrito. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable) {
    overflow: visible;
    border: 0 !important;
    background: var(--spark-bg) !important;
    color: hsl(0 0% calc((var(--active) * 70%) + 72%)) !important;
    box-shadow:
        0 0 calc(var(--active) * 2.4em) calc(var(--active) * .55em) hsl(260 97% 61% / .6),
        0 0 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
        0 -.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset !important;
    scale: calc(1 + (var(--active) * .08));
    transform: none;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) {
    --active: 1;
    background: var(--spark-bg) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 2.4em .55em hsl(260 97% 61% / .6),
        0 0 0 0 hsl(260 97% 80%) inset,
        0 -.05em 0 0 hsl(260 97% 60%) inset !important;
    transform: none;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):active {
    background: var(--spark-bg) !important;
    scale: 1;
    transform: none;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::before {
    display: block !important;
    animation: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)::after {
    display: block !important;
    animation: cart-spark-rotate var(--spark-speed) linear infinite !important;
    animation-play-state: paused !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible)::after,
.product-card .add-to-cart-icon-only.cart-click-animating::after,
.perfume-card .add-to-cart-icon-only.cart-click-animating::after {
    animation-play-state: running !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):is(:hover, :focus-visible) i {
    transform: none !important;
    animation: cart-spark-icon-bounce .6s ease both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating,
.perfume-card .add-to-cart-icon-only.cart-click-animating {
    --active: 1;
    animation: cart-spark-button-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

/* Uiverse MuhammadHasann para acciones de compra que incluyen texto. */
@property --premium-button-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
) {
    --active: 0;
    --black-700: hsl(0 0% 12% / 1);
    --premium-border-radius: 9999px;
    --premium-transition: .3s ease-in-out;
    --premium-button-angle: 0deg;
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    overflow: visible;
    cursor: pointer;
    transform-origin: center;
    padding: 1rem 2rem !important;
    border: 0 !important;
    border-radius: var(--premium-border-radius) !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: scale(calc(1 + (var(--active) * .1)));
    transition: transform var(--premium-transition), color var(--premium-transition) !important;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border: 2px solid transparent;
    border-radius: inherit;
    background:
        linear-gradient(var(--black-700), var(--black-700)) padding-box,
        conic-gradient(from var(--premium-button-angle), transparent 0 76%, rgba(255, 255, 255, .95) 88%, transparent 100%) border-box;
    box-shadow:
        inset 0 .5px hsl(0 0% 100%),
        inset 0 -1px 2px hsl(0 0% 0%),
        0 4px 10px -4px hsl(0 0% 0% / calc(1 - var(--active))),
        0 0 0 calc(var(--active) * .375rem) hsl(260 97% 50% / .75);
    pointer-events: none;
    animation: premium-button-border-rotate 2s linear infinite;
    transition: box-shadow var(--premium-transition);
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: hsl(260 97% 61% / .75);
    background-image:
        radial-gradient(at 51% 89%, hsl(266 45% 74%) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsl(266 36% 60%) 0, transparent 50%),
        radial-gradient(at 22% 91%, hsl(266 36% 60%) 0, transparent 50%);
    background-position: top;
    opacity: var(--active);
    pointer-events: none;
    transition: opacity var(--premium-transition);
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
):is(:hover, :focus-visible) {
    --active: 1;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: scale(1.08);
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
):active {
    transform: scale(1);
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
) > :is(i, span) {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-btn:not(:disabled),
    .cart-actions .btn-primary
):is(:hover, :focus-visible) > i {
    animation: premium-action-icon-path 1.5s linear .2s infinite;
}

@keyframes premium-button-border-rotate {
    to { --premium-button-angle: 360deg; }
}

@keyframes premium-action-icon-path {
    0%, 34%, 71%, 100% { transform: scale(1); }
    17%, 49%, 83% { transform: scale(1.2); }
}

@media (max-width: 480px) {
    :is(
        .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .vista-buy-btn:not(:disabled),
        .cart-actions .btn-primary
    ) {
        padding: .85rem 1.25rem !important;
        transform: none;
    }

    :is(
        .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .vista-buy-btn:not(:disabled),
        .cart-actions .btn-primary
    ):is(:hover, :focus-visible) {
        transform: scale(1.035);
    }
}

/* Prioridad final: ninguna regla azul anterior atraviesa el botón premium. */
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Uiverse mi-series: versión azul con ondas para las acciones de compra con texto. */
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary {
    outline: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: min(200px, 100%) !important;
    min-height: 48px;
    box-sizing: border-box;
    padding: 14px 20px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 6px !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(12, 64, 118, .22) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.05px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transform: none;
    transition: opacity .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.vista-buy-section .vista-buy-btn:not(:disabled)::before,
.vista-buy-section .vista-buy-btn:not(:disabled)::after,
.cart-actions .btn.btn-primary::before,
.cart-actions .btn.btn-primary::after {
    display: none !important;
    content: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible),
.cart-actions .btn.btn-primary:is(:hover, :focus-visible) {
    background: #1565c0 !important;
    background-color: #1565c0 !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(12, 64, 118, .3) !important;
    opacity: .96;
    transform: translateY(-1px);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):active,
.vista-buy-section .vista-buy-btn:not(:disabled):active,
.cart-actions .btn.btn-primary:active {
    background: #0f5aab !important;
    transform: translateY(0) scale(.98);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.vista-buy-section .vista-buy-btn:not(:disabled) > i,
.cart-actions .btn.btn-primary > i {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #ffffff !important;
    animation: blue-action-ripple .6s linear infinite;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
}

@keyframes blue-action-ripple {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, .1),
            0 0 0 20px rgba(255, 255, 255, .1),
            0 0 0 40px rgba(255, 255, 255, .1),
            0 0 0 60px rgba(255, 255, 255, .1);
    }
    100% {
        box-shadow:
            0 0 0 20px rgba(255, 255, 255, .1),
            0 0 0 40px rgba(255, 255, 255, .1),
            0 0 0 60px rgba(255, 255, 255, .1),
            0 0 0 80px rgba(255, 255, 255, 0);
    }
}

@media (max-width: 480px) {
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary {
        min-width: 0 !important;
        min-height: 44px;
        padding: 12px 16px !important;
        font-size: .7rem !important;
        letter-spacing: .78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only) > i,
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only) > i,
    .vista-buy-section .vista-buy-btn > i,
    .cart-actions .btn.btn-primary > i {
        animation: none !important;
    }
}

/* Prioridad final de los nuevos botones de pago y acceso. */
.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
.vista-buy-section .vista-buy-btn:not(:disabled),
.cart-actions .btn.btn-primary,
.checkout-step-footer .btn.btn-primary,
.pagos-footer .btn.btn-primary,
#pay-submit-btn,
#p-epayco-btn {
    --payment-clr: #1976d2;
    isolation: isolate;
    min-width: min(200px, 100%) !important;
    min-height: 46px;
    padding: 13px 22px !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 1.5rem !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(12, 64, 118, .24) !important;
    text-transform: none;
    transform: none;
    animation: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::before,
.vista-buy-section .vista-buy-btn:not(:disabled)::before,
.cart-actions .btn.btn-primary::before,
.checkout-step-footer .btn.btn-primary::before,
.pagos-footer .btn.btn-primary::before,
#pay-submit-btn::before,
#p-epayco-btn::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    transition: transform .3s ease;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)::after,
.vista-buy-section .vista-buy-btn:not(:disabled)::after,
.cart-actions .btn.btn-primary::after,
.checkout-step-footer .btn.btn-primary::after,
.pagos-footer .btn.btn-primary::after,
#pay-submit-btn::after,
#p-epayco-btn::after {
    content: none !important;
    display: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible),
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible),
.cart-actions .btn.btn-primary:is(:hover, :focus-visible),
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible),
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible),
#pay-submit-btn:is(:hover, :focus-visible),
#p-epayco-btn:is(:hover, :focus-visible) {
    background: linear-gradient(0deg, #a47cf3, #683fea) !important;
    background-color: #683fea !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 -4px 0 rgba(0, 0, 0, .2),
        0 0 0 4px rgba(255, 255, 255, .2),
        0 18px 55px rgba(153, 23, 255, .42) !important;
    opacity: 1;
    transform: translateY(-2px);
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible)::before,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable):is(:hover, :focus-visible)::before,
.vista-buy-section .vista-buy-btn:not(:disabled):is(:hover, :focus-visible)::before,
.cart-actions .btn.btn-primary:is(:hover, :focus-visible)::before,
.checkout-step-footer .btn.btn-primary:is(:hover, :focus-visible)::before,
.pagos-footer .btn.btn-primary:is(:hover, :focus-visible)::before,
#pay-submit-btn:is(:hover, :focus-visible)::before,
#p-epayco-btn:is(:hover, :focus-visible)::before {
    display: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
.vista-buy-section .vista-buy-btn:not(:disabled) > i,
.cart-actions .btn.btn-primary > i,
.checkout-step-footer .btn.btn-primary > i,
.pagos-footer .btn.btn-primary > i,
#pay-submit-btn > i,
#p-epayco-btn > i {
    display: inline-block;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border-radius: 0;
    background: transparent !important;
    color: #e7eef8 !important;
    box-shadow: none !important;
    animation: none !important;
}

.product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span,
.perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > span {
    color: inherit !important;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"] {
    --login-primary: #645bff;
    --login-secondary: #ffffff;
    --login-hover: #111111;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .7em;
    width: 100%;
    padding: 1em 1.8em !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--login-primary) !important;
    color: var(--login-secondary) !important;
    box-shadow: none !important;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]::after {
    content: "" !important;
    display: block !important;
    width: 17px;
    height: 10px;
    flex: 0 0 17px;
    background: var(--login-secondary) !important;
    clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
    transform: translateX(0);
    transition: transform .2s ease;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]:is(:hover, :focus-visible) {
    background: var(--login-hover) !important;
}

.auth-box form[onsubmit*="handleLogin"] button[type="submit"]:is(:hover, :focus-visible)::after {
    transform: translateX(4px);
}

@media (max-width: 480px) {
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn {
        min-width: 0 !important;
        min-height: 44px;
    }

    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable) > i,
    .vista-buy-section .vista-buy-btn:not(:disabled) > i,
    .cart-actions .btn.btn-primary > i,
    .checkout-step-footer .btn.btn-primary > i,
    .pagos-footer .btn.btn-primary > i,
    #pay-submit-btn > i,
    #p-epayco-btn > i {
        width: auto;
        height: auto;
        flex-basis: auto;
    }
}

/* Navegación mymiamo: cápsula liquid-glass de Inicio a Recomendador. */
:root {
    --header-menu-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --header-menu-glass-border: rgba(255, 255, 255, .34);
}

.main-header .header-glass-menu {
    position: relative;
    width: min(calc(100% - 20px), 520px);
    max-width: 520px;
    margin-inline: auto;
    z-index: 50;
}

.main-header .header-glass-menu > ul {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 520px;
    padding: 8px;
    display: flex;
    justify-content: center;
    gap: 8px !important;
    border: 1px solid var(--header-menu-glass-border);
    border-radius: 99rem;
    background: rgba(0, 122, 255, .404);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
    -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(200%);
}

.main-header .header-glass-menu > ul::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow:
        inset 2px 2px 5px -2px rgba(255, 255, 255, .4),
        inset -2px -2px 5px 2px rgba(255, 255, 255, .4),
        inset 0 -2px 0 rgba(255, 255, 255, .2);
    pointer-events: none;
}

.main-header .header-glass-menu > ul > li {
    min-width: 0;
    flex: 1 1 0;
    border: 0;
}

.main-header .header-glass-menu .nav-link-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 10px 6px;
    border-radius: 999rem;
    color: rgba(255, 255, 255, .9) !important;
    font-size: clamp(.64rem, .67vw, .78rem) !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: .2px !important;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
        background .18s var(--header-menu-ease-spring),
        color .18s var(--header-menu-ease-spring),
        transform .18s var(--header-menu-ease-spring),
        box-shadow .3s ease-in-out !important;
}

.main-header .header-glass-menu .nav-link-item::after {
    content: none !important;
    display: none !important;
}

.main-header .header-glass-menu .nav-link-item:hover,
.main-header .header-glass-menu .nav-link-item:focus-visible {
    color: rgba(0, 84, 190, .95) !important;
    background-color: rgba(255, 255, 255, .3) !important;
    box-shadow:
        inset 2px 2px 5px -2px rgba(255, 255, 255, .4),
        inset -2px -1px 5px rgba(255, 255, 255, .4),
        inset 0 -2px 0 rgba(255, 255, 255, .2) !important;
    transform: rotate(2.2deg);
    outline: 0;
}

.main-header .header-glass-menu .nav-link-item.active {
    color: rgba(0, 84, 190, .95) !important;
    background: rgba(237, 237, 237, .6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.main-header .header-glass-menu .nav-link-item[aria-current="page"] {
    color: rgba(0, 84, 190, .95) !important;
    background: rgba(237, 237, 237, .6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.main-header .header-glass-menu .nav-link-item:active {
    transform: scale(.98);
}

/* mi-series: ripple azul común para compras, tarjetas y pagos. */
:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) {
    outline: 0;
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
    border: 0 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .18s ease, box-shadow .2s ease !important;
}

:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) {
    min-width: min(200px, 100%) !important;
    min-height: 48px;
    padding: 16px 20px !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable)
) {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::before,
:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
):is(:hover, :focus-visible) {
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(12, 64, 118, .22) !important;
    opacity: .95;
    transform: none;
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
):active {
    transform: scale(.98);
}

:is(
    .product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable),
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-section .vista-buy-btn:not(:disabled),
    .quiz-container .btn.btn-primary,
    .result-card .btn.btn-primary,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) > i {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none;
    transform: none !important;
    animation: mi-series-blue-ripple .6s linear infinite !important;
}

:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable)
) > span,
.hero-buy-btn > span {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
}

.add-to-cart-icon-only .cart-spark-layer {
    display: none !important;
}

@keyframes mi-series-blue-ripple {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, .1),
            0 0 0 20px rgba(255, 255, 255, .1),
            0 0 0 40px rgba(255, 255, 255, .1),
            0 0 0 60px rgba(255, 255, 255, .1);
    }
    100% {
        box-shadow:
            0 0 0 20px rgba(255, 255, 255, .1),
            0 0 0 40px rgba(255, 255, 255, .1),
            0 0 0 60px rgba(255, 255, 255, .1),
            0 0 0 80px rgba(255, 255, 255, 0);
    }
}

@media (max-width: 1180px) {
    .main-header .header-glass-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(84vw, 340px) !important;
        min-width: min(84vw, 340px) !important;
        max-width: 340px !important;
        height: 100vh;
        height: 100dvh;
        margin: 0 !important;
        flex: 0 0 min(84vw, 340px) !important;
        box-sizing: border-box;
    }

    .main-header .header-glass-menu > ul {
        width: 100% !important;
        max-width: none;
        padding: 8px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        gap: 8px !important;
        border-radius: 28px;
    }

    .main-header .header-glass-menu > ul > li {
        border: 0 !important;
    }

    .main-header .header-glass-menu .nav-link-item {
        min-height: 46px;
        padding: 12px 14px;
        font-size: .9rem !important;
    }
}

@media (min-width: 1181px) {
    .main-header .header-glass-menu {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        flex: 0 1 520px;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    :is(
        .product-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .perfume-card .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
        .hero-buy-btn,
        .vista-buy-section .vista-buy-btn:not(:disabled),
        .quiz-container .btn.btn-primary,
        .result-card .btn.btn-primary,
        .cart-actions .btn.btn-primary,
        .checkout-step-footer .btn.btn-primary,
        .pagos-footer .btn.btn-primary,
        #pay-submit-btn,
        #p-epayco-btn
    ) {
        min-width: 0 !important;
        min-height: 44px;
        padding: 14px 16px !important;
        font-size: .7rem !important;
        letter-spacing: .85px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .product-card .add-to-cart-icon-only,
        .perfume-card .add-to-cart-icon-only,
        .product-card .add-to-cart-quick,
        .perfume-card .add-to-cart-quick,
        .hero-buy-btn,
        .vista-buy-btn,
        .quiz-container .btn.btn-primary,
        .result-card .btn.btn-primary,
        .cart-actions .btn.btn-primary,
        .checkout-step-footer .btn.btn-primary,
        .pagos-footer .btn.btn-primary,
        #pay-submit-btn,
        #p-epayco-btn
    ) > i {
        animation: none !important;
    }
}

/* Carritos dorados sin relleno: solo se anima y colorea el icono. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #f4c95d !important;
    text-shadow: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two):is(:hover, :focus-visible, :active),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two):is(:hover, :focus-visible, :active),
.product-card .add-to-cart-icon-only.cart-click-animating:not(#gold-cart-priority):not(#gold-cart-priority-two),
.perfume-card .add-to-cart-icon-only.cart-click-animating:not(#gold-cart-priority):not(#gold-cart-priority-two) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffdc7a !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two)::before,
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two)::before,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two)::after {
    content: none !important;
    display: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two) > i {
    color: #f4c95d !important;
    fill: currentColor;
    filter: drop-shadow(0 2px 4px rgba(115, 78, 0, .28));
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two):is(:hover, :focus-visible, :active) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#gold-cart-priority):not(#gold-cart-priority-two):is(:hover, :focus-visible, :active) > i,
.product-card .add-to-cart-icon-only.cart-click-animating:not(#gold-cart-priority):not(#gold-cart-priority-two) > i,
.perfume-card .add-to-cart-icon-only.cart-click-animating:not(#gold-cart-priority):not(#gold-cart-priority-two) > i {
    color: #ffdc7a !important;
    fill: currentColor;
}

.main-header .cart-trigger-btn:not(#header-gold-cart-priority):not(#header-gold-cart-priority-two),
.main-header .cart-trigger-btn:not(#header-gold-cart-priority):not(#header-gold-cart-priority-two):is(:hover, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #f4c95d !important;
}

.main-header .cart-trigger-btn:not(#header-gold-cart-priority):not(#header-gold-cart-priority-two) > i,
.main-header .cart-trigger-btn:not(#header-gold-cart-priority):not(#header-gold-cart-priority-two):is(:hover, :focus-visible, :active) > i {
    color: #ffdc7a !important;
    fill: currentColor;
    filter: drop-shadow(0 2px 4px rgba(115, 78, 0, .34));
}

/* Movimiento del CTA del hero para todos los botones de acción con texto. */
:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-btn:not(:disabled),
    .quiz-container .btn,
    .result-card .btn,
    .cart-actions .btn,
    .checkout-step-footer .btn,
    .pagos-footer .btn,
    .contacto-submit,
    .filter-back-btn,
    .site-back-btn,
    .btn-cancel,
    .sb-reset,
    #pay-submit-btn,
    #p-epayco-btn
):not(#hero-motion-priority) {
    transform: none;
    transition: color .25s ease, background .25s ease, opacity .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-btn:not(:disabled),
    .quiz-container .btn,
    .result-card .btn,
    .cart-actions .btn,
    .checkout-step-footer .btn,
    .pagos-footer .btn,
    .contacto-submit,
    .filter-back-btn,
    .site-back-btn,
    .btn-cancel,
    .sb-reset,
    #pay-submit-btn,
    #p-epayco-btn
):not(#hero-motion-priority):is(:hover, :focus-visible) {
    opacity: .96;
    transform: translateY(-3px) !important;
    box-shadow: 0 13px 30px rgba(12, 64, 118, .28) !important;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-btn:not(:disabled),
    .quiz-container .btn,
    .result-card .btn,
    .cart-actions .btn,
    .checkout-step-footer .btn,
    .pagos-footer .btn,
    .contacto-submit,
    .filter-back-btn,
    .site-back-btn,
    .btn-cancel,
    .sb-reset,
    #pay-submit-btn,
    #p-epayco-btn
):not(#hero-motion-priority):active {
    transform: translateY(-1px) scale(.98) !important;
}

:is(
    .add-to-cart-quick:not(.add-to-cart-icon-only):not(.add-to-cart-unavailable),
    .hero-buy-btn,
    .vista-buy-btn:not(:disabled),
    .quiz-container .btn,
    .result-card .btn,
    .cart-actions .btn,
    .checkout-step-footer .btn,
    .pagos-footer .btn,
    .contacto-submit,
    .filter-back-btn,
    .site-back-btn,
    .btn-cancel,
    .sb-reset,
    #pay-submit-btn,
    #p-epayco-btn
):not(#hero-motion-priority) > i {
    transform: none !important;
    animation: mi-series-blue-ripple .6s linear infinite !important;
    transition: transform .25s ease !important;
}

/* El carrito sin texto conserva su microinteracción de desplazamiento. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#cart-motion-priority) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#cart-motion-priority) > i {
    box-shadow: none;
    animation: none !important;
    transform: translateX(0) rotate(0) scale(1) !important;
    transform-origin: center;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#cart-motion-priority):is(:hover, :focus-visible) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#cart-motion-priority):is(:hover, :focus-visible) > i {
    animation: cart-icon-hover-run .68s cubic-bezier(.2, .85, .3, 1) both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating:not(#cart-motion-priority),
.perfume-card .add-to-cart-icon-only.cart-click-animating:not(#cart-motion-priority) {
    animation: cart-button-professional-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating:not(#cart-motion-priority):not(#cart-click-priority) > i,
.perfume-card .add-to-cart-icon-only.cart-click-animating:not(#cart-motion-priority):not(#cart-click-priority) > i {
    animation: cart-icon-professional-click .46s cubic-bezier(.2, .85, .3, 1) both !important;
}

@keyframes cart-icon-hover-run {
    0% { transform: translateX(0) rotate(0) scale(1); }
    35% { transform: translateX(-3px) rotate(-8deg) scale(.92); }
    68% { transform: translateX(4px) rotate(6deg) scale(1.12); }
    100% { transform: translateX(0) rotate(0) scale(1); }
}

/* Cubre las acciones genéricas restantes sin modificar el acceso de usuario. */
.btn:not(.auth-box .btn):not(#global-hero-motion-priority) {
    transition: color .25s ease, background .25s ease, opacity .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

.btn:not(.auth-box .btn):not(#global-hero-motion-priority):is(:hover, :focus-visible) {
    opacity: .96;
    transform: translateY(-3px) !important;
    box-shadow: 0 13px 30px rgba(12, 64, 118, .28) !important;
}

.btn:not(.auth-box .btn):not(#global-hero-motion-priority):active {
    transform: translateY(-1px) scale(.98) !important;
}

.btn:not(.auth-box .btn):not(#global-hero-motion-priority) > i {
    animation: mi-series-blue-ripple .6s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .add-to-cart-quick,
        .hero-buy-btn,
        .vista-buy-btn,
        .quiz-container .btn,
        .result-card .btn,
        .cart-actions .btn,
        .checkout-step-footer .btn,
        .pagos-footer .btn,
        .contacto-submit,
        .filter-back-btn,
        .site-back-btn,
        .btn-cancel,
        .sb-reset,
        #pay-submit-btn,
        #p-epayco-btn
    ) > i {
        animation: none !important;
    }
}

/* El aura sale de Volver y pasa exclusivamente al carrito azul de las tarjetas. */
.filter-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three),
.site-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three),
.btn-cancel:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three) {
    box-shadow: none !important;
}

.filter-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three):is(:hover, :focus-visible, :active),
.site-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three):is(:hover, :focus-visible, :active),
.btn-cancel:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three):is(:hover, :focus-visible, :active) {
    box-shadow: none !important;
}

.filter-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three) > i,
.site-back-btn:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three) > i,
.btn-cancel:not(#clean-back-priority):not(#clean-back-priority-two):not(#clean-back-priority-three) > i {
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three),
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three):is(:hover, :focus-visible, :active),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three):is(:hover, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #1976d2 !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three) > i {
    color: #1976d2 !important;
    fill: currentColor;
    filter: none !important;
    animation: mi-series-blue-ripple .6s linear infinite !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three):is(:hover, :focus-visible) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three):is(:hover, :focus-visible) > i {
    color: #1565c0 !important;
    animation:
        cart-icon-hover-run .68s cubic-bezier(.2, .85, .3, 1) both,
        mi-series-blue-ripple .6s linear infinite !important;
}

.product-card .add-to-cart-icon-only.cart-click-animating:not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three) > i,
.perfume-card .add-to-cart-icon-only.cart-click-animating:not(#blue-cart-priority):not(#blue-cart-priority-two):not(#blue-cart-priority-three) > i {
    color: #0d5fb5 !important;
    animation:
        cart-icon-professional-click .46s cubic-bezier(.2, .85, .3, 1) both,
        mi-series-blue-ripple .6s linear infinite !important;
}

/* El carrito del header sigue siendo exclusivamente dorado y transparente. */
.main-header .cart-trigger-btn:not(#header-cart-stays-gold),
.main-header .cart-trigger-btn:not(#header-cart-stays-gold):is(:hover, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.main-header .cart-trigger-btn:not(#header-cart-stays-gold) > i,
.main-header .cart-trigger-btn:not(#header-cart-stays-gold):is(:hover, :focus-visible, :active) > i {
    color: #ffdc7a !important;
    fill: currentColor;
    animation: none !important;
}

/* Anillo de aura azul, sin convertirlo en un fondo del botón. */
.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three),
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three) {
    overflow: visible !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three)::after,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three)::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(25, 118, 210, .62) !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: 0 0 12px rgba(25, 118, 210, .28) !important;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.72);
    animation: blue-cart-aura-ring 1.35s ease-out infinite !important;
}

.product-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three) > i,
.perfume-card .add-to-cart-icon-only:not(.add-to-cart-unavailable):not(#blue-aura-priority):not(#blue-aura-priority-two):not(#blue-aura-priority-three) > i {
    z-index: 1;
}

@keyframes blue-cart-aura-ring {
    0% {
        opacity: .72;
        transform: translate(-50%, -50%) scale(.72);
    }
    72%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.85);
    }
}

/* Todos los regresos de página heredan exactamente el estilo limpio de vista.blade.php. */
.site-back-btn:not(#unified-back-priority):not(#unified-back-priority-two):not(#unified-back-priority-three) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 34px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3e4e68 !important;
    font: 700 .82rem 'Montserrat', sans-serif !important;
    text-decoration: none !important;
}

.site-back-btn:not(#unified-back-priority):not(#unified-back-priority-two):not(#unified-back-priority-three):is(:hover, :focus-visible, :active) {
    background: transparent !important;
    box-shadow: none !important;
    color: #0b1f3a !important;
    transform: translateX(-3px) !important;
}

.site-back-btn:not(#unified-back-priority):not(#unified-back-priority-two):not(#unified-back-priority-three) > i {
    color: #0b1f3a !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.filter-bar .site-back-btn.filter-back-btn:not(#unified-catalog-back-priority) {
    display: inline-flex !important;
}

/* La misma microinteracción de "Comenzar Test" en las acciones de las tarjetas. */
.test-button-motion:not(.add-to-cart-unavailable):not(:disabled) {
    transition: color .25s ease, background .25s ease, opacity .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

.test-button-motion:not(.add-to-cart-unavailable):not(:disabled):is(:hover, :focus-visible) {
    opacity: .96;
    transform: translateY(-3px) !important;
    box-shadow: 0 13px 30px rgba(12, 64, 118, .28) !important;
}

.test-button-motion:not(.add-to-cart-unavailable):not(:disabled):active {
    transform: translateY(-1px) scale(.98) !important;
}

.test-button-motion:not(.add-to-cart-unavailable):not(:disabled) > i {
    animation: mi-series-blue-ripple .6s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .test-button-motion:not(.add-to-cart-unavailable):not(:disabled) > i {
        animation: none !important;
    }
}

/* Carrito más visible exclusivamente en las tarjetas de la página de inicio. */
body.home-page .product-card .add-to-cart-icon-only {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
}

body.home-page .product-card .add-to-cart-icon-only > i {
    font-size: 1.65rem !important;
    line-height: 1 !important;
}

body.home-page .product-card .add-to-cart-icon-only::after {
    width: 32px !important;
    height: 32px !important;
}

/* Centrado final del CTA dentro del carrito lateral. */
.cart-drawer-footer .cart-actions {
    align-items: center !important;
    justify-content: center !important;
}

.cart-drawer-footer .cart-actions .btn.btn-primary {
    width: 100% !important;
    margin-inline: auto !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Evita que la sombra base invada el espacio entre tarjetas; conserva el hover existente. */
.product-card:not(:hover),
.review-card:not(:hover),
.vista-rec-card:not(:hover) {
    box-shadow: none !important;
}


/* Ajustes de estabilidad para cards y catálogo. */
.product-card {
    min-width: 0;
    contain: layout paint;
}
.product-card .product-info {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.product-card .product-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: calc(1.45em * 3);
    max-height: calc(1.45em * 3);
    line-height: 1.45;
}
.product-card .product-bottom {
    margin-top: auto;
}
.product-image-carousel {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: transform .65s cubic-bezier(.22, .61, .36, 1) !important;
}
.product-image-carousel img {
    display: block;
    width: 100%;
    max-width: 100%;
    transform: translateZ(0) !important;
    backface-visibility: hidden;
}
.product-card:hover .product-image-carousel img {
    transform: translateZ(0) !important;
}
.inventory-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.inventory-status-badge.is-active {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}
.inventory-status-badge.is-inactive {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}


/* Carrusel de imágenes en tarjetas: una sola foto visible y rotación al pasar el cursor. */
.product-card .product-image-container {
    position: relative;
    overflow: hidden !important;
}

.product-card .product-image-carousel {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transform: translate3d(0, 0, 0);
    transition: transform .45s ease !important;
    will-change: transform;
}

.product-card .product-image-carousel img {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 10px;
    box-sizing: border-box;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    transform: none !important;
}

.product-card .product-image-container > .product-main-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 10px;
    box-sizing: border-box;
    object-fit: contain !important;
    object-position: center !important;
}

@media (prefers-reduced-motion: reduce) {
    .product-card .product-image-carousel {
        transition: none !important;
    }
}

/* Carrusel estable: cada imagen ocupa exactamente una diapositiva. */
.product-card .product-image-container{overflow:hidden!important;}
.product-card .product-image-carousel{display:flex!important;width:100%!important;height:100%!important;transition:transform .55s cubic-bezier(.22,.61,.36,1)!important;will-change:transform;}
.product-card .product-image-carousel>img{flex:0 0 100%!important;width:100%!important;min-width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;pointer-events:none;}


/* Corrección final: imágenes PNG transparentes sin fondo gris en las tarjetas. */
.product-card .product-image-container,
.catalog-main .product-card .product-image-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.product-card .product-image-carousel,
.catalog-main .product-card .product-image-carousel,
.product-card .product-image-carousel > img,
.catalog-main .product-card .product-image-carousel > img,
.product-card .product-image-container > .product-main-img,
.catalog-main .product-card .product-image-container > .product-main-img {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* Jasmine Scents: fondo blanco permanente para tarjetas e imágenes transparentes. */
.product-card,
.product-card:hover,
.catalog-main .product-card,
.catalog-main .product-card:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.product-card .product-image-container,
.product-card:hover .product-image-container,
.catalog-main .product-card .product-image-container,
.catalog-main .product-card:hover .product-image-container,
.product-card .product-image-carousel,
.product-card:hover .product-image-carousel {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}
.product-card .product-image-carousel > img,
.product-card:hover .product-image-carousel > img,
.product-card .product-image-container > img,
.product-card:hover .product-image-container > img,
.product-card .product-main-img,
.product-card:hover .product-main-img {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
}


/* HERO RESPONSIVE Y CAMBIO RAPIDO - 2026-07-23 */
.home-page .hero-section {
    width: 100%;
    min-height: clamp(460px, 62vw, 760px);
    height: clamp(460px, 62vw, 760px);
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home-page .hero-slider-bg,
.home-page .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.home-page .hero-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: opacity .65s ease-in-out, transform 3s ease-out !important;
}
.home-page .hero-slide.active {
    transform: scale(1.025) !important;
}
@media (max-width: 768px) {
    .home-page .hero-section {
        min-height: clamp(420px, 118vw, 640px) !important;
        height: clamp(420px, 118vw, 640px) !important;
        padding-bottom: 0 !important;
    }
    .home-page .hero-slide {
        background-size: cover !important;
        background-position: center center !important;
    }
}
@media (max-width: 480px) {
    .home-page .hero-section {
        min-height: 520px !important;
        height: 520px !important;
    }
}
/* Accesibilidad y rendimiento de movimiento */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #9a7400;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================================================== */
/* HEADER SEARCH — INPUT LIMPIO + RESULTADOS NEGROS LIQUID GLASS              */
/* ========================================================================== */

/* El buscador del header queda sin recuadro, borde, fondo ni sombra. */
.main-header .nav-search-item,
.main-header .nav-search-item:hover,
.main-header .nav-search-item:focus-within {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.main-header .nav-search-item {
    width: clamp(170px, 15vw, 230px);
    min-width: 0;
    padding: 0 !important;
    gap: 8px;
}

.main-header .nav-search-item > .fa-magnifying-glass {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    place-items: unset !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
}

.main-header .header-search-direct,
.main-header .header-search-direct:hover,
.main-header .header-search-direct:focus,
.main-header .header-search-direct:focus-visible {
    display: block;
    width: 100% !important;
    min-width: 0;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #111111 !important;
    caret-color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: .92rem !important;
    font-weight: 600;
    line-height: 1.25;
    appearance: none;
    -webkit-appearance: none;
}

.main-header .header-search-direct::placeholder {
    color: rgba(17, 17, 17, .58) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, .58) !important;
    opacity: 1;
}

.main-header .header-search-direct::-webkit-search-decoration,
.main-header .header-search-direct::-webkit-search-results-button,
.main-header .header-search-direct::-webkit-search-results-decoration {
    display: none;
}

.main-header .header-search-direct::-webkit-search-cancel-button {
    cursor: pointer;
    filter: none !important;
    opacity: .7;
}

/* Visor de resultados negro con efecto Liquid Glass. */
.main-header .search-dropdown {
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(390px, calc(100vw - 24px)) !important;
    max-height: min(62dvh, 440px) !important;
    padding: 9px !important;
    overflow-x: hidden;
    overflow-y: auto;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.15), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(145deg, rgba(8,8,10,.82), rgba(0,0,0,.94)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 20px !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(28px) saturate(145%) contrast(108%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) contrast(108%) !important;
    isolation: isolate;
}

.main-header .search-dropdown::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 24%, transparent 72%, rgba(255,255,255,.06));
}

.main-header .search-dropdown-item {
    min-width: 0;
    gap: 12px;
    padding: 10px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background: transparent !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.main-header .search-dropdown-item:hover,
.main-header .search-dropdown-item:focus-visible {
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
    border-color: rgba(255,255,255,.18) !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1) !important;
    transform: translateY(-1px);
}

.main-header .search-dropdown-item img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
}

.main-header .search-dropdown-item > div {
    min-width: 0;
}

.main-header .search-dropdown-item .sd-name {
    color: #ffffff !important;
    font-weight: 800;
}

.main-header .search-dropdown-item .sd-brand {
    color: rgba(255,255,255,.66) !important;
}

.main-header .search-dropdown-item .sd-price {
    color: #ffffff !important;
    font-weight: 750;
}

.main-header .search-dropdown-empty {
    padding: 18px 14px !important;
    color: rgba(255,255,255,.78) !important;
    line-height: 1.45;
}

.main-header .search-dropdown::-webkit-scrollbar {
    width: 7px;
}

.main-header .search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.main-header .search-dropdown::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    background-clip: padding-box;
}

/* Responsive: botón compacto cerrado y buscador limpio al abrirse. */
@media (max-width: 900px) {
    .main-header .nav-search-item {
        width: 40px;
        min-width: 40px;
        max-width: 40px !important;
        height: 40px;
        padding: 0 !important;
        justify-content: center;
    }

    .main-header .nav-search-item:not(.mobile-search-open) .header-search-direct {
        display: none !important;
    }

    .main-header .nav-search-item.mobile-search-open,
    .main-header .nav-search-item.mobile-search-open:hover,
    .main-header .nav-search-item.mobile-search-open:focus-within {
        top: calc(76px + env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        width: auto;
        min-width: 0;
        max-width: none !important;
        height: auto;
        padding: 8px 12px !important;
        justify-content: flex-start;
        border: 1px solid rgba(0,0,0,.1) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.88) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.14) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    }

    .main-header .nav-search-item.mobile-search-open .header-search-direct {
        display: block !important;
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
    }

    .main-header .nav-search-item.mobile-search-open .search-dropdown {
        top: calc(100% + 9px) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-height: min(58dvh, 390px) !important;
    }
}

@media (max-width: 480px) {
    .main-header .nav-search-item.mobile-search-open,
    .main-header .nav-search-item.mobile-search-open:hover,
    .main-header .nav-search-item.mobile-search-open:focus-within {
        right: max(8px, env(safe-area-inset-right));
        left: max(8px, env(safe-area-inset-left));
        padding: 8px 10px !important;
    }

    .main-header .search-dropdown {
        border-radius: 17px !important;
        padding: 7px !important;
    }

    .main-header .search-dropdown-item {
        padding: 9px !important;
    }

    .main-header .search-dropdown-item img {
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   BUSCADOR HEADER — TEXTO DORADO + VISOR LIQUID GLASS NEGRO
   ========================================================= */
:root {
    --search-gold: #d4af37;
    --search-gold-light: #f2d675;
    --search-gold-soft: rgba(212, 175, 55, .72);
}

.main-header .nav-search-item > i {
    color: var(--search-gold) !important;
}

.main-header .header-search-direct,
.main-header .header-search-direct:hover,
.main-header .header-search-direct:focus,
.main-header .header-search-direct:focus-visible {
    color: var(--search-gold) !important;
    caret-color: var(--search-gold-light) !important;
    -webkit-text-fill-color: var(--search-gold) !important;
    text-shadow: 0 0 12px rgba(212, 175, 55, .12);
}

.main-header .header-search-direct::placeholder {
    color: var(--search-gold-soft) !important;
    -webkit-text-fill-color: var(--search-gold-soft) !important;
    opacity: 1;
}

.main-header .header-search-direct::-webkit-search-cancel-button {
    filter: sepia(1) saturate(5) hue-rotate(355deg) brightness(1.05) !important;
}

.main-header .search-dropdown {
    color: var(--search-gold-light) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.14), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(212,175,55,.10), transparent 30%),
        linear-gradient(145deg, rgba(10,10,12,.82), rgba(0,0,0,.95)) !important;
    border: 1px solid rgba(212,175,55,.24) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(212,175,55,.08) !important;
}

.main-header .search-dropdown::before {
    background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 24%, transparent 70%, rgba(212,175,55,.08)) !important;
}

.main-header .search-dropdown-item,
.main-header .search-dropdown-item:visited {
    color: var(--search-gold-light) !important;
}

.main-header .search-dropdown-item:hover,
.main-header .search-dropdown-item:focus-visible {
    color: var(--search-gold-light) !important;
    background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(255,255,255,.055)) !important;
    border-color: rgba(212,175,55,.28) !important;
}

.main-header .search-dropdown-item .sd-name {
    color: var(--search-gold-light) !important;
    -webkit-text-fill-color: var(--search-gold-light) !important;
    text-shadow: 0 0 12px rgba(212,175,55,.10);
}

.main-header .search-dropdown-item .sd-brand {
    color: rgba(242,214,117,.76) !important;
    -webkit-text-fill-color: rgba(242,214,117,.76) !important;
}

.main-header .search-dropdown-item .sd-price {
    color: var(--search-gold) !important;
    -webkit-text-fill-color: var(--search-gold) !important;
    text-shadow: 0 0 12px rgba(212,175,55,.12);
}

.main-header .search-dropdown-empty {
    color: var(--search-gold-light) !important;
    -webkit-text-fill-color: var(--search-gold-light) !important;
}

.main-header .search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,.42) !important;
    background-clip: padding-box !important;
}

@media (max-width: 900px) {
    .main-header .nav-search-item.mobile-search-open .header-search-direct,
    .main-header .nav-search-item.mobile-search-open .header-search-direct:hover,
    .main-header .nav-search-item.mobile-search-open .header-search-direct:focus,
    .main-header .nav-search-item.mobile-search-open .header-search-direct:focus-visible {
        color: var(--search-gold) !important;
        caret-color: var(--search-gold-light) !important;
        -webkit-text-fill-color: var(--search-gold) !important;
    }

    .main-header .nav-search-item.mobile-search-open > i {
        color: var(--search-gold) !important;
    }
}


/* =========================================================
   CORRECCIÓN FINAL BUSCADOR RESPONSIVE + LIQUID GLASS DORADO
   ========================================================= */
@media (max-width: 900px) {
    .main-header .nav-search-item.mobile-search-open,
    .main-header .nav-search-item.mobile-search-open:hover,
    .main-header .nav-search-item.mobile-search-open:focus-within {
        position: fixed !important;
        top: calc(66px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        z-index: 2500 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        border: 1px solid rgba(212,175,55,.30) !important;
        border-radius: 16px !important;
        background: rgba(8,8,10,.92) !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12) !important;
        backdrop-filter: blur(24px) saturate(165%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
    }

    .main-header .nav-search-item.mobile-search-open .header-search-toggle {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--search-gold) !important;
        box-shadow: none !important;
    }

    .main-header .nav-search-item.mobile-search-open .header-search-direct {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 0 32px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--search-gold-light) !important;
        -webkit-text-fill-color: var(--search-gold-light) !important;
        caret-color: var(--search-gold-light) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .main-header .nav-search-item.mobile-search-open .search-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(46dvh, 330px) !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, rgba(14,14,16,.96), rgba(0,0,0,.94)) !important;
        border: 1px solid rgba(212,175,55,.30) !important;
        box-shadow: 0 24px 60px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.11) !important;
        backdrop-filter: blur(28px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    }

    .main-header .search-dropdown-item {
        width: 100% !important;
        min-height: 68px !important;
        padding: 9px 10px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 11px !important;
        border-radius: 13px !important;
        overflow: hidden !important;
    }

    .main-header .search-dropdown-item + .search-dropdown-item {
        margin-top: 5px !important;
    }

    .main-header .search-dropdown-item img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        object-fit: contain !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,.94) !important;
    }

    .main-header .search-dropdown-item > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .main-header .search-dropdown-item .sd-name,
    .main-header .search-dropdown-item .sd-brand,
    .main-header .search-dropdown-item .sd-price {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .main-header .search-dropdown-item .sd-name {
        font-size: .83rem !important;
        line-height: 1.25 !important;
    }

    .main-header .search-dropdown-item .sd-brand,
    .main-header .search-dropdown-item .sd-price {
        font-size: .72rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .main-header .nav-search-item.mobile-search-open,
    .main-header .nav-search-item.mobile-search-open:hover,
    .main-header .nav-search-item.mobile-search-open:focus-within {
        top: calc(62px + env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        height: 46px !important;
        padding: 0 12px !important;
        border-radius: 15px !important;
    }

    .main-header .nav-search-item.mobile-search-open .search-dropdown {
        top: calc(100% + 8px) !important;
        max-height: min(44dvh, 300px) !important;
        border-radius: 16px !important;
    }
}
:is(.product-price,.product-price-discounted,.cart-item-price,.cart-summary-item-price,.cart-summary-total .total-price,.qv-price-current,.search-result-price,.vista-price-current,.vista-size-btn .sz-price,.vista-rec-price,.result-card-price,.pagos-cart-item-price,.pagos-cart-total .total-price,.main-header .search-dropdown-item .sd-price){color:var(--jasmine-header-gold)!important;-webkit-text-fill-color:var(--jasmine-header-gold)!important}

/* Iconos sociales del footer — 2026-08-13 */
.main-footer .social-icon-fa{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:#0b1f3a!important;font-size:1.15rem;line-height:1}.main-footer .social-links a:hover .social-icon-fa,.main-footer .social-links a:focus-visible .social-icon-fa{color:#9a7400!important}.fa-instagram:before{content:"\f16d"}.fa-facebook-f:before{content:"\f39e"}.fa-tiktok:before{content:"\e07b"}
@media(max-width:768px){.main-footer .payment-methods-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px!important}.main-footer .payment-logo{width:100%!important;min-width:0;height:56px!important;padding:6px!important;overflow:visible;border-radius:10px;background:#fff!important}.main-footer .payment-logo img,.main-footer .payment-logo--wide img{display:block!important;width:100%!important;max-width:92px!important;height:42px!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}.main-footer .payment-logo--inverse img{filter:brightness(0)!important;opacity:.86!important}}

/* Botones comerciales: azul uniforme y ondas Uiverse mi-series. */
.uiverse-ripple-btn:not(:disabled),
a.uiverse-ripple-btn {
    position: relative !important;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .65rem !important;
    overflow: hidden !important;
    border-color: #1976d2 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
    opacity: 1 !important;
}
.uiverse-ripple-btn:not(:disabled)::before,
.uiverse-ripple-btn:not(:disabled)::after,
a.uiverse-ripple-btn::before,
a.uiverse-ripple-btn::after {
    content: none !important;
    display: none !important;
}
.uiverse-ripple-btn:not(:disabled):is(:hover, :focus-visible),
a.uiverse-ripple-btn:is(:hover, :focus-visible) {
    border-color: #1976d2 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #fff !important;
    opacity: .95 !important;
}
.uiverse-ripple-btn > i,
.uiverse-ripple-btn > span:not(.animation) {
    position: relative;
    z-index: 2;
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    box-shadow: none !important;
}
.uiverse-ripple-btn > .animation {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-left: .15rem;
    border-radius: 100%;
    background: rgba(255,255,255,.72);
    animation: jasmine-commercial-ripple .6s linear infinite !important;
}
@keyframes jasmine-commercial-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,.10), 0 0 0 20px rgba(255,255,255,.10), 0 0 0 40px rgba(255,255,255,.10), 0 0 0 60px rgba(255,255,255,.10);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255,255,255,.10), 0 0 0 40px rgba(255,255,255,.10), 0 0 0 60px rgba(255,255,255,.10), 0 0 0 80px rgba(255,255,255,0);
    }
}

/* En móvil los métodos de pago conservan el mismo fondo del footer de escritorio. */
@media (max-width: 768px) {
    .main-footer .payment-logo {
        padding: 4px 6px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .main-footer .payment-logo--inverse img {
        filter: brightness(0) invert(1) !important;
        opacity: .92 !important;
    }
}

/* Prioridad final para todas las llamadas comerciales solicitadas. */
:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .vista-rec-add:not(:disabled),
    .vista-buy-btn:not(:disabled),
    .qv-add-btn:not(:disabled),
    .hero-buy-btn,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border-color: #1976d2 !important;
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}
:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .vista-rec-add:not(:disabled),
    .vista-buy-btn:not(:disabled),
    .qv-add-btn:not(:disabled),
    .hero-buy-btn,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::before {
    content: none !important;
    display: none !important;
}
:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .vista-rec-add:not(:disabled),
    .vista-buy-btn:not(:disabled),
    .qv-add-btn:not(:disabled),
    .hero-buy-btn,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
)::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    right: 18px !important;
    top: 50% !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 100% !important;
    background: rgba(255,255,255,.72) !important;
    transform: translateY(-50%) !important;
    animation: jasmine-commercial-ripple .6s linear infinite !important;
    pointer-events: none !important;
}
:is(
    .product-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .perfume-card .add-to-cart-quick:not(.add-to-cart-unavailable),
    .vista-rec-add:not(:disabled),
    .vista-buy-btn:not(:disabled),
    .qv-add-btn:not(:disabled),
    .hero-buy-btn,
    .cart-actions .btn.btn-primary,
    .checkout-step-footer .btn.btn-primary,
    .pagos-footer .btn.btn-primary,
    #pay-submit-btn,
    #p-epayco-btn
) > * {
    position: relative;
    z-index: 2;
}