/* =============================================================
   HOME WHOLESALE — CLEAN FINAL (NO CONFLICTS)
   Uses your existing classes:
   .wh-hero, .wh-section, .wh-types-grid, .wh-type-card, .wh-arrivals-products, etc.
   ============================================================= */

:root {
    --radius-xl: 26px;
    --radius-lg: 22px;
    --shadow-soft: 0 18px 45px rgba(0,0,0,.10);
    --shadow-hover: 0 28px 70px rgba(0,0,0,.16);
}

/* =============================================================
   HERO – FINAL POLISHED VERSION
   ============================================================= */

.wh-hero {
    position: relative;
    min-height: calc(100vh - 72px); /* header aware */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: "Inter", sans-serif;
}

/* Background with depth */
.wh-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 25%, rgba(59,130,246,.18), transparent 45%), radial-gradient(circle at 85% 30%, rgba(249,115,22,.18), transparent 45%), var(--hero-bg);
    z-index: 0;
}

/* Soft noise overlay */
.wh-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Content */
.wh-hero-content {
    position: relative;
    z-index: 3;
    max-width: 960px;
    text-align: center;
    padding: 0 26px;
    margin-top: -30px;
}

.wh-hero-title {
    font-size: clamp(3rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--hero-title);
    margin-bottom: 22px;
}

    .wh-hero-title .hero-line {
        display: block;
    }

.wh-hero-subtitle {
    font-size: 1.15rem;
    color: var(--hero-sub);
    max-width: 620px;
    margin: 0 auto 40px;
}

/* Buttons */
.wh-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
}

.wh-btn-primary {
    background: var(--btn-primary-bg);
    box-shadow: 0 18px 45px var(--btn-primary-shadow);
}

.wh-arrivals-cta {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 12px 30px var(--btn-primary-shadow) !important;
}

    .wh-btn-primary:hover,
    .wh-arrivals-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px var(--btn-primary-shadow) !important;
    }

.wh-btn-secondary {
    border-radius: 999px;
    padding: 15px 32px;
}

/* Meta */
.wh-hero-meta {
    font-size: .9rem;
    opacity: .85;
}

/* Floating products */
.hero-float {
    position: absolute;
    background: var(--hero-card);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 35px 70px rgba(0,0,0,.18);
    z-index: 2;
    animation: floaty 8s ease-in-out infinite;
}

.hero-product-img {
    width: 160px;
    border-radius: 14px;
    display: block;
}

.price-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
}

.hero-left {
    left: 5%;
    top: 58%;
}

.hero-right {
    right: 5%;
    top: 22%;
}

@keyframes floaty {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Letter animation hook (you already use animate-text in markup) */
.animate-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: letterIn .7s cubic-bezier(.16,.84,.44,1) forwards;
}

/* Mobile hero */
@media (max-width: 900px) {
    .hero-float {
        display: none;
    }

    .wh-hero {
        min-height: 82vh;
    }

    .wh-hero-content {
        margin-top: 0;
    }
}


/* =============================================================
   NEW ARRIVALS — keep your existing look (minimal touch)
   ============================================================= */

.wh-arrivals-products {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 20px;
}

    .wh-arrivals-products::-webkit-scrollbar {
        display: none;
    }

.wh-arrival-card {
    min-width: 220px;
    max-width: 240px;
    animation: fadeUp .5s ease both;
}

    .wh-arrival-card img {
        width: 100%;
        border-radius: 14px;
        margin-bottom: 12px;
        object-fit: cover;
    }

    .wh-arrival-card span {
        color: #16a34a;
        font-weight: 700;
    }

@media (max-width: 900px) {
    .wh-arrivals-products {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =============================================================
   CONTACT + MAP (your existing styles, kept)
   ============================================================= */

.contact-section {
    background: var(--bg-soft);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: stretch;
}

.contact-box {
    background: var(--bg);
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

    .contact-box h3 {
        margin-bottom: 8px;
    }

    .contact-box p {
        color: var(--text-soft);
        margin-bottom: 22px;
    }

.contact-form {
    display: grid;
    gap: 14px;
}

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
        background: var(--bg);
        color: var(--text);
        font-size: 14px;
    }

    .contact-form textarea {
        resize: vertical;
        min-height: 120px;
    }

    .contact-form button {
        margin-top: 6px;
        background: var(--primary);
        color: #fff;
        border: none;
        padding: 14px 18px;
        border-radius: 16px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 40%, transparent);
    }

        .contact-form button:hover {
            transform: translateY(-1px);
        }

.contact-info {
    display: grid;
    gap: 14px;
    font-size: 14px;
}

    .contact-info div strong {
        display: block;
        font-weight: 700;
    }

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}


/* ================= HERO ENHANCEMENTS ================= */
.enhanced-hero {
    position: relative;
    overflow: hidden;
}

.hero-bubbles::before,
.hero-bubbles::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent), transparent 70%);
    animation: floatBubble 18s infinite ease-in-out;
}

.hero-bubbles::after {
    width: 520px;
    height: 520px;
    right: -180px;
    top: 140px;
    animation-duration: 26s;
}

@keyframes floatBubble {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-40px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ================= BRAND CAROUSEL ================= */
.brand-carousel {
    overflow: hidden;
    position: relative;
}

.brand-track {
    display: flex;
    gap: 36px;
    animation: brandScroll 45s linear infinite;
}

.brand-logo {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 14px;
}

    .brand-logo img {
        max-width: 100%;
        max-height: 100%;
        filter: grayscale(100%);
        opacity: .8;
    }

    .brand-logo:hover img {
        filter: none;
        opacity: 1;
    }

@keyframes brandScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ================= PWA INSTALL BANNER ================= */
.pwa-banner {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    border-radius: 18px;
    padding: 14px 18px;
    display: none;
    align-items: center;
    gap: 14px;
    z-index: 999;
}

    .pwa-banner button {
        background: var(--primary);
        color: #fff;
        border: none;
        padding: 8px 14px;
        border-radius: 12px;
        cursor: pointer;
    }

    .pwa-banner .close {
        background: transparent;
        color: var(--text-soft);
    }

/* ================= MAP FIX ================= */
.contact-map-wrapper {
    margin-top: 18px;
    width: 100%;
    height: 320px; /* controls visible map height */
    border-radius: 18px;
    overflow: hidden; /* 👈 THIS is the magic */
    position: relative;
}

    .contact-map-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

/* Tablet */
@media (max-width: 1024px) {
    .contact-map-wrapper {
        height: 300px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .contact-map-wrapper {
        height: 260px;
    }
}

.contact-box:hover .contact-map-wrapper {
    box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

body:not([data-mode="dark"]) .contact-map-wrapper {
    border: 1px solid rgba(0,0,0,.06);
}