.ro207-active .sp-urgency-badge {
    margin-top: 0px;
}

.ro207-active #content .tabs-variation-categories-wrapper > .vc_empty_space:nth-of-type(2),
.ro207-active #content .circle-icon {
    display: none !important;
}

.ro207-active .spo-category-title {
    margin-bottom: 4px !important;
    padding: 0 !important;
}

.ro207-active #content .nav-pills .spo-category-title:nth-of-type(1) {
    margin-top: 4px;
}

.ro207-active #content .nav-pills .spo-category-title:nth-of-type(2) {
    margin-top: 20px;
}

.ro207-active #content .product_content_wrapper form .tabs-variation-categories.nav.nav-pills {
    gap: 24px 16px !important;
    width: 100% !important;
}

.ro207-active #content li.tab-variation-category {
    margin: 0 !important;
    border-radius: 4px;
    max-width: unset !important;
    width: 96px !important;
    min-height: 142px;
    border: none!important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15)!important;
    overflow: hidden;
}

.ro207-active #content li.tab-variation-category:before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.5s ease-in-out;
    pointer-events: none;
}

.ro207-active #content li.tab-variation-category.active:before,
.ro207-active #content li.tab-variation-category:hover::before {
    border-color: #171C8E;
}

.ro207-active #content ul.tabs-variation-categories > li.tab-variation-category > a.tab .sp-scent-label {
    color: #373737 !important;
}

.ro207-active #content li.tab-variation-category:hover {
    cursor: pointer;
}

.ro207-active #content li.tab-variation-category.active .sp-scent-label {
    font-weight: 600;
}

.ro207-active #page_wrapper #content ul.tabs-variation-categories > li.tab-variation-category > a {
    padding-left: 0 !important;
    display: block;
    margin: auto;
    height: 100%;
}

.ro207-active #content .tab-content-variation-category-wrapper {
    margin-top: 40px !important;
    margin-bottom: 15px !important;
}

.ro207-active .sp-scent-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    background-color: var(--scent-color) !important;
}

.ro207-active .sp-scent-card img {
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
    max-width: fit-content;
    margin: 0 auto;
}

.ro207-active .sp-scent-label {
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
}

.ro207-active #content .nav-pills > li.tab-variation-category {
    width: 102px !important;
}

.ro207-active.single-product #content .nav-pills .scent-category-title {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.ro207-active.single-product #content .nav-pills .scent-category-title:nth-of-type(2) {
    margin-top: 18px !important;
}

@media (min-width: 1024px) {
    .ro207-active #content .product_content_wrapper form .tabs-variation-categories.nav.nav-pills {
        gap: 24px 16px !important;
    }

    .ro207-active #content .nav-pills > li.tab-variation-category {
        width: 103px !important;
    }
}

@media (min-width: 768px) {
    .ro207-active.single-product #content ul.tabs-variation-categories {
        margin-top: 0px !important;
    }

    .ro207-active.single-product #content .nav-pills .scent-category-title {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
}

@media (max-width: 767px) {
    .ro207-active.single-product #page_wrapper #content .nav-pills > li {
        margin-right: 0px !important;
    }

    .ro207-active #content .nav-pills .spo-category-title:nth-of-type(2) {
        margin-top: 10px;
    }

    .ro207-active #content .tab-content-variation-category-wrapper {
        margin: 20px 0 !important;
    }

    .ro207-active #content .tab-content-variation-category-wrapper .tab-content-variation-category {
        text-align: left !important;
    }

    .ro207-active #content .tab-content-variation-category {
        text-align: center !important;
    }

    .ro207-active #content .nav-pills > li {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 96px !important;
        flex: 0 0 96px !important;
    }

    .ro207-active.single-product #content .nav-pills .scent-category-title {
        justify-content: center;
        margin-bottom: 0px !important;
    }

    .ro207-active #content li.tab-variation-category:before {
        border: 3px solid transparent;
    }

    .ro207-active #content li.tab-variation-category:hover::before {
        border-color: transparent;
    }

    .ro207-active #content li.tab-variation-category.active:before {
        border-color: #171C8E;
    }
}

@media (max-width: 450px) {
    .ro207-active #content .nav-pills > li {
        flex: 0 0 calc(33.3333% - 11px) !important;
    }
}

/* ─── RO243 compatibility ───
 * RO243 rebuilds the scent picker into .ro189 .scents .scent[data-category] divs
 * (horizontal rows with absolute-positioned color circles). Override its layout
 * so the bottle card we inject sits in a card-shaped container with the same
 * hover/active treatment as the original tabs.
 */
/* RO243 nests the picker in .ro189 (max-width:400px) > .section (max-width:540px)
 * > .scents (max-width:450px). Lifting only .scents (below) still leaves the cards
 * squeezed into the ~400px ancestor column, so they fit 4 across while the non-RO243
 * v2-grid layout (full-width .product_content_wrapper form container) fits 5. Lift the
 * ancestor caps too so the cards use the full content width and match the 5-up layout. */
.ro207-active .ro189,
.ro207-active .ro189 .section {
    max-width: none !important;
}

.ro207-active .ro189 .scents {
    gap: 16px !important;
    max-width: none !important;
}

.ro207-active .ro189 .scents .scent {
    margin: 0 !important;
    padding: 0 !important;
    width: 96px !important;
    max-width: 96px !important;
    min-height: 142px;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
    position: relative;
}

.ro207-active .ro189 .scents .scent::before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.5s ease-in-out;
    pointer-events: none;
}

.ro207-active .ro189 .scents .scent.selected::before,
.ro207-active .ro189 .scents .scent:hover::before {
    border-color: #171C8E;
}

.ro207-active .ro189 .scents .scent.selected .sp-scent-label {
    font-weight: 600;
}

@media (max-width: 767px) {
    .ro207-active .ro189 .scents .scent {
        width: 96px !important;
    }

    .ro207-active .ro189 .scents .scent::before {
        border-width: 3px;
    }
}

/* ≤450px: match the native 3-up fill (.nav-pills > li gets the same calc() above) so
 * the RO243 cards fill the row instead of left-aligning with slack on the right.
 * NOTE specificity/order: the .scent rules above set width:96px / max-width:96px with
 * !important at equal specificity, so this must outrank them — #content (one id) does
 * that regardless of source order; without it the fixed 96px width wins and this is a
 * no-op (verified via headless CDP). max-width:none lets the calc() flex-basis size win. */
@media (max-width: 450px) {
    .ro207-active #content .ro189 .scents .scent {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.3333% - 11px) !important;
        flex: 0 0 calc(33.3333% - 11px) !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ≥1024px: mirror the native card width (.nav-pills > li is 103px at this breakpoint,
 * see the min-width:1024 block above). Without this the RO243 cards stay 96px and pack
 * one extra per row vs the native layout in the two-column PDP content width (4 vs 3 at
 * 1024px — verified via headless CDP). #content keeps it ahead of the base 96px rule. */
@media (min-width: 1024px) {
    .ro207-active #content .ro189 .scents .scent {
        width: 103px !important;
        max-width: 103px !important;
    }
}

.ro207-active .ro189 .scents > .tab-content-variation-category-wrapper,
.ro207-active .ro189 .scents > .fragrance-wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
}

/* ─── Legacy-markup compatibility (per-product baked-in picker) ───
 * Most PDPs render the scent picker via the clean-people v2 grid renderer
 * (<ul class="… vps-v2-grid-ready">, nested in .product_content_wrapper form).
 * A few — e.g. the 1 Liter S&C PDP (product 9584646) — instead serve a legacy
 * block hardcoded in the product content: <ul class="tabs-variation-categories
 * tabs-variation-categories-product-{id} …">. That markup lacks the grid
 * container styling and the <form> nesting RO207's main grid rule keys on
 * (.product_content_wrapper form .tabs-variation-categories.nav.nav-pills),
 * so cards lose their gap/left-alignment and crowd the "Select Scent" header.
 *
 * Re-apply the grid layout for that variant. Scoped to the [-product-] class
 * so it can't touch the v2 grid or the hidden per-pack duplicate <ul>s.
 *
 * NOTE: margin-top is the gap below the "Select Scent" separator — verify the
 * value against a v2-grid PDP on dev88 and adjust if it doesn't match.
 * Prefer migrating the 1L product to the dynamic renderer over keeping this. */
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap !important;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start !important;
    gap: 24px 16px !important;
    width: 100% !important;
    margin-top: 24px !important;
}

/* Bootstrap's .nav::before/::after clearfix (content:" "; display:table) gets
 * blockified into a phantom flex item on this now-flex <ul>, consuming one
 * column-gap before the first card. That offsets the first row by 16px while a
 * wrapped row (e.g. lone "Unscented") sits flush left — so rows don't align.
 * Drop the pseudos on this variant. (The v2 grid PDP is unaffected: its first
 * flex child is a full-width section header, so the phantom never offsets a card.) */
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"]::before,
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"]::after {
    display: none !important;
}

/* The card background is background-color: var(--scent-color), set per category
 * slug by the root-colors-base custom CSS — but only for the current (new) slugs.
 * This legacy block uses stale slugs (CoconutVanillaShampoo / cucumbershampoo /
 * fresh-and-clean) that have no mapping, so those cards render with no color
 * while fragrance-free (→Rose Hips) and lavender-cedar happen to alias an entry.
 * Alias the stale slugs to the same scent-color vars the v2 grid PDP uses. */
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"] li.category-CoconutVanillaShampoo {
    --scent-color: var(--scent-coconut-vanilla);
}
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"] li.category-cucumbershampoo {
    --scent-color: var(--scent-cucumber);
}
.ro207-active #content ul.tabs-variation-categories[class*="tabs-variation-categories-product-"] li.category-fresh-and-clean {
    --scent-color: var(--scent-unscented);
}

/* ─── 1 Liter PDP: now migrated to the v2 grid renderer ───
 * The 1L was moved off its baked-in legacy block onto the dynamic renderer, so it now
 * serves the same <ul ...vps-v2-grid-ready> as the 14oz (the [-product-] shim above no
 * longer matches it — it's effectively dead for the 1L). But unlike the 14oz, the 1L
 * has only Classics scents, so its grid has NO in-grid section header
 * (.scent-category-title) as its first flex child. Two consequences, both fixed below
 * and scoped to the 1L product body class so the 14oz/Bundle grids are untouched:
 *
 *   1. Bootstrap's .nav::before/::after clearfix blockifies into a phantom flex item at
 *      the start of row 1, eating one 16px column-gap. On the 14oz the full-width section
 *      header absorbs it; with no header here it offsets row 1 by 16px (rows misaligned,
 *      and on mobile only 2 cards fit row 1 instead of 3). Drop the pseudos.
 *   2. The section header normally provides the gap under the "Select Scent" separator;
 *      without it the cards crowd the separator. Restore it with margin-top.
 * Verified via headless CDP on production: row 1/row 2 first-card x both 700 at 1280px,
 * and a clean 3/3 at x=10 on mobile (390px). */
body.product-shampoo-conditioner-one-liter.ro207-active #content .product_content_wrapper form ul.tabs-variation-categories.nav.nav-pills::before,
body.product-shampoo-conditioner-one-liter.ro207-active #content .product_content_wrapper form ul.tabs-variation-categories.nav.nav-pills::after {
    display: none !important;
}

body.product-shampoo-conditioner-one-liter.ro207-active #content .product_content_wrapper form ul.tabs-variation-categories.nav.nav-pills {
    margin-top: 24px !important;
}