/*
* Recovered from the live page's inline <style> block (verified: page ID
* 1039857, https://valentte.com/all-scents/, fetched 2026-08-04 — production
* is still on the old generatepress-child theme, not valentte-theme).
*
* Scoped strictly to the `#all-scents`-prefixed rules from that block.
* Deliberately excluded several other unscoped rules that shared the same
* <style> tag on the live page: `.hp-banner-btn_white_small`,
* `.hp-read-more-btn`, `.art-of-scent-container .hp-read-more-btn`,
* `img.wp-image-9106430`, `figure.wp-block-image.size-full`,
* `figure.wp-block-image.size-large`, `.tc-image::after`. None of those are
* scoped to `#all-scents` — `.art-of-scent-container` is in fact the
* shop-by-scent marker (see temp-legacy/shop-by-scent/) — so they read as
* sitewide/shared rules bundled into the same output tag, not
* template-specific styling for this page. Pulling them in wholesale would
* leak page-specific overrides onto every other page that loads this
* stylesheet.
*
* No `.woocommerce` / `ul.products` / `li` conflict present — confirmed zero
* matches, same as temp-legacy/all-gifts/. No full-bleed/`alignfull` fix
* needed either — `.wp-block-group__inner-container` uses a constrained
* max-width, no full-width attempt in the source.
*
* OPEN ITEM (not fixed by this file): the page's "<Family> Fragrances"
* sections render as `.tc-wrapper` / `.tc-slider` / `.tc-card` carousels,
* driven by the old theme's "Tag Carousel" plugin + slick-carousel (a
* jQuery plugin, loaded via CDN on production). Neither is part of this
* theme's plugin stack or JS convention (vanilla-only, no jQuery on
* frontend — see ARCHITECTURE.md). Restoring this stylesheet does not
* restore that carousel behavior — flag to William separately if the
* carousels need to keep working post-migration.
*/


.hp-banner-btn_white_small {
    border-radius: 5px !important;
    border: 1px solid #211F20;
    width: 20%;
    box-shadow: none;
    color: var(--text);
    text-transform: capitalize;
    font-size: 18px !important;
    font-weight: 400;
    background-color: #ffffff00;
    margin-top: 15px;
    margin-bottom: 0px;
}

.hp-read-more-btn {
    text-align: center;
}

.art-of-scent-container .hp-read-more-btn {
    justify-self: center;
}

img.wp-image-9106430 {
    min-width: 100%;
}

figure.wp-block-image.size-full {
    min-width: 133%;
    margin-left: -15%;
    margin-bottom: 4%;

}

figure.wp-block-image.size-large {
    min-width: 100%;
    margin-bottom: 4%;
}

.tc-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

#all-scents .wp-block-group__inner-container {
    max-width: 1520px;
    text-align: center;
}

#all-scents .main-heading {
    font-size: 65px;
    letter-spacing: 0px;
    color: var(--text);
    margin-bottom: 10px;
    font-weight: 500;
}

#all-scents .main-txt {
    letter-spacing: 0px !important;
    color: var(--text);
    margin-bottom: 45px;
    line-height: 26px !important;
    padding-right: 7%;
    padding-left: 7%;
}

#all-scents .sec-title {
    margin-bottom: 28px;
    font-weight: 500;
    line-height: 1.0;
    font-size: 45px;
    letter-spacing: 0px;
    color: var(--text);
}

#all-scents .images-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

#all-scents .images-container a {
    display: block;
    width: 100%;
    max-width: 426px;
    position: relative;
}

#all-scents .images-container .image-text {
    position: absolute;
    color: #fff;
    font-size: 25px;
    width: 100%;
    font-weight: 600;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

#all-scents .images-container .best-tag {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1px;
    background-color: white;
    color: var(--text);
    padding: 10px 15px;
    border: 2px solid #EBEAEA;
    font-size: 20px;
}

@media screen and (max-width: 992px) {
    #all-scents .images-container a {
        max-width: 320px;
    }
}

@media screen and (max-width: 781px) {
    #all-scents .images-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #all-scents .images-container:has(> a:only-child)>a {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 45vw;
    }

    #all-scents .images-container .image-text {
        font-size: 16px;
        font-weight: 400;
    }

    #all-scents .main-heading {
        font-size: 45px;
    }

    #all-scents .sec-title {
        font-size: 35px;
    }
}
/*** MOBILE OVERFLOW FIX — the 133%-wide bleed image (negative margin) stuck out
     past the screen on phones/tablets and let the page zoom out. ***/
@media screen and (max-width: 1100px) {
    figure.wp-block-image.size-full {
        min-width: 0;
        margin-left: 0;
    }
}