/* ============================================================
   LUXURE CUSTOM STYLES
   Loaded via functions.php with a filemtime version stamp (auto cache-bust).
   ============================================================ */

/* --- Design tokens: dark + gold palette --- */
:root {
    --lux-dark:        #1e1a15;
    --lux-ink:         #1e1a15;
    --lux-muted:       #8a7e72;
    --lux-gold:        #bfa15f;
    --lux-gold-light:  #d9c18a;
    --lux-gold-soft:   #faf8f5;
    --lux-cream:       #f0ebe1;
    --lux-line:        #ebe5d8;
}

/* --- Global: warm ivory canvas instead of cold white --- */
body { background-color: #faf8f5; }

/* --- Accords: left-aligned thin-pill row, hairline divider above --- */
.lx-accords-min {
    text-align: left;
    margin: 20px 0 26px;
    border-top: 1px solid var(--lux-line);
    border-bottom: 1px solid var(--lux-line);
    padding: 20px 0 24px;
}
.lx-accords-min__label {
    display: block;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6e25;
    font-weight: 600;
    margin-bottom: 11px;
}
.lx-accords-min__row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-start; }
.lx-accord-pill {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--lux-dark) !important;
    border: 1px solid #e2d6b8;
    border-radius: 30px;
    padding: 5px 15px;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
a.lx-accord-pill:hover,
a.lx-accord-pill:focus {
    background: var(--lux-dark);
    color: var(--lux-gold-light) !important;
    border-color: var(--lux-dark);
}

/* --- Trust bar: light, hairline-bordered row under Add to Cart --- */
.lx-trust {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    background: transparent;
    border-top: 1px solid var(--lux-line);
    border-bottom: 1px solid var(--lux-line);
    padding: 18px 4px;
    margin: 36px 0 10px;
}
.lx-trust__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    line-height: 1.3;
    color: var(--lux-ink);
}
.lx-trust__item + .lx-trust__item { border-left: 1px solid var(--lux-line); }
.lx-trust__item svg { width: 22px; height: 22px; color: var(--lux-gold); }
.lx-trust__item span { color: var(--lux-ink); }

/* --- The Notes: left-aligned, flowing, hairline divider above --- */
.lx-fnotes {
    margin: 20px 0 0;
    border-top: 1px solid var(--lux-line);
    padding-top: 20px;
    text-align: left;
}
.lx-fnotes__label {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8c6e25;
    font-weight: 600;
    margin-bottom: 12px;
}
.lx-ntier { margin-bottom: 15px; }
.lx-ntier:last-child { margin-bottom: 0; }
.lx-nlab {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9a7c2e;
    font-weight: 600;
    margin-bottom: 5px;
}
.lx-nval { font-size: 14.5px; color: #2a2a2a; line-height: 1.65; }
.lx-nval a { color: #2a2a2a !important; text-decoration: none !important; }
.lx-nval a:hover, .lx-nval a:focus { color: var(--lux-gold) !important; }
.lx-ndot { color: #d3c193; margin: 0 7px; }

/* --- Buy-column structure: hairline dividers between blocks --- */
.single-product div.product div.summary .price { margin: 4px 0 2px; }
.single-product .woocommerce-product-details__short-description {
    margin-top: 0;
    line-height: 1.7;
    color: #666;
}
.single-product div.product div.summary form.cart {
    border-top: 1px solid var(--lux-line);
    margin-top: 20px;
    padding-top: 22px;
}

/* Keep the buy column beside the gallery on desktop (theme sizes it to
   content via col-fit, which can wrap it below when content is wide). */
@media (min-width: 850px) {
    .single-product div.product div.summary {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
}

/* --- Latest Products block --- */
.lx-lp-block { margin: 0; }
.lx-lp-hdr   { text-align: center; margin-bottom: 22px; }
.lx-lp-h     { font-size: var(--lp-h-sz, 13px); letter-spacing: 3.5px; text-transform: uppercase; font-weight: 400; color: var(--lux-dark); }

/* Wrap: holds arrows; layout (scroll/grid) injected per-instance via <style> */
.lx-lp-wrap { position: relative; }

/* Outer: scroll or overflow:visible — set per-instance */
.lx-lp-outer { -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.lx-lp-outer::-webkit-scrollbar { display: none; }
.lx-lp-outer:active { cursor: grabbing; }

/* Row: flex or grid — set per-instance */
.lx-lp-row { display: flex; gap: 16px; }

/* Duplicate set for seamless autoscroll — shown/hidden per-instance */
.lx-lp-dup { display: none; }

/* Auto-scroll keyframe (referenced by per-instance animation) */
@keyframes lxLpScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Pause on hover/tap (applied when row has animation) */
.lx-lp-row:hover { animation-play-state: paused; }

/* Cards — width set per-instance */
.lx-lp-card { display: block; text-decoration: none !important; color: inherit; flex-shrink: 0; }
.lx-lp-img-wrap { position: relative; overflow: hidden; background: #f5f0e8; }
.lx-lp-img      { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.lx-lp-card:hover .lx-lp-img { transform: scale(1.04); }

.lx-lp-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--lux-dark); color: var(--lux-gold-light);
    font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 4px 10px; pointer-events: none;
}

.lx-lp-info    { padding: 12px 0 0; }
.lx-lp-name    { font-size: var(--lp-name-sz, 13px); font-weight: 400; color: var(--lp-name-clr, var(--lux-dark)); letter-spacing: 0.4px; margin-bottom: 7px; line-height: 1.35; }
.lx-lp-accords { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lx-lp-accord  { font-size: 10px; letter-spacing: 0.4px; color: var(--lp-accord-clr, #8c6e25); border: 1px solid var(--lp-accord-brd, #e2d6b8); border-radius: 20px; padding: 3px 10px; }
.lx-lp-price   { font-size: var(--lp-price-sz, 12px); color: var(--lp-price-clr, var(--lux-muted)); letter-spacing: 0.3px; margin-bottom: 7px; }
.lx-lp-cta     { font-size: var(--lp-cta-sz, 10px); letter-spacing: 2px; text-transform: uppercase; color: var(--lp-cta-clr, var(--lux-dark)); text-decoration: none; border-bottom: 1px solid var(--lux-line); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; }
.lx-lp-card:hover .lx-lp-cta { color: var(--lux-gold); border-color: var(--lux-gold); }

/* Navigation arrows */
.lx-lp-arr {
    position: absolute; top: 36%; transform: translateY(-50%);
    background: var(--lux-dark); color: #fff;
    border: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    font-size: 20px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s; padding: 0; line-height: 1;
}
.lx-lp-prev { left: -17px; }
.lx-lp-next { right: -17px; }
.lx-lp-arr:hover { background: var(--lux-gold); color: var(--lux-dark); }
@media (max-width: 767px) { .lx-lp-arr { display: none; } }

/* --- Scent Finder block: pill / chip row --- */
.lx-sf-block { margin: 0; box-sizing: border-box; }
.lx-sf-hdr   { text-align: center; margin-bottom: 22px; }
.lx-sf-h     { font-size: var(--sf-h-sz, 13px); letter-spacing: 3.5px; text-transform: uppercase; font-weight: 400; color: var(--lux-dark); }
.lx-sf-sub   { font-size: 13px; color: var(--lux-muted); margin-top: 6px; letter-spacing: 0.3px; }

/* Normal scroll mode */
.lx-sf-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.lx-sf-scroller::-webkit-scrollbar { display: none; }
/* Auto-scroll mode: hide overflow so animation loops cleanly */
.lx-sf-scroller--auto { overflow: hidden; }

.lx-sf-row         { display: flex; flex-wrap: wrap; gap: 9px; }
.lx-sf-row--center { justify-content: center; }
.lx-sf-row--left   { justify-content: flex-start; }

/* Auto-scroll animation */
.lx-sf-row--scroll {
    flex-wrap: nowrap !important;
    animation: lxSfScroll 25s linear infinite; /* duration set via inline style */
    will-change: transform;
}
.lx-sf-row--scroll:hover { animation-play-state: paused; }

@keyframes lxSfScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Pills — colours driven by CSS vars set on .lx-sf-block */
.lx-sf-pill {
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: 0.7px;
    color: var(--sf-pill-text, var(--lux-dark)) !important;
    background: var(--sf-pill-bg, transparent);
    border: 1px solid var(--sf-pill-border, #e2d6b8);
    border-radius: 30px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    line-height: 1;
}
.lx-sf-pill:hover {
    background: var(--pill-clr, var(--lux-dark)) !important;
    color: #fff !important;
    border-color: var(--pill-clr, var(--lux-dark));
}
.lx-sf-pill--sm { padding: 6px 15px; }
.lx-sf-pill--md { padding: 9px 22px; }
.lx-sf-pill--lg { padding: 12px 30px; }

.lx-sf-psub { font-size: 0.8em; opacity: 0.60; border-left: 1px solid currentColor; padding-left: 7px; }

/* Mobile: per-instance overrides handle scroll — only alignment tweak needed globally */
@media (max-width: 767px) {
    .lx-sf-row--center { justify-content: flex-start; }
}

/* View All button */
.lx-sf-footer { text-align: center; margin-top: 20px; }
.lx-sf-viewall {
    display: inline-block;
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--lux-dark) !important; text-decoration: none !important;
    border-bottom: 1px solid var(--lux-line); padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.lx-sf-viewall:hover { color: var(--lux-gold) !important; border-color: var(--lux-gold); }

/* --- Accords page [lx_accords_page] --- */
.lx-ap-wrap { max-width: 1100px; margin: 0 auto; }
.lx-ap-family { margin-bottom: 48px; }
.lx-ap-family-title {
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    font-weight: 400; color: var(--lux-muted);
    margin: 0 0 18px; padding-bottom: 10px;
    border-bottom: 1px solid var(--lux-line);
}
.lx-ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
}
.lx-ap-card {
    display: block; text-decoration: none !important; color: inherit;
}
.lx-ap-img-wrap {
    position: relative; overflow: hidden;
    background: var(--lux-gold-soft);
    aspect-ratio: 3/4;
}
.lx-ap-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.lx-ap-card:hover .lx-ap-img { transform: scale(1.05); }
.lx-ap-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--lux-gold-soft);
}
.lx-ap-placeholder span {
    font-size: 36px; color: var(--lux-gold); font-weight: 300; letter-spacing: 0;
}
.lx-ap-info { padding: 10px 0 0; }
.lx-ap-name { font-size: 12px; color: var(--lux-dark); letter-spacing: 0.4px; margin-bottom: 3px; }
.lx-ap-count { font-size: 10px; color: var(--lux-muted); letter-spacing: 0.3px; }
@media (max-width: 549px) {
    .lx-ap-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
}

/* New launch block — mobile stacks image top, content bottom */
@media (max-width: 767px) {
    .lx-nl-grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .lx-nl-img {
        order: -1 !important;
        min-height: 260px !important;
    }
    .lx-nl-content {
        order: 0 !important;
        padding: 20px !important;
    }
}

/* --- Sticky Add-to-Cart bar --- */
.lx-satc {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--lux-line);
    z-index: 9990;
    transform: translateY(100%); transition: transform 0.28s ease;
    padding: 10px 16px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.lx-satc--show { transform: translateY(0); }
.lx-satc-inner {
    display: flex; align-items: center; gap: 12px;
    max-width: 960px; margin: 0 auto;
}
.lx-satc-img { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--lux-line); }
.lx-satc-info { flex: 1; min-width: 0; }
.lx-satc-name { font-size: 13px; color: var(--lux-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; }
.lx-satc-price { font-size: 11px; color: var(--lux-muted); margin-top: 2px; }
.lx-satc-btn {
    background: var(--lux-dark); color: var(--lux-gold-light);
    border: none; padding: 11px 20px;
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s;
    font-family: inherit;
}
.lx-satc-btn:hover { background: var(--lux-gold); color: var(--lux-dark); }

/* --- Upsell size prompt (above Add to Cart button) --- */
.lx-upsell {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--lux-dark);
    border: none; border-radius: 3px;
    padding: 13px 16px; margin-bottom: 14px;
    font-size: 12px; color: var(--lux-gold-light); line-height: 1.6;
    letter-spacing: 0.2px;
}
.lx-upsell-icon { color: var(--lux-gold); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 549px) {
    .lx-trust { padding: 14px 2px; }
    .lx-trust__item { font-size: 9.5px; gap: 5px; }
    .lx-trust__item svg { width: 20px; height: 20px; }
    .lx-accord-pill { font-size: 10.5px; padding: 4px 13px; }

    /* Notes: swipe-scroll per tier on mobile */
    .lx-ntier { position: relative; }
    .lx-nval {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        font-size: 14px;
        padding-bottom: 2px;
        padding-right: 36px;
    }
    .lx-nval::-webkit-scrollbar { display: none; }
    .lx-nval a,
    .lx-nval span { white-space: nowrap; flex-shrink: 0; }
    /* Fade hint: more content to the right */
    .lx-ntier::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
        pointer-events: none;
    }
}

/* --- Swipe progress track (mobile only) --- */
.lx-lp-progress,
.lx-sf-progress { display: none; }
@media (max-width: 767px) {
    .lx-lp-progress,
    .lx-sf-progress {
        display: block;
        height: 1.5px;
        background: rgba(30,26,21,0.1);
        margin: 14px 0 0;
        position: relative;
        border-radius: 2px;
        overflow: hidden;
    }
    .lx-lp-progress-fill,
    .lx-sf-progress-fill {
        position: absolute;
        left: 0; top: 0;
        height: 100%;
        background: #bfa15f;
        border-radius: 2px;
        transition: left 0.08s linear, width 0.08s linear;
        min-width: 28px;
    }
}

/* --- About Us block --- */
.lx-about {
    display: flex;
    align-items: stretch;
    background: #1e1a15;
    min-height: 480px;
    overflow: hidden;
}
.lx-about-img {
    flex: 0 0 48%;
    overflow: hidden;
}
.lx-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lx-about-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 68px 60px 64px;
}
.lx-about-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #bfa15f;
    margin-bottom: 20px;
    font-weight: 400;
}
.lx-about-heading {
    font-size: clamp(28px, 2.8vw, 44px);
    font-weight: 300;
    color: #faf8f5;
    line-height: 1.18;
    margin-bottom: 24px;
}
.lx-about-body {
    font-size: 14px;
    color: rgba(250,248,245,0.52);
    line-height: 1.85;
    margin-bottom: 36px;
    max-width: 400px;
}
.lx-about-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #bfa15f !important;
    text-decoration: none !important;
    border-bottom: 1px solid #bfa15f;
    padding-bottom: 3px;
    width: fit-content;
    transition: opacity 0.2s;
}
.lx-about-cta:hover { opacity: 0.72; }
@media (max-width: 767px) {
    .lx-about { flex-direction: column; min-height: 0; }
    .lx-about-img { flex: none; width: 100%; height: 280px; }
    .lx-about-img img { width: 100%; height: 100%; object-fit: cover; }
    .lx-about-text { padding: 36px 24px 44px; }
    .lx-about-heading { font-size: 28px; }
    .lx-about-body { font-size: 13.5px; max-width: 100%; margin-bottom: 28px; }
}

/* --- CusRev slider: fix card stretching to track height on mobile --- */
@media (max-width: 767px) {
    .cr-reviews-slider .cr-review-card,
    .cr-reviews-slider .cr-review-card .cr-review-card-inner {
        height: auto;
    }
}