/* ============================================
   MI MOÑA SHOP — Premium Beauty Store v3
   Rosa Pastel · Crema · Blanco · Negro · Dorado
   ============================================ */

/* ====== VARIABLES ====== */
:root {
    --bg:           #FAFAFA;
    --bg-white:     #FFFFFF;
    --bg-pink:      #FDF0F3;
    --bg-cream:     #FAF7F5;
    --bg-beige:     #F5EDE8;
    --bg-dark:      #111111;
    --bg-dark2:     #1A1A1A;

    --pink:         #E8A0B0;
    --pink-light:   #F5C6D0;
    --pink-soft:    #FDE8EE;
    --pink-dark:    #C4788A;
    --rose:         #B5527A;

    --gold:         #C9A84C;
    --gold-light:   #E4CA7E;
    --gold-grad:    linear-gradient(135deg, #C9A84C 0%, #E4CA7E 52%, #C9A84C 100%);

    --text:         #1A1A1A;
    --text-mid:     #4A4A4A;
    --text-soft:    #888888;

    --border:       rgba(0, 0, 0, 0.07);
    --border-pink:  rgba(232, 160, 176, 0.35);
    --border-gold:  rgba(201, 168, 76, 0.35);

    --sh-xs:  0 2px 12px rgba(0,0,0,0.05);
    --sh-sm:  0 4px 24px rgba(0,0,0,0.08);
    --sh-md:  0 8px 40px rgba(0,0,0,0.11);
    --sh-pink:0 10px 40px rgba(232,160,176,0.28);
    --sh-gold:0 10px 40px rgba(201,168,76,0.28);

    --ff-serif: 'Playfair Display', Georgia, serif;
    --ff-sans:  'Montserrat', Arial, sans-serif;

    --nav-h:      74px;
    --ease:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:   0.4s cubic-bezier(0, 0, 0.2, 1);
    --ease-spring:0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

    --r-sm:   6px;
    --r-md:   14px;
    --r-lg:   24px;
    --r-pill: 999px;
}

/* ====== RESET ====== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--ff-sans); background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; }
img  { display:block; max-width:100%; height:auto; }
a    { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:pointer; font-family:var(--ff-sans); }
ul   { list-style:none; }

/* ====== UTILITY ====== */
.container { max-width:1200px; margin:0 auto; padding:0 28px; }

.accent-text {
    background: linear-gradient(135deg, var(--rose) 0%, var(--pink-dark) 50%, var(--gold) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ====== KEYFRAMES ====== */
@keyframes fadeIn    { from{opacity:0}     to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes marquee   { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes progressBar{ from{width:0} to{width:100%} }
@keyframes waPulse   { 0%{box-shadow:0 4px 18px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.4)} 70%{box-shadow:0 4px 18px rgba(37,211,102,.5),0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 4px 18px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,0)} }

/* Scroll reveal */
[data-animate] { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
[data-animate].visible { opacity:1; transform:translateY(0); }

/* ====== BUTTONS ====== */
.btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 34px;
    background:var(--gold-grad); color:var(--bg-dark);
    font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    border-radius:var(--r-sm); border:none; cursor:pointer; white-space:nowrap;
    transition:all var(--ease); position:relative; overflow:hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.18); opacity:0; transition:opacity var(--ease); }
.btn-primary:hover  { transform:translateY(-3px); box-shadow:var(--sh-gold); }
.btn-primary:hover::after { opacity:1; }
.btn-primary:active { transform:translateY(-1px); }

.btn-outline-light {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 32px;
    background:rgba(255,255,255,.15); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    border:1.5px solid rgba(255,255,255,.55); border-radius:var(--r-sm);
    backdrop-filter:blur(8px); cursor:pointer; white-space:nowrap;
    transition:all var(--ease);
}
.btn-outline-light:hover { background:rgba(255,255,255,.28); border-color:#fff; transform:translateY(-3px); }

.btn-outline-dark {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 36px;
    background:transparent; color:var(--text);
    font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    border:1.5px solid rgba(0,0,0,.2); border-radius:var(--r-sm);
    cursor:pointer; white-space:nowrap; transition:all var(--ease);
}
.btn-outline-dark:hover { border-color:var(--rose); color:var(--rose); transform:translateY(-3px); box-shadow:var(--sh-pink); }

.btn-gold-offer {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 44px;
    background:var(--gold-grad); color:var(--bg-dark);
    font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    border-radius:var(--r-sm); cursor:pointer; white-space:nowrap; transition:all var(--ease);
}
.btn-gold-offer:hover { transform:translateY(-3px); box-shadow:var(--sh-gold); filter:brightness(1.07); }

/* ====== NAVBAR ====== */
.navbar {
    position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
    transition:background .4s ease,backdrop-filter .4s ease,box-shadow .4s ease;
}
.navbar.scrolled {
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 4px 24px rgba(0,0,0,.06);
}

.nav-container {
    max-width:1280px; margin:0 auto; height:100%; padding:0 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Logo */
.logo { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.logo-svg { width:34px; height:34px; flex-shrink:0; }
.logo-img {
    width:62px; height:62px; flex-shrink:0;
    object-fit:contain; border-radius:50%;
    background:var(--bg-pink);
    padding:3px;
    transition:transform var(--ease), box-shadow var(--ease);
}
.logo:hover .logo-img { transform:scale(1.06); box-shadow:0 0 0 3px var(--border-pink); }
.logo-img-footer { background:rgba(253,240,243,.12); }
.logo-text {
    font-family:var(--ff-serif); font-size:25px; font-weight:700;
    color:var(--text); letter-spacing:.4px; white-space:nowrap;
}
.logo-light .logo-text { color:rgba(255,255,255,.92); }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:6px; }

/* .nav-links lives outside <nav> (sibling) to prevent backdrop-filter on
   .navbar.scrolled from becoming its containing block on mobile.
   On desktop re-anchor it to the navbar centre via fixed positioning. */
@media (min-width:861px) {
    .nav-links {
        position:fixed; top:0; left:50%; transform:translateX(-50%);
        height:var(--nav-h); background:transparent; z-index:1001;
        pointer-events:none;
    }
    .nav-links > * { pointer-events:auto; }
}

.nav-link {
    display:flex; align-items:center; gap:5px;
    padding:8px 14px;
    font-size:11px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase;
    color:var(--text-mid); border-radius:var(--r-sm);
    transition:all var(--ease); white-space:nowrap;
}
.nav-link:hover { color:var(--rose); background:var(--bg-pink); }

.nav-link-sale { color:var(--rose) !important; font-weight:700; }
.nav-link-sale:hover { background:var(--pink-soft) !important; }
.nav-link-sale .fa-fire-flame-curved { font-size:12px; }

.nav-caret { font-size:9px; transition:transform var(--ease); }
.nav-drop-item:hover .nav-caret,
.nav-drop-item.open .nav-caret { transform:rotate(180deg); }

/* Mega dropdown */
.nav-drop-item { position:relative; }

.mega-menu {
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translateX(-50%) translateY(-6px);
    width:720px; max-width:calc(100vw - 24px);
    background:rgba(255,255,255,.98);
    border-radius:26px;
    border:1px solid rgba(232,160,176,.22);
    box-shadow:0 30px 80px rgba(0,0,0,.12);
    padding:24px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
    z-index:200;
}
.mega-menu::before {
    content:''; position:absolute; top:-8px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:16px; height:16px;
    background:rgba(255,255,255,.98);
    border-top:1px solid rgba(232,160,176,.22); border-left:1px solid rgba(232,160,176,.22);
}

.nav-drop-item:hover .mega-menu,
.nav-drop-item.open .mega-menu {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.mega-grid {
    display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0;
    margin-bottom:20px;
}

/* Mega menu — grouped columns */
.mega-col  { display:flex; flex-direction:column; gap:11px; padding:0 9px; }
.mega-col:first-child { padding-left:0; }
.mega-col:last-child  { padding-right:0; }
.mega-col:not(:last-child) { border-right:1px solid rgba(232,160,176,.15); }
.mega-group { display:flex; flex-direction:column; gap:1px; }
.mega-group-hd {
    display:flex; align-items:center; gap:7px;
    font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    color:var(--rose);
    padding:4px 8px 9px;
    border-bottom:1px solid rgba(232,160,176,.32);
    margin-bottom:7px;
}
.mega-group-hd i { font-size:11px; opacity:.85; }
.mega-sub {
    display:flex; align-items:center; gap:8px;
    padding:7px 10px; border-radius:8px;
    font-size:13px; font-weight:600; color:var(--text-mid);
    cursor:pointer; transition:all var(--ease);
    width:100%; text-align:left;
    background:none; border:none; font-family:var(--ff-sans);
}
.mega-sub i { font-size:11px; color:var(--rose); opacity:.60; width:14px; flex-shrink:0; transition:opacity var(--ease); }
.mega-sub:hover { background:var(--pink-soft); color:var(--rose); transform:translateX(2px); }
.mega-sub:hover i { opacity:1; }

.mega-item {
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; border-radius:18px;
    background:rgba(255,255,255,.96); color:var(--text-mid);
    font-size:13px; transition:all var(--ease); cursor:pointer;
}
.mega-item:hover { background:var(--pink-soft); color:var(--rose); transform:translateX(2px); }
.mega-item:hover .mega-icon { background:var(--rose); color:#fff; }


.mega-icon {
    width:34px; height:34px; flex-shrink:0;
    background:var(--bg-pink); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--rose); transition:all var(--ease);
}

.mega-txt strong { display:block; font-size:12px; font-weight:700; line-height:1.2; color:var(--text); }
.mega-txt span   { display:block; font-size:10px; color:var(--text-soft); margin-top:1px; }
.mega-item:hover .mega-txt strong { color:var(--rose); }

.mega-offers-link {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:11px 16px; border-radius:12px;
    background:linear-gradient(135deg,#FDE8EE,#FAF7F5);
    border:1px dashed var(--border-pink);
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--rose); transition:all var(--ease);
}
.mega-offers-link:hover { background:var(--pink-soft); box-shadow:var(--sh-pink); }

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:6px; }

.nav-icon-btn {
    width:38px; height:38px; border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--text-mid);
    transition:all var(--ease);
}
.nav-icon-btn:hover { background:var(--bg-pink); color:var(--rose); }

.nav-cart { position:relative; }
.cart-count {
    position:absolute; top:-4px; right:-4px;
    width:17px; height:17px;
    background:var(--gold-grad); color:var(--bg-dark);
    font-size:9px; font-weight:800; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:transform var(--ease-spring);
}

.hamburger { display:none; flex-direction:column; gap:5px; padding:6px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); transition:all var(--ease); transform-origin:center; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(4.7px,4.7px); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(4.7px,-4.7px); }

/* Mobile-only categories — hidden on desktop */
.mobile-cat-section { display:none; }

/* ====== HERO SLIDER ====== */
.hero-slider {
    position:relative;
    min-height:calc(100vh - var(--nav-h));
    overflow:hidden;
    background:radial-gradient(circle at 18% 22%, rgba(255,255,255,.98), rgba(253,240,243,.96) 32%, rgba(250,237,243,.94) 100%);
}
.hero-slider::before {
    content:'';
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.82), transparent 20%),
        radial-gradient(circle at 84% 20%, rgba(201,168,76,.16), transparent 26%),
        radial-gradient(circle at 68% 82%, rgba(232,160,176,.10), transparent 30%);
    pointer-events:none;
}

.slide {
    position:absolute; inset:0;
    opacity:0;
    transition:opacity .9s ease;
    pointer-events:none;
    display:grid; align-items:center;
    will-change:opacity;
}
.slide.active { opacity:1; pointer-events:auto; }

.slide-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(130deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 34%, rgba(250,240,246,.20) 60%, transparent 100%);
}

.hero-slide-inner {
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; gap:48px;
    min-height:100%; padding:calc(var(--nav-h) + 48px) 0 48px;
}

.slide-copy { max-width:560px; }

/* Solo lectores de pantalla — h1 semántico sin impacto visual */
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Entry animation — initial states ── */
.slide-eyebrow,
.slide-title,
.slide-gold-bar,
.slide-sub,
.slide-btns,
.slide-trust { opacity:0; transform:translateY(16px); }
.slide-gold-bar { transform:scaleX(0); transform-origin:left center; }

/* ── Entry animation — stagger ── */
.slide.active .slide-eyebrow  { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; transition-delay:0s;   }
.slide.active .slide-title    { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; transition-delay:.13s; }
.slide.active .slide-gold-bar { opacity:1; transform:scaleX(1);     transition:opacity .4s ease,  transform .52s cubic-bezier(.16,1,.3,1); transition-delay:.26s; }
.slide.active .slide-sub      { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; transition-delay:.30s; }
.slide.active .slide-btns     { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; transition-delay:.44s; }
.slide.active .slide-trust    { opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s ease; transition-delay:.56s; }

/* ── Eyebrow — gold pill badge ── */
.slide-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px;
    border:1px solid var(--gold);
    border-radius:var(--r-pill);
    color:var(--gold);
    background:rgba(201,168,76,.07);
    font-size:10px; font-weight:700; letter-spacing:3.5px; text-transform:uppercase;
    margin-bottom:22px;
}
.slide-eyebrow::before { content:'✦'; font-size:9px; }

/* ── Title ── */
.slide-title {
    font-family:var(--ff-serif);
    font-size:clamp(44px,6vw,78px);
    font-weight:700; line-height:1.03;
    color:var(--bg-dark); margin-bottom:0;
}
.slide-title em {
    font-style:italic;
    background:linear-gradient(135deg,var(--gold) 0%,var(--pink-dark) 45%,var(--rose) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ── Gold accent bar ── */
.slide-gold-bar {
    width:36px; height:2px;
    background:var(--gold-grad);
    border-radius:2px;
    margin:18px 0;
}

/* ── Subtitle ── */
.slide-sub {
    font-size:15px; font-weight:300; color:var(--text-mid);
    line-height:1.8; margin-bottom:28px; max-width:480px;
}

/* ── CTA row ── */
.slide-btns { display:flex; flex-wrap:wrap; gap:14px; }

/* ── Secondary CTA — gold ghost ── */
.btn-outline-gold {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px;
    border:1.5px solid var(--gold);
    border-radius:var(--r-sm);
    color:var(--gold);
    background:transparent;
    font-family:var(--ff-sans);
    font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    cursor:pointer; white-space:nowrap;
    transition:background var(--ease), color var(--ease), box-shadow var(--ease);
    text-decoration:none;
}
.btn-outline-gold::before { content:'✦'; font-size:9px; opacity:.8; }
.btn-outline-gold:hover   { background:var(--gold); color:#fff; box-shadow:var(--sh-gold); transform:translateY(-3px); }

/* ── Trust strip — inline, always visible ── */
.slide-trust {
    display:flex; align-items:center; gap:14px;
    margin-top:22px; flex-wrap:wrap;
    font-size:12px; color:var(--text-soft);
}
.slide-trust strong { color:var(--text); font-weight:700; font-family:var(--ff-serif); font-size:13px; }
.st-sep { color:var(--border-pink); font-size:18px; line-height:1; }

/* ── Product visual — cover image ── */
.slide-visual {
    position:relative;
    border-radius:var(--r-lg);
    overflow:hidden;
    align-self:stretch;
    min-height:460px;
}
.slide-visual::before {
    content:'';
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,.22) 0%, transparent 55%);
    border-radius:inherit;
}
.slide-visual img {
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center top; display:block;
}

/* ── Hero nav — dots + progress bar row below hero images ── */
.hero-nav {
    background:var(--bg-white);
    padding:20px 0 18px;
    display:flex; flex-direction:column; align-items:center; gap:0;
}

/* ── Dots ── */
.slider-dots {
    display:flex; gap:10px; align-items:center; justify-content:center;
}
.sdot {
    width:10px; height:10px; border-radius:999px;
    background:rgba(181,82,122,.28); border:none; cursor:pointer;
    transition:all .35s ease;
    padding:8px; margin:0 4px; box-sizing:content-box;
}
.sdot::before { display:block; width:10px; height:10px; border-radius:999px; content:''; background:inherit; }
.sdot.active  { width:28px; border-radius:999px; background:var(--gold); }
.sdot.active::before { background:var(--gold); }
.sdot:hover   { background:rgba(181,82,122,.55); }

/* ── Progress bar ── */
.slider-progress { width:100%; max-width:320px; height:3px; background:rgba(232,160,176,.20); margin-top:10px; border-radius:3px; }
.slider-progress-bar { height:100%; background:linear-gradient(90deg,var(--rose),var(--gold)); width:0; }
.slider-progress-bar.running { animation:progressBar 5s linear forwards; }

/* ── Slider arrows ── */
.slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
    border:1px solid rgba(201,168,76,.28); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--text);
    transition:all var(--ease);
}
.slider-arrow:hover { background:#fff; color:var(--gold); border-color:var(--gold); box-shadow:var(--sh-gold); transform:translateY(-50%) scale(1.06); }
.arr-prev { left:24px; }
.arr-next { right:24px; }

/* ====== SOCIAL PROOF ====== */
.proof-strip { background:var(--bg-white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; }
.proof-grid  { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.proof-item  { display:flex; align-items:center; gap:12px; }
.proof-item > i {
    width:40px; height:40px; background:var(--bg-pink); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--rose); font-size:15px; flex-shrink:0;
}
.proof-item div { display:flex; flex-direction:column; }
.proof-item strong { font-size:13px; font-weight:700; color:var(--text); line-height:1.2; }
.proof-item span  { font-size:11px; color:var(--text-soft); }
.proof-sep { width:1px; height:38px; background:var(--border); flex-shrink:0; }

/* ====== ANNOUNCEMENT BAR ====== */
.announcement-bar { background:var(--bg-dark); padding:11px 0; overflow:hidden; }
.announcement-track {
    display:flex; gap:72px; white-space:nowrap; width:max-content;
    animation:marquee 22s linear infinite;
}
.announcement-track span { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* ====== SECTION HEADER ====== */
.section-header { text-align:center; margin-bottom:52px; }
.section-eyebrow { font-size:10px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--rose); margin-bottom:12px; }
.section-title { font-family:var(--ff-serif); font-size:clamp(28px,4vw,46px); font-weight:700; color:var(--text); line-height:1.15; margin-bottom:12px; }
.section-sub   { font-size:14px; color:var(--text-soft); font-weight:300; max-width:480px; margin:0 auto; line-height:1.85; }

/* ====== PRODUCTS ====== */
.products-section { padding:100px 0; background:var(--bg); }

/* Filter Tabs */
/* Wrap: degradé en el borde derecho para que el último chip visible no se vea
   cortado en seco; desaparece al llegar al final del scroll (clase .at-end via JS) */
.filter-tabs-wrap { position:relative; }
.filter-tabs-wrap::after {
    content:''; position:absolute; top:0; right:0; bottom:10px; width:56px;
    pointer-events:none; background:linear-gradient(to left, var(--bg) 12%, transparent);
    opacity:1; transition:opacity .25s ease;
}
.filter-tabs-wrap.at-end::after { opacity:0; }
.filter-tabs {
    display:flex; align-items:center; justify-content:flex-start;
    gap:8px; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-bottom:44px; padding:4px 4px 14px;
    scroll-snap-type:x proximity;
}
.filter-tabs::-webkit-scrollbar { display:none; }
.ftab {
    padding:9px 22px; border-radius:var(--r-pill);
    font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-soft); background:var(--bg-white);
    border:1.5px solid var(--border); cursor:pointer;
    transition:all var(--ease); flex-shrink:0; scroll-snap-align:start;
}
.ftab:hover  { border-color:var(--pink); color:var(--rose); background:var(--bg-pink); }
.ftab.active { background:var(--rose); color:#fff; border-color:var(--rose); box-shadow:0 4px 16px rgba(181,82,122,.28); }

/* Products grid */
.products-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-bottom:48px;
}

/* Card hidden by filter */
.product-card.hidden { display:none; }
/* Section hidden by filter */
.category-section.hidden { display:none; }

.product-card {
    background:var(--bg-white); border:1px solid rgba(216,181,191,.26);
    border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 18px 56px rgba(202,153,169,.12);
    cursor:pointer; transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    position:relative; min-height:auto;
}
.product-card:hover { transform:translateY(-10px); box-shadow:0 24px 80px rgba(202,153,169,.18); border-color:rgba(181,82,122,.18); }

/* Product image */
.product-img-wrap {
    position:relative; overflow:hidden;
    height:260px; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at center, #fff 0%, rgba(248,237,240,.82) 100%);
}
/* <picture> es solo el wrapper del <source webp>; no debe afectar el layout del <img> */
.product-img-wrap picture { display:contents; }
.product-img {
    width:100%; height:100%; max-height:none;
    object-fit:contain; object-position:center center;
    padding:14px; box-sizing:border-box;
    transition:transform .4s ease, filter .4s ease;
    display:block;
}

/* slide-visual img — see hero slider section above */
.product-card:hover .product-img { transform:scale(1.04); filter:brightness(1.07); }

.product-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:18px; border-top:1px solid rgba(232,160,176,.14); }
.btn-cart-mini {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px; min-height:38px;
    border-radius:999px;
    background:rgba(232,160,176,.12); color:var(--rose);
    font-size:12px; font-weight:700; letter-spacing:.08em;
    border:1px solid rgba(232,160,176,.28);
    transition:transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}
.btn-cart-mini svg,
.btn-cart-mini i { font-size:12px; }
.btn-cart-mini span { display:inline-block; }
.btn-cart-mini:hover { background:var(--rose); color:#fff; transform:translateY(-1px); box-shadow:0 14px 34px rgba(181,82,122,.18); }
.btn-cart-mini:active { transform:translateY(0); }

/* Badge */
.product-badge {
    position:absolute; top:12px; left:12px; z-index:2;
    padding:5px 14px; border-radius:var(--r-pill);
    font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.badge-new     { background:var(--rose); color:#fff; }
.badge-best    { background:var(--bg-dark); color:#fff; }
.badge-sale    { background:#E63946; color:#fff; }
.badge-premium { background:var(--gold-grad); color:var(--bg-dark); box-shadow:0 2px 10px rgba(201,168,76,.35); }

/* Overlay with add button */
.product-overlay {
    position:absolute; inset:0; z-index:3;
    background:radial-gradient(circle at top, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 40%, rgba(232,160,176,.08) 100%);
    opacity:0; transition:opacity var(--ease), background var(--ease);
    pointer-events:none;
}
.product-card:hover .product-overlay { opacity:1; }

.btn-add {
    display:flex; align-items:center; gap:8px;
    padding:12px 24px; background:var(--rose); color:#fff;
    font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    border-radius:var(--r-pill); border:none; cursor:pointer;
    box-shadow:0 4px 16px rgba(181,82,122,.4);
    transition:all var(--ease);
}
.product-overlay .btn-add { pointer-events:auto; }
.btn-add:hover { background:var(--pink-dark); transform:scale(1.04); }

/* Wishlist button */
.product-wishlist {
    position:absolute; top:12px; right:12px; z-index:4;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--pink-dark);
    border:1px solid rgba(232,160,176,.3);
    opacity:0; transition:all var(--ease);
}
.product-card:hover .product-wishlist { opacity:1; }
.product-wishlist:hover { background:var(--pink-soft); transform:scale(1.1); }
.product-wishlist.liked i { color:var(--rose); }
.product-wishlist.liked { opacity:1; background:var(--pink-soft); }

/* Product body */
.product-body { padding:20px 20px 24px; }
.product-cat  { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--rose); margin-bottom:6px; }
.product-name { font-family:var(--ff-serif); font-size:16px; font-weight:600; color:var(--text); margin-bottom:7px; line-height:1.35; }
.product-desc { font-size:13px; color:var(--text-mid); line-height:1.75; margin-bottom:10px; font-weight:400; min-height:44px; }
.product-rating { display:flex; align-items:center; gap:5px; margin-bottom:14px; }
.stars  { color:var(--gold); font-size:12px; letter-spacing:1px; }
.rating-count { font-size:11px; color:var(--text-soft); }

.product-price  { display:flex; align-items:baseline; gap:8px; }
.price-now { font-family:var(--ff-serif); font-size:20px; font-weight:700; color:var(--rose); }
.price-old { font-size:12px; color:var(--text-soft); text-decoration:line-through; }

.products-cta { text-align:center; }

/* ====== BRAND STRIP ====== */
.brand-strip { background:var(--bg-white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; overflow:hidden; }
.brand-track {
    display:flex; align-items:center; gap:32px; width:max-content;
    animation:marquee 30s linear infinite;
}
.brand-name { font-family:var(--ff-serif); font-size:17px; font-style:italic; font-weight:500; color:rgba(0,0,0,.16); white-space:nowrap; }
.brand-sep  { color:var(--pink-light); font-size:14px; }

/* ====== BENEFITS ====== */
.benefits-section { padding:100px 0; background:var(--bg-pink); position:relative; overflow:hidden; }
.benefits-section::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23E8A0B0' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

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

.benefit-card {
    background:var(--bg-white); border:1px solid var(--border);
    border-radius:var(--r-md); padding:40px 28px; text-align:center;
    box-shadow:var(--sh-xs); position:relative; overflow:hidden;
    transition:all var(--ease);
}
.benefit-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--rose),var(--gold));
    transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.benefit-card:hover { transform:translateY(-8px); box-shadow:var(--sh-pink); border-color:var(--border-pink); }
.benefit-card:hover::after { transform:scaleX(1); }

.benefit-icon {
    width:62px; height:62px; background:var(--bg-pink); border:1px solid var(--border-pink);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; font-size:22px; color:var(--rose);
    transition:all var(--ease);
}
.benefit-card:hover .benefit-icon { background:var(--pink-soft); box-shadow:0 0 22px rgba(232,160,176,.35); }
.benefit-title { font-family:var(--ff-serif); font-size:17px; font-weight:600; color:var(--text); margin-bottom:10px; }
.benefit-desc  { font-size:13px; color:var(--text-soft); line-height:1.8; }

/* ====== OFFER SECTION ====== */
.offer-section { padding:110px 0; background:var(--bg-dark); text-align:center; position:relative; overflow:hidden; }
.offer-deco { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); opacity:.18; }
.offer-deco-1 { width:600px; height:600px; background:radial-gradient(circle,var(--pink),transparent 70%); top:-200px; left:-100px; }
.offer-deco-2 { width:500px; height:500px; background:radial-gradient(circle,var(--gold),transparent 70%); bottom:-200px; right:-100px; }

.offer-inner  { position:relative; z-index:2; max-width:680px; margin:0 auto; padding:0 28px; }
.offer-eyebrow{ font-size:11px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.offer-title  { font-family:var(--ff-serif); font-size:clamp(36px,5.5vw,64px); font-weight:700; color:#fff; line-height:1.12; margin-bottom:16px; }
.offer-sub    { font-size:15px; color:rgba(255,255,255,.65); line-height:1.8; margin-bottom:44px; }

.countdown { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:44px; flex-wrap:wrap; }
.count-box { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm); padding:18px 22px; min-width:82px; text-align:center; }
.count-num { display:block; font-family:var(--ff-serif); font-size:40px; font-weight:700; color:var(--gold); line-height:1; }
.count-label{ display:block; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:5px; }
.count-sep  { font-family:var(--ff-serif); font-size:36px; color:var(--gold); opacity:.5; margin-bottom:18px; }

/* ====== TESTIMONIALS ====== */
.testimonials-section { padding:100px 0; background:var(--bg-cream); }

.rating-summary {
    display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
    background:var(--bg-white); border:1px solid var(--border-pink); border-radius:var(--r-md);
    padding:26px 40px; margin-bottom:48px; box-shadow:var(--sh-xs);
}
.rating-big       { font-family:var(--ff-serif); font-size:56px; font-weight:700; color:var(--rose); line-height:1; }
.rating-stars-big { font-size:22px; color:var(--gold); letter-spacing:4px; }
.rating-info strong { display:block; font-size:15px; font-weight:700; color:var(--text); }
.rating-info span   { display:block; font-size:12px; color:var(--text-soft); margin-top:4px; }

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

.testimonial-card {
    background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-md);
    padding:28px 24px; box-shadow:var(--sh-xs); position:relative; overflow:hidden;
    transition:all var(--ease);
}
.testimonial-card::before {
    content:'\201C'; position:absolute; top:12px; right:18px;
    font-family:var(--ff-serif); font-size:80px; color:rgba(232,160,176,.1);
    line-height:1; pointer-events:none;
}
.testimonial-card:hover { transform:translateY(-6px); box-shadow:var(--sh-pink); border-color:var(--border-pink); }

.t-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.t-avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid var(--pink-light); flex-shrink:0; }
.t-name   { display:block; font-size:13px; font-weight:700; color:var(--text); }
.t-loc    { display:block; font-size:11px; color:var(--text-soft); margin-top:2px; }
.t-stars  { margin-left:auto; color:var(--gold); font-size:13px; letter-spacing:2px; }
.t-text   { font-size:14px; font-style:italic; color:var(--text-mid); line-height:1.85; margin-bottom:18px; }
.t-product{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--rose); font-weight:600; padding-top:14px; border-top:1px solid var(--border); }

/* ====== FAQ ====== */
.faq-section { padding:100px 0; background:var(--bg-white); }
.faq-list { max-width:760px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }

.faq-q {
    width:100%; text-align:left; padding:20px 0;
    font-size:14px; font-weight:600; color:var(--text);
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    transition:color var(--ease); background:none; border:none; line-height:1.5;
}
.faq-q:hover { color:var(--rose); }
.faq-q.active { color:var(--rose); }

.faq-icon {
    width:28px; height:28px; background:var(--bg-pink); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all var(--ease);
}
.faq-icon i { font-size:10px; color:var(--rose); }
.faq-icon .fa-minus { display:none; }
.faq-q.active .faq-icon { background:var(--rose); }
.faq-q.active .faq-icon i { color:#fff; }
.faq-q.active .faq-icon .fa-plus  { display:none; }
.faq-q.active .faq-icon .fa-minus { display:block; }

.faq-a { max-height:0; overflow:hidden; transition:max-height .42s ease,padding-bottom .3s ease; }
.faq-a.open { max-height:240px; padding-bottom:20px; }
.faq-a p { font-size:14px; color:var(--text-soft); line-height:1.85; }

/* ====== NEWSLETTER ====== */
.newsletter-section { padding:90px 28px; background:var(--bg-beige); position:relative; overflow:hidden; }
.newsletter-deco { position:absolute; border-radius:50%; pointer-events:none; filter:blur(60px); }
.nd1 { width:400px; height:400px; background:rgba(245,198,208,.5); top:-100px; right:-80px; }
.nd2 { width:300px; height:300px; background:rgba(201,168,76,.1); bottom:-80px; left:-60px; }

.newsletter-inner { position:relative; z-index:1; max-width:580px; margin:0 auto; text-align:center; }
.newsletter-title { font-family:var(--ff-serif); font-size:clamp(26px,3.5vw,40px); font-weight:700; color:var(--text); margin-bottom:12px; line-height:1.2; }
.newsletter-sub   { font-size:14px; color:var(--text-mid); line-height:1.8; margin-bottom:30px; }
.newsletter-form  { display:flex; gap:10px; margin-bottom:14px; }
.newsletter-input {
    flex:1; min-width:0; padding:14px 20px;
    background:var(--bg-white); border:1.5px solid var(--border);
    border-radius:var(--r-sm); color:var(--text);
    font-family:var(--ff-sans); font-size:13px; outline:none;
    transition:border-color var(--ease),box-shadow var(--ease);
}
.newsletter-input:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,160,176,.15); }
.newsletter-input::placeholder { color:var(--text-soft); }
.newsletter-note { font-size:11px; color:var(--text-soft); display:flex; align-items:center; justify-content:center; gap:6px; }
.newsletter-note i { font-size:10px; color:var(--rose); }

/* ====== FOOTER ====== */
.footer { background:var(--bg-dark2); }
.footer-main { padding:80px 0 50px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:44px; }

.footer-tagline { font-size:13px; color:rgba(255,255,255,.42); line-height:1.8; margin:16px 0 26px; max-width:250px; }
.social-links { display:flex; gap:10px; flex-wrap:wrap; }
.social-link {
    width:36px; height:36px; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:rgba(255,255,255,.38); transition:all var(--ease);
}
.social-link:hover { border-color:var(--pink); color:var(--pink); background:rgba(232,160,176,.1); }

.footer-heading { font-size:10px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:20px; }
.footer-links li { margin-bottom:10px; }
.footer-links a  { font-size:13px; color:rgba(255,255,255,.36); transition:color var(--ease); }
.footer-links a:hover { color:var(--pink-light); }

.footer-contact { display:flex; flex-direction:column; gap:11px; }
.footer-contact li { display:flex; align-items:flex-start; gap:12px; font-size:13px; color:rgba(255,255,255,.36); line-height:1.5; }
.footer-contact li i { color:var(--pink); width:15px; flex-shrink:0; margin-top:2px; }

.footer-bottom { padding:20px 0; }
.footer-bottom .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.22); }
.payment-icons { display:flex; gap:12px; color:rgba(255,255,255,.25); font-size:22px; }

/* ====== WHATSAPP ====== */
.whatsapp-btn {
    position:fixed; bottom:28px; right:28px; z-index:997;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff; font-size:28px;
    display:flex; align-items:center; justify-content:center;
    animation:waPulse 2.5s infinite; transition:transform var(--ease),background var(--ease);
    text-decoration:none;
}
.whatsapp-btn:hover { transform:scale(1.12); background:#1ebe5a; animation:none; box-shadow:0 6px 28px rgba(37,211,102,.5); }
.whatsapp-tooltip {
    position:absolute; right:68px;
    background:var(--bg-dark2); color:#fff;
    padding:8px 14px; font-size:12px; font-weight:600; white-space:nowrap;
    border:1px solid rgba(255,255,255,.1); border-radius:var(--r-sm);
    opacity:0; transform:translateX(8px); transition:all var(--ease); pointer-events:none;
}
.whatsapp-btn:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }

/* ====== TOAST ====== */
.toast {
    position:fixed; bottom:100px; right:28px; z-index:996;
    background:var(--bg-white); border:1px solid var(--border-pink);
    border-radius:var(--r-md); color:var(--text);
    padding:13px 18px; display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:500; max-width:280px;
    box-shadow:var(--sh-md);
    transform:translateX(130%); transition:transform .42s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.show { transform:translateX(0); }
.toast i { color:var(--rose); font-size:16px; }

.cart-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0;
    visibility:hidden; transition:opacity var(--ease), visibility var(--ease);
    z-index:995;
}
.cart-backdrop.active {
    opacity:1; visibility:visible;
}
.cart-sidebar {
    position:fixed; top:0; right:0; bottom:0; width:400px;
    max-width:100%; background:var(--bg-white); box-shadow:-12px 0 48px rgba(0,0,0,.16);
    transform:translateX(110%); transition:transform var(--ease-spring);
    z-index:1001; display:grid; grid-template-rows:auto 1fr auto;
    overflow:hidden;
}
.cart-sidebar.open {
    transform:translateX(0);
}
.cart-header {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:30px 28px 16px; border-bottom:1px solid rgba(232,160,176,.16);
}
.cart-title { font-family:var(--ff-serif); font-size:24px; margin-top:6px; line-height:1.1; }
.cart-close {
    width:42px; height:42px; border-radius:50%; background:rgba(248,234,240,.95);
    color:var(--text); display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; transition:background var(--ease);
}

/* ====== CATEGORY SECTIONS (alternating soft backgrounds) ====== */
.category-section {
    margin:26px 0; padding:32px; border-radius:24px; overflow:hidden;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover:hover) {
    .category-section:hover { transform: translateY(-2px); }
}
.category-section .cat-title {
    font-family:var(--ff-serif); font-size:26px; font-weight:800; margin-bottom:24px; color:var(--text); letter-spacing:-.3px;
}
.category-section .cat-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;
}
.category-section:nth-child(odd) { background:linear-gradient(180deg, rgba(255,250,245,0.96), rgba(255,245,250,0.72)); border:1px solid rgba(233,210,195,0.45); }
.category-section:nth-child(even){ background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(253,240,243,0.62)); border:1px solid rgba(232,160,176,0.12); }

/* Keep product images fully visible when overlaying backgrounds */
.category-section .product-img-wrap { background:transparent; }


.cart-close:hover { background:var(--pink-soft); }
.cart-body { padding:24px 28px 0; overflow-y:auto; }
.cart-summary { display:flex; flex-direction:column; gap:4px; margin-bottom:22px; }
.cart-summary-text { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--rose); }
.cart-summary-note { font-size:14px; color:var(--text-soft); }
.cart-items { display:flex; flex-direction:column; gap:18px; }
.cart-empty { padding:48px 16px; text-align:center; color:var(--text-soft); font-size:14px; line-height:1.7; }
.cart-empty.hidden { display:none; }
.cart-item {
    display:flex; gap:16px; align-items:flex-start; padding:18px 16px; border-radius:18px;
    background:rgba(248,237,240,.7); border:1px solid rgba(232,160,176,.22);
}
.cart-item-img {
    width:84px; height:84px; border-radius:18px; object-fit:cover; flex-shrink:0;
    background:var(--bg-white);
}
.cart-item-body { width:100%; display:flex; flex-direction:column; gap:12px; }
.cart-item-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.cart-item-name { font-size:15px; line-height:1.3; font-weight:700; }
.cart-item-remove { background:none; color:var(--text-soft); font-size:12px; font-weight:700; cursor:pointer; transition:color var(--ease); padding:8px; border-radius:8px; }
.cart-item-remove:hover { color:var(--rose); }
.cart-item-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.cart-item-meta span { color:var(--text-mid); font-size:14px; }
.cart-qty-controls { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.95); border:1px solid rgba(232,160,176,.26); border-radius:999px; padding:6px 10px; }
.cart-qty-controls button {
    width:30px; height:30px; border-radius:50%; background:var(--bg-white); border:1px solid rgba(232,160,176,.35);
    font-size:16px; color:var(--text); cursor:pointer; transition:all var(--ease);
}
.cart-qty-controls button:hover { background:var(--pink-soft); color:#fff; border-color:transparent; }
.cart-item-qty { min-width:24px; text-align:center; font-weight:700; }
.cart-footer {
    border-top:1px solid rgba(232,160,176,.14); padding:22px 28px 28px; display:grid; gap:14px;
}
.cart-subtotal-row { display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700; }
.cart-note-secondary { font-size:12px; color:var(--text-soft); margin:0; }
.cart-btn-checkout {
    width:100%; justify-content:center; padding:14px 18px; font-size:13px; font-weight:800; letter-spacing:1px;
}
@media (max-width:860px) {
    .cart-sidebar { width:100%; max-width:420px; }
    .cart-header { padding:22px 20px 14px; }
    .cart-body { padding:18px 20px 0; }
    .cart-footer { padding:18px 20px 22px; }
}
@media (max-width:540px) {
    .cart-item { flex-direction:column; align-items:center; text-align:center; }
    .cart-item-meta { flex-direction:column; align-items:center; }
    .cart-qty-controls { width:100%; justify-content:center; }
}

/* ====== RESPONSIVE ====== */
@media (max-width:1100px) {
    .products-grid    { grid-template-columns:repeat(2,1fr); }
    .benefits-grid    { grid-template-columns:repeat(2,1fr); }
    .testimonials-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid      { grid-template-columns:1fr 1fr; }
    .mega-menu        { width:580px; }
    .mega-grid        { grid-template-columns:1fr 1fr 1fr; }
    .mega-col         { padding:0 6px; }
}

@media (max-width:860px) {
    :root { --nav-h:62px; }

    /* Navbar compacta: el layout desktop (padding 28px + logo 62px + 4 iconos de 38px)
       no entra en el ancho de un teléfono y desborda ~35-40px, recortando el hamburger
       contra el overflow-x:hidden del body. Se reduce padding/gaps y se escala el logo. */
    .nav-container { padding:0 16px; gap:8px; }
    .logo { gap:8px; }
    .nav-actions { gap:2px; }

    /* Logo — escala proporcional a navbar compacto */
    .logo-img  { width:36px; height:36px; }
    .logo-text { font-size:15px; }

    /* Hamburger visible */
    .hamburger { display:flex; }

    /* Desktop nav hidden → full-screen drawer */
    .nav-links {
        position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
        background:rgba(255,255,255,.98); backdrop-filter:blur(24px);
        flex-direction:column; align-items:flex-start;
        padding:24px 28px 40px; gap:4px;
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        transform:translateX(-100%); opacity:0;
        transition:transform .38s var(--ease-out), opacity .38s ease;
        z-index:999; box-shadow:var(--sh-md);
    }
    .nav-links.open { transform:translateX(0); opacity:1; }

    .nav-link { width:100%; padding:12px 16px; font-size:13px; border-radius:var(--r-sm); }

    /* Mega menu becomes static in drawer */
    .nav-drop-item { width:100%; }
    .nav-link-cat  { width:100%; justify-content:space-between; }
    .mega-menu {
        position:static; transform:none; width:100%;
        border-radius:var(--r-sm); box-shadow:none; border:1px solid var(--border);
        padding:12px; margin-top:4px; display:none;
        opacity:1; visibility:visible; pointer-events:auto;
    }
    .mega-menu::before { display:none; }
    .nav-drop-item.open .mega-menu { display:block; }
    /* Mobile: stack columns vertically */
    .mega-grid { display:flex; flex-direction:column; gap:12px; }
    .mega-col, .mega-col:not(:last-child) { gap:8px; padding:0; border-right:none; }
    .mega-group-hd { font-size:9px; letter-spacing:2px; padding:4px 8px 8px; margin-bottom:5px; }
    .mega-sub { font-size:12px; padding:8px 10px; border-radius:8px; }
    .mega-item { padding:8px 10px; }
    .mega-offers-link { margin-top:8px; }

    /* Mobile categories */
    .mobile-cat-section { display:block; width:100%; margin-top:12px; padding:16px; background:rgba(255,255,255,.96); border:1px solid rgba(232,160,176,.24); border-radius:22px; }
    .mobile-cat-title { font-size:9px; font-weight:800; letter-spacing:3.2px; text-transform:uppercase; color:var(--text-soft); margin-bottom:12px; padding-left:4px; }
    .mobile-cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
    .mobile-cat-item {
        display:flex; align-items:center; gap:9px;
        padding:10px 12px; background:rgba(248,234,240,.9); border:1px solid rgba(232,160,176,.2);
        border-radius:14px; font-size:12px; font-weight:700; color:var(--rose); line-height:1.25;
        transition:all var(--ease);
        /* nombres largos ("Cejas & Pestañas") envuelven a 2 líneas en vez de truncar con ellipsis */
        white-space:normal;
    }
    .mobile-cat-item i { font-size:13px; flex-shrink:0; }
    .mobile-cat-item:hover { background:rgba(245,196,208,.3); transform:translateY(-1px); }

    /* Slider */
    .arr-prev { left:12px; }
    .arr-next { right:12px; }
    .slider-arrow { display:none; }

    /* Bug: .slide es position:absolute (necesario para el crossfade), por lo que no
       aporta altura a .hero-slider — este solo respeta su min-height fijo y, con
       overflow:hidden, recorta cualquier contenido que la supere. En columna única
       (texto apilado sobre imagen) el contenido real es más alto que ese min-height,
       así que el banner quedaba empujado fuera del área visible.
       Fix: .hero-slides pasa a grid con todos los slides apilados en la misma celda
       (grid-area 1/1) — mismo efecto visual de superposición para el crossfade, pero
       ahora SÍ aportan altura intrínseca y .hero-slider crece para contener el texto
       completo + la imagen, sin recortar nada. */
    .hero-slides { display:grid; }
    .slide { position:relative; inset:auto; grid-area:1 / 1; align-items:start; }

    .hero-slide-inner { grid-template-columns:1fr; gap:22px; padding:calc(var(--nav-h) + 20px) 28px 24px; }
    .slide-visual { min-height:260px; height:260px; border-radius:var(--r-md); }
    .slide-title { font-size:clamp(36px,10vw,58px); }
    .slide-sub   { font-size:14px; }
    .slide-btns  { flex-direction:column; gap:10px; }
    .btn-primary, .btn-outline-light, .btn-outline-gold { text-align:center; justify-content:center; }
    /* Target táctil: 14px de padding vertical + texto 11px queda en ~41px, por debajo
       del mínimo de 44px recomendado. Solo en mobile, no afecta el tamaño en desktop. */
    .btn-primary, .btn-outline-dark, .btn-outline-gold, .btn-gold-offer { padding-top:16px; padding-bottom:16px; }
    .slide-trust { justify-content:center; }
    .slide-content { padding:calc(var(--nav-h) + 16px) 0 60px; }

    /* Sections */
    .section-header { margin-bottom:36px; }
    .products-section { padding:60px 0; }
    .products-grid { gap:16px; }
    .benefits-grid { grid-template-columns:1fr; gap:14px; }
    .testimonials-grid { grid-template-columns:1fr; gap:16px; }
    .rating-summary { padding:20px 24px; gap:14px; }
    .product-img-wrap { height:220px; }
    .product-img { object-position:center top; }

    .count-box { min-width:66px; padding:14px 12px; }
    .count-num { font-size:32px; }

    .newsletter-form { flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; gap:30px; }
    .footer-tagline { max-width:100%; }
    .footer-bottom .container { flex-direction:column; text-align:center; }

    .proof-sep { display:none; }
    .proof-grid { gap:16px; justify-content:center; }
}

@media (max-width:768px) {
    /* max() garantiza mínimo 480px en pantallas muy cortas (ej. iPhone SE 568px) */
    .hero-slider { min-height: max(calc(80vh - var(--nav-h)), 480px); }
    /* 28px lateral restaura el espaciado del .container que el shorthand original anulaba */
    .hero-slide-inner { padding: calc(var(--nav-h) + 14px) 28px 24px; }
    /* Zona visual más compacta en columna única */
    .slide-visual { min-height:200px; height:200px; }
    /* Slide 6 "Colágeno & Hialurónico": 22 chars a 37.5px supera los 319px disponibles y genera 3-4 líneas.
       Reducir a ~26px permite que quepa en 1 línea → 2 líneas totales → botones a ~410px < 480px */
    [data-slide="6"] .slide-title { font-size: clamp(26px, 7vw, 44px); }
    /* Trust strip: gap 14px → 6px impide salto a 2ª línea parcial en 319px (~339px → ~307px con gap 6px) */
    .slide-trust { gap: 6px; margin-top: 14px; }
    /* Sub: margin inferior 28px → 20px libera 8px antes de los botones sin afectar legibilidad */
    .slide-sub { margin-bottom: 20px; }
}

@media (max-width:540px) {
    .products-grid { grid-template-columns:1fr; }
    .filter-tabs { gap:6px; }
    .ftab { padding:8px 16px; font-size:10px; }

    /* Touch: always show overlay */
    .product-overlay { opacity:1; background:rgba(255,255,255,.12); }
    .product-wishlist { opacity:1; }

    /* enlarge touch targets on small screens */
    .cart-qty-controls button { width:38px; height:38px; font-size:18px; }
    .cart-item-remove { font-size:14px; padding:10px 12px; }
    /* padding:10px agranda el target táctil, pero con 8 slides el ancho total
       (8 dots + gap + margin) superaba el viewport y generaba scroll horizontal
       en toda la página (recortando el hamburger contra overflow-x:hidden).
       Se compensa reduciendo gap/margin para que el touch target crezca sin
       que la fila de dots se salga de pantalla. */
    .slider-dots { gap:4px; }
    .sdot { padding:10px; margin:0 2px; }

    .countdown { gap:6px; }
    .count-box { min-width:58px; padding:12px 8px; }
    .count-num { font-size:26px; }
    .count-sep { font-size:22px; }

    .slide-overlay {
        background:linear-gradient(
            160deg,
            rgba(253,240,243,.97) 0%,
            rgba(253,240,243,.88) 50%,
            rgba(253,240,243,.60) 80%,
            rgba(253,240,243,.15) 100%
        );
    }

    .products-section { padding:48px 0; }
    .product-img-wrap { height:200px; }
    .whatsapp-btn { bottom:20px; right:20px; width:52px; height:52px; font-size:24px; }
    .toast { right:16px; bottom:84px; }
}

/* ====== CATEGORY SECTIONS & GALLERY ====== */
.categories-container { margin-top:36px; display:flex; flex-direction:column; gap:36px; }
.category-section .cat-title { font-family:var(--ff-serif); font-size:26px; font-weight:800; margin-bottom:24px; color:var(--text); letter-spacing:-.3px; }
.category-section .cat-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.category-section .cat-grid > .product-card { flex:0 0 calc((100% - 54px) / 4); max-width:calc((100% - 54px) / 4); }
@media (max-width:1100px) { .category-section .cat-grid > .product-card { flex:0 0 calc((100% - 36px) / 3); max-width:calc((100% - 36px) / 3); } }
@media (max-width:860px)  { .category-section .cat-grid > .product-card { flex:0 0 calc((100% - 18px) / 2); max-width:calc((100% - 18px) / 2); } }
@media (max-width:540px)  { .category-section .cat-grid > .product-card { flex:0 0 100%; max-width:100%; } }

/* ─── CARRUSEL HORIZONTAL MÓVIL ─── */
@media (max-width:540px) {
    /* Reduce side padding: cat-grid pasa de 255px → 287px visibles (375px phone)
       → primer card (260px) cabe entero + ~15px de peek del siguiente */
    .category-section { padding:24px 8px; overflow:visible; }

    .category-section .cat-grid {
        display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:12px;
        overflow-x:auto;
        padding-bottom:8px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .category-section .cat-grid::-webkit-scrollbar { display:none; }

    .category-section .cat-grid .product-card {
        min-width:240px; max-width:none; flex:0 0 auto;
        scroll-snap-align:start;
    }
    .category-section .cat-grid [data-animate],
    .category-section .cat-grid [data-animate].visible {
        opacity:1; transform:none; transition:none;
    }
}

/* hide empty badges */
.product-badge:empty { display:none; }

/* error state for images */
.product-card.img-error { border:2px solid #E63946; box-shadow:0 8px 30px rgba(230,57,70,0.06); }

/* ====== PRODUCT MODAL / GALLERY ====== */
.pm-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); z-index:1200; opacity:0; pointer-events:none; transition:opacity .32s var(--ease); }
.pm-modal.open { opacity:1; pointer-events:auto; }
.pm-inner { background:var(--bg-white); border-radius:20px; padding:26px 22px; max-width:680px; width:min(680px,calc(100% - 32px)); max-height:90vh; position:relative; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 32px 90px rgba(0,0,0,.18); border:1px solid rgba(232,160,176,.12); opacity:0; transform:translateY(18px) scale(0.98); transition:opacity .32s var(--ease), transform .32s var(--ease); }
.pm-modal.open .pm-inner { opacity:1; transform:translateY(0) scale(1); }
.pm-container { display:flex; gap:16px; align-items:center; justify-content:center; flex:1; overflow:hidden; }
.pm-close { position:absolute; top:12px; right:14px; width:44px; height:44px; font-size:26px; background:rgba(255,255,255,.95); border:1px solid rgba(232,160,176,.18); border-radius:50%; color:var(--text); cursor:pointer; z-index:5; transition:all .25s var(--ease); }
.pm-close:hover { color:var(--rose); transform:scale(1.08); box-shadow:0 12px 28px rgba(181,82,122,.12); }
.pm-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; max-width:100%; gap:12px; }
.pm-img { width:100%; height:360px; object-fit:contain; border-radius:12px; transition:transform .32s var(--ease); }
.pm-img.pm-thumb { width:28%; max-width:260px; opacity:.95; }

/* modal nav buttons */
.pm-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); border:none; cursor:pointer; font-size:24px; color:var(--text);
    transition:all .2s ease; box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.pm-prev { left:8px; }
.pm-next { right:8px; }
.pm-nav:hover { background:var(--rose); color:#fff; transform:translateY(-50%) scale(1.08); box-shadow:0 6px 24px rgba(181,82,122,.3); }
.pm-caption { margin-top:16px; text-align:center; }
.pm-caption strong { display:block; font-size:16px; font-weight:700; margin-bottom:6px; color:var(--text); }
.pm-price { color:var(--rose); font-family:var(--ff-serif); font-weight:700; font-size:18px; }

@media (max-width:860px) {
    /* overflow-y:auto permite scroll vertical si el contenido supera el alto disponible */
    .pm-inner { padding:22px 16px; overflow-y:auto; }
    .pm-container { min-height:260px; gap:8px; }
    .pm-nav { width:40px; height:40px; font-size:20px; }
}
@media (max-width:540px) {
    .pm-inner { padding:18px 12px; max-height:92vh; overflow-y:auto; }
    /* min-height:0 en pantallas cortas: el contenido define la altura real */
    .pm-container { min-height:0; }
    .pm-img { max-height:260px; }
    .pm-close { top:8px; right:10px; width:40px; height:40px; font-size:22px; }
    .pm-nav { width:36px; height:36px; font-size:18px; }
    .pm-caption strong { font-size:14px; }
}

/* ====== FEATURED SLIDER ====== */
.featured-slider { position:relative; margin-bottom:20px; }
.featured-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 6px; }
.featured-track::-webkit-scrollbar { height:8px; }
/* Ancho fijo por tarjeta: el nombre envuelve en 2-3 líneas dentro de la tarjeta
   en lugar de estirar el ancho (evita nombres largos cortados por el viewport) */
.featured-item { flex:0 0 320px; min-width:0; scroll-snap-align:start; background:var(--bg-white); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; gap:10px; align-items:center; box-shadow:var(--sh-xs); cursor:pointer; }
.fi-img { width:84px; height:84px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.fi-caption { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fi-caption strong { font-size:13px; font-weight:700; line-height:1.35; }
.fi-price { font-family:var(--ff-serif); color:var(--rose); font-weight:700; }
.fs-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.9); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.fs-prev { left:10px; }
.fs-next { right:10px; }
.fs-arrow:hover { background:var(--rose); color:#fff; }

@media (max-width:860px) {
    .featured-item { flex-basis:260px; }
    .fi-img { width:72px; height:72px; }
}

/* ====== SEARCH MODAL ====== */
.search-backdrop {
    position:fixed; inset:0;
    background:rgba(10,5,10,.72);
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    opacity:0; visibility:hidden;
    transition:opacity var(--ease), visibility var(--ease);
    z-index:1100;
}
.search-backdrop.active { opacity:1; visibility:visible; }

.search-modal {
    position:fixed; inset:0;
    display:flex; align-items:flex-start; justify-content:center;
    padding-top:clamp(48px, 10vh, 110px);
    padding-left:16px; padding-right:16px;
    z-index:1101;
    pointer-events:none;
}
.search-modal.open { pointer-events:auto; }

.search-inner {
    width:min(640px, 100%);
    background:var(--bg-white);
    border-radius:24px;
    border:1px solid rgba(232,160,176,.18);
    box-shadow:0 32px 90px rgba(0,0,0,.22);
    overflow:hidden;
    opacity:0; transform:translateY(-20px) scale(0.97);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.search-modal.open .search-inner { opacity:1; transform:translateY(0) scale(1); }

.search-header {
    display:flex; align-items:center; gap:12px;
    padding:20px 22px 18px;
    border-bottom:1px solid rgba(232,160,176,.14);
}

.search-input-wrap {
    flex:1; display:flex; align-items:center; gap:10px;
    background:var(--bg-pink);
    border:1.5px solid rgba(232,160,176,.28);
    border-radius:var(--r-pill);
    padding:11px 16px;
    transition:border-color var(--ease), box-shadow var(--ease);
}
.search-input-wrap:focus-within {
    border-color:var(--pink);
    box-shadow:0 0 0 3px rgba(232,160,176,.2);
}
.search-icon-lupa { color:var(--text-soft); font-size:14px; flex-shrink:0; }

.search-input {
    flex:1; border:none; background:transparent;
    font-family:var(--ff-sans); font-size:15px; color:var(--text);
    outline:none; min-width:0;
}
.search-input::placeholder { color:var(--text-soft); }
.search-input::-webkit-search-cancel-button,
.search-input::-ms-clear { display:none; }

.search-clear {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    background:rgba(0,0,0,.09); color:var(--text-soft);
    font-size:10px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all var(--ease);
    opacity:0; pointer-events:none;
}
.search-clear.visible { opacity:1; pointer-events:auto; }
.search-clear:hover { background:var(--rose); color:#fff; }

.search-close-btn {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:rgba(248,234,240,.95);
    border:1px solid rgba(232,160,176,.22);
    color:var(--text); font-size:16px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all var(--ease);
}
.search-close-btn:hover { background:var(--rose); color:#fff; transform:scale(1.06); }

.search-results {
    max-height:min(420px, 52vh);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(232,160,176,.4) transparent;
}
.search-results::-webkit-scrollbar { width:4px; }
.search-results::-webkit-scrollbar-thumb { background:rgba(232,160,176,.4); border-radius:4px; }

.search-results-count {
    padding:12px 22px 6px;
    font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--text-soft);
}

.search-result-item {
    width:100%; display:flex; align-items:center; gap:14px;
    padding:12px 22px; text-align:left;
    cursor:pointer; transition:background var(--ease);
    border-top:1px solid rgba(232,160,176,.08);
}
.search-result-item:first-of-type { border-top:none; }
.search-result-item:hover { background:var(--bg-pink); }

.sri-img {
    width:54px; height:54px; border-radius:12px;
    object-fit:cover; flex-shrink:0;
    background:var(--bg-pink);
    border:1px solid rgba(232,160,176,.2);
}
.sri-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sri-cat {
    font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--rose);
}
.sri-name {
    font-family:var(--ff-serif); font-size:14px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sri-price { font-size:12px; font-weight:600; color:var(--text-mid); }
.sri-arrow {
    color:var(--text-soft); font-size:12px; flex-shrink:0;
    transition:transform var(--ease), color var(--ease);
}
.search-result-item:hover .sri-arrow { transform:translateX(3px); color:var(--rose); }

.search-empty {
    display:none; flex-direction:column; align-items:center;
    padding:36px 24px; gap:10px; text-align:center;
}
.search-hint {
    display:none; flex-direction:column; align-items:center;
    padding:36px 24px; gap:14px; text-align:center;
}
.search-empty.visible,
.search-hint.visible { display:flex; }
.search-empty i, .search-hint i { font-size:26px; color:var(--pink-light); }
.search-empty p  { font-family:var(--ff-serif); font-size:15px; color:var(--text-mid); }
.search-empty span { font-size:12px; color:var(--text-soft); }
.search-hint p { font-size:13px; color:var(--text-soft); line-height:1.6; }

/* ── Predictive search upgrades ── */
.sri-count-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 22px 6px;
    font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--text-soft); border-bottom:1px solid rgba(232,160,176,.08);
}
.sri-ver-todos {
    display:flex; align-items:center; gap:5px;
    font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
    color:var(--rose); background:none; border:none; cursor:pointer; padding:0;
    transition:gap var(--ease);
}
.sri-ver-todos:hover { gap:8px; }
.sri-ver-todos i { font-size:9px; transition:transform var(--ease); }
.sri-ver-todos:hover i { transform:translateX(2px); }

.sri-meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.sri-exact-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 7px; border-radius:var(--r-pill);
    background:rgba(181,82,122,.10); color:var(--rose);
    font-size:8px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
    white-space:nowrap; flex-shrink:0;
}
.sri-exact-badge i { font-size:7px; }

.sri-marca {
    font-size:10px; font-weight:600; color:var(--text-soft); letter-spacing:.3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

mark.sri-mark {
    background:rgba(201,168,76,.25); color:inherit;
    border-radius:2px; padding:0 1px; font-style:normal;
}

.search-result-item.sri-active { background:var(--bg-pink); }
.search-result-item.sri-active .sri-arrow { transform:translateX(3px); color:var(--rose); }

/* Hint chips */
.sri-hint-text { font-size:13px; color:var(--text-soft); }
.sri-hint-chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sri-chip {
    padding:6px 14px; border-radius:var(--r-pill);
    background:var(--bg-pink); border:1px solid var(--border-pink);
    font-size:11px; font-weight:600; color:var(--rose); cursor:pointer;
    transition:all var(--ease);
}
.sri-chip:hover { background:var(--pink-soft); border-color:var(--rose); transform:translateY(-1px); box-shadow:0 3px 10px rgba(181,82,122,.15); }

/* ====================================================
   SEARCH RESULTS PAGE — resultados.html
   ==================================================== */
.res-page-header {
    margin-top:var(--nav-h);
    padding:48px 0 32px;
    background:var(--bg-white);
    border-bottom:1px solid var(--border);
}
.res-page-header h1 {
    font-family:var(--ff-serif); font-size:28px; font-weight:700;
    color:var(--text); line-height:1.3; margin-bottom:4px;
}
.res-page-header h1 em { color:var(--rose); font-style:normal; }
.res-subtitle { font-size:13px; color:var(--text-soft); }
.res-count { display:inline-block; font-size:11.5px; font-weight:700; color:var(--text-soft); margin-top:8px; }

.res-controls {
    padding:20px 0;
    border-bottom:1px solid var(--border);
    background:var(--bg-white);
}
.res-controls-inner {
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.res-sort-wrap { display:flex; align-items:center; gap:10px; }
.res-sort-label { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-soft); text-transform:uppercase; }
.res-sort-select {
    padding:8px 14px; border-radius:var(--r-sm);
    border:1px solid var(--border); background:var(--bg-white);
    font-family:var(--ff-sans); font-size:12px; font-weight:600; color:var(--text);
    cursor:pointer; transition:border var(--ease);
}
.res-sort-select:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,160,176,.2); }

.res-main { padding:40px 0 80px; min-height:40vh; }
.res-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.res-empty {
    display:none; flex-direction:column; align-items:center;
    text-align:center; padding:80px 24px; gap:14px;
}
.res-empty-icon {
    width:72px; height:72px; border-radius:50%;
    background:var(--bg-pink); display:flex; align-items:center; justify-content:center;
    margin-bottom:4px;
}
.res-empty-icon i { font-size:28px; color:var(--pink-light); }
.res-empty h2 { font-family:var(--ff-serif); font-size:22px; color:var(--text); }
.res-empty p { font-size:14px; color:var(--text-soft); max-width:340px; line-height:1.7; }
.res-empty .btn-primary { margin-top:6px; }

@media (max-width:1100px) { .res-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .res-grid { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width:420px)  { .res-grid { grid-template-columns:1fr 1fr; gap:10px; } }
@media (max-width:380px)  {
    .res-page-header h1 { font-size:22px; }
    .res-controls-inner { flex-direction:column; align-items:flex-start; }
}

/* Card highlight on navigate */
@keyframes searchPulse {
    0%   { outline:2px solid rgba(181,82,122,0);    box-shadow:0 0 0 0   rgba(181,82,122,0); }
    20%  { outline:2px solid rgba(181,82,122,.75);  box-shadow:0 0 0 8px rgba(181,82,122,.14); }
    70%  { outline:2px solid rgba(181,82,122,.35);  box-shadow:0 0 0 4px rgba(181,82,122,.06); }
    100% { outline:2px solid rgba(181,82,122,0);    box-shadow:0 0 0 0   rgba(181,82,122,0); }
}
.product-card.search-highlight {
    animation:searchPulse 1.8s ease forwards;
    position:relative; z-index:1;
}

@media (max-width:768px) {
    .search-modal { padding-top:clamp(12px, 4vh, 48px); }
    .search-inner { border-radius:20px; }
    .search-header { padding:16px 16px 14px; gap:10px; }
    .search-results-count { padding:10px 16px 4px; }
    .search-result-item { padding:11px 16px; }
    .search-close-btn { width:36px; height:36px; font-size:15px; }
}
@media (max-width:480px) {
    .search-modal { padding-top:8px; }
    .search-inner { border-radius:16px; }
    .search-results { max-height:min(360px, 56vh); }
    .sri-img { width:46px; height:46px; }
    .sri-name { font-size:13px; }
}

/* ============================================
   CATEGORY TILES — Homepage browse grid
   ============================================ */
.cat-tiles-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:36px;
}
.cat-tile {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:28px 20px 24px;
    background:var(--bg-white);
    border:1px solid rgba(216,181,191,.26);
    border-radius:var(--r-lg);
    text-decoration:none; color:var(--text);
    transition:box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.cat-tile:hover {
    box-shadow:var(--sh-pink); transform:translateY(-4px);
    border-color:var(--border-pink); text-decoration:none;
}
.cat-tile-icon {
    width:64px; height:64px; border-radius:50%;
    background:var(--pink-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px; font-size:24px; color:var(--rose);
    transition:background var(--ease), color var(--ease);
}
.cat-tile:hover .cat-tile-icon { background:var(--rose); color:#fff; }
.cat-tile-name {
    font-family:var(--ff-serif); font-size:15px; font-weight:700;
    margin-bottom:5px; color:var(--text); line-height:1.2;
}
.cat-tile-count { font-size:11px; color:var(--text-soft); letter-spacing:.5px; margin-bottom:12px; }
.cat-tile-arrow {
    font-size:11px; color:var(--rose); font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    opacity:0; transform:translateY(4px);
    transition:opacity .2s, transform .2s;
}
.cat-tile:hover .cat-tile-arrow { opacity:1; transform:translateY(0); }
@media (max-width:960px) { .cat-tiles-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) {
    .cat-tiles-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .cat-tile { padding:20px 14px 18px; }
    .cat-tile-icon { width:52px; height:52px; font-size:20px; }
    .cat-tile-name { font-size:13px; }
}

/* ============================================
   CATEGORY PAGE — catpage-* namespace
   ============================================ */
.catpage-hero {
    background:linear-gradient(135deg, var(--bg-pink) 0%, var(--bg-white) 70%);
    padding:36px 0 32px;
    border-bottom:1px solid rgba(216,181,191,.26);
    margin-top:var(--nav-h);
}
.catpage-breadcrumb {
    display:flex; align-items:center; gap:8px;
    margin-bottom:24px; font-size:12px; font-weight:500;
    letter-spacing:.5px; text-transform:uppercase;
}
.catpage-bread-link {
    color:var(--rose); text-decoration:none;
    transition:color var(--ease);
}
.catpage-bread-link:hover { color:var(--pink-dark); text-decoration:none; }
.catpage-bread-sep { color:var(--text-soft); font-size:10px; }
.catpage-bread-current { color:var(--text-soft); }
.catpage-hero-inner { display:flex; align-items:center; gap:24px; }
.catpage-hero-icon {
    width:76px; height:76px; border-radius:50%;
    background:linear-gradient(135deg, var(--rose) 0%, var(--pink-dark) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; flex-shrink:0;
    box-shadow:0 8px 28px rgba(181,82,122,.30);
}
.catpage-hero-text { flex:1; }
.catpage-hero-eyebrow {
    font-size:11px; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; color:var(--rose); margin-bottom:6px;
}
.catpage-hero-title {
    font-family:var(--ff-serif);
    font-size:clamp(26px, 4vw, 40px);
    font-weight:800; color:var(--text);
    margin-bottom:8px; line-height:1.1; letter-spacing:-.3px;
}
.catpage-hero-desc {
    color:var(--text-soft); font-size:14px; line-height:1.65;
    max-width:540px; margin-bottom:14px;
}
.catpage-hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--pink-soft); color:var(--rose);
    font-size:11px; font-weight:700;
    padding:5px 14px; border-radius:var(--r-pill); letter-spacing:.5px;
}
/* Controls bar */
.catpage-controls {
    background:var(--bg-white);
    border-bottom:1px solid rgba(216,181,191,.26);
    position:sticky; top:var(--nav-h); z-index:90;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.catpage-controls-inner {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; gap:16px;
}
.catpage-count { font-size:13px; color:var(--text-soft); font-weight:500; white-space:nowrap; }
.catpage-sort-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.catpage-sort-label { font-size:12px; color:var(--text-soft); white-space:nowrap; font-weight:500; }
.catpage-sort-select {
    padding:8px 36px 8px 14px;
    border:1px solid rgba(216,181,191,.5); border-radius:var(--r-sm);
    background:#fff; font-size:12px; color:var(--text); font-family:var(--ff-sans);
    cursor:pointer; appearance:none; -webkit-appearance:none;
    transition:border-color var(--ease); min-width:200px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:10px;
}
.catpage-sort-select:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,160,176,.2); }
/* Product grid */
.catpage-products { padding:48px 0 80px; }
.catpage-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.catpage-grid .product-card { width:100%; }
.catpage-empty {
    text-align:center; padding:100px 20px;
    color:var(--text-soft); display:none;
}
.catpage-empty i { font-size:52px; color:var(--pink-light); margin-bottom:20px; display:block; }
.catpage-empty p { font-size:17px; margin-bottom:24px; color:var(--text-soft); }
/* Responsive */
@media (max-width:1100px) { .catpage-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) {
    .catpage-hero { padding:24px 0 20px; }
    .catpage-hero-icon { width:58px; height:58px; font-size:22px; }
    .catpage-controls-inner { flex-direction:column; align-items:flex-start; gap:10px; }
    .catpage-sort-select { min-width:160px; width:100%; }
    .catpage-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
    .catpage-products { padding:28px 0 60px; }
}
@media (max-width:420px) { .catpage-grid { grid-template-columns:1fr 1fr; gap:10px; } }

/* ============================================
   CATPAGE MOBILE 360-400px — Optimización cards
   ============================================ */
@media (max-width:400px) {
    /* Reducir padding del contenedor → gana 14px por card */
    .catpage-products .container { padding-left:14px; padding-right:14px; }

    /* Grid: gap más estrecho */
    .catpage-grid { gap:8px; }

    /* Imagen: relación más cuadrada en cards angostas */
    .catpage-grid .product-img-wrap { height:155px; }

    /* Body padding — FIX PRINCIPAL: libera 20px de contenido por card */
    .catpage-grid .product-body { padding:10px 10px 14px; }

    /* Nombre: máx 2-3 líneas, legible */
    .catpage-grid .product-name { font-size:13px; line-height:1.3; margin-bottom:4px; }

    /* Descripción: quita min-height fijo de 44px */
    .catpage-grid .product-desc { min-height:0; font-size:11.5px; line-height:1.5; }

    /* Rating compacto */
    .catpage-grid .product-rating { margin-bottom:8px; }

    /* Precios: legibles sin ocupar todo el ancho */
    .catpage-grid .price-now { font-size:15px; }
    .catpage-grid .price-old { font-size:10px; }

    /* Footer: precio arriba, botón abajo (evita wrapping caótico) */
    .catpage-grid .product-footer {
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding-top:10px;
    }

    /* Botón: ancho completo, tap target cómodo */
    .catpage-grid .btn-cart-mini {
        width:100%;
        justify-content:center;
        padding:9px 6px;
        font-size:11px;
        letter-spacing:.05em;
        min-height:34px;
        gap:5px;
    }

    /* Texto del botón: solo versión corta en cards angostas */
    .catpage-grid .btn-cart-text-full  { display:none; }
    .catpage-grid .btn-cart-text-short { display:inline; }
}

/* ============================================
   CATEGORY PAGE THEMES — Visual Identity
   ============================================ */

/* ── SKINCARE — Crema Premium ── */
body.cat-theme-skincare { background-color:#F5EFE7; }
body.cat-theme-skincare .catpage-hero {
    background:linear-gradient(135deg, #EDE3D5 0%, #FFFDF9 100%);
    border-bottom-color:rgba(155,114,83,.14);
}
body.cat-theme-skincare .catpage-hero-icon {
    background:linear-gradient(135deg, #9B7253 0%, #C4A882 100%);
    box-shadow:0 8px 28px rgba(155,114,83,.32);
}
body.cat-theme-skincare .catpage-hero-eyebrow { color:#9B7253; }
body.cat-theme-skincare .catpage-hero-badge   { background:#F0E6D8; color:#7A5A3E; }
body.cat-theme-skincare .catpage-bread-link   { color:#9B7253; }
body.cat-theme-skincare .catpage-bread-link:hover { color:#7A5A3E; }
body.cat-theme-skincare .catpage-controls     { border-bottom-color:rgba(155,114,83,.14); }
body.cat-theme-skincare .catpage-sort-select:focus { border-color:#C4A882; box-shadow:0 0 0 3px rgba(196,168,130,.20); }
body.cat-theme-skincare .product-card:hover   { box-shadow:0 24px 80px rgba(155,114,83,.16); border-color:rgba(155,114,83,.22); }
body.cat-theme-skincare .btn-cart-mini:hover  { background:#9B7253; box-shadow:0 14px 34px rgba(155,114,83,.22); }
body.cat-theme-skincare .product-cat          { color:#9B7253; }

/* ── LABIALES — Rosa Elegante ── */
body.cat-theme-labiales { background-color:#FDF2F5; }
body.cat-theme-labiales .catpage-hero {
    background:linear-gradient(135deg, #FDE6EE 0%, #FFFBFD 100%);
    border-bottom-color:rgba(191,74,101,.12);
}
body.cat-theme-labiales .catpage-hero-icon {
    background:linear-gradient(135deg, #BF4A65 0%, #E07A8E 100%);
    box-shadow:0 8px 28px rgba(191,74,101,.30);
}
body.cat-theme-labiales .catpage-hero-eyebrow { color:#BF4A65; }
body.cat-theme-labiales .catpage-hero-badge   { background:#FBDDE6; color:#9E3350; }
body.cat-theme-labiales .catpage-bread-link   { color:#BF4A65; }
body.cat-theme-labiales .catpage-bread-link:hover { color:#9E3350; }
body.cat-theme-labiales .catpage-controls     { border-bottom-color:rgba(191,74,101,.12); }
body.cat-theme-labiales .catpage-sort-select:focus { border-color:#E07A8E; box-shadow:0 0 0 3px rgba(224,122,142,.20); }
body.cat-theme-labiales .product-card:hover   { box-shadow:0 24px 80px rgba(191,74,101,.16); border-color:rgba(191,74,101,.18); }
body.cat-theme-labiales .btn-cart-mini:hover  { background:#BF4A65; box-shadow:0 14px 34px rgba(191,74,101,.22); }
body.cat-theme-labiales .product-cat          { color:#BF4A65; }

/* ── PERFUMES — Negro + Dorado ── */
body.cat-theme-perfume { background-color:#F8F5EE; }
body.cat-theme-perfume .catpage-hero {
    background:#0F0F0F;
    border-bottom-color:rgba(201,168,76,.25);
}
body.cat-theme-perfume .catpage-hero-icon {
    background:linear-gradient(135deg, #1A1A1A 0%, #3A3A3A 100%);
    box-shadow:0 8px 28px rgba(201,168,76,.40);
    border:1px solid rgba(201,168,76,.30);
}
body.cat-theme-perfume .catpage-hero-eyebrow  { color:#C9A84C; }
body.cat-theme-perfume .catpage-hero-title    { color:#FFFFFF; }
body.cat-theme-perfume .catpage-hero-desc     { color:rgba(255,255,255,.58); }
body.cat-theme-perfume .catpage-hero-badge    { background:rgba(201,168,76,.15); color:#C9A84C; border:1px solid rgba(201,168,76,.28); }
body.cat-theme-perfume .catpage-breadcrumb    { color:rgba(255,255,255,.40); }
body.cat-theme-perfume .catpage-bread-link    { color:rgba(255,255,255,.72); }
body.cat-theme-perfume .catpage-bread-link:hover { color:#C9A84C; }
body.cat-theme-perfume .catpage-bread-sep     { color:rgba(255,255,255,.22); }
body.cat-theme-perfume .catpage-bread-current { color:rgba(255,255,255,.38); }
body.cat-theme-perfume .catpage-controls      { background:#FFFDF7; border-bottom-color:rgba(201,168,76,.18); }
body.cat-theme-perfume .catpage-sort-select:focus { border-color:#C9A84C; box-shadow:0 0 0 3px rgba(201,168,76,.20); }
body.cat-theme-perfume .product-card:hover    { box-shadow:0 24px 80px rgba(201,168,76,.18); border-color:rgba(201,168,76,.22); }
body.cat-theme-perfume .btn-cart-mini:hover   { background:#C9A84C; color:#111; box-shadow:0 14px 34px rgba(201,168,76,.28); }
body.cat-theme-perfume .product-cat           { color:#9A7B2A; }
body.cat-theme-perfume .badge-best            { background:#111111; color:#C9A84C; }

/* ── MAQUILLAJE FACIAL — Nude Rosado ── */
/* Covers: bases · correctores · rubores · iluminadores · paletas · maquillaje */
body.cat-theme-maquillaje { background-color:#FBF5F2; }
body.cat-theme-maquillaje .catpage-hero {
    background:linear-gradient(135deg, #F5E8E0 0%, #FFFDF9 100%);
    border-bottom-color:rgba(194,122,90,.12);
}
body.cat-theme-maquillaje .catpage-hero-icon {
    background:linear-gradient(135deg, #C27A5A 0%, #DBA080 100%);
    box-shadow:0 8px 28px rgba(194,122,90,.28);
}
body.cat-theme-maquillaje .catpage-hero-eyebrow { color:#C27A5A; }
body.cat-theme-maquillaje .catpage-hero-badge   { background:#F5E4D8; color:#8B4E35; }
body.cat-theme-maquillaje .catpage-bread-link   { color:#C27A5A; }
body.cat-theme-maquillaje .catpage-bread-link:hover { color:#8B4E35; }
body.cat-theme-maquillaje .catpage-controls     { border-bottom-color:rgba(194,122,90,.12); }
body.cat-theme-maquillaje .catpage-sort-select:focus { border-color:#DBA080; box-shadow:0 0 0 3px rgba(219,160,128,.20); }
body.cat-theme-maquillaje .product-card:hover   { box-shadow:0 24px 80px rgba(194,122,90,.15); border-color:rgba(194,122,90,.18); }
body.cat-theme-maquillaje .btn-cart-mini:hover  { background:#C27A5A; box-shadow:0 14px 34px rgba(194,122,90,.22); }
body.cat-theme-maquillaje .product-cat          { color:#C27A5A; }

/* ── CUIDADO CAPILAR — Verde Salvia ── */
body.cat-theme-capilar { background-color:#F1F5F0; }
body.cat-theme-capilar .catpage-hero {
    background:linear-gradient(135deg, #E2EDE0 0%, #F7FAF6 100%);
    border-bottom-color:rgba(91,140,82,.14);
}
body.cat-theme-capilar .catpage-hero-icon {
    background:linear-gradient(135deg, #5B8C52 0%, #7AAE71 100%);
    box-shadow:0 8px 28px rgba(91,140,82,.28);
}
body.cat-theme-capilar .catpage-hero-eyebrow { color:#5B8C52; }
body.cat-theme-capilar .catpage-hero-badge   { background:#D6E8D2; color:#376B2E; }
body.cat-theme-capilar .catpage-bread-link   { color:#5B8C52; }
body.cat-theme-capilar .catpage-bread-link:hover { color:#376B2E; }
body.cat-theme-capilar .catpage-controls     { border-bottom-color:rgba(91,140,82,.14); }
body.cat-theme-capilar .catpage-sort-select:focus { border-color:#7AAE71; box-shadow:0 0 0 3px rgba(122,174,113,.20); }
body.cat-theme-capilar .product-card:hover   { box-shadow:0 24px 80px rgba(91,140,82,.14); border-color:rgba(91,140,82,.18); }
body.cat-theme-capilar .btn-cart-mini:hover  { background:#5B8C52; box-shadow:0 14px 34px rgba(91,140,82,.22); }
body.cat-theme-capilar .product-cat          { color:#5B8C52; }

/* ── UÑAS — Rosa Perlado ── */
body.cat-theme-unas { background-color:#FDF1FA; }
body.cat-theme-unas .catpage-hero {
    background:linear-gradient(135deg, #F8E3F5 0%, #FFF8FE 100%);
    border-bottom-color:rgba(192,98,181,.12);
}
body.cat-theme-unas .catpage-hero-icon {
    background:linear-gradient(135deg, #C062B5 0%, #D880C8 100%);
    box-shadow:0 8px 28px rgba(192,98,181,.28);
}
body.cat-theme-unas .catpage-hero-eyebrow { color:#C062B5; }
body.cat-theme-unas .catpage-hero-badge   { background:#F5D5F0; color:#8C3D84; }
body.cat-theme-unas .catpage-bread-link   { color:#C062B5; }
body.cat-theme-unas .catpage-bread-link:hover { color:#8C3D84; }
body.cat-theme-unas .catpage-controls     { border-bottom-color:rgba(192,98,181,.12); }
body.cat-theme-unas .catpage-sort-select:focus { border-color:#D880C8; box-shadow:0 0 0 3px rgba(216,128,200,.20); }
body.cat-theme-unas .product-card:hover   { box-shadow:0 24px 80px rgba(192,98,181,.15); border-color:rgba(192,98,181,.18); }
body.cat-theme-unas .btn-cart-mini:hover  { background:#C062B5; box-shadow:0 14px 34px rgba(192,98,181,.22); }
body.cat-theme-unas .product-cat          { color:#C062B5; }

/* ── ACCESORIOS — Blanco Premium / Negro Elegante ── */
body.cat-theme-accesorios { background-color:#FFFFFF; }
body.cat-theme-accesorios .catpage-hero {
    background:linear-gradient(135deg, #F0F0F0 0%, #FAFAFA 100%);
    border-bottom-color:rgba(0,0,0,.08);
}
body.cat-theme-accesorios .catpage-hero-icon {
    background:linear-gradient(135deg, #1A1A1A 0%, #3C3C3C 100%);
    box-shadow:0 8px 28px rgba(0,0,0,.20);
}
body.cat-theme-accesorios .catpage-hero-eyebrow { color:#555555; }
body.cat-theme-accesorios .catpage-hero-badge   { background:#1A1A1A; color:#FFFFFF; }
body.cat-theme-accesorios .catpage-bread-link   { color:#333333; }
body.cat-theme-accesorios .catpage-bread-link:hover { color:#000000; }
body.cat-theme-accesorios .catpage-controls     { background:#F8F8F8; border-bottom-color:rgba(0,0,0,.08); }
body.cat-theme-accesorios .catpage-sort-select:focus { border-color:#333333; box-shadow:0 0 0 3px rgba(0,0,0,.10); }
body.cat-theme-accesorios .product-card:hover   { box-shadow:0 24px 80px rgba(0,0,0,.10); border-color:rgba(0,0,0,.12); }
body.cat-theme-accesorios .btn-cart-mini:hover  { background:#1A1A1A; box-shadow:0 14px 34px rgba(0,0,0,.18); }
body.cat-theme-accesorios .product-cat          { color:#555555; }

/* ====================================================
   PREMIUM CARD ENHANCEMENTS
   ==================================================== */

/* ── Transition refinement: 250ms ── */
.product-card { transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1); }
.product-card:hover { transform:translateY(-8px); }
.product-card:hover .product-img { transform:scale(1.05); }

/* ── Segunda imagen (fade suave en hover) ── */
.product-img-hover {
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%;
    object-fit:contain; object-position:center;
    padding:14px; box-sizing:border-box;
    opacity:0;
    transition:opacity .38s ease;
    pointer-events:none;
}
.product-card:hover .product-img-hover { opacity:1; }

/* ── Botón Vista Rápida (desliza desde abajo al hover) ── */
.product-qv-btn {
    position:absolute;
    bottom:0; left:0; right:0; z-index:5;
    padding:9px 16px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:none; cursor:pointer;
    font-family:var(--ff-sans); font-size:10.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text);
    display:flex; align-items:center; justify-content:center; gap:7px;
    opacity:0; transform:translateY(100%);
    transition:opacity .22s ease, transform .22s ease, color .18s;
}
.product-qv-btn i { font-size:11px; color:var(--rose); transition:color .18s; }
.product-card:hover .product-qv-btn { opacity:1; transform:translateY(0); }
.product-qv-btn:hover { background:#fff; color:var(--rose); }
@media (hover:none) { .product-qv-btn { display:none; } }

/* ── Indicador de stock ── */
.product-stock {
    display:inline-flex; align-items:center; gap:5px;
    font-size:10.5px; font-weight:600; letter-spacing:.03em;
    margin-bottom:8px;
}
.product-stock::before {
    content:''; display:inline-block;
    width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.product-stock.stock-ok  { color:#2a7a4b; }
.product-stock.stock-ok::before  { background:#2a7a4b; box-shadow:0 0 0 2px rgba(42,122,75,.18); }
.product-stock.stock-low { color:#9A6200; }
.product-stock.stock-low::before { background:#E09B00; box-shadow:0 0 0 2px rgba(224,155,0,.18); }

/* ── Badges premium ── */
.badge-viral   { background:linear-gradient(135deg,#FF4D8D 0%,#FF8500 100%); color:#fff; }
.badge-clasico { background:rgba(255,255,255,.9); color:var(--text); border:1px solid rgba(0,0,0,.10); }

/* ── Btn carrito: texto completo desktop / corto mobile ── */
.btn-cart-text-full  { display:inline; }
.btn-cart-text-short { display:none; }
@media (max-width:540px) {
    .btn-cart-text-full  { display:none; }
    .btn-cart-text-short { display:inline; }
    .btn-cart-mini i { font-size:13px; }
}

/* ====================================================
   MODAL VISTA RÁPIDA
   ==================================================== */
.qv-modal {
    display:none; position:fixed; inset:0; z-index:2000;
    align-items:center; justify-content:center; padding:20px;
}
.qv-modal.open { display:flex; }
.qv-backdrop {
    position:absolute; inset:0;
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    animation:fadeIn .2s ease;
}
.qv-inner {
    position:relative; z-index:1;
    background:var(--bg-white); border-radius:var(--r-lg);
    max-width:780px; width:100%; max-height:90vh;
    display:grid; grid-template-columns:1fr 1fr;
    box-shadow:0 40px 100px rgba(0,0,0,.22);
    animation:slideUp .26s ease forwards;
    overflow:hidden;
}
.qv-close {
    position:absolute; top:14px; right:14px; z-index:10;
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,0,0,.07); border:none; cursor:pointer;
    font-size:17px; color:var(--text); line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--ease);
}
.qv-close:hover { background:rgba(0,0,0,.14); }
.qv-img-col {
    background:radial-gradient(ellipse at center, #fff 0%, rgba(248,237,240,.82) 100%);
    display:flex; align-items:center; justify-content:center;
    padding:36px 28px; min-height:300px;
}
.qv-img { width:100%; max-height:320px; object-fit:contain; display:block; }
.qv-info-col {
    padding:36px 32px 32px; overflow-y:auto;
    display:flex; flex-direction:column; gap:10px;
    scrollbar-width:thin; scrollbar-color:var(--pink-light) transparent;
}
.qv-eyebrow  { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--rose); }
.qv-badge-wrap { display:flex; gap:8px; flex-wrap:wrap; min-height:1px; }
.qv-name  { font-family:var(--ff-serif); font-size:20px; font-weight:700; line-height:1.3; color:var(--text); }
.qv-divider { width:36px; height:2px; background:var(--gold-grad); border-radius:2px; }
.qv-rating { display:flex; align-items:center; gap:6px; }
.qv-stars  { color:var(--gold); font-size:13px; letter-spacing:1.5px; }
.qv-review-count { font-size:11.5px; color:var(--text-soft); }
.qv-price-wrap { display:flex; align-items:baseline; gap:10px; }
.qv-price-now { font-family:var(--ff-serif); font-size:26px; font-weight:700; color:var(--rose); }
.qv-price-old { font-size:13px; color:var(--text-soft); text-decoration:line-through; }
.qv-desc  { font-size:13px; color:var(--text-mid); line-height:1.8; }
.qv-cart-btn {
    margin-top:6px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 24px; width:100%;
    background:var(--rose); color:#fff;
    font-size:11.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    border-radius:var(--r-pill); border:none; cursor:pointer;
    box-shadow:0 6px 24px rgba(181,82,122,.30);
    transition:all var(--ease);
}
.qv-cart-btn:hover { background:var(--pink-dark); transform:translateY(-2px); box-shadow:0 10px 32px rgba(181,82,122,.38); }
.qv-cart-btn:active { transform:translateY(0); }
/* Temas en modal vista rápida */
body.cat-theme-skincare   .qv-cart-btn { background:#9B7253; box-shadow:0 6px 24px rgba(155,114,83,.30); }
body.cat-theme-skincare   .qv-cart-btn:hover { background:#7A5A3E; }
body.cat-theme-labiales   .qv-cart-btn { background:#BF4A65; box-shadow:0 6px 24px rgba(191,74,101,.30); }
body.cat-theme-labiales   .qv-cart-btn:hover { background:#9B3550; }
body.cat-theme-perfume    .qv-cart-btn { background:#C9A84C; color:#111; box-shadow:0 6px 24px rgba(201,168,76,.30); }
body.cat-theme-perfume    .qv-cart-btn:hover { background:#A8882E; }
body.cat-theme-maquillaje .qv-cart-btn { background:#C27A5A; box-shadow:0 6px 24px rgba(194,122,90,.30); }
body.cat-theme-maquillaje .qv-cart-btn:hover { background:#A0603E; }
body.cat-theme-capilar    .qv-cart-btn { background:#5B8C52; box-shadow:0 6px 24px rgba(91,140,82,.30); }
body.cat-theme-capilar    .qv-cart-btn:hover { background:#3E6B36; }
body.cat-theme-unas       .qv-cart-btn { background:#C062B5; box-shadow:0 6px 24px rgba(192,98,181,.30); }
body.cat-theme-unas       .qv-cart-btn:hover { background:#9E4A93; }
body.cat-theme-accesorios .qv-cart-btn { background:#1A1A1A; box-shadow:0 6px 24px rgba(0,0,0,.22); }
body.cat-theme-accesorios .qv-cart-btn:hover { background:#333; }
@media (max-width:640px) {
    .qv-inner { grid-template-columns:1fr; overflow-y:auto; }
    .qv-img-col { min-height:200px; padding:24px 20px; }
    .qv-info-col { padding:24px 22px; }
    .qv-name { font-size:18px; }
    .qv-price-now { font-size:22px; }
}

/* ====================================================
   CATPAGE — PRODUCTO MÁS VENDIDO
   ==================================================== */
.catpage-topseller {
    margin-bottom:40px;
    border-radius:var(--r-lg); overflow:hidden;
    border:1px solid rgba(216,181,191,.26);
    background:var(--bg-white);
    box-shadow:0 8px 40px rgba(202,153,169,.09);
}
.catpage-topseller-inner {
    display:grid; grid-template-columns:320px 1fr;
    min-height:300px;
}
.catpage-topseller-img-col {
    background:radial-gradient(ellipse at center, #fff 0%, rgba(248,237,240,.82) 100%);
    display:flex; align-items:center; justify-content:center;
    padding:28px; overflow:hidden;
}
.catpage-topseller-img { width:100%; max-height:280px; object-fit:contain; display:block; }
.catpage-topseller-info {
    padding:36px 44px 36px 36px;
    display:flex; flex-direction:column; justify-content:center; gap:12px;
}
.catpage-topseller-eyebrow {
    display:inline-flex; align-items:center; gap:6px;
    font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    color:#9A7B2A; background:rgba(201,168,76,.10);
    padding:5px 13px; border-radius:var(--r-pill);
    border:1px solid rgba(201,168,76,.28); width:fit-content;
}
.catpage-topseller-name { font-family:var(--ff-serif); font-size:24px; font-weight:700; color:var(--text); line-height:1.3; }
.catpage-topseller-rating { display:flex; align-items:center; gap:7px; }
.catpage-topseller-stars { color:var(--gold); font-size:14px; letter-spacing:2px; }
.catpage-topseller-rc { font-size:12px; color:var(--text-soft); }
.catpage-topseller-desc { font-size:13.5px; color:var(--text-mid); line-height:1.8; max-width:380px; }
.catpage-topseller-price { font-family:var(--ff-serif); font-size:30px; font-weight:700; color:var(--rose); }
.catpage-topseller-btn {
    display:inline-flex; align-items:center; gap:10px; width:fit-content;
    padding:13px 30px;
    background:var(--gold-grad); color:var(--bg-dark);
    font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    border-radius:var(--r-sm); border:none; cursor:pointer;
    box-shadow:0 6px 24px rgba(201,168,76,.30);
    transition:all var(--ease);
}
.catpage-topseller-btn:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(201,168,76,.38); }
.catpage-topseller-btn:active { transform:translateY(0); }
@media (max-width:860px) {
    .catpage-topseller-inner { grid-template-columns:1fr; }
    .catpage-topseller-img-col { min-height:180px; padding:24px; }
    .catpage-topseller-info { padding:28px 24px; }
    .catpage-topseller-name { font-size:20px; }
    .catpage-topseller-price { font-size:24px; }
}

/* ====================================================
   PRODUCTO.HTML — FICHA DE PRODUCTO (PDP)
   ==================================================== */

/* ── Breadcrumb ── */
.pdp-breadcrumb {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-top:var(--nav-h);
    padding:22px 0 0;
    font-size:12px; color:var(--text-soft);
}
.pdp-bread-sep { font-size:8px; color:var(--text-soft); opacity:.6; }
.pdp-bread-link { color:var(--text-soft); transition:color .2s; }
.pdp-bread-link:hover { color:var(--rose); }
.pdp-bread-current { color:var(--text-mid); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* ── Section wrapper ── */
.pdp-section { padding:28px 0 72px; }

/* ── 2-col layout ── */
.pdp-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:start;
    margin-top:28px;
}

/* ── Gallery — sticky on desktop ── */
.pdp-gallery { position:sticky; top:calc(var(--nav-h) + 18px); }

.pdp-gallery-main {
    position:relative;
    border-radius:var(--r-lg); overflow:hidden;
    background:radial-gradient(ellipse at center, #fff 0%, rgba(248,237,240,.82) 100%);
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--sh-sm);
    cursor:zoom-in;
}
.pdp-gallery-img {
    width:100%; height:100%;
    object-fit:contain; padding:32px;
    transition:opacity .26s ease, transform .4s ease;
}
.pdp-gallery-img.fading { opacity:0; }
.pdp-gallery-main:hover .pdp-gallery-img { transform:scale(1.04); }

.pdp-gal-btn {
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.08); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 12px rgba(0,0,0,.10);
    transition:all .2s; font-size:12px; color:var(--text);
}
.pdp-gal-btn:hover { background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.16); color:var(--rose); }
.pdp-gal-btn.pdp-gal-prev { left:12px; }
.pdp-gal-btn.pdp-gal-next { right:12px; }
.pdp-gal-btn.pdp-hidden { display:none; }

.pdp-gallery-counter {
    position:absolute; bottom:12px; right:12px; z-index:5;
    background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(4px);
    font-size:10px; font-weight:700; letter-spacing:.05em;
    padding:4px 10px; border-radius:var(--r-pill);
}
.pdp-gallery-counter.pdp-hidden { display:none; }

.pdp-gallery-thumbs { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.pdp-gallery-thumb {
    width:68px; height:68px; border-radius:var(--r-md);
    border:2px solid transparent; cursor:pointer; overflow:hidden;
    background:var(--bg-cream); transition:border-color .2s, box-shadow .2s; flex-shrink:0;
}
.pdp-gallery-thumb:hover { border-color:var(--pink); box-shadow:0 2px 8px rgba(181,82,122,.18); }
.pdp-gallery-thumb.active { border-color:var(--rose); box-shadow:0 2px 10px rgba(181,82,122,.28); }
.pdp-gallery-thumb img { width:100%; height:100%; object-fit:contain; padding:6px; display:block; }

/* ── Info col ── */
.pdp-info { display:flex; flex-direction:column; gap:16px; }

.pdp-badge-wrap { display:flex; gap:8px; flex-wrap:wrap; min-height:22px; }
.pdp-badge-wrap .product-badge { position:static; display:inline-block; }

.pdp-eyebrow {
    font-size:10px; font-weight:700; letter-spacing:2.5px;
    text-transform:uppercase; color:var(--rose); margin:0;
}
.pdp-name {
    font-family:var(--ff-serif); font-size:32px; font-weight:700;
    line-height:1.25; color:var(--text); margin:0;
}
.pdp-brand {
    font-size:10.5px; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; color:var(--text-soft); margin:0;
}

.pdp-rating-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pdp-stars { color:var(--gold); font-size:15px; letter-spacing:2px; }
.pdp-rating-score { font-size:14px; font-weight:800; color:var(--text); }
.pdp-rating-count { font-size:12px; color:var(--text-soft); cursor:pointer; }
.pdp-rating-count:hover { color:var(--rose); text-decoration:underline; }

.pdp-stock {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600; letter-spacing:.04em;
}
.pdp-stock::before {
    content:''; display:inline-block; width:7px; height:7px;
    border-radius:50%; flex-shrink:0;
}
.pdp-stock.stock-ok  { color:#2a7a4b; }
.pdp-stock.stock-ok::before  { background:#2a7a4b; box-shadow:0 0 0 2px rgba(42,122,75,.18); }
.pdp-stock.stock-low { color:#9A6200; }
.pdp-stock.stock-low::before { background:#E09B00; box-shadow:0 0 0 2px rgba(224,155,0,.18); }

.pdp-divider { width:40px; height:2px; background:var(--gold-grad); border-radius:2px; }

.pdp-price-row { display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; }
.pdp-price {
    font-family:var(--ff-serif); font-size:40px; font-weight:700;
    color:var(--rose); line-height:1;
}
.pdp-price-old {
    font-size:18px; color:var(--text-soft); text-decoration:line-through;
}
.pdp-price-pending { font-size:14px; color:var(--text-soft); font-family:var(--ff-sans); }

/* ── CTA buttons ── */
.pdp-cta-row { display:flex; flex-direction:column; gap:10px; margin-top:4px; }

.pdp-btn-add {
    display:flex; align-items:center; justify-content:center; gap:11px;
    padding:18px 28px; width:100%;
    background:var(--rose); color:#fff;
    font-family:var(--ff-sans); font-size:12px; font-weight:800;
    letter-spacing:2px; text-transform:uppercase;
    border-radius:var(--r-pill); border:none; cursor:pointer;
    box-shadow:0 8px 28px rgba(181,82,122,.32);
    transition:all var(--ease);
}
.pdp-btn-add:hover { background:var(--pink-dark); transform:translateY(-2px); box-shadow:0 14px 40px rgba(181,82,122,.40); }
.pdp-btn-add:active { transform:translateY(0); box-shadow:0 4px 16px rgba(181,82,122,.28); }

.pdp-btn-buy {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 28px; width:100%;
    background:transparent; color:var(--text);
    font-family:var(--ff-sans); font-size:12px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    border-radius:var(--r-pill); border:2px solid rgba(0,0,0,.13); cursor:pointer;
    transition:all var(--ease);
}
.pdp-btn-buy:hover { border-color:var(--rose); color:var(--rose); background:rgba(181,82,122,.04); }
.pdp-btn-buy:active { transform:translateY(1px); }

/* ── Trust badges ── */
.pdp-trust {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
    padding:18px 0 2px;
    border-top:1px solid var(--border);
}
.pdp-trust-item {
    display:flex; flex-direction:column; align-items:center; gap:7px;
    text-align:center; padding:13px 8px;
    border-radius:var(--r-md);
    background:var(--bg-cream); border:1px solid rgba(0,0,0,.04);
    transition:box-shadow .2s;
}
.pdp-trust-item:hover { box-shadow:var(--sh-xs); }
.pdp-trust-item i { font-size:18px; color:var(--rose); }
.pdp-trust-item span { font-size:9.5px; font-weight:600; letter-spacing:.04em; color:var(--text-mid); line-height:1.35; }

/* ====================================================
   DESCRIPTION TABS
   ==================================================== */
.pdp-tabs-section {
    padding:52px 0 64px;
    border-top:1px solid var(--border);
    background:var(--bg-white);
}
.pdp-tabs-nav {
    display:flex; gap:0;
    border-bottom:2px solid var(--border);
    margin-bottom:40px;
    overflow-x:auto; scrollbar-width:none;
}
.pdp-tabs-nav::-webkit-scrollbar { display:none; }
.pdp-tab-btn {
    padding:14px 28px; cursor:pointer;
    font-family:var(--ff-sans); font-size:10.5px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-soft); border:none; background:none;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    white-space:nowrap; transition:color .2s, border-color .2s;
    flex-shrink:0;
}
.pdp-tab-btn:hover { color:var(--rose); }
.pdp-tab-btn.active { color:var(--rose); border-bottom-color:var(--rose); }

.pdp-tab-panel { display:none; animation:fadeInUp .28s ease; }
.pdp-tab-panel.active { display:block; }

.pdp-tab-desc {
    font-size:15px; line-height:1.9; color:var(--text-mid); max-width:740px;
}
.pdp-benefits-list {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:12px; list-style:none; padding:0; margin:0;
}
.pdp-benefit-item {
    display:flex; align-items:flex-start; gap:13px;
    padding:15px 18px;
    background:var(--bg-cream); border-radius:var(--r-md);
    border:1px solid rgba(0,0,0,.04);
}
.pdp-benefit-item i { color:var(--rose); font-size:12px; flex-shrink:0; margin-top:3px; }
.pdp-benefit-item span { font-size:13.5px; color:var(--text-mid); line-height:1.65; }

.pdp-uso-text { font-size:15px; line-height:1.9; color:var(--text-mid); max-width:700px; }

.pdp-ideal-grid { display:flex; flex-wrap:wrap; gap:10px; }
.pdp-ideal-tag {
    padding:8px 20px;
    background:var(--bg-pink); border:1px solid var(--border-pink);
    border-radius:var(--r-pill);
    font-size:12.5px; color:var(--rose); font-weight:600;
    transition:background .2s;
}
.pdp-ideal-tag:hover { background:var(--pink-soft); }

/* ====================================================
   SECCIÓN TÍTULOS PDP
   ==================================================== */
.pdp-section-title {
    font-family:var(--ff-serif); font-size:28px; font-weight:700;
    color:var(--text); margin-bottom:36px;
}
.pdp-section-title::after {
    content:''; display:block; width:36px; height:2px;
    background:var(--gold-grad); border-radius:2px; margin-top:10px;
}

/* ====================================================
   PDP SLIDERS — RUTINA / RELACIONADOS / TAMBIÉN COMPRARON
   ==================================================== */
.pdp-slider-section {
    padding:64px 0;
    border-top:1px solid var(--border);
}
.pdp-also-section { background:var(--bg-cream); }

.pdp-slider-header { margin-bottom:24px; }
.pdp-slider-header .pdp-section-title { margin-bottom:0; }
.pdp-slider-eyebrow {
    display:block;
    font-size:10px; font-weight:700; letter-spacing:2.5px;
    text-transform:uppercase; color:var(--rose); margin:0 0 6px;
}

.pdp-slider-wrap { position:relative; }

.pdp-slider-track {
    display:flex; gap:20px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    padding:10px 4px 24px;
}
.pdp-slider-track::-webkit-scrollbar { display:none; }
.pdp-slider-track .product-card {
    flex:0 0 262px; min-width:0;
    scroll-snap-align:start;
}

.pdp-slider-btn {
    position:absolute; top:calc(50% - 12px); z-index:6;
    width:48px; height:48px; border-radius:50%;
    background:#fff;
    border:1px solid rgba(216,181,191,.30);
    box-shadow:0 4px 24px rgba(0,0,0,.11);
    color:var(--text); font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transform:translateY(-50%);
    transition:background .18s, box-shadow .18s, color .18s, opacity .2s, transform .2s;
}
.pdp-slider-btn:hover {
    background:var(--rose); color:#fff;
    box-shadow:0 8px 28px rgba(181,82,122,.30);
    transform:translateY(-50%) scale(1.08);
}
.pdp-slider-prev { left:-26px; }
.pdp-slider-next { right:-26px; }
.pdp-slider-btn.pdp-slider-btn--hidden {
    opacity:0; pointer-events:none;
    transform:translateY(-50%) scale(.88);
}

/* ====================================================
   REVIEWS
   ==================================================== */
.pdp-reviews-section {
    padding:64px 0;
    border-top:1px solid var(--border);
    background:var(--bg-white);
}
.pdp-reviews-summary {
    display:flex; align-items:center; gap:40px;
    padding:32px 36px;
    background:var(--bg-cream); border-radius:var(--r-lg);
    border:1px solid var(--border);
    margin-bottom:44px; flex-wrap:wrap;
}
.pdp-rev-score-col { text-align:center; }
.pdp-rev-big { font-family:var(--ff-serif); font-size:64px; font-weight:700; color:var(--text); line-height:1; }
.pdp-rev-stars-row { color:var(--gold); font-size:20px; letter-spacing:3px; margin:6px 0 4px; }
.pdp-rev-total { font-size:11.5px; color:var(--text-soft); font-weight:600; }
.pdp-rev-bars { flex:1; min-width:220px; }
.pdp-rev-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pdp-rev-bar-label { font-size:11px; color:var(--text-soft); width:44px; text-align:right; white-space:nowrap; }
.pdp-rev-bar-track { flex:1; height:6px; background:rgba(0,0,0,.08); border-radius:3px; overflow:hidden; }
.pdp-rev-bar-fill { height:100%; background:var(--gold); border-radius:3px; }
.pdp-rev-bar-count { font-size:11px; color:var(--text-soft); width:28px; }

.pdp-reviews-list { display:flex; flex-direction:column; gap:18px; }
.pdp-review-card {
    background:var(--bg-cream); border-radius:var(--r-lg);
    padding:26px 30px; border:1px solid var(--border); box-shadow:var(--sh-xs);
    animation:fadeInUp .4s ease;
}
.pdp-review-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:10px; flex-wrap:wrap; gap:6px;
}
.pdp-reviewer-info { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pdp-reviewer-name { font-weight:700; font-size:14px; color:var(--text); }
.pdp-reviewer-city { font-size:11px; color:var(--text-soft); }
.pdp-review-date { font-size:11px; color:var(--text-soft); white-space:nowrap; }
.pdp-review-stars { color:var(--gold); font-size:12px; letter-spacing:1.5px; margin-bottom:10px; }
.pdp-review-text { font-size:13.5px; color:var(--text-mid); line-height:1.82; }
.pdp-review-verified {
    display:inline-flex; align-items:center; gap:5px; margin-top:12px;
    font-size:10px; font-weight:700; letter-spacing:.05em; color:#2a7a4b;
}
.pdp-review-verified i { font-size:10px; }

/* ====================================================
   RESPONSIVE PDP
   ==================================================== */
@media (max-width:1024px) {
    .pdp-layout { gap:44px; }
    .pdp-name { font-size:27px; }
    .pdp-price { font-size:34px; }
}
@media (max-width:860px) {
    .pdp-layout { grid-template-columns:1fr; gap:28px; }
    .pdp-gallery { position:static; }
    .pdp-name { font-size:23px; }
    .pdp-price { font-size:30px; }
    .pdp-trust { grid-template-columns:repeat(2,1fr); }
    .pdp-reviews-summary { gap:24px; padding:24px; }
    .pdp-review-card { padding:22px 20px; }
    /* Sliders: flechas ocultas — swipe táctil */
    .pdp-slider-btn { display:none; }
    .pdp-slider-track .product-card { flex:0 0 210px; }
    .pdp-slider-section { padding:44px 0; }
}
@media (max-width:640px) {
    .pdp-gallery-thumb { width:58px; height:58px; }
    .pdp-name { font-size:20px; }
    .pdp-price { font-size:26px; }
    .pdp-tab-btn { padding:12px 16px; font-size:10px; }
    .pdp-rev-big { font-size:50px; }
    .pdp-slider-track .product-card { flex:0 0 185px; }
    .pdp-slider-track { gap:14px; }
    .pdp-slider-section { padding:36px 0; }
}
@media (max-width:480px) {
    .pdp-trust { grid-template-columns:repeat(2,1fr); gap:6px; }
    .pdp-trust-item { padding:10px 6px; }
    .pdp-slider-track .product-card { flex:0 0 170px; }
}

/* ============================================================
   PDP SLIDERS MOBILE 360-500px — Optimización cards
   ============================================================ */
@media (max-width:500px) {
    /* Body padding — FIX PRINCIPAL: libera 20px de contenido por card */
    .pdp-slider-track .product-body { padding:10px 10px 14px; }

    /* Nombre: máx 2-3 líneas, legible */
    .pdp-slider-track .product-name { font-size:13px; line-height:1.3; margin-bottom:4px; }

    /* Descripción: quita min-height fijo de 44px */
    .pdp-slider-track .product-desc { min-height:0; font-size:11.5px; line-height:1.5; }

    /* Rating compacto */
    .pdp-slider-track .product-rating { margin-bottom:8px; }

    /* Precios: legibles sin ocupar todo el ancho */
    .pdp-slider-track .price-now { font-size:15px; }
    .pdp-slider-track .price-old { font-size:10px; }

    /* Footer: precio arriba, botón abajo (evita wrapping caótico) */
    .pdp-slider-track .product-footer {
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding-top:10px;
    }

    /* Botón: ancho completo, tap target cómodo */
    .pdp-slider-track .btn-cart-mini {
        width:100%;
        justify-content:center;
        padding:9px 6px;
        font-size:11px;
        letter-spacing:.05em;
        min-height:34px;
        gap:5px;
    }

    /* Texto: solo versión corta en cards angostas */
    .pdp-slider-track .btn-cart-text-full  { display:none; }
    .pdp-slider-track .btn-cart-text-short { display:inline; }
}

@media (max-width:480px) {
    /* Imagen: relación más cuadrada en cards de 170px */
    .pdp-slider-track .product-img-wrap { height:160px; }
}

/* ====================================================
   LIGHTBOX — VISOR FULLSCREEN
   ==================================================== */
.pdp-lightbox {
    position:fixed; inset:0; z-index:9900;
    background:rgba(10,4,8,.93);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .24s ease, visibility .24s ease;
}
.pdp-lightbox.open {
    opacity:1; visibility:visible; pointer-events:auto;
}
.pdp-lightbox-img-wrap {
    max-width:min(88vw,900px); max-height:80vh;
    display:flex; align-items:center; justify-content:center;
    transform:scale(.94);
    transition:transform .28s cubic-bezier(.34,1.36,.64,1);
    will-change:transform;
}
.pdp-lightbox.open .pdp-lightbox-img-wrap { transform:scale(1); }
.pdp-lightbox-img {
    max-width:100%; max-height:80vh;
    object-fit:contain; border-radius:var(--r-md);
    display:block; user-select:none;
    transition:opacity .15s ease;
}
.pdp-lightbox-img.lb-fading { opacity:0; }

.pdp-lightbox-close {
    position:fixed; top:18px; right:20px; z-index:9910;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.14); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2); color:#fff;
    font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s, transform .2s;
}
.pdp-lightbox-close:hover { background:rgba(255,255,255,.28); transform:scale(1.1) rotate(90deg); }

.pdp-lightbox-nav {
    position:fixed; top:50%; z-index:9910;
    width:50px; height:50px; border-radius:50%;
    background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.18); color:#fff;
    font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s, transform .2s;
}
.pdp-lightbox-nav.lb-prev { left:18px; transform:translateY(-50%); }
.pdp-lightbox-nav.lb-next { right:18px; transform:translateY(-50%); }
.pdp-lightbox-nav.lb-prev:hover { background:rgba(255,255,255,.24); transform:translateY(-50%) scale(1.1); }
.pdp-lightbox-nav.lb-next:hover { background:rgba(255,255,255,.24); transform:translateY(-50%) scale(1.1); }
.pdp-lightbox-nav.pdp-hidden { display:none; }

.pdp-lightbox-counter {
    position:fixed; bottom:78px; left:50%; transform:translateX(-50%); z-index:9910;
    background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.16); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.09em;
    padding:5px 16px; border-radius:var(--r-pill);
}
.pdp-lightbox-counter.pdp-hidden { display:none; }

.pdp-lightbox-thumbs {
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:9910;
    display:flex; gap:8px; max-width:90vw;
    overflow-x:auto; scrollbar-width:none; padding:4px 6px;
}
.pdp-lightbox-thumbs::-webkit-scrollbar { display:none; }
.pdp-lightbox-thumbs.pdp-hidden { display:none; }
.pdp-lightbox-thumb {
    width:50px; height:50px; flex-shrink:0;
    border-radius:6px; overflow:hidden; cursor:pointer;
    border:2px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    transition:border-color .18s, transform .18s;
}
.pdp-lightbox-thumb:hover { border-color:rgba(255,255,255,.55); transform:scale(1.07); }
.pdp-lightbox-thumb.active { border-color:var(--rose); }
.pdp-lightbox-thumb img { width:100%; height:100%; object-fit:contain; padding:3px; display:block; }

@media (max-width:640px) {
    .pdp-lightbox-nav.lb-prev { left:6px; }
    .pdp-lightbox-nav.lb-next { right:6px; }
    .pdp-lightbox-nav { width:40px; height:40px; font-size:13px; }
    .pdp-lightbox-close { top:10px; right:10px; width:40px; height:40px; }
    .pdp-lightbox-img-wrap { max-width:96vw; }
    .pdp-lightbox-counter { bottom:68px; }
    .pdp-lightbox-thumbs { bottom:10px; }
    .pdp-lightbox-thumb { width:42px; height:42px; }
}

/* ====================================================
   WISHLIST / FAVORITOS
   ==================================================== */

/* ── Nav badge ── */
.nav-wishlist { position:relative; }
.wishlist-count {
    position:absolute; top:-4px; right:-4px;
    width:17px; height:17px;
    background:var(--rose); color:#fff;
    font-size:9px; font-weight:800; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:transform var(--ease-spring), opacity var(--ease);
    opacity:0; transform:scale(0);
    pointer-events:none;
}

/* ── Heart bounce animation ── */
@keyframes wlHeartBounce {
    0%   { transform:scale(1); }
    30%  { transform:scale(1.5); }
    60%  { transform:scale(.85); }
    80%  { transform:scale(1.15); }
    100% { transform:scale(1); }
}
.product-wishlist.wl-bounce i {
    animation:wlHeartBounce .55s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Wishlist toast (slides from left) ── */
.wishlist-toast {
    position:fixed; bottom:100px; left:28px; z-index:996;
    background:var(--bg-white); border:1px solid rgba(181,82,122,.22);
    border-radius:var(--r-md); color:var(--text);
    padding:13px 18px; display:flex; align-items:center; gap:10px;
    font-size:13px; font-weight:500; max-width:280px;
    box-shadow:var(--sh-md);
    transform:translateX(-130%); transition:transform .42s cubic-bezier(0.34,1.56,0.64,1);
}
.wishlist-toast.show { transform:translateX(0); }
.wishlist-toast::before {
    content:'\f004'; font-family:'Font Awesome 6 Free'; font-weight:900;
    color:var(--rose); font-size:16px; flex-shrink:0;
}
.wishlist-toast.wl-toast-remove::before { color:var(--text-soft); font-weight:400; }

/* ── PDP wishlist button ── */
.pdp-btn-wish {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 28px; width:100%;
    background:transparent; color:var(--text-mid);
    font-family:var(--ff-sans); font-size:12px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    border-radius:var(--r-pill); border:1px solid var(--border-pink); cursor:pointer;
    transition:all var(--ease);
}
.pdp-btn-wish:hover { border-color:var(--rose); color:var(--rose); background:rgba(181,82,122,.04); }
.pdp-btn-wish.liked { color:var(--rose); border-color:var(--rose); background:rgba(181,82,122,.06); }
.pdp-btn-wish.liked i { font-weight:900; }
.pdp-btn-wish.wl-bounce i {
    animation:wlHeartBounce .55s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Quick View wishlist btn ── */
.qv-wish-btn {
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:10px 20px; width:100%; margin-top:4px;
    background:transparent; color:var(--text-soft);
    font-family:var(--ff-sans); font-size:11px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    border-radius:var(--r-pill); border:1px solid var(--border); cursor:pointer;
    transition:all var(--ease);
}
.qv-wish-btn:hover { border-color:var(--rose); color:var(--rose); background:rgba(181,82,122,.04); }
.qv-wish-btn.liked { color:var(--rose); border-color:var(--rose); background:rgba(181,82,122,.06); }
.qv-wish-btn.liked i { font-weight:900; }
.qv-wish-btn.wl-bounce i { animation:wlHeartBounce .55s cubic-bezier(.34,1.56,.64,1) both; }

/* ====================================================
   WISHLIST PAGE — wishlist.html
   ==================================================== */
.wl-page-header {
    margin-top:var(--nav-h);
    padding:56px 0 40px;
    background:var(--bg-white);
    border-bottom:1px solid var(--border);
}
.wl-page-header h1 {
    font-family:var(--ff-serif); font-size:36px; font-weight:700;
    color:var(--text); margin-bottom:6px;
}
.wl-page-header h1 i { color:var(--rose); font-size:30px; margin-right:10px; vertical-align:middle; }
.wl-subtitle { font-size:14px; color:var(--text-soft); margin-bottom:8px; }
.wl-count {
    display:inline-block;
    font-size:11.5px; font-weight:700; letter-spacing:.04em;
    color:var(--text-soft); margin-top:4px;
}

.wl-main { padding:48px 0 80px; min-height:50vh; }

/* Grid reuses .products-grid */
#wlGrid.products-grid { display:grid; }

/* Empty state */
.wl-empty {
    display:none; flex-direction:column; align-items:center;
    text-align:center; padding:80px 24px; gap:16px;
}
.wl-empty-icon {
    width:76px; height:76px; border-radius:50%;
    background:var(--bg-pink);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:4px;
}
.wl-empty-icon i { font-size:28px; color:var(--rose); }
.wl-empty h2 {
    font-family:var(--ff-serif); font-size:24px; font-weight:700;
    color:var(--text);
}
.wl-empty p { font-size:14px; color:var(--text-soft); max-width:340px; line-height:1.7; }
.wl-empty .btn-primary { margin-top:6px; }

/* Remove button (X) overlaid on card — appears above the heart button */
.wl-card-remove {
    position:absolute; top:44px; right:12px; z-index:5;
    width:26px; height:26px; border-radius:50%;
    background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
    border:1px solid rgba(0,0,0,.1);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; color:var(--text-soft); cursor:pointer;
    transition:all var(--ease);
    opacity:0;
}
.product-card:hover .wl-card-remove { opacity:1; }
.wl-card-remove:hover { background:var(--pink-soft); color:var(--rose); transform:scale(1.1); border-color:var(--border-pink); }

@media (max-width:1040px) {
    .wl-page-header h1 { font-size:28px; }
}
@media (max-width:640px) {
    .wl-page-header { padding:40px 0 28px; }
    .wl-page-header h1 { font-size:24px; }
    .wl-main { padding:32px 0 60px; }
    .wishlist-toast { left:16px; bottom:84px; }
}
@media (max-width:480px) {
    /* On mobile, always show remove button */
    .wl-card-remove { opacity:1; }
}