/* ========================================================================
   F.SHOP.CHOSEN.1
   Chosen for Your Hair
   Presentation only.
   Typography intentionally inherits Damian Philpott / Mercury Shop fonts.
   ======================================================================== */

.dp-routine,
.dp-routine *,
.dp-routine button,
.dp-routine a {
    box-sizing: border-box;
}

.dp-routine {
    --routine-gold: #FFD700;
    --routine-line: rgba(255,255,255,.11);
    --routine-muted: rgba(255,255,255,.62);
    --routine-soft: rgba(255,255,255,.78);

    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 20%) minmax(0, 1fr);
    background: #050505;
    border-top: 1px solid var(--routine-line);
    border-bottom: 1px solid var(--routine-line);
    color: inherit;
    overflow: hidden;
}

/*
 * Important:
 * no font-family is declared anywhere in this file.
 * The Shop's existing typography remains authoritative.
 */

.dp-routine[hidden] {
    display: none !important;
}

.dp-routine-intro {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 58px 34px 42px;
    border-right: 1px solid var(--routine-line);
    background: #050505;
}

.dp-routine-eyebrow {
    display: block;
    margin: 0 0 18px;
    color: var(--routine-gold);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dp-routine-intro h2 {
    max-width: 250px;
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: clamp(34px, 2.55vw, 48px);
    font-weight: inherit;
    line-height: 1.02;
    letter-spacing: inherit;
}

.dp-routine-intro p {
    max-width: 255px;
    margin: 18px 0 0;
    color: var(--routine-muted);
    font-size: 14px;
    line-height: 1.55;
}

.dp-routine-shop {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-width: 210px;
    margin-top: 25px;
    padding: 15px 18px;
    border: 1px solid var(--routine-gold);
    border-radius: 0;
    background: transparent;
    color: var(--routine-gold);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.dp-routine-shop:hover,
.dp-routine-shop:focus-visible {
    background: var(--routine-gold);
    color: #050505;
}

.dp-routine-view {
    position: absolute;
    z-index: 4;
    top: 22px;
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255,215,0,.7);
    color: var(--routine-gold);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}

.dp-routine-render {
    display: contents;
}


/* PRODUCT ROW ============================================================ */

.dp-routine-track {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-width: 0;
    padding-top: 52px;
}

.dp-routine-card {
    position: relative;
    min-width: 0;
    border-left: 1px solid var(--routine-line);
}

.dp-routine-card:first-child {
    border-left: 0;
}

.dp-routine-card.is-active {
    background:
        linear-gradient(
            180deg,
            rgba(255,215,0,.055),
            rgba(255,215,0,0)
        );
}

.dp-routine-card.is-unavailable {
    opacity: .52;
}

.dp-routine-card-main {
    position: relative;
    display: grid;
    grid-template-rows: 150px auto;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 12px 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.dp-routine-card-main:focus-visible {
    outline: 1px solid var(--routine-gold);
    outline-offset: -2px;
}

.dp-routine-number {
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,215,0,.75);
    border-radius: 50%;
    color: var(--routine-gold);
    font-size: 9px;
    font-weight: 700;
}

.dp-routine-image {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 150px;
    padding: 8px 8px 5px;
}

.dp-routine-image img {
    display: block;
    width: auto;
    max-width: 92%;
    height: 138px;
    object-fit: contain;
    object-position: center;
}

.dp-routine-card-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding-top: 7px;
}

.dp-routine-brand {
    display: block;
    width: 100%;
    overflow: hidden;
    color: rgba(255,255,255,.9);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.dp-routine-name {
    display: -webkit-box;
    min-height: 35px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--routine-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dp-routine-price {
    display: block;
    margin-top: 9px;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
}

.dp-routine-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    color: var(--routine-gold);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.dp-routine-save i {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.dp-routine-card.is-active .dp-routine-save i {
    transform: rotate(225deg) translate(-1px,-1px);
}


/* INLINE DRAWER ========================================================== */

.dp-routine-drawer {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 28px 26px;
    border: 1px solid rgba(255,215,0,.75);
    background:
        linear-gradient(
            110deg,
            rgba(255,215,0,.025),
            transparent 36%
        ),
        #080909;
}

.dp-routine-drawer[hidden] {
    display: none !important;
}

.dp-routine-drawer-inner {
    display: grid;
    grid-template-columns: 180px minmax(280px, 1fr) minmax(340px, .95fr);
    min-height: 205px;
}

.dp-routine-drawer-close {
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.88);
    font: inherit;
    font-size: 23px;
    font-weight: 300;
    cursor: pointer;
}

.dp-routine-drawer-media {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 22px;
    border-right: 1px solid var(--routine-line);
}

.dp-routine-drawer-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 160px;
    object-fit: contain;
}

.dp-routine-drawer-info {
    min-width: 0;
    padding: 29px 34px;
    border-right: 1px solid var(--routine-line);
}

.dp-routine-drawer-brand {
    display: block;
    margin-bottom: 7px;
    color: var(--routine-gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.dp-routine-drawer-info h3 {
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: clamp(22px, 2vw, 31px);
    font-weight: inherit;
    line-height: 1.1;
}

.dp-routine-drawer-size {
    display: block;
    margin-top: 7px;
    color: var(--routine-muted);
    font-size: 12px;
}

.dp-routine-drawer-description {
    max-width: 620px;
    margin: 15px 0 0;
    color: var(--routine-muted);
    font-size: 12px;
    line-height: 1.55;
}

.dp-routine-purchase {
    min-width: 0;
    padding: 28px 36px 22px 30px;
}

.dp-routine-ss-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--routine-gold);
    font-size: 12px;
    font-weight: 700;
}

.dp-routine-ss-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
}

.dp-routine-ss-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 13px;
}

.dp-routine-ss-price strong {
    color: inherit;
    font-size: 29px;
    font-weight: 500;
}

.dp-routine-ss-price s {
    color: rgba(255,255,255,.38);
    font-size: 15px;
}

.dp-routine-cadence {
    margin: 10px 0 0;
    color: var(--routine-soft);
    font-size: 12px;
    line-height: 1.45;
}

.dp-routine-cadence small {
    display: block;
    margin-top: 3px;
    color: var(--routine-muted);
    font-size: 10px;
}

.dp-routine-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.dp-routine-actions button {
    min-height: 43px;
    padding: 11px 12px;
    border-radius: 0;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
}

.dp-routine-subscribe {
    border: 1px solid var(--routine-gold);
    background: var(--routine-gold);
    color: #050505;
}

.dp-routine-add {
    border: 1px solid rgba(255,255,255,.38);
    background: transparent;
    color: inherit;
}

.dp-routine-actions button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.dp-routine-accordions {
    margin-top: 12px;
    border-top: 1px solid var(--routine-line);
}

.dp-routine-accordions details {
    border-bottom: 1px solid var(--routine-line);
}

.dp-routine-accordions summary {
    position: relative;
    padding: 10px 24px 10px 2px;
    color: var(--routine-soft);
    font-size: 10px;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.dp-routine-accordions summary::-webkit-details-marker {
    display: none;
}

.dp-routine-accordions summary::after {
    content: "⌄";
    position: absolute;
    top: 8px;
    right: 2px;
    color: var(--routine-muted);
    font-size: 15px;
}

.dp-routine-accordions details[open] summary::after {
    transform: rotate(180deg);
}

.dp-routine-accordion-body {
    padding: 0 2px 12px;
    color: var(--routine-muted);
    font-size: 10px;
    line-height: 1.55;
}


/* TABLET ================================================================ */

@media (max-width: 1180px) and (min-width: 701px) {

    .dp-routine {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .dp-routine-intro {
        padding: 54px 28px 36px;
    }

    .dp-routine-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(185px, 32%);
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;
    }

    .dp-routine-card {
        scroll-snap-align: start;
    }

    .dp-routine-drawer-inner {
        grid-template-columns: 155px minmax(240px, .9fr) minmax(300px, 1fr);
    }

    .dp-routine-drawer-info {
        padding: 26px 25px;
    }

    .dp-routine-purchase {
        padding: 26px 28px 20px 24px;
    }

}


/* MOBILE ================================================================ */

@media (max-width: 700px) {

    .dp-routine {
        display: block;
        overflow: visible;
    }

    .dp-routine-intro {
        padding: 34px 20px 22px;
        border-right: 0;
    }

    .dp-routine-intro h2 {
        max-width: 290px;
        font-size: clamp(32px, 10vw, 42px);
    }

    .dp-routine-intro p {
        max-width: 310px;
        margin-top: 13px;
    }

    .dp-routine-shop {
        min-width: 205px;
        margin-top: 20px;
    }

    .dp-routine-view {
        position: static;
        margin: 0 20px 18px;
        width: max-content;
    }

    .dp-routine-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 76vw);
        grid-template-columns: none;
        gap: 0;
        width: 100%;
        padding: 0 20px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 20px;
        scroll-snap-type: inline mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .dp-routine-card {
        border-left: 1px solid var(--routine-line);
        border-right: 0;
        scroll-snap-align: start;
    }

    .dp-routine-card:last-child {
        border-right: 1px solid var(--routine-line);
    }

    .dp-routine-card-main {
        grid-template-rows: 170px auto;
        min-height: 325px;
        padding-inline: 16px;
    }

    .dp-routine-image {
        height: 170px;
    }

    .dp-routine-image img {
        height: 155px;
    }

    .dp-routine-name {
        font-size: 13px;
    }

    .dp-routine-drawer {
        margin: 10px 20px 26px;
    }

    .dp-routine-drawer-inner {
        display: block;
        min-height: 0;
    }

    .dp-routine-drawer-media {
        min-height: 210px;
        padding: 22px 24px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--routine-line);
    }

    .dp-routine-drawer-media img {
        height: 185px;
    }

    .dp-routine-drawer-info {
        padding: 23px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--routine-line);
    }

    .dp-routine-drawer-info h3 {
        padding-right: 24px;
        font-size: 26px;
    }

    .dp-routine-purchase {
        padding: 22px 20px 20px;
    }

    .dp-routine-actions {
        grid-template-columns: 1fr;
    }

    .dp-routine-actions button {
        min-height: 46px;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.1
   New routine owns its own layout.
   Prevent legacy personalised-Shop / Builder rules from rearranging it.
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair.dp-commerce-personal.dp-routine {
    display: grid !important;

    grid-template-columns:
        minmax(300px, 20%)
        minmax(0, 1fr) !important;

    grid-template-rows:
        auto
        auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    align-items: stretch !important;

    background: #050505 !important;

    border-top:
        1px solid rgba(255,255,255,.09) !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------------------
   INTRO — keep every piece of copy together in column one
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-intro {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 350px !important;

    margin: 0 !important;

    padding:
        44px
        32px
        38px !important;

    gap: 0 !important;

    transform: none !important;

    text-align: left !important;

    border-right:
        1px solid rgba(255,255,255,.11) !important;

    background: #050505 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-intro > * {
    position: static !important;

    grid-column: auto !important;
    grid-row: auto !important;

    float: none !important;

    transform: none !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-eyebrow {
    display: block !important;

    width: auto !important;

    margin:
        0
        0
        17px !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-intro h2 {
    display: block !important;

    width: 100% !important;
    max-width: 250px !important;

    margin: 0 !important;

    padding: 0 !important;

    font-size:
        clamp(34px, 2.45vw, 48px) !important;

    line-height: 1.02 !important;

    text-align: left !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-intro p {
    display: block !important;

    width: 100% !important;
    max-width: 260px !important;

    margin:
        18px
        0
        0 !important;

    padding: 0 !important;

    text-align: left !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-shop {
    position: static !important;

    display: inline-flex !important;

    width: auto !important;
    min-width: 210px !important;

    margin:
        25px
        0
        0 !important;

    transform: none !important;
}


/* ------------------------------------------------------------------------
   PRODUCT TRACK — completely separate from intro
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-render {
    display: contents !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-track {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding:
        52px
        0
        0 !important;

    gap: 0 !important;

    align-self: stretch !important;
}


/* ------------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card {
    position: relative !important;

    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;

    border-top: 0 !important;
    border-bottom: 0 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    min-height: 298px !important;
}


/* ------------------------------------------------------------------------
   VIEW FULL ROUTINE
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-view {
    top: 20px !important;
    right: 28px !important;
}


/* ------------------------------------------------------------------------
   DRAWER
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: auto !important;

    margin:
        0
        28px
        26px !important;
}


/* ------------------------------------------------------------------------
   OLD BUILDER-INSERTED CONTENT MUST NEVER APPEAR IN NEW ROUTINE
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.shop-builder-personal-assurance,

[data-commerce-shop]
#chosen-for-your-hair
.shop-builder-personal-source-box,

[data-commerce-shop]
#chosen-for-your-hair
.dp-commerce-personal-note {
    display: none !important;
}


/* Prevent old personalised-section pseudo content */
[data-commerce-shop]
#chosen-for-your-hair.dp-routine::before,

[data-commerce-shop]
#chosen-for-your-hair.dp-routine::after {
    content: none !important;
    display: none !important;
}


/* ========================================================================
   TABLET
   ======================================================================== */

@media (max-width:1180px) and (min-width:701px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        grid-template-columns:
            270px
            minmax(0,1fr) !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-intro {
        min-height: 350px !important;

        padding:
            40px
            27px
            34px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-track {
        display: grid !important;

        grid-template-columns: none !important;

        grid-auto-flow: column !important;

        grid-auto-columns:
            minmax(180px, 32%) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type:
            inline mandatory !important;
    }

}


/* ========================================================================
   MOBILE
   ======================================================================== */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-intro {
        display: flex !important;

        min-height: 0 !important;

        padding:
            32px
            20px
            22px !important;

        border-right: 0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-intro h2 {
        max-width: 300px !important;

        font-size:
            clamp(32px,10vw,42px) !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-view {
        position: static !important;

        display: inline-flex !important;

        margin:
            0
            20px
            18px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-track {
        display: grid !important;

        grid-template-columns: none !important;

        grid-auto-flow: column !important;

        grid-auto-columns:
            minmax(220px,76vw) !important;

        width: 100% !important;

        padding:
            0
            20px
            8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type:
            inline mandatory !important;

        -webkit-overflow-scrolling:
            touch;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card {
        scroll-snap-align:
            start !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer {
        width: auto !important;

        margin:
            10px
            20px
            26px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.2
   Contained desktop routine
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        width:
            min(
                1500px,
                calc(100% - 56px)
            ) !important;

        max-width:
            1500px !important;

        margin:
            28px
            auto
            36px !important;

        border-left:
            1px solid rgba(255,255,255,.09) !important;

        border-right:
            1px solid rgba(255,255,255,.09) !important;
    }

}


/* TABLET — still contained, but use more of the screen */

@media (max-width:1180px) and (min-width:701px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        width:
            calc(100% - 32px) !important;

        max-width:
            none !important;

        margin:
            20px
            auto
            28px !important;

        border-left:
            1px solid rgba(255,255,255,.09) !important;

        border-right:
            1px solid rgba(255,255,255,.09) !important;
    }

}


/* MOBILE — deliberately full-width */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            16px
            0
            24px !important;

        border-left:
            0 !important;

        border-right:
            0 !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.3
   Align personalised routine with surrounding Shop content.
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        width:
            min(
                1380px,
                calc(100% - 56px)
            ) !important;

        max-width:
            1380px !important;
    }

}



/* ========================================================================
   F.SHOP.CHOSEN.1.4
   Routine product-card refinement
   ======================================================================== */


/* Remove old utility link completely */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-view {
    display:none !important;
}


/* ------------------------------------------------------------------------
   NUMBER BADGE
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-number {
    top:10px !important;
    left:11px !important;

    width:34px !important;
    height:34px !important;

    border:
        1px solid #FFD700 !important;

    color:#fff !important;

    font-size:11px !important;
    font-weight:600 !important;

    line-height:1 !important;
}


/* ------------------------------------------------------------------------
   PRODUCT IMAGE — larger
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    grid-template-rows:
        166px
        auto !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image {
    height:166px !important;

    padding:
        4px
        8px
        0 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image img {
    width:auto !important;

    max-width:96% !important;

    height:158px !important;
    max-height:158px !important;
}


/* ------------------------------------------------------------------------
   BRAND
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-brand {
    font-size:10.5px !important;

    font-weight:800 !important;

    letter-spacing:.12em !important;

    line-height:1.2 !important;
}


/* ------------------------------------------------------------------------
   PRODUCT NAME
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-name {
    min-height:38px !important;

    margin-top:6px !important;

    font-size:13.5px !important;

    line-height:1.32 !important;
}


/* ------------------------------------------------------------------------
   PRICE — move slightly upwards
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-price {
    margin-top:4px !important;

    font-size:16px !important;

    line-height:1.2 !important;
}


/* ------------------------------------------------------------------------
   THREE-LINE SUBSCRIBE & SAVE META
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer {
    display:grid !important;

    grid-template-columns:1fr !important;

    justify-items:center !important;

    gap:3px !important;

    width:100% !important;

    margin-top:auto !important;

    padding-top:9px !important;

    text-align:center !important;

    text-transform:uppercase !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-discount {
    display:block !important;

    color:#FFD700 !important;

    font-size:8px !important;
    font-weight:800 !important;

    line-height:1.1 !important;

    letter-spacing:.1em !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-frequency {
    display:block !important;

    color:rgba(255,255,255,.68) !important;

    font-size:7.5px !important;
    font-weight:600 !important;

    line-height:1.15 !important;

    letter-spacing:.09em !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action {
    display:block !important;

    margin-top:2px !important;

    color:#FFD700 !important;

    font-size:8.5px !important;
    font-weight:800 !important;

    line-height:1.15 !important;

    letter-spacing:.08em !important;
}


/* Old one-line treatment no longer used */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-save {
    display:none !important;
}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media (max-width:1180px) and (min-width:701px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:150px !important;
        max-height:150px !important;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-number {
        width:32px !important;
        height:32px !important;

        font-size:10px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:
            180px
            auto !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        height:180px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:170px !important;
        max-height:170px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-brand {
        font-size:11px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        font-size:14px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        font-size:16px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.5
   Remove olive glow, remove dark top area, enlarge product imagery
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-grid,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-track,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-products,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-scroll {
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
    background-image:none !important;
}


/* remove olive / muddy glow on cards and open state */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card:hover,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card.is-open,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card[aria-expanded="true"],
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card[data-open="true"],
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main:hover,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main.is-open {
    background:#050505 !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;
}


/* kill pseudo overlays / top shading */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card::after,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main::after,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image::after {
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
}


/* tighter top area + bigger image zone */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    grid-template-rows:186px auto !important;
    padding-top:0 !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:186px !important;
    min-height:186px !important;

    margin-top:0 !important;
    padding:2px 8px 0 !important;

    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image img {
    width:auto !important;
    max-width:98% !important;

    height:176px !important;
    max-height:176px !important;

    object-fit:contain !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    box-shadow:none !important;
}


/* keep top of card visually clean */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-number {
    z-index:3 !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-header,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-top,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-top {
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
    background-image:none !important;
}


/* tablet */
@media (max-width:1180px) and (min-width:701px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:178px auto !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        height:178px !important;
        min-height:178px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:168px !important;
        max-height:168px !important;
    }
}


/* mobile */
@media (max-width:700px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:190px auto !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        height:190px !important;
        min-height:190px !important;
        padding:4px 10px 0 !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:180px !important;
        max-height:180px !important;
    }
}


/* ========================================================================
   F.SHOP.CHOSEN.1.5
   Remove olive glow, remove dark top area, enlarge product imagery
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-grid,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-track,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-products,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-scroll {
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
    background-image:none !important;
}


/* remove olive / muddy glow on cards and open state */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card:hover,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card.is-open,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card[aria-expanded="true"],
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card[data-open="true"],
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main:hover,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main.is-open {
    background:#050505 !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;
}


/* kill pseudo overlays / top shading */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card::after,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main::after,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image::before,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image::after {
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
}


/* tighter top area + bigger image zone */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    grid-template-rows:186px auto !important;
    padding-top:0 !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:186px !important;
    min-height:186px !important;

    margin-top:0 !important;
    padding:2px 8px 0 !important;

    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-image img {
    width:auto !important;
    max-width:98% !important;

    height:176px !important;
    max-height:176px !important;

    object-fit:contain !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    box-shadow:none !important;
}


/* keep top of card visually clean */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-number {
    z-index:3 !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-header,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-top,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-top {
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
    background-image:none !important;
}


/* tablet */
@media (max-width:1180px) and (min-width:701px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:178px auto !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        height:178px !important;
        min-height:178px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:168px !important;
        max-height:168px !important;
    }
}


/* mobile */
@media (max-width:700px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:190px auto !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        height:190px !important;
        min-height:190px !important;
        padding:4px 10px 0 !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        height:180px !important;
        max-height:180px !important;
    }
}


/* ========================================================================
   F.SHOP.CHOSEN.DRAWER.1
   Elegant graphite drawer + integrated selected-product notch
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer {
    --routine-drawer-border:#303234;
    --routine-drawer-line:#26282a;
    --routine-drawer-bg:#090a0a;

    position:relative !important;

    border:
        1px solid
        var(--routine-drawer-border) !important;

    background:
        var(--routine-drawer-bg) !important;

    background-image:none !important;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.24) !important;

    overflow:visible !important;
}


/* ------------------------------------------------------------------------
   INTEGRATED ARROW / NOTCH

   A rotated square creates two diagonal sides which visually become part
   of the drawer's top border. Its position follows the selected card.
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer::before {
    content:"" !important;

    position:absolute !important;

    z-index:3 !important;

    top:-9px !important;

    left:
        clamp(
            22px,
            var(--routine-arrow-x,50%),
            calc(100% - 22px)
        ) !important;

    width:16px !important;
    height:16px !important;

    margin-left:-8px !important;

    background:
        var(--routine-drawer-bg) !important;

    border-top:
        1px solid
        var(--routine-drawer-border) !important;

    border-left:
        1px solid
        var(--routine-drawer-border) !important;

    border-right:0 !important;
    border-bottom:0 !important;

    transform:
        rotate(45deg) !important;

    pointer-events:none !important;
}


/* cover the drawer's top line directly beneath the notch so the
   arrow reads as one continuous border rather than a triangle stuck on */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer::after {
    content:"" !important;

    position:absolute !important;

    z-index:2 !important;

    top:-1px !important;

    left:
        clamp(
            15px,
            calc(var(--routine-arrow-x,50%) - 12px),
            calc(100% - 39px)
        ) !important;

    width:24px !important;
    height:3px !important;

    background:
        var(--routine-drawer-bg) !important;

    pointer-events:none !important;
}


/* ------------------------------------------------------------------------
   INTERNAL DIVIDERS
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer-media {
    border-right:
        1px solid
        var(--routine-drawer-line) !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer-info {
    border-right:
        1px solid
        var(--routine-drawer-line) !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-accordions {
    border-top:
        1px solid
        var(--routine-drawer-line) !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-accordions details {
    border-bottom:
        1px solid
        var(--routine-drawer-line) !important;
}


/* ------------------------------------------------------------------------
   BUTTON / CLOSE DETAIL

   Gold remains where it has purpose — action and Subscribe & Save —
   rather than framing the whole drawer.
   ------------------------------------------------------------------------ */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer-close {
    color:
        rgba(255,255,255,.72) !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-drawer-close:hover {
    color:#fff !important;
}


/* subtle secondary action border */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-add {
    border-color:
        #454749 !important;

    background:
        transparent !important;
}


/* ------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------ */

@media (max-width:1180px) and (min-width:701px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer {
        --routine-drawer-border:#2d2f31;
    }

}


/* ------------------------------------------------------------------------
   MOBILE

   Same dark treatment. Arrow still follows selected card horizontally.
   ------------------------------------------------------------------------ */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer {
        --routine-drawer-border:#303234;

        margin-top:14px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media {
        border-right:0 !important;

        border-bottom:
            1px solid
            var(--routine-drawer-line) !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-info {
        border-right:0 !important;

        border-bottom:
            1px solid
            var(--routine-drawer-line) !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.6
   Pull price + Subscribe & Save information together
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-copy {
    justify-content:flex-start !important;

    padding-top:5px !important;
    padding-bottom:14px !important;
}


/* Product name no longer reserves unnecessary vertical space */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-name {
    min-height:0 !important;

    margin-top:5px !important;

    line-height:1.28 !important;
}


/* Price sits closer to the product name */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-price {
    margin-top:9px !important;
    margin-bottom:0 !important;
}


/* The important fix:
   stop pushing this block to the bottom of the card */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer {
    margin-top:12px !important;

    padding-top:0 !important;

    gap:2px !important;
}


/* Slightly tighten the three lines */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-discount {
    line-height:1.05 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-frequency {
    margin-top:1px !important;

    line-height:1.05 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action {
    margin-top:3px !important;

    line-height:1.05 !important;
}


/* Let the card height follow its actual content more naturally */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    min-height:0 !important;
}


/* MOBILE */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        margin-top:11px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.6
   Pull price + Subscribe & Save information together
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-copy {
    justify-content:flex-start !important;

    padding-top:5px !important;
    padding-bottom:14px !important;
}


/* Product name no longer reserves unnecessary vertical space */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-name {
    min-height:0 !important;

    margin-top:5px !important;

    line-height:1.28 !important;
}


/* Price sits closer to the product name */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-price {
    margin-top:9px !important;
    margin-bottom:0 !important;
}


/* The important fix:
   stop pushing this block to the bottom of the card */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer {
    margin-top:12px !important;

    padding-top:0 !important;

    gap:2px !important;
}


/* Slightly tighten the three lines */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-discount {
    line-height:1.05 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-frequency {
    margin-top:1px !important;

    line-height:1.05 !important;
}


[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action {
    margin-top:3px !important;

    line-height:1.05 !important;
}


/* Let the card height follow its actual content more naturally */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    min-height:0 !important;
}


/* MOBILE */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        margin-top:11px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.8
   Align brand / product name / price / offer rows across all cards
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-tile,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-main {
    height: 100% !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-card-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    height: 100% !important;
}

/* brand line */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-brand {
    min-height: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
}

/* product-name block — fixed depth so price starts at same height */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-name {
    min-height: 112px !important;
    height: 112px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.16 !important;
    margin: 0 0 10px 0 !important;
}

/* price row */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-price {
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
    line-height: 1 !important;
}

/* offer block wrapper */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer {
    min-height: 82px !important;
    height: 82px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 10% OFF row */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-discount {
    min-height: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* EVERY X WEEKS row */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-frequency {
    min-height: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* SUBSCRIBE & SAVE row */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action {
    min-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* keep the little caret aligned too if present */
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action .dp-routine-caret,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action .caret,
[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-offer-action svg {
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* tablet */
@media (max-width: 1100px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height: 96px !important;
        height: 96px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height: 44px !important;
        height: 44px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        min-height: 76px !important;
        height: 76px !important;
    }
}

/* mobile */
@media (max-width: 700px) {
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-brand {
        min-height: 24px !important;
        height: 24px !important;
        margin-bottom: 8px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height: 84px !important;
        height: 84px !important;
        margin-bottom: 8px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height: 38px !important;
        height: 38px !important;
        margin-bottom: 6px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        min-height: 68px !important;
        height: 68px !important;
        gap: 3px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        min-height: 16px !important;
        height: 16px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        min-height: 14px !important;
        height: 14px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        min-height: 18px !important;
        height: 18px !important;
    }
}


/* ========================================================================
   F.SHOP.CHOSEN.1.9
   Final desktop closed-card refinement
   ======================================================================== */

@media (min-width:1181px) {


    /* ---------------------------------------------------------------
       IMAGE STAGE
       Slightly larger bottles without allowing wide jars to dominate
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:
            202px
            auto !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;
        max-width:none !important;

        height:202px !important;
        min-height:202px !important;
        max-height:202px !important;

        margin:0 !important;

        padding:
            2px
            8px
            0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        display:block !important;

        width:auto !important;

        max-width:82% !important;

        height:190px !important;
        max-height:190px !important;

        object-fit:contain !important;

        margin:0 auto !important;
    }


    /* ---------------------------------------------------------------
       BRAND
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-brand {
        min-height:26px !important;
        height:26px !important;

        margin:
            4px
            0
            7px !important;
    }


    /* ---------------------------------------------------------------
       PRODUCT TITLE
       Was 112px. Reduce by 30px while keeping all prices aligned.
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height:82px !important;
        height:82px !important;

        margin:
            0
            0
            6px !important;

        padding:0 6px !important;

        align-items:flex-start !important;

        line-height:1.16 !important;
    }


    /* ---------------------------------------------------------------
       PRICE
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height:42px !important;
        height:42px !important;

        margin:
            0
            0
            5px !important;
    }


    /* ---------------------------------------------------------------
       SUBSCRIBE & SAVE STACK
       Keep every row locked horizontally across all six products.
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        min-height:82px !important;
        height:82px !important;

        gap:4px !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* 10% OFF */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        min-height:19px !important;
        height:19px !important;

        font-size:16px !important;
        font-weight:800 !important;

        letter-spacing:.10em !important;

        line-height:1 !important;
    }


    /* EVERY X WEEKS */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        min-height:17px !important;
        height:17px !important;

        font-size:13px !important;
        font-weight:650 !important;

        letter-spacing:.11em !important;

        line-height:1 !important;
    }


    /* SUBSCRIBE & SAVE */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        min-height:23px !important;
        height:23px !important;

        font-size:17px !important;
        font-weight:800 !important;

        letter-spacing:.08em !important;

        line-height:1 !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.10
   Pull product copy upward + keep Subscribe & Save on one line
   ======================================================================== */

@media (min-width:1181px) {

    /*
     * Bring the brand/name/price/offer group closer to the product image
     * without changing image position.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        position:relative !important;

        top:-22px !important;

        padding-bottom:0 !important;
    }


    /*
     * Preserve the aligned title area but reduce excess spacing slightly.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height:76px !important;
        height:76px !important;

        margin-bottom:4px !important;
    }


    /*
     * Prices remain locked to the same horizontal row.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height:40px !important;
        height:40px !important;

        margin-bottom:4px !important;
    }


    /*
     * Offer hierarchy:
     * 10% OFF stays strongest,
     * cadence stays quieter,
     * Subscribe & Save remains gold but fits on one line.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        font-size:16px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        font-size:13px !important;

        white-space:nowrap !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        width:100% !important;

        min-height:20px !important;
        height:20px !important;

        font-size:13px !important;
        font-weight:800 !important;

        letter-spacing:.055em !important;

        line-height:1 !important;

        white-space:nowrap !important;

        flex-wrap:nowrap !important;

        overflow:visible !important;
    }


    /*
     * Remove remaining excess space beneath the information stack.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        min-height:68px !important;
        height:68px !important;

        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        padding-bottom:0 !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.11
   Remove artificial card height and enlarge product imagery
   ======================================================================== */

@media (min-width:1181px) {

    /* -------------------------------------------------------------
       REMOVE ARTIFICIAL FULL-HEIGHT CARD BEHAVIOUR
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card {
        height:auto !important;
        min-height:0 !important;
        align-self:start !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        display:grid !important;

        grid-template-rows:
            250px
            auto !important;

        align-content:start !important;

        height:auto !important;
        min-height:0 !important;

        padding:
            0
            12px
            12px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        position:relative !important;

        top:0 !important;

        display:grid !important;

        grid-template-rows:
            27px
            58px
            38px
            62px !important;

        align-content:start !important;
        align-items:start !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 4px !important;

        gap:0 !important;
    }


    /* -------------------------------------------------------------
       PRODUCT IMAGE — MUCH LARGER
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;

        height:250px !important;
        min-height:250px !important;
        max-height:250px !important;

        margin:0 !important;

        padding:
            8px
            6px
            0 !important;

        overflow:visible !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        display:block !important;

        width:auto !important;

        max-width:92% !important;

        height:225px !important;
        max-height:225px !important;

        margin:0 auto !important;

        object-fit:contain !important;

        transform:none !important;
    }


    /* -------------------------------------------------------------
       BRAND — compact aligned row
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-brand {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;

        min-height:27px !important;
        height:27px !important;

        margin:0 !important;

        padding:0 !important;
    }


    /* -------------------------------------------------------------
       PRODUCT NAME — enough for two lines, no giant empty block
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        display:flex !important;

        align-items:flex-start !important;
        justify-content:center !important;

        width:100% !important;

        min-height:58px !important;
        height:58px !important;

        margin:0 !important;

        padding:
            2px
            4px
            0 !important;

        text-align:center !important;

        line-height:1.18 !important;
    }


    /* -------------------------------------------------------------
       PRICE — SAME LINE ON EVERY CARD
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        min-height:38px !important;
        height:38px !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* -------------------------------------------------------------
       OFFER — COMPACT, ALIGNED, NO DEAD SPACE
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        display:grid !important;

        grid-template-rows:
            20px
            18px
            22px !important;

        justify-items:center !important;
        align-items:center !important;

        width:100% !important;

        min-height:62px !important;
        height:62px !important;

        margin:0 !important;

        padding:
            2px
            0
            0 !important;

        gap:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        min-height:20px !important;
        height:20px !important;

        margin:0 !important;

        font-size:16px !important;

        line-height:1 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        min-height:18px !important;
        height:18px !important;

        margin:0 !important;

        font-size:13px !important;

        line-height:1 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;

        min-height:22px !important;
        height:22px !important;

        margin:0 !important;

        font-size:14px !important;

        line-height:1 !important;

        white-space:nowrap !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.12
   Product source images contain transparent canvas.
   Scale the artwork itself rather than only enlarging the img box.
   ======================================================================== */

@media (min-width:1181px) {


    /* Shorter stage = less visual dead space */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        grid-template-rows:
            218px
            auto !important;

        padding-bottom:8px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        position:relative !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;

        height:218px !important;
        min-height:218px !important;
        max-height:218px !important;

        margin:0 !important;

        padding:
            0
            6px !important;

        overflow:hidden !important;
    }


    /*
     * Base image box.
     * The transform below is what enlarges the visible artwork.
     */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        display:block !important;

        width:auto !important;

        height:196px !important;
        max-height:196px !important;

        max-width:88% !important;

        margin:0 auto !important;

        object-fit:contain !important;

        transform:
            scale(1.38) !important;

        transform-origin:
            center center !important;
    }


    /* Tall bottles can take considerably more visual scale */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img[data-routine-shape="tall"] {
        transform:
            scale(1.42) !important;
    }


    /*
     * Wide jars already occupy more horizontal area,
     * so do not blow them up to the same degree.
     */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img[data-routine-shape="wide"] {
        max-width:82% !important;

        transform:
            scale(1.14) !important;
    }


    /* -------------------------------------------------------------
       COMPACT COPY GRID
       ------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        grid-template-rows:
            26px
            52px
            36px
            60px !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;

        padding:
            0
            4px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-brand {
        min-height:26px !important;
        height:26px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height:52px !important;
        height:52px !important;

        padding-top:1px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height:36px !important;
        height:36px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        grid-template-rows:
            20px
            18px
            22px !important;

        min-height:60px !important;
        height:60px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.13
   Increase visible product artwork further
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        transform:
            scale(1.56) !important;

        transform-origin:
            center center !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img[data-routine-shape="tall"] {
        transform:
            scale(1.62) !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img[data-routine-shape="wide"] {
        transform:
            scale(1.22) !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.15
   Remove excess space between product artwork and product information
   ======================================================================== */

@media (min-width:1181px) {

    /*
     * Pull the entire aligned information block upward.
     * Negative margin also reduces the overall card height rather than
     * merely visually translating the content.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        position:relative !important;

        top:0 !important;

        margin-top:-68px !important;
        margin-bottom:0 !important;

        transform:none !important;
    }


    /*
     * Allow the enlarged product artwork to occupy the space naturally.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image {
        overflow:visible !important;
    }


    /*
     * Keep the artwork anchored visually toward the bottom of its image
     * stage so the gap beneath it is reduced further.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-image img {
        transform-origin:
            center bottom !important;
    }


    /*
     * Tighten bottom of card after moving content upward.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        padding-bottom:4px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.16
   Reduce dead space between product title and price
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        grid-template-rows:
            26px
            34px
            36px
            60px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-name {
        min-height:34px !important;
        height:34px !important;

        margin:0 !important;
        padding:0 4px !important;

        align-items:flex-start !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-price {
        min-height:36px !important;
        height:36px !important;

        margin:0 !important;

        align-items:center !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.17
   Reduce bottom dead space in desktop routine
   ======================================================================== */

@media (min-width:1181px) {

    /*
     * The left intro panel was keeping the whole grid row taller
     * than the product content.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-intro {
        min-height:0 !important;

        padding:
            28px
            32px
            18px !important;

        justify-content:center !important;
    }


    /*
     * Let product row use its natural content height.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-track {
        align-items:start !important;

        min-height:0 !important;

        padding-bottom:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card {
        align-self:start !important;

        height:auto !important;
        min-height:0 !important;

        padding-bottom:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-main {
        height:auto !important;
        min-height:0 !important;

        padding-bottom:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-card-copy {
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.18
   Reduce Subscribe & Save text stack by 2px
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        font-size:14px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        font-size:11px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        font-size:12px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.19
   Further 2px reduction to offer text stack
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        font-size:12px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        font-size:9px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        font-size:10px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.20
   Tighten 10% OFF / cadence / Subscribe & Save vertical spacing
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer {
        display:grid !important;

        grid-template-rows:
            15px
            13px
            16px !important;

        min-height:44px !important;
        height:44px !important;

        gap:0 !important;

        margin:0 !important;
        padding:0 !important;

        align-content:start !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-discount {
        min-height:15px !important;
        height:15px !important;

        line-height:1 !important;

        margin:0 !important;
        padding:0 !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-frequency {
        min-height:13px !important;
        height:13px !important;

        line-height:1 !important;

        margin:0 !important;
        padding:0 !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-offer-action {
        min-height:16px !important;
        height:16px !important;

        line-height:1 !important;

        margin:0 !important;
        padding:0 !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.21
   Reduce external space beneath personalised routine
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        margin:
            28px
            auto
            10px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.22
   Tighten transition into next Shop section
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        margin:
            28px
            auto
            0 !important;
    }

    /*
     * The next section was contributing most of the remaining blank area.
     */
    [data-commerce-shop]
    #chosen-for-your-hair + .dp-commerce-collections {
        padding-top:
            28px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.23
   Further tighten transition below personalised routine
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        margin-bottom:0 !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair + .dp-commerce-collections,
    [data-commerce-shop]
    #chosen-for-your-hair + .dp-commerce-catalogue,
    [data-commerce-shop]
    #chosen-for-your-hair + .dp-commerce-category-strip,
    [data-commerce-shop]
    #chosen-for-your-hair + .shop-builder-merchandising-section {
        margin-top:0 !important;

        padding-top:8px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.DRAWER.2
   10% circle + OFF + Subscribe & Save
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-ss-label {
    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    color:#FFD700 !important;
}


/* 10% inside circle */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-ss-icon {
    display:grid !important;

    place-items:center !important;

    flex:0 0 auto !important;

    width:34px !important;
    height:34px !important;

    border:
        1px solid
        #FFD700 !important;

    border-radius:
        50% !important;

    color:#FFD700 !important;

    font-size:9px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:0 !important;
}


/* OFF directly after circle */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-ss-off {
    color:#FFD700 !important;

    font-size:11px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:.08em !important;

    text-transform:uppercase !important;
}


/* Subscribe & Save — no 10% repeated */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-ss-name {
    color:#FFD700 !important;

    font-size:12px !important;
    font-weight:700 !important;

    line-height:1 !important;

    white-space:nowrap !important;
}


/* Give OFF a subtle separator before Subscribe & Save */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-ss-name::before {
    content:"·";

    display:inline-block;

    margin:
        0
        8px
        0
        1px;

    color:
        rgba(255,215,0,.55);
}


/* Mobile remains compact */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-ss-icon {
        width:32px !important;
        height:32px !important;

        font-size:8px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-ss-off {
        font-size:10px !important;
    }

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-ss-name {
        font-size:11px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.DRAWER.3B
   Compact premium drawer
   ======================================================================== */

@media (min-width:1181px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer {
        margin:
            0
            28px
            16px !important;

        background:#080909 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-inner {
        display:grid !important;

        grid-template-columns:
            220px
            minmax(0,1.12fr)
            minmax(430px,.9fr) !important;

        align-items:stretch !important;

        min-height:250px !important;
        height:auto !important;
    }


    /* PRODUCT IMAGE */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media {
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        min-height:250px !important;

        padding:
            16px
            22px !important;

        overflow:hidden !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media img {
        display:block !important;

        width:auto !important;

        height:205px !important;
        max-height:205px !important;

        max-width:94% !important;

        object-fit:contain !important;

        transform:
            scale(1.38) !important;

        transform-origin:
            center center !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media
    img[data-routine-shape="tall"] {
        transform:
            scale(1.52) !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media
    img[data-routine-shape="wide"] {
        max-width:88% !important;

        transform:
            scale(1.14) !important;
    }


    /* PRODUCT COPY */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-info {
        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        min-width:0 !important;

        padding:
            24px
            34px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-brand {
        margin-bottom:7px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-info h3 {
        margin:0 !important;

        font-size:
            clamp(
                25px,
                2vw,
                34px
            ) !important;

        line-height:1.08 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-size {
        margin-top:6px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-description {
        display:-webkit-box !important;

        max-width:650px !important;

        margin:
            14px
            0
            0 !important;

        overflow:hidden !important;

        color:
            rgba(255,255,255,.66) !important;

        font-size:12px !important;

        line-height:1.5 !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            3 !important;
    }


    /* PURCHASE */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-purchase {
        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        min-width:0 !important;

        padding:
            22px
            32px
            18px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-ss-price {
        margin-top:9px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-cadence {
        margin-top:7px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-actions {
        margin-top:14px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-actions button {
        min-height:42px !important;
    }


    /* ACCORDIONS */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-accordions {
        margin-top:9px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-accordions summary {
        padding:
            8px
            24px
            8px
            2px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-accordion-body {
        padding:
            0
            2px
            10px !important;

        font-size:10px !important;

        line-height:1.5 !important;
    }

}


/* TABLET */

@media (max-width:1180px) and (min-width:701px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-inner {
        grid-template-columns:
            170px
            minmax(230px,1fr)
            minmax(310px,1fr) !important;

        min-height:235px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media {
        min-height:235px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media img {
        height:180px !important;
        max-height:180px !important;

        transform:
            scale(1.30) !important;
    }

}


/* MOBILE */

@media (max-width:700px) {

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-inner {
        display:block !important;

        min-height:0 !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media {
        min-height:215px !important;

        padding:
            18px
            20px
            8px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media img {
        height:188px !important;
        max-height:188px !important;

        transform:
            scale(1.34) !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-info {
        padding:
            20px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-purchase {
        padding:
            18px
            20px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.DRAWER.4
   Larger product focus + tighter drawer proportions
   ======================================================================== */

@media (min-width:1181px) {

    /* ---------------------------------------------------------------
       DRAWER COLUMNS
       Narrower image column gives product information more room.
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-inner {
        grid-template-columns:
            190px
            minmax(0,1.2fr)
            minmax(420px,.88fr) !important;

        min-height:245px !important;
    }


    /* ---------------------------------------------------------------
       PRODUCT IMAGE
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media {
        min-height:245px !important;

        padding:
            10px
            14px !important;

        overflow:hidden !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media img {
        height:215px !important;
        max-height:215px !important;

        max-width:98% !important;

        transform:
            scale(1.62) !important;

        transform-origin:
            center center !important;
    }


    /*
     * Bottles need stronger compensation because the source artwork
     * contains transparent canvas.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media
    img[data-routine-shape="tall"] {
        transform:
            scale(1.92) !important;
    }


    /*
     * Wide jars already fill the available width naturally.
     */
    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-media
    img[data-routine-shape="wide"] {
        max-width:90% !important;

        transform:
            scale(1.18) !important;
    }


    /* ---------------------------------------------------------------
       PRODUCT INFORMATION
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-info {
        padding:
            22px
            32px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-drawer-description {
        margin-top:12px !important;
    }


    /* ---------------------------------------------------------------
       PURCHASE COLUMN
       --------------------------------------------------------------- */

    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-purchase {
        padding:
            18px
            30px
            16px !important;

        justify-content:center !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-ss-price {
        margin-top:6px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-cadence {
        margin-top:5px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-actions {
        margin-top:11px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-actions button {
        min-height:40px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-accordions {
        margin-top:7px !important;
    }


    [data-commerce-shop]
    #chosen-for-your-hair
    .dp-routine-accordions summary {
        padding:
            7px
            24px
            7px
            2px !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.26
   +10px each side / exclusive drawer refinement
   ======================================================================== */

@media (min-width:1181px) {

    /*
     * Previous desktop maximum = 1380px.
     * New maximum = 1400px:
     * 10px additional width on each side.
     */

    [data-commerce-shop]
    #chosen-for-your-hair.dp-commerce-personal.dp-routine {
        width:
            min(
                1400px,
                calc(100% - 36px)
            ) !important;

        max-width:
            1400px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/* ========================================================================
   F.SHOP.CHOSEN.1.28
   Keep Shop the Routine on one line
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-shop {
    min-width:280px !important;

    white-space:nowrap !important;

    flex-wrap:nowrap !important;

    justify-content:space-between !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-shop span {
    white-space:nowrap !important;
}



/* ========================================================================
   F.SHOP.CHOSEN.1.29
   Compact Shop the Routine CTA
   ======================================================================== */

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-shop {
    min-width:240px !important;

    min-height:52px !important;

    padding:
        0
        18px !important;

    font-size:14px !important;

    letter-spacing:.12em !important;

    white-space:nowrap !important;

    gap:18px !important;
}

[data-commerce-shop]
#chosen-for-your-hair
.dp-routine-shop span {
    white-space:nowrap !important;
}



/* F.SHOP.ROUTINE.PAGE.1B — link semantics only */
[data-commerce-shop]
#chosen-for-your-hair
a.dp-routine-shop {
    text-decoration:none !important;
}