/*
 * Copied from William's pasted <style> block for the "Collection SBS"
 * template, shared by 6 pages: 8420937 (Autumn), 8564506 (Xmas), 8724005
 * (labelled "Xmas" in the source comment below, but note: per an earlier
 * WP REST lookup this session, page 8724005 is actually titled "The Winter
 * Collection" — kept the comment/behaviour as given, flagging the label
 * mismatch here rather than silently correcting it), 9049214 ("New Home
 * Fragrance" per that same earlier lookup), 800986, and 840647.
 *
 * Built directly from the pasted CSS per William's request — NOT verified
 * against live markup (no curl/grep check this time). If any selector here
 * turns out not to match the real DOM once these pages are on the new
 * theme, revisit.
 *
 * Two deviations from verbatim, both established precedent from
 * temp-legacy/shop-by-scent/ (see that folder's README):
 *
 * 1. REMOVED the recurring product-grid conflict (fixed 2026-09-17 — the
 *    earlier version of this comment claimed this was already done, but a
 *    full-theme code review found the rules were still present verbatim;
 *    now actually removed): the original `.woocommerce ul.products` / `li`
 *    flex + margin-reset rules (base block, and the
 *    `body .woocommerce ul.products li { width: 46% !important; }` mobile
 *    override inside the 800px media query). These fight the current
 *    theme's `.product-card` CSS Grid (shop.css) and squish every product
 *    onto one unwrapped row instead of wrapping. shop.css's own grid
 *    already handles this layout.
 * 2. ADDED a real `.page-content .alignfull` full-bleed rule + an
 *    `overflow-x: hidden` guard. The original CSS's own full-width attempt
 *    targets `` (kept below, unmodified — it's
 *    dead code on the current theme per established precedent, neither
 *    selector exists in current markup) but this template's hero banners
 *    use real `alignfull` blocks (`.full-banner-container`, `.mobile-img`,
 *    `.desktop-img`), so they need the actual breakout mechanism to render
 *    edge-to-edge under `.page-content` (assets/css/global.css).
 *
 * NOT included: this page embeds a live WooCommerce product grid (that's
 * why the product-grid conflict existed in the first place), so
 * loader.php re-enqueues valentte-shop / valentte-product / cart.js, same
 * as shop-by-scent/.
 *
 * Also note: pages 9049214 and 800986 have no page-specific `.page-id-*`
 * override anywhere in the pasted CSS — they get only the shared/general
 * styling below. Not an oversight on this end; nothing to add without more
 * from William.
 */
/****** GENERAL STYLING  *******/

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


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

h5.wp-block-heading.has-text-align-center {
    margin-top: 35px !important;
    margin-bottom: 20px;
}

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



h5.wp-block-heading.has-text-align-center a {
    font-family: 'Cormorant' !important;
    line-height: 24px;
    text-decoration: underline 1px;
    font-size: 30px !important;
}

.main_header_desk.max_width_section_new {
    max-width: 1400px;
    place-self: center;
}


.boxing_day_heading_grey.wpb_column.vc_column_container.vc_col-sm-6 {
    background-color: #F5F5F5;
}

.button_column a {
    background-color: #F0F0F0;
    padding-top: 10px;
    border-radius: 25px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 10px;
    color: var(--text);
    border: 1px solid #D3CDCD !important;
}

.image-container {
    position: relative;
    display: inline-block;
}

/*** Buttons ***/
.hp-banner-btn_white_mob {
    background-color: #ffa22200;
    color: var(--white);
    margin-left: 0%;
    font-size: 23px;
    margin-top: 16px;
    margin-top: 16px;
    padding: 9px 60px;
    min-width: 100%;
    border-radius: 5px !important;
    border: 1px solid #211F20;
}

.hp-banner-btn_white {
    background-color: #fff0;
    color: var(--text);
    margin-left: 0%;
    font-size: 23px;
    margin-top: 16px;
    padding: 9px 89px;
    min-width: 100%;
    border-radius: 5px !important;
    border: 1px solid #211F20;
}



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

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

/*** END ***/

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
    background-color: #ffffff;
}

.image-text {
    position: absolute;
    bottom: -10%;
    left: 54%;
    transform: translateX(-50%);
    color: var(--text);
    padding: 0 0;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
}



@media only screen and (min-width: 450px) {
    .image-text {
        position: absolute;
        bottom: -13%;
        left: 48%;
        transform: translateX(-50%);
        color: var(--text);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 18px;
    }

}

figure.wp-block-image.alignfull.size-full.full-banner-container.mobile-img {
    display: block;
}

figure.wp-block-image.alignfull.size-full.mobile-img {
    display: block;
}

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

    .button_column a {
        background-color: #F0F0F0;
        padding-top: 10px;
        border-radius: 25px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 10px;
        color: var(--text);
        border: 1px solid #D3CDCD !important;
        display: block;
        gap: 10px;
        margin-bottom: 10px;
        max-width: 220px;
        justify-self: center;
        min-width: 200px;
    }

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

    figure.wp-block-image.alignfull.size-full.full-banner-container.mobile-img {
        display: block;
    }

    figure.wp-block-image.alignfull.size-large.full-banner-container,
    figure.wp-block-image.alignfull.size-large.desktop-img {
        display: block;
    }

    figure.wp-block-image.alignfull.size-full.mobile-img {
        display: block;
    }

}

@media only screen and (max-width: 450px) {
    .button_column a {
        background-color: #F0F0F0;
        padding-top: 10px;
        border-radius: 25px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 0;
        color: var(--text);
        border: 1px solid #D3CDCD !important;
        display: block;
        margin-bottom: 10px;
        max-width: 184px;
        justify-self: center;
        min-width: 154px;
    }

    .vc_row.wpb_row.vc_inner.vc_row-fluid.main_header_desk.button_column.vc_custom_1742375185918.vc_row-o-content-top.vc_row-flex {
        place-self: center;
    }

    .image-text {
        position: absolute;
        bottom: -10%;
        left: 51%;
        transform: translateX(-50%);
        color: var(--text);
        padding: 0 0;
        border-radius: 5px;
        font-size: 16px;
        width: 100%;
    }

    h5.wp-block-heading.has-text-align-center a {
        font-family: 'Cormorant' !important;
        line-height: 22px;
        text-decoration: underline 1px;
        font-size: 24px !important;
    }

}



@media only screen and (min-width: 999px) {
    .image-text {
        position: absolute;
        bottom: -10%;
        left: 35%;
        transform: translateX(-37%);
        color: var(--text);
        padding: 5px 5px;
        border-radius: 5px;
        font-size: 20px;
        width: 100%;
    }

    .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
        max-width: 50%;
    }



}

.wpb_raw_code.wpb_content_element.wpb_raw_html {
    text-align: center;
}

.hp-banner-btn {
    letter-spacing: 2px;
    text-align: center;
    padding: 11px;
    margin: 0;
    font-size: 17px;
    color: var(--text);
    background-color: transparent;
    border: 1px solid #565656;
    border-radius: 10px;
    width: 50%;
    min-width: 300px;
    transition: background-color 0.5s ease-out;
}



.vc_row.vc_row-flex {
    display: flex;
    flex-wrap: nowrap;
}

.main_section_split {
    display: flex;
    flex-wrap: wrap !important;
}

.vc_column_container>.vc_column-inner {
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
}


body .control_font_bsk h3 {
    font-size: 45px !important;
    line-height: 1.0 !important;
    letter-spacing: 0px !important;
    font-weight: 200 !important;
    color: var(--text);
}

body .control_font_bsk p {
    font-size: 18px !important;
    color: var(--text) !important;
    letter-spacing: 0.48px !important;
    margin-top: 15px;
}


span.image-text {
    font-weight: 200;
    z-index: 1;
}

.image-text {
    display: block;
    text-align: left !important;
    margin-top: 5px;
}










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

.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: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.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: 2%;
    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: #fff0;
    color: var(--text);
    border-radius: 10px;
    margin-left: 0%;
    font-size: 23px;
    padding: 9px 89px;
    min-width: 100%;
    text-transform: capitalize;
}

.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;
}

.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;
    background-color: #F5F5F5 !important;
}

.fragrance-banner .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: 0 40px;
}

.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: 0 !important;
}

.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 {
    margin-top: 3% !important;
}

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


/****** Autumn STYLING  *******/

.page-id-8420937 .full-text-banner {
    background-color: #49553a !important;
}

/****** END Autumn STYLING  *******/

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

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

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

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

.page-id-8724005 .full-text-banner {
    background-color: #88A9BA !important;
}

/****** END Xmas 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;
    }

    .wp-block-columns.mid-banner-second.diffuser-collection {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 0%;
        margin-bottom: -8% !important;
    }

    .wp-block-columns.fragrance-banner {
        margin-top: 3% !important;
        margin-bottom: -3% !important;
    }

    .full-text-banner {
        margin-bottom: -3% !important;
    }

    .fragrance-banner .wp-block-image img {
        box-sizing: border-box;
        height: 240px !important;
        max-width: 100%;
        vertical-align: bottom;
        object-fit: cover;
    }

    .hp-banner-btn_white_small {
        margin-bottom: 20px !important;
        margin-top: 20px !important;
    }

    .mid-banner {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-top: 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;
        margin-top: 50px;
    }

    .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  *******/

}









/**** New HF Page ***/

#why-valentte {
    background: #EFE8DE;
    padding: 18px 30px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

 .heading-block .wp-block-image img {
    min-height: 225px;
    object-fit: cover;
    max-height: 660px;
}

#why-valentte .features {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#why-valentte .features li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#why-valentte .features img {
    width: fit-content;
    height: fit-content;
    margin-bottom: 10px;
}

#why-valentte .features span {
    font-family: "Ysabeau", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

@media (max-width: 768px) {
    #why-valentte {
        overflow-x: auto;
    }

    .wp-block-columns.mid-banner.diffuser-collection.middle-aligns.smaller-mobs.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }

    #why-valentte .features {
        min-width: 100%;
        gap: 24px;
    }

    #why-valentte .features span {
        font-size: 14px;
    }
}

img.wp-image-9049313 {
    max-height: 100px !important;
}

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

.wp-block-column.fragrance-banner-heading.white-bg.is-layout-flow.wp-block-column-is-layout-flow {
    justify-items: center;
}

h3.wp-block-heading.has-text-align-center.middle-text {
    margin-bottom: 20px !important;
    margin-top: 3%;
    font-size: 45px;
    color: var(--text);
    padding-left: 4%;
    padding-right: 4%;
}

.full-text-banner {
    padding: 20px;
    margin-bottom: 50px;
    background-color: #889977;
}

.wp-block-columns.mid-banner.diffuser-collection.middle-aligns.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex {
    text-align: center;
}

figure.wp-block-image.size-full.is-resized.min-height-fix {
    min-height: 205px;
    text-align: center;
}

img.wp-image-9049513 {
    margin-top: 0px;
}

h5.wp-block-heading.has-text-align-center.min-fix {
    margin-top: 13px !important;
}


.page-id-840647 .full-text-banner {
    padding: 20px;
    margin-bottom: 0px;
    background-color: #889977;
}

.page-id-840647 .art-of-scent-container {
    margin-top: 0px;
}
/*** MOBILE OVERFLOW FIX — heading column had max-width:675px + 40/60px padding,
     602px wide on a 375px phone, so the page zoomed out. ***/
@media screen and (max-width: 992px) {
    .fragrance-banner > .wp-block-column,
    .fragrance-banner .fragrance-banner-heading {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .fragrance-banner .fragrance-banner-heading {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 992px) {
    /* The heading column's figure was 502px wide inside a 263px column. */
    .fragrance-banner figure,
    .fragrance-banner .wp-block-image {
        max-width: 100%;
    }
}