/*
Theme Name: House of Sassy
Description: Premium Dubai Fragrance Store — Pink Luxe Editorial Theme
Version: 1.0
Author: House of Sassy
*/

/* ── Hero desktop height ── */
.hero {
    height: 70vh !important;
    min-height: 520px !important;
}

/* ── Hero logo ── */
.hero-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: clamp(289px, 32vw, 460px);
    width: auto;
    margin-bottom: -35px;
    animation: fadeInUp 1s ease 0.4s both;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

/* ── Hero divider ── */
.hero-divider {
    width: clamp(150px, 18vw, 250px) !important;
    margin-top: 0 !important;
}

/* ── Shop hero images ── */
.shop-hero {
    background-image: url('assets/images/shop-hero-v2.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.shop-hero--new-releases { background-image: url('assets/images/hero-new-arrivals.png') !important; }
.shop-hero--top-sellers  { background-image: url('assets/images/hero-most-loved.png') !important; }
.shop-hero--deals        { background-image: url('assets/images/hero-deals.png') !important; }
.shop-hero--minis        { background-image: url('assets/images/hero-minis.png') !important; }
.shop-hero--specialty    { background-image: url('assets/images/hero-specialty.png') !important; }
.shop-hero .leopard-bg   { opacity: 0 !important; }
.shop-hero-sub           { color: rgba(255,255,255,0.92) !important; }
.shop-hero .eyebrow      { color: rgba(255,255,255,0.92) !important; }
.shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
    pointer-events: none;
}

/* ── Footer logo ── */
.footer-logo-img {
    height: 150px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ── Global: prevent horizontal scroll without breaking fixed elements ──
   overflow-x: clip (not hidden) — clip does not create a scroll container so
   iOS Safari touch hit-testing works correctly. overflow-x:hidden on both
   html AND body simultaneously triggers an iOS Safari bug where all tap
   events are swallowed. body already has overflow-x:hidden in main.css. */
html { overflow-x: clip; }

/* ── Mobile-only touch fixes ── */
@media (max-width: 639px) {
  html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  *::before, *::after { pointer-events: none !important; }
  a::before, a::after, button::before, button::after { pointer-events: auto !important; }
}


/* ============================================================
   MOBILE — max-width: 639px
   Full mobile redevelopment per mobile-ux-design principles.
   Touch targets ≥ 44px · Single-column · Thumb-zone navigation.
   ============================================================ */
@media (max-width: 639px) {

    /* ── ANNOUNCEMENT BAR ── */
    #announcement-bar {
        padding: 8px 1rem !important;
        font-size: 12px !important;
    }

    /* ── MOBILE DRAWER — lift z-index above WhatsApp widget (300) ──
       WhatsApp is z-index:300, drawer was 210 — rendered underneath it.
       Raise overlay to 320 and drawer to 330 so drawer is always on top. */
    #mobile-overlay {
        z-index: 320 !important;
    }
    #mobile-drawer {
        z-index: 330 !important;
    }

    /* Larger touch targets in drawer — minimum 48px per tap area */
    .mobile-nav a {
        padding: 0.9rem 0 !important;
        font-size: 16px !important;
    }

    /* ── HERO ── */
    .hero {
        height: auto !important;
        min-height: 380px !important;
    }
    .hero-logo {
        height: clamp(160px, 42vw, 240px) !important;
        margin-bottom: -10px !important;
    }
    .hero-divider {
        margin: 0.5rem auto !important;
        width: clamp(100px, 30vw, 160px) !important;
    }
    .hero-sub {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
        padding: 0 1rem !important;
    }
    .hero-ctas {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
        padding: 0 1.5rem !important;
    }
    .hero-ctas .btn-primary,
    .hero-ctas .btn-ghost {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1rem !important;
        font-size: 13px !important;
    }

    /* ── VIDEO ── */
    .et-video-section {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    .et-video-bg video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ── SECTION SPACING — reduce desktop 6rem padding to 2.5rem on mobile ── */
    .categories-section   { padding: 2.5rem 0 !important; }
    .products-section     { padding: 2.5rem 0 !important; }
    .testimonials-section { padding: 2.5rem 0 !important; }
    .brand-story          { padding: 4rem 0 !important; }
    .trust-section        { padding: 2.5rem 0 !important; }
    .newsletter-section   { padding: 2.5rem 0 !important; }
    .tiktok-carousel-section { padding: 2.5rem 0 3rem !important; }
    .section-header       { margin-bottom: 1.75rem !important; }

    /* ── SECTION TYPOGRAPHY — scale down oversized headings ── */
    .section-title-xl {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
        letter-spacing: 0.02em !important;
    }
    .section-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
    .section-eyebrow {
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
    }

    /* ── CATEGORY GRID — 2 columns, tighter gap ── */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .category-card .label h3 {
        font-size: 0.75rem !important;
    }

    /* ── PRODUCT GRID — 2 columns ── */
    .product-grid,
    .product-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }
    /* Always show Add to Bag on mobile (no hover) */
    .card-btn-layer .card-actions {
        opacity: 1 !important;
    }
    .card-btn-layer .wishlist-btn {
        opacity: 1 !important;
    }
    /* 44px minimum touch targets per iOS HIG */
    .card-action-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .wishlist-btn {
        width: 40px !important;
        height: 40px !important;
    }
    .product-card .name {
        font-size: 0.8rem !important;
    }
    .product-card .price {
        font-size: 0.85rem !important;
    }

    /* ── TIKTOK CAROUSEL — reduce perspective section size ── */
    .tiktok-wheel-wrap {
        height: 360px !important;
        perspective: 800px !important;
    }
    .tiktok-wheel {
        width: 110px !important;
        height: 185px !important;
    }
    .tiktok-wheel-card {
        width: 110px !important;
        height: 185px !important;
    }
    .tiktok-carousel-sub {
        margin-bottom: 2rem !important;
        font-size: 0.7rem !important;
    }

    /* ── BRAND STORY — ensure text readable on mobile ── */
    .story-content {
        padding: 0 0.5rem !important;
    }
    .story-content .title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }

    /* ── TRUST GRID — fix h3 global 30px override, keep 2-col ── */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    .trust-title {
        font-size: 12px !important;
        letter-spacing: 0.05em !important;
        line-height: 1.3 !important;
    }
    .trust-desc {
        font-size: 11px !important;
    }
    .trust-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 0.875rem !important;
    }

    /* ── NEWSLETTER — stack form vertically ── */
    .newsletter-form {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .newsletter-form input {
        border-right: 1px solid oklch(0.72 0.12 350 / 0.3) !important;
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 14px !important;
    }
    .newsletter-form button {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
        font-size: 13px !important;
    }

    /* ── FOOTER ── */
    .footer-logo-img { height: 100px !important; }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* ── FLOATING BUTTONS — align horizontally, clear page content ──
       WhatsApp: bottom-left  |  Cart: bottom-right
       Both at same vertical level, 1.25rem from bottom */
    #whatsapp-widget {
        bottom: 1.25rem !important;
        left: 1rem !important;
        z-index: 300 !important;
    }
    #moderncart-floating-cart {
        bottom: 1.25rem !important;
        right: 1rem !important;
    }

    /* WhatsApp popup fits screen width */
    .whatsapp-popup {
        width: calc(100vw - 2rem) !important;
    }

    /* ── CONTAINER PADDING ── */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── QUICK VIEW MODAL ── */
    .qv-panel {
        width: calc(100vw - 1rem) !important;
        margin: 0 auto !important;
    }
    .qv-inner {
        grid-template-columns: 1fr !important;
    }

    /* ── TESTIMONIALS ── */
    .testimonial-text {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    .testimonials-inner {
        padding: 0 !important;
    }

    /* ── SHOP PAGE SIDEBAR — hide on mobile, show only products ── */
    .shop-sidebar { display: none !important; }
    .shop-body .shop-main { width: 100% !important; }

    /* ── DEALS SECTION ── */
    .deals-section { padding: 2.5rem 0 !important; }
    .deals-layout {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .deals-banner {
        width: 100% !important;
        min-height: 220px !important;
        aspect-ratio: 16 / 7 !important;
    }
    .deals-products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }

    /* ── PAGE HERO (cart, checkout, shop, etc.) ── */
    .sassy-page-hero {
        padding: 3rem 0 2.5rem !important;
    }
    .sassy-page-hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    /* ── CART PAGE ── */
    .sassy-cart-table thead { display: none !important; }
    .sassy-cart-item {
        grid-template-columns: 80px 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem 0 !important;
    }

    /* ── CHECKOUT ── */
    .sassy-checkout-form .col2-set {
        grid-template-columns: 1fr !important;
    }

    /* ── PRODUCT SINGLE PAGE ── */
    .product-layout {
        flex-direction: column !important;
    }
    .product-gallery,
    .product-info {
        width: 100% !important;
    }

    /* ── SHOP HERO (sub text) ── */
    .shop-hero { height: 240px !important; min-height: unset !important; }

}

/* ── Reduced-motion safety net ──
   Devices with prefers-reduced-motion:reduce may skip CSS animations entirely.
   With animation-fill-mode:both, skipped animations leave elements frozen at
   their "from" keyframe (opacity:0 + translateY) forever — invisible and
   potentially outside the tap area on iOS. Reset to final visible state. */
@media (prefers-reduced-motion: reduce) {
    .hero-ctas,
    .hero-eyebrow,
    .hero-title,
    .hero-sub,
    .hero-scroll-indicator {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Product summary: description + price owned by WooCommerce ──
   The single-product template now outputs WooCommerce's NATIVE short description
   (woocommerce_template_single_excerpt) and NATIVE price (woocommerce_template_single_price),
   so the text, currency formatting and editor styling come from WooCommerce — not the
   theme's old hardcoded markup. The theme's global !important rules
     p,span,li { font-size:20px!important; line-height:1.7!important }
     .woocommerce-Price-amount { font-size:1rem!important; font-weight:500!important }
   would re-style them, so we keep a light scoped reset here (style.css loads last)
   to let WooCommerce / the product editor control the look. Values are easy to tweak. */

/* Both blocks get their own space in the right column:
     .product-detail-longdesc  = main "Description" field (intro / body copy)
     .woocommerce-product-details__short-description = "Product short description" box (e.g. notes)
   When the main description is empty, only the short one shows and the column still reads correctly. */
.product-detail-info .product-detail-longdesc { margin: 0 0 1.5rem; }
.product-detail-info .woocommerce-product-details__short-description { margin: 0 0 1.75rem; }

/* Shared typography — honor editor formatting (line breaks, bold/italic/links/lists) */
.product-detail-info .product-detail-longdesc p,
.product-detail-info .product-detail-longdesc span,
.product-detail-info .product-detail-longdesc li,
.product-detail-info .woocommerce-product-details__short-description p,
.product-detail-info .woocommerce-product-details__short-description span,
.product-detail-info .woocommerce-product-details__short-description li {
    font-size: 16px !important;
    line-height: 1.75 !important;
    font-weight: 300;
    color: var(--sassy-charcoal);
}
.product-detail-info .product-detail-longdesc p,
.product-detail-info .woocommerce-product-details__short-description p       { margin: 0 0 1em; }
.product-detail-info .product-detail-longdesc p:last-child,
.product-detail-info .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.product-detail-info .product-detail-longdesc ul,
.product-detail-info .product-detail-longdesc ol,
.product-detail-info .woocommerce-product-details__short-description ul,
.product-detail-info .woocommerce-product-details__short-description ol      { margin: 0 0 1em 1.4em; list-style: revert; }
.product-detail-info .product-detail-longdesc strong,
.product-detail-info .woocommerce-product-details__short-description strong  { font-weight: 600; }

/* Price — native WooCommerce amount (auto sale strikethrough via del/ins, WC currency settings) */
.product-detail-info .product-detail-price .price { margin: 0; display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.product-detail-info .product-detail-price .price,
.product-detail-info .product-detail-price .price .woocommerce-Price-amount,
.product-detail-info .product-detail-price .price bdi {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--sassy-charcoal) !important;
    font-family: var(--font-body) !important;
    line-height: 1.3 !important;
}
.product-detail-info .product-detail-price .price del .woocommerce-Price-amount { opacity: .45; font-weight: 400 !important; }
.product-detail-info .product-detail-price .price ins { text-decoration: none; }

/* The selected size's price already shows in the main price heading above, so hide
   WooCommerce's duplicate price near Add-to-cart — but keep the stock availability line. */
.product-detail .single_variation .woocommerce-variation-price { display: none; }