/* Havenora E-Commerce Homepage Styles v1.0 */

/* ─── HERO BANNER CAROUSEL ─── */
.ecom-hero{position:relative;width:100%;overflow:hidden;background:#0f172a}
.ecom-hero-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.ecom-hero-slide{min-width:100%;position:relative}
.ecom-hero-slide img{width:100%;height:auto;display:block}
.ecom-hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 60%,transparent 100%);display:flex;align-items:center;padding:2rem 4rem}
@media(max-width:768px){.ecom-hero-slide{display:flex;flex-direction:column}.ecom-hero-slide-overlay{position:relative;inset:auto;padding:1.5rem 1rem 3rem;background:#0f172a;align-items:center;justify-content:center;text-align:center}}
.ecom-hero-text{max-width:480px;color:#fff;z-index:2}
.ecom-hero-text h2{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;line-height:1.15;margin-bottom:.75rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
@media(min-width:768px){.ecom-hero-text h2{font-size:2.75rem}}
.ecom-hero-text p{font-size:.95rem;opacity:.9;margin-bottom:1.25rem;line-height:1.5}
@media(max-width:768px){.ecom-hero-text p{font-size:.85rem}}
.ecom-hero-cta{display:inline-flex;align-items:center;gap:8px;padding:.75rem 1.75rem;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;font-size:.9rem;border-radius:12px;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 20px rgba(124,58,237,.4)}
.ecom-hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,.5)}

/* Hero Controls */
.ecom-hero-controls{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
@media(max-width:768px){.ecom-hero-controls{top:auto;bottom:12px}}
.ecom-hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .3s ease;padding:0}
.ecom-hero-dot.active{background:#fff;transform:scale(1.3);box-shadow:0 0 8px rgba(255,255,255,.5)}
.ecom-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-size:.9rem}
.ecom-hero-arrow:hover{background:rgba(255,255,255,.3)}
.ecom-hero-arrow.prev{left:1rem}
.ecom-hero-arrow.next{right:1rem}
@media(max-width:640px){.ecom-hero-arrow{display:none}}

/* ─── CATEGORY STRIP ─── */
.ecom-categories{padding:1.25rem 0;background:#fff;border-bottom:1px solid #f3f4f6;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ecom-categories::-webkit-scrollbar{display:none}
.ecom-categories-inner{display:flex;gap:.6rem;padding:0 1rem;min-width:min-content}
.ecom-category-pill{display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;border-radius:99px;font-size:.8rem;font-weight:600;color:#374151;background:#f9fafb;border:1px solid #e5e7eb;text-decoration:none;white-space:nowrap;transition:all .2s ease;cursor:pointer;flex-shrink:0}
.ecom-category-pill:hover,.ecom-category-pill.active{background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#7c3aed;border-color:#c4b5fd}
.ecom-category-pill i{font-size:.75rem}

/* ─── SECTION HEADERS ─── */
.ecom-section{padding:2.5rem 0}
.ecom-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding:0 1rem}
.ecom-section-title{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;color:#1e1b4b;display:flex;align-items:center;gap:10px}
.ecom-section-title i{color:#7c3aed;font-size:1.1rem}
.ecom-section-viewall{font-size:.8rem;font-weight:600;color:#7c3aed;text-decoration:none;display:flex;align-items:center;gap:4px;transition:all .2s}
.ecom-section-viewall:hover{gap:8px}

/* ─── PRODUCT CARDS ─── */
.ecom-products-scroll{display:flex;gap:1rem;overflow-x:auto;padding:0 1rem 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.ecom-products-scroll::-webkit-scrollbar{height:4px}
.ecom-products-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px}
.ecom-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;padding:0 1rem}
@media(max-width:640px){.ecom-products-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}

.ecom-product-card{position:relative;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #f3f4f6;transition:all .3s cubic-bezier(.4,0,.2,1);scroll-snap-align:start;flex-shrink:0;width:240px;display:flex;flex-direction:column}
@media(max-width:640px){.ecom-product-card{width:170px}}
.ecom-products-grid .ecom-product-card{width:auto}
.ecom-product-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1);border-color:#e5e7eb}

/* Card Image */
.ecom-card-img-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f9fafb}
.ecom-card-img{width:100%;height:100%;object-fit:contain;background-color:#f9fafb;transition:transform .5s ease}
.ecom-product-card:hover .ecom-card-img{transform:scale(1.06)}

/* Card Badges */
.ecom-card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:2}
.ecom-card-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;backdrop-filter:blur(4px)}
.ecom-card-badge.popular{background:rgba(245,158,11,.9);color:#fff}
.ecom-card-badge.campaign{background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(168,85,247,.9));color:#fff}
.ecom-card-badge.free-delivery{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;position:relative;overflow:hidden}
.ecom-card-badge.free-delivery::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:free-delivery-shimmer 2.5s ease-in-out infinite}
@keyframes free-delivery-shimmer{0%{left:-100%}100%{left:100%}}
.ecom-card-badge.new-badge{background:rgba(239,68,68,.9);color:#fff}

/* Card Body */
.ecom-card-body{padding:.875rem;flex:1;display:flex;flex-direction:column}
.ecom-card-name{font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;color:#1e1b4b;margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.ecom-card-name{font-size:.8rem}}
.ecom-card-desc{font-size:.75rem;color:#6b7280;margin-bottom:.75rem;line-height:1.4;flex:1}
@media(max-width:640px){.ecom-card-desc{font-size:.7rem}}

/* Size, Perks & Price — all tags in one aligned row */
.ecom-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:.75rem}
.ecom-card-size{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#f5f3ff;color:#6d28d9;font-size:.7rem;font-weight:600;border-radius:6px;line-height:1}
.ecom-card-size i{font-size:.6rem}
.ecom-card-perk{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#7c3aed;font-size:.65rem;font-weight:700;border-radius:6px;line-height:1;border:1px solid #c4b5fd;position:relative;overflow:hidden}
.ecom-card-perk::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(124,58,237,.12),transparent);animation:free-delivery-shimmer 2.5s ease-in-out infinite}
.ecom-card-perk i{font-size:.55rem}
.ecom-card-price{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:800;color:#7c3aed}
@media(max-width:640px){.ecom-card-price{font-size:1rem}}
.ecom-card-price-from{font-size:.7rem;font-weight:500;color:#9ca3af;margin-right:2px}

/* Card CTA */
.ecom-card-cta{display:flex;align-items:center;justify-content:center;gap:6px;padding:.6rem;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:600;font-size:.8rem;border-radius:10px;text-decoration:none;transition:all .2s ease;border:none;cursor:pointer;width:100%;margin-top:auto}
.ecom-card-cta:hover{background:linear-gradient(135deg,#6d28d9,#9333ea);transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.3)}
.ecom-card-cta.campaign-cta{background:linear-gradient(135deg,#f59e0b,#d97706);color:#1e1b4b}
.ecom-card-cta.campaign-cta:hover{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 4px 16px rgba(245,158,11,.3)}

/* ─── CAMPAIGN FEATURED CARDS ─── */
.ecom-campaign-card{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start;flex-shrink:0;width:340px;text-decoration:none;color:#fff;transition:all .3s ease}
@media(max-width:640px){.ecom-campaign-card{width:280px}}
.ecom-campaign-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.15)}
.ecom-campaign-card-bg{position:relative;width:100%}
.ecom-campaign-card-bg img{width:100%;height:auto;display:block;transition:transform .5s ease}
.ecom-campaign-card:hover .ecom-campaign-card-bg img{transform:scale(1.05)}
.ecom-campaign-card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.1) 100%);pointer-events:none}
.ecom-campaign-card-content{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:1.5rem;width:100%}
.ecom-campaign-card-content h3{font-family:'Outfit',sans-serif;font-size:1.35rem;font-weight:800;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5)}
.ecom-campaign-card-content p{font-size:.8rem;opacity:.95;margin-bottom:.75rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ecom-campaign-price{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;color:#fbbf24;text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ─── TRENDING SECTION ─── */
.ecom-trending-grid{display:flex;gap:.75rem;overflow-x:auto;padding:0 1rem 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ecom-trending-grid::-webkit-scrollbar{display:none}
.ecom-trending-item{scroll-snap-align:start;flex-shrink:0;width:120px;text-align:center;text-decoration:none;color:#1e1b4b;transition:all .2s ease}
@media(max-width:640px){.ecom-trending-item{width:100px}}
.ecom-trending-item:hover{transform:translateY(-4px)}
.ecom-trending-img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 8px;border:3px solid #ede9fe;transition:border-color .2s}
@media(max-width:640px){.ecom-trending-img{width:64px;height:64px}}
.ecom-trending-item:hover .ecom-trending-img{border-color:#7c3aed}
.ecom-trending-emoji{width:80px;height:80px;border-radius:50%;margin:0 auto 8px;border:3px solid #ede9fe;transition:border-color .2s;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f3ff,#ede9fe);font-size:2rem}
@media(max-width:640px){.ecom-trending-emoji{width:64px;height:64px;font-size:1.5rem}}
.ecom-trending-item:hover .ecom-trending-emoji{border-color:#7c3aed;background:linear-gradient(135deg,#ede9fe,#ddd6fe)}
.ecom-trending-name{font-size:.75rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ─── REVIEWS SECTION ─── */
.ecom-reviews{background:linear-gradient(135deg,#f5f3ff,#faf5ff);padding:3rem 0}
.ecom-reviews-marquee-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 1rem 0;
}
.ecom-reviews-marquee-wrapper::before,
.ecom-reviews-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.ecom-reviews-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #faf5ff, transparent);
}
.ecom-reviews-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #faf5ff, transparent);
}
@media(max-width:640px){
    .ecom-reviews-marquee-wrapper::before, .ecom-reviews-marquee-wrapper::after { width: 30px; }
}

.ecom-reviews-marquee {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marquee-scroll 45s linear infinite;
}
.ecom-reviews-marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ecom-review-card{width:320px;flex-shrink:0;background:#fff;border-radius:16px;padding:1.25rem;border:1px solid #f3f4f6;transition:all .2s ease;white-space:normal}
.ecom-review-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.ecom-review-header{display:flex;align-items:center;gap:10px;margin-bottom:.75rem}
.ecom-review-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.ecom-review-name{font-weight:600;font-size:.9rem;color:#1e1b4b}
.ecom-review-stars{color:#f59e0b;font-size:.75rem;margin-top:2px}
.ecom-review-text{font-size:.85rem;color:#4b5563;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}


/* ─── EMPTY STATES ─── */
.ecom-empty-state{text-align:center;padding:3rem 1rem;color:#9ca3af}
.ecom-empty-state i{font-size:2.5rem;margin-bottom:1rem;opacity:.5}
.ecom-empty-state p{font-size:.9rem}

/* ─── SKELETON LOADERS ─── */
.ecom-skeleton{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:12px}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ecom-skeleton-card{width:240px;flex-shrink:0;border-radius:16px;overflow:hidden}
@media(max-width:640px){.ecom-skeleton-card{width:170px}}
.ecom-skeleton-img{aspect-ratio:1/1;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}
.ecom-skeleton-body{padding:.875rem}
.ecom-skeleton-line{height:14px;margin-bottom:8px;border-radius:6px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}
.ecom-skeleton-line.short{width:60%}
.ecom-skeleton-line.price{width:40%;height:20px}