/* =========================================================
   Fragrance Products Section Widget — Frontend CSS v2.1
   Full !important overrides to beat Elementor global kit
   ========================================================= */

/* ── Google Fonts preconnect ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ── Reset & Root ── */
.fpw-wrapper {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
    box-sizing: border-box;
    width: 100%;
}

.fpw-wrapper *,
.fpw-wrapper *::before,
.fpw-wrapper *::after {
    box-sizing: border-box;
}

/* ── Sections ── */
.fpw-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fpw-section-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 70px 60px;
    text-align: center;
}

/* ── DECORATIVE IMAGES (clock & key) — positioned relative to .fpw-section ── */

/* Clock — top-right corner, clearly visible inside the section */
.fpw-clock {
    position: absolute;
    top: 24px;
    right: 36px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    animation: fpw-float 5s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}

/* Key — bottom-left corner of Him section, large and visible */
.fpw-key {
    position: absolute;
    bottom: 28px;
    left: 44px;
    width: 70px;
    height: auto;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    transform: rotate(30deg);
    animation: fpw-sway 6s ease-in-out infinite;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}

@keyframes fpw-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}

@keyframes fpw-sway {
    0%, 100% { transform: rotate(30deg) translateY(0); }
    50%       { transform: rotate(25deg) translateY(-5px); }
}

/* ── Decorative SVG waves (corner accents) ── */
.fpw-wave-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.fpw-wave-right {
    position: absolute;
    right: 12px;
    bottom: 40px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* ── Section Header — ALL centered ── */
.fpw-section-header {
    text-align: center !important;
    margin-bottom: 40px;
    position: relative;
    z-index: 3;
}

.fpw-eyebrow {
    display: inline-block !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    border: 1px solid currentColor !important;
    padding: 5px 20px !important;
    border-radius: 50px !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    text-decoration: none !important;
}

.fpw-section-heading {
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    font-size: clamp(26px, 3.5vw, 44px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 28px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: block !important;
}

/* ── Filter Tabs — fully override global kit ── */
.fpw-filter-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Nuclear reset on all tab buttons — kills Elementor/theme purple */
.fpw-wrapper .fpw-filter-tabs .fpw-tab,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab,
.fpw-wrapper button.fpw-tab {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 8px 24px !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: opacity 0.15s ease !important;
    /* White text on inactive so it's readable over the kit's purple bg */
    color: #ffffff !important;
    text-decoration: none !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Active state — gold background, white text */
.fpw-wrapper .fpw-filter-tabs .fpw-tab.active,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab.active {
    background: var(--fpw-tab-active, #C9A84C) !important;
    color: #ffffff !important;
    border-color: var(--fpw-tab-active, #C9A84C) !important;
}

/* Hover / focus / active — no transform or box-shadow flash from Elementor */
.fpw-wrapper .fpw-filter-tabs .fpw-tab:hover,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab:hover,
.fpw-wrapper .fpw-filter-tabs .fpw-tab:focus,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab:focus,
.fpw-wrapper .fpw-filter-tabs .fpw-tab:active,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab:active,
.fpw-wrapper .fpw-filter-tabs .fpw-tab:focus-visible,
.fpw-wrapper .fpw-filter-tabs button.fpw-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    /* colour is controlled by inline style set from PHP / JS — do not override here */
}

.fpw-tab.fpw-loading {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* ── Products Grid — centered ── */
.fpw-products-grid {
    display: grid !important;
    gap: 22px !important;
    transition: opacity 0.3s ease;
    margin: 0 auto !important;
    justify-items: center !important;
}

.fpw-products-grid.fpw-grid-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* Column classes */
.fpw-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.fpw-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.fpw-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.fpw-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }

/* ── Product Card ── */
.fpw-product-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    /* NO hover transform */
}

/* Card backgrounds per section */
.fpw-card-him {
    background: var(--fpw-card-him, rgba(200,195,185,0.25)) !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
}

.fpw-card-her {
    background: var(--fpw-card-her, #F8F5F0) !important;
    border: 1px solid rgba(201,168,76,0.18) !important;
}

/* ── Product Image ── */
.fpw-product-img-link {
    display: block !important;
    text-decoration: none !important;
    flex-shrink: 0;
}

.fpw-product-image {
    width: 100% !important;
    height: 220px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
    /* NO scale on hover */
}

/* ── Badges ── */
.fpw-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 2px !important;
    z-index: 2 !important;
}

.fpw-badge-sale {
    background: var(--fpw-badge-sale-bg, #C9A84C) !important;
    color: var(--fpw-badge-sale-txt, #fff) !important;
}

.fpw-badge-new {
    background: var(--fpw-badge-new-bg, #3D6369) !important;
    color: var(--fpw-badge-new-txt, #E8D5A3) !important;
}

/* ── Product Info — centered ── */
.fpw-product-info {
    padding: 16px 14px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1;
}

.fpw-product-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    width: 100% !important;
}

.fpw-product-name a,
.fpw-product-info a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Product name colors — !important to beat theme */
.fpw-card-him .fpw-product-name,
.fpw-card-him .fpw-product-name a {
    color: var(--fpw-pname-him, #C9A84C) !important;
}

.fpw-card-her .fpw-product-name,
.fpw-card-her .fpw-product-name a {
    color: var(--fpw-pname-her, #8B6914) !important;
}

/* ── Price — full WooCommerce override ── */
.fpw-product-price {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    width: 100% !important;
}

.fpw-card-him .fpw-product-price,
.fpw-card-him .fpw-product-price *,
.fpw-card-him .fpw-product-price .amount,
.fpw-card-him .fpw-product-price bdi,
.fpw-card-him .fpw-product-price span {
    color: var(--fpw-price-him, #C9A84C) !important;
}

.fpw-card-her .fpw-product-price,
.fpw-card-her .fpw-product-price *,
.fpw-card-her .fpw-product-price .amount,
.fpw-card-her .fpw-product-price bdi,
.fpw-card-her .fpw-product-price span {
    color: var(--fpw-price-her, #C9A84C) !important;
}

.fpw-product-price del,
.fpw-product-price del * {
    opacity: 1 !important;
    color: #999999 !important;
    margin-right: 6px !important;
    font-size: 12px !important;
    text-decoration: line-through !important;
}

/* Override the section colour vars for del — must stay grey regardless */
.fpw-card-him .fpw-product-price del,
.fpw-card-him .fpw-product-price del *,
.fpw-card-her .fpw-product-price del,
.fpw-card-her .fpw-product-price del * {
    color: #999999 !important;
    opacity: 1 !important;
}

.fpw-product-price ins {
    text-decoration: none !important;
    font-weight: 600 !important;
    background: none !important;
}

/* ── Add to Cart / Select Options Button
   Full nuclear override of WooCommerce + Elementor + theme ── */
.fpw-wrapper .fpw-btn,
.fpw-wrapper a.fpw-btn,
.fpw-wrapper .fpw-btn.fpw-btn-cart,
.fpw-wrapper a.fpw-btn.fpw-btn-cart {
    display: inline-block !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: var(--fpw-btn-bg, #C9A84C) !important;
    color: var(--fpw-btn-txt, #fff) !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    /* NO transform or color change on hover */
    transition: opacity 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin-top: auto !important;
}

/* Hover — only opacity dip, no color change */
.fpw-wrapper .fpw-btn:hover,
.fpw-wrapper a.fpw-btn:hover,
.fpw-wrapper .fpw-btn.fpw-btn-cart:hover,
.fpw-wrapper a.fpw-btn.fpw-btn-cart:hover {
    background: var(--fpw-btn-bg, #C9A84C) !important;
    color: var(--fpw-btn-txt, #fff) !important;
    text-decoration: none !important;
    opacity: 0.88 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Hide WooCommerce's "View cart" link injected after AJAX add-to-cart ── */
.fpw-product-info .added_to_cart,
.fpw-product-info a.added_to_cart {
    display: none !important;
}

/* ── Add to Cart AJAX feedback states ── */
.fpw-wrapper .fpw-btn.fpw-adding {
    opacity: 0.7 !important;
    pointer-events: none !important;
    cursor: wait !important;
}
.fpw-wrapper .fpw-btn.fpw-added {
    background: #4a7c59 !important;
    opacity: 1 !important;
}

/* ── No Products Message ── */
.fpw-no-products {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 40px 20px !important;
    opacity: 0.6 !important;
    font-size: 14px !important;
    color: inherit !important;
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile-first breakpoints
════════════════════════════════════════ */

/* Tablet landscape / large tablet */
@media (max-width: 1100px) {
    .fpw-cols-5 { grid-template-columns: repeat(4, 1fr) !important; }
    .fpw-section-inner { padding: 60px 40px !important; }
    .fpw-clock { width: 75px; height: 75px; }
    .fpw-key   { width: 58px; }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .fpw-cols-4,
    .fpw-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
    .fpw-section-inner { padding: 50px 30px !important; }
    .fpw-clock { width: 65px; height: 65px; top: 16px; right: 20px; }
    .fpw-key   { width: 50px; bottom: 16px; left: 20px; }
}

/* Mobile landscape — 2 col still but taller images */
@media (max-width: 700px) {
    .fpw-cols-3,
    .fpw-cols-4,
    .fpw-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
    .fpw-section-inner { padding: 44px 18px !important; }
    .fpw-section-heading { font-size: clamp(22px, 5.5vw, 32px) !important; }
    .fpw-clock { width: 52px; height: 52px; top: 12px; right: 12px; }
    .fpw-key   { width: 42px; bottom: 12px; left: 12px; }
    .fpw-product-image { height: 200px !important; }
    .fpw-filter-tabs { gap: 6px !important; }
    .fpw-wrapper .fpw-filter-tabs .fpw-tab,
    .fpw-wrapper button.fpw-tab { padding: 7px 16px !important; font-size: 11px !important; }
    .fpw-product-name { font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════
   MOBILE PORTRAIT — single column, WooCommerce-style
   Full-width image stacked above text, just like the
   native WC shop loop in image 3. Cards are generous.
══════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Single column — one card per row, full width */
    .fpw-cols-2,
    .fpw-cols-3,
    .fpw-cols-4,
    .fpw-cols-5 { grid-template-columns: 1fr !important; }

    .fpw-section-inner { padding: 36px 16px !important; }
    .fpw-products-grid { gap: 24px !important; }
    .fpw-clock { width: 44px; height: 44px; }
    .fpw-key   { width: 36px; }

    /* Card: vertical stack — NO row layout */
    .fpw-product-card {
        flex-direction: column !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Image link: full width block */
    .fpw-product-img-link {
        width: 100% !important;
        display: block !important;
    }

    /* Image: tall and full width — same proportions as WC default */
    .fpw-product-image {
        width: 100% !important;
        height: 280px !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    /* Info area: centred, generous padding */
    .fpw-product-info {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 20px 24px !important;
        width: 100% !important;
    }

    /* Product name: large and readable */
    .fpw-product-name {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    /* Price: clear and well spaced */
    .fpw-product-price {
        font-size: 16px !important;
        text-align: center !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    /* Sale price larger, original smaller */
    .fpw-product-price ins .amount,
    .fpw-product-price ins bdi {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .fpw-product-price del,
    .fpw-product-price del * {
        font-size: 13px !important;
    }

    /* Button: full width, proper height — matches WC style */
    .fpw-wrapper .fpw-btn,
    .fpw-wrapper a.fpw-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 12px !important;
        letter-spacing: 2px !important;
        border-radius: 4px !important;
        margin-top: 0 !important;
    }

    /* Badge: keep in top-left of image */
    .fpw-badge {
        top: 12px !important;
        left: 12px !important;
        font-size: 10px !important;
        padding: 5px 12px !important;
    }

    /* Filter tabs: wrap neatly */
    .fpw-filter-tabs {
        gap: 8px !important;
        justify-content: center !important;
    }
    .fpw-wrapper .fpw-filter-tabs .fpw-tab,
    .fpw-wrapper button.fpw-tab {
        padding: 8px 18px !important;
        font-size: 11px !important;
    }
}


/* ── Fade-in on load ── */
@keyframes fpw-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fpw-product-card {
    animation: fpw-fadein 0.45s ease both;
}

.fpw-product-card:nth-child(1) { animation-delay: 0.04s; }
.fpw-product-card:nth-child(2) { animation-delay: 0.09s; }
.fpw-product-card:nth-child(3) { animation-delay: 0.14s; }
.fpw-product-card:nth-child(4) { animation-delay: 0.19s; }
.fpw-product-card:nth-child(5) { animation-delay: 0.24s; }
.fpw-product-card:nth-child(6) { animation-delay: 0.29s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fpw-product-card { animation: none !important; opacity: 1 !important; transform: none !important; }
    .fpw-clock, .fpw-key { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v1.2 — Gender pills (Fragrance Display Pro integration)
═══════════════════════════════════════════════════════════ */
.fpw-card-gender { display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:5px !important; margin:0 0 10px !important; width:100% !important; }
.fpw-card-gender .fpw-gpill { display:inline-flex !important; align-items:center !important; gap:4px !important; padding:3px 9px !important; border-radius:30px !important; font-family:'Jost',sans-serif !important; font-size:10px !important; font-weight:600 !important; line-height:1.4 !important; letter-spacing:.2px !important; }
.fpw-card-gender .fpw-gpill__i { font-size:11px !important; line-height:1 !important; }
.fpw-card-gender .fpw-gpill--women  { background:#FDF2F8 !important; color:#BE185D !important; }
.fpw-card-gender .fpw-gpill--men    { background:#EFF6FF !important; color:#1D4ED8 !important; }
.fpw-card-gender .fpw-gpill--unisex { background:#FDF8E7 !important; color:#9C6F08 !important; }