/* RO215 — Fragrance Description + Strength panel for radio-selector PDPs.
   Visual language mirrors RO214's grid panel, but self-contained (own class
   prefix + inline --ro215-scent-color set per selected scent by RO215.js). */

/* TM EPO renders its own per-variation description block (.parent-wrapper holding the
   .description-wrapper elements) above our panel — the same scent copy the RO215 panel now
   shows under "Fragrance Description:". Hide that redundant block (and its 30px top margin)
   so the copy isn't duplicated. Scoped to the TM options container; this stylesheet only
   loads on the Leave-in / Hair-Mask PDPs, so no other product is affected. */
.tm-extra-product-options-container .parent-wrapper {
    display: none !important;
}

/* Match the RO214 grid panel's outer spacing on the shampoo-conditioner PDP: its
   description wrapper has margin-top:20px and its strength block (.fragrance-wrap)
   margin-bottom:30px. */
.ro215-fragrance-wrap {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Match the 14oz Shampoo & Conditioner grid panel's horizontal alignment on mobile.
   There the Fragrance Description / Strength sit at the grid wrapper's 15px padded
   content edge (left:25 @390px); RO215's panel sits at the same base-left (10px) but
   without that inset, so its copy started 15px further left than the 14oz. Inset the
   whole panel 15px each side so Description + Strength line up with the 14oz. */
@media screen and (max-width: 1023px) {
    .ro215-fragrance-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.ro215-row {
    margin-bottom: 10px;
}
.ro215-row:last-child {
    margin-bottom: 0;
}
/* Larger gap between the description block and the strength block. */
.ro215-desc {
    margin-bottom: 24px;
}

.ro215-label {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

/* Description text sits on its own line, in the selected scent's color. */
.ro215-desc-text {
    display: block;
    margin-top: 4px;
    color: var(--ro215-scent-color, #000);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.ro215-value {
    color: var(--ro215-scent-color, #000);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ro215-dots {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}

.ro215-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d3d3d3;
}
.ro215-dot.active {
    background: var(--ro215-scent-color, #d3d3d3);
}