/*
 * Copied verbatim from the original "Shop By Scent" legacy page template,
 * with one deviation (same conflict class as temp-legacy-styles/
 * margin-reset rules were removed (base block, the page-id-8370230 Cypress
 * override, the max-width:782px `li` override, and the max-width:800px
 * mobile `li` width override). Those were written for the old `<li>`-based
 * product grid markup and, on the current theme's `.product-card` grid
 * component, override shop.css's `display: grid` with `display: flex` —
 * with no fixed card width, that squishes every product onto one
 * unwrapped row instead of wrapping. shop.css's own grid already handles
 * this layout correctly.
 *
 * Heads up: this file also carries an unscoped `p { color: var(--text); margin:
 * 0; text-align: left; }` rule from the original template — it applies to
 * every <p> on any page this stylesheet loads on (header/footer included),
 * not just the scent-page content. Left in place since it hasn't shown a
 * visible break, but worth a second look during QA.
 *
 * Added (not in the original): a real full-bleed rule for `.alignfull`
 * blocks. The original template's own full-width attempt
 * (`.no-sidebar .entry-content .heading-block .wp-block-image`) is dead
 * code on the current theme — neither `.no-sidebar` nor `.entry-content`
 * exist anywhere in the current page markup (verified on
 * /shop-by-scent/our-bergamot-and-lemon/). The real wrapper is
 * `.page-content`, which has its own max-width + side padding
 * (assets/css/global.css), so `alignfull` images/sections were rendering
 * at reading-column width instead of edge-to-edge.
 */

/****** GENERAL STYLING  *******/

.page-content .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Guard against the 100vw breakout above introducing a horizontal
   scrollbar on desktop browsers that reserve layout space for it. */
body {
    overflow-x: hidden;
}

.heading-block .wp-block-group__inner-container {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

#main .entry-content > .wp-block-group > .wp-block-group__inner-container {
    width: 100%;
    max-width: 100%;
}

.entry-content>[class*="wp-block-"]:not(:last-child):not(.wp-block-heading) {
    margin-bottom: 0;
}

.heading-block {
    margin: 0 !important;
}

.heading-block .wp-block-group__inner-container h2,
.heading-block .wp-block-group__inner-container p {
    max-width: 724px;
    margin: 0 auto;
    padding: 0 20px;
}

.no-sidebar .entry-content .heading-block .wp-block-image {
    margin-left: 0;
    margin-right: 0;
    max-width: 100vw;
    width: 100vw;
}

.no-sidebar .entry-content .heading-block .wp-block-image img {
    min-height: 225px;
    object-fit: cover;
}

.wp-block-image img {
    margin: 0 auto;
}

.heading-block .wp-block-group__inner-container h2 {
    text-align: center;
    color: var(--text);
    line-height: 1.0;
    margin-bottom: 30px;
    font-size: 55px;
    letter-spacing: 0px;
}

.heading-block .wp-block-group__inner-container p {
    font-size: 18px;
    letter-spacing: 0.48px;
    line-height: 23px;
    color: var(--text);
    margin-bottom: 35px;
    text-align: center;
}

.mid-banner {
    max-width: 1400px;
    margin: 0 auto !important;
    padding-top: 30px;
    padding-right: 3%;
    padding-bottom: 4%;
    padding-left: 3%;
    align-items: center !important;
}

.mid-banner img {
    width: 100%;
}

.mid-banner h3 {
    font-size: 44px;
    line-height: 1.0;
    letter-spacing: 0px;
    color: var(--text);
    margin-bottom: 40px;
    text-align: left;
}

.mid-banner p {
    color: var(--text);
    padding-bottom: 30px;
    font-size: 18px;
    letter-spacing: 0.48px;
}

.hp-read-more-btn {
    justify-self: left;
}

.hp-banner-btn_white {
    background-color: #FFA222;
    color: #fff;
    border-radius: 10px;
    margin-left: 0%;
    font-size: 23px;
    padding: 9px 89px;
    min-width: 100%;
    text-transform: capitalize;
    border: none;
}

.full-text-banner {
    padding: 20px;
    margin-bottom: 50px;
}

.full-text-banner h3 {
    max-width: 836px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    font-size: 38px;
    line-height: 1.0;
    letter-spacing: 0px;
    font-style: italic;
}

.star-notes-section > .wp-block-group__inner-container {
    max-width: 1150px;
    text-align: center;
    margin: 0 auto;
}

.star-notes-section .wp-block-columns {
    margin: 0;
    padding: 50px 0;
}

.star-notes-section h3 {
    text-align: center;
    color: var(--text);
    line-height: 54px;
    margin-bottom: 30px;
    font-size: 35px;
    line-height: 1.0;
    letter-spacing: 0px;
    font-weight: 200;
}

.star-notes-section>.wp-block-group__inner-container p {
    color: var(--text);
    margin: 0;
    text-align: center;
}

.star-notes-section .wp-block-columns h4 {
    color: var(--text);
    margin: 35px 0 20px;
    text-align: center;
    font-size: 25px;
    line-height: 1.0;
    font-style: italic;
}

.star-notes-section .wp-block-columns p {
    max-width: 330px;
    margin: 0 auto;
}

.line-divider {
    height: 1px;
    display: block;
    border-top: 1px solid #707070;
    width: 410px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.fragrance-banner {
    max-width: 1350px;
    margin: 0 auto 50px !important;
    align-items: center !important;
    padding: 0 0px;
    gap: 0;
}

.wp-block-columns.fragrance-banner.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex .wp-block-image img {
box-sizing: border-box;
height: 480px !important;
max-width: 100%;
vertical-align: bottom;
object-fit: cover;
}

.fragrance-banner .fragrance-banner-heading {
padding: 0px 0px;
max-width: 675px;
padding-right: 60px !important;
padding-left: 60px;
}

.fragrance-banner .fragrance-banner-heading h3 {
    color: var(--text);
    line-height: 1.0;
    margin-bottom: 40px;
    text-align: left;
    font-size: 35px;
    line-height: 1.0;
    letter-spacing: 0px;
}

p {
    color: var(--text);
    margin: 0;
    text-align: left;
}

.art-of-scent-container {
    margin: 70px 0;
}

.art-of-scent-container h3 {
    font-size: 55px;
    line-height: 1.0;
    letter-spacing: 0px;
    text-align: center;
    color: var(--text);
    margin-bottom: 35px;
    margin-top: 35px;
}

.art-of-scent-container p {
    color: var(--text);
    margin: 0 auto 35px;
    text-align: center;
    max-width: 683px;
}

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

.wp-block-columns.fragrance-banner.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex {
background-color: #F5F5F5 !important;
}

/****** END GENERAL STYLING  *******/
/****** sea salt STYLING  *******/

.page-id-8268851 .full-text-banner {
    background-color: #9EC2BF!important;
}

/****** END sea salt STYLING  *******/

/****** Turk Rose & Sandlwood STYLING  *******/

.page-id-8409829 .full-text-banner {
    background-color: #9b4250!important;
}

/****** END Turk Rose & Sandlwood STYLING  *******/

/******  Lemon & Rose STYLING  *******/

.page-id-785 .full-text-banner {
    background-color: #efc40f!important;
}

/****** END Lemon & Rose STYLING  *******/
/******  Orange Petit STYLING  *******/

.page-id-8184586 .full-text-banner {
    background-color: #F49B4E!important;
}

/****** END Orange Petit STYLING  *******/

/****** Jasmine Rosewood STYLING  *******/

.page-id-7425 .full-text-banner {
    background-color: #BCB0A0!important;
}

/****** END Jasmine Rosewood STYLING  *******/

/****** Lav & Pep STYLING  *******/

.page-id-7295 .full-text-banner {
    background-color: #BB99D0!important;
}

.page-id-7295 .star-notes-section > .wp-block-group__inner-container {
max-width: 1050px!important;
text-align: center;
}

/****** END Lav & Pep STYLING  *******/

/******  Ner&Lem STYLING  *******/

.page-id-806 .full-text-banner {
    background-color: #efc40f!important;
}

/****** END Ner&Lem STYLING  *******/
/******  Pineapple STYLING  *******/

.page-id-9030513 .full-text-banner {
    background-color: #FABF1D!important;
}

/****** END Pineapple STYLING  *******/

    /******  rasp & musk STYLING  *******/

.page-id-8191330 .full-text-banner {
    background-color: #C91F46!important;
}

/****** END rasp & musk STYLING  *******/

/******  Lav STYLING  *******/

.page-id-808 .full-text-banner {
    background-color: #8a5da6!important;
}

/****** END Lav STYLING  *******/


/******  Port Bay STYLING  *******/

.page-id-1022762 .full-text-banner {
    background-color: #3ebacf!important;
}

/****** END Port Bay STYLING  *******/

/******  Man & Grape STYLING  *******/

.page-id-1261 .full-text-banner {
    background-color: #F16C69!important;
}

/****** END Man & Grape STYLING  *******/


/******  Cham & Vet STYLING  *******/

.page-id-8381543 .full-text-banner {
    background-color: #7e5c49!important;
}

/****** END Cham & Vet STYLING  *******/

/****** Cit Grove STYLING  *******/

.page-id-986765 .full-text-banner {
    background-color: #B0C652!important;
}

/****** END Cit grove STYLING  *******/

/****** Water Lily STYLING  *******/

.page-id-8295129 .full-text-banner {
    background-color: #637595!important;
}

/****** END Water Lily STYLING  *******/

/******  Cypress STYLING  *******/

.page-id-8370230 .full-text-banner {
    background-color: #506144!important;
}

/****** END Cypress STYLING  *******/

/******  Wild Berry STYLING  *******/

.page-id-8396555 .full-text-banner {
    background-color: #4d3443!important;
}

/****** END Wild Berry STYLING  *******/

/******  leather vanilla STYLING  *******/

.page-id-8745221 .full-text-banner {
    background-color: #624F42!important;
}

/****** END leather vanilla STYLING  *******/

    /******  MAN SAND STYLING  *******/

.page-id-8655021 .full-text-banner {
    background-color: #604635!important;
}

/****** END MAN SAND STYLING  *******/

/******  Mand & Clove STYLING  *******/

.page-id-8520310 .full-text-banner {
    background-color: #b56a1e!important;
}

/****** END Mand & Clove STYLING  *******/

/******  Pine & Cin STYLING  *******/

.page-id-8520272 .full-text-banner {
    background-color: #293e10!important;
}

/****** END Pine & Cin STYLING  *******/

/******  Spiced Ora STYLING  *******/

.page-id-8522069 .full-text-banner {
    background-color: #cc751e!important;
}

/****** END spiced Ora STYLING  *******/

/******  Fest spice STYLING  *******/

.page-id-8562570 .full-text-banner {
    background-color: #5d3915!important;
}

/****** END Fest Spice STYLING  *******/

/******  Cookie STYLING  *******/

.page-id-8544213 .full-text-banner {
    background-color: #8b5927!important;
}

/****** END Cookie STYLING  *******/

/******  Xmas Wish STYLING  *******/

.page-id-8562626 .full-text-banner {
    background-color: #c19d53!important;
}

/****** END Xmas Wish STYLING  *******/

/******  Silent Night STYLING  *******/

.page-id-8562593 .full-text-banner {
    background-color: #7e644b!important;
}

/****** END Silent Night STYLING  *******/


/******  Patchouli & Eucalyptus STYLING  *******/

.page-id-802 .full-text-banner {
    background-color: #708462!important;
}

/****** END Patchouli & Eucalyptus STYLING  *******/


/******  Orange and Chamomile STYLING  *******/

.page-id-371241 .full-text-banner {
    background-color: #d67d15!important;
}

/****** END Orange and Chamomile STYLING  *******/


/******  Green Apple & Honeysuckle STYLING  *******/

.page-id-8207579 .full-text-banner {
    background-color: #84a541!important;
}

/****** END Green Apple & Honeysuckle STYLING  *******/



/******  Cardamom & Nutmeg STYLING  *******/

.page-id-13932 .full-text-banner {
    background-color: #6e4a34!important;
}

/****** END Cardamom & Nutmeg STYLING  *******/


/******  Lake & Sky STYLING  *******/

.page-id-8471299 .full-text-banner {
    background-color: #3b4267!important;
}

/****** END Lake & Sky STYLING  *******/


/******  Clean Cotton STYLING  *******/

.page-id-8455714 .full-text-banner {
    background-color: #92b8c9!important;
}

/****** END Clean Cotton STYLING  *******/


/******  Bergamot & Lemon STYLING  *******/

.page-id-371238 .full-text-banner {
    background-color: #6f794e!important;
}

/****** END Bergamot & Lemon STYLING  *******/

/******  Wild Mint & Sicilian Lemon STYLING  *******/

.page-id-945185 .full-text-banner {
    background-color: #e2c341!important;
}

/****** END Wild Mint & Sicilian Lemon STYLING  *******/

/******  Mediterranean Lemon & Amber STYLING  *******/

.page-id-945126 .full-text-banner {
    background-color: #dca627!important;
}

/****** END Mediterranean Lemon & Amber STYLING  *******/


/******  Twilight Mist STYLING  *******/

.page-id-8576072 .full-text-banner {
    background-color: #5a4972!important;
}

/****** END Twilight Mist STYLING  *******/

/****** Geranium & Ylang Ylang STYLING  *******/

.page-id-804 .full-text-banner {
    background-color: #7cad7d!important;
}

/****** END Geranium & Ylang Ylang STYLING  *******/


/****** Blushing Rose & Jasmine STYLING  *******/

.page-id-945038 .full-text-banner {
    background-color: #d89495!important;
}

/****** END Blushing Rose & Jasmine STYLING  *******/


@media screen and (max-width: 800px) {
/****** GENERAL STYLING  *******/

    .heading-block {
        margin: 0px 0 40px !important;
    }

    .heading-block .wp-block-group__inner-container h2 {
        font-size: 35px;
    }

    .mid-banner {
        flex-direction: column-reverse;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .mid-banner h3,
    .mid-banner p,
    .mid-banner .hp-read-more-btn {
        padding-left: 25px;
        padding-right: 25px;
        text-align: center;
    }
    .mid-banner h3 {
        margin-bottom: 15px;
        font-size: 27px;
    }

    .hp-read-more-btn {
        justify-self: center;
    }

    .hp-banner-btn_white {
        font-size: 16px;
        margin-top: 16px;
        padding: 9px 50px;
    }

    .full-text-banner h3 {
        font-size: 34px;
    }

    .full-text-banner {
        padding: 35px;
        margin-bottom: 30px;
    }

    .star-notes-section h3 {
        margin-bottom: 15px;
    }

    .star-notes-section>.wp-block-group__inner-container p {
        padding: 0 40px;
    }

    .star-notes-section .wp-block-columns {
        margin: 0;
        padding: 15px 0 30px;
    }

    .line-divider {
        width: 200px;
        margin-bottom: 30px;
    }

    .fragrance-banner {
        padding: 0;
        flex-direction: column-reverse;
        margin: 0 auto 40px !important;
    }

    .fragrance-banner.mob-reversed {
        flex-direction: column;
    }

    .fragrance-banner .fragrance-banner-heading h3 {
        text-align: center;
        padding-top: 30px;
        margin-bottom: 15px;
    }

    .fragrance-banner .fragrance-banner-heading p {
        text-align: center;
    }

    .art-of-scent-container {
        margin: 20px 0;
    }

    .art-of-scent-container img {
        min-height: 225px;
        object-fit: cover;
    }

    .art-of-scent-container h3 {
        font-size: 35px;
    }

    .art-of-scent-container p {
        padding: 0 40px;
    }

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

/****** END GENERAL STYLING  *******/


}

@media screen and (max-width: 768px) {
/****** GENERAL STYLING  *******/

    body .site-main .wp-block-group__inner-container {
        padding: 0px;
    }
    .fragrance-banner .fragrance-banner-heading {
padding: 0 40px;
padding-bottom: 30px;
}

/****** END GENERAL STYLING  *******/

}

/*
 * `old-shop-by-scent` variant — an older version of the same legacy
 * template used by a smaller (~6-page) batch, matched in loader.php's
 * valentte_temp_scent_styles_is_match() alongside `art-of-scent-container`.
 * Copied verbatim from the page's own inline styling — added here rather
 * than replacing anything above, since the `art-of-scent-container` pages
 * still need their own rules untouched.
 */
.old-shop-by-scent .wp-block-group__inner-container {
    max-width: 100%;
    text-align: center;
}

.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {
    width: 24.75%;
}

.old-shop-by-scent {
    padding-bottom: 25px;
}

.old-shop-by-scent h2.wp-block-heading {
    letter-spacing: 0px;
    color: var(--text);
    text-transform: capitalize;
    line-height: 1.0;
    font-size: 55px;
    margin-bottom: 15px;
    font-weight: 500;
    padding: 20px 20px 0;
}

.old-shop-by-scent .heading-txt {
    color: var(--text);
    margin: 0 auto;
    max-width: 890px;
    padding: 0 20px;
    font-weight: 400;
    margin-bottom: 30px;
}

.old-shop-by-scent img {
    margin-bottom: 25px;
    min-height: 225px;
    object-fit: cover;
}


@media screen and (max-width: 768px) {

    .old-shop-by-scent h2.wp-block-heading {
        font-size: 35px;
    }

    .site-main .wp-block-group__inner-container {
        padding: 0px;
    }
}