:root{
    --routine-gold:#FFD700;
    --routine-bg:#050606;
    --routine-panel:#090a0a;
    --routine-line:#2c2e2f;
    --routine-gold-line:#574619;
    --routine-text:#f5f5f3;
    --routine-muted:rgba(255,255,255,.62);
}

.dp-my-routine-shell{
    margin:0;
    background:var(--routine-bg);
    color:var(--routine-text);
}

.dp-my-routine-shell *,
.dp-my-routine-shell *::before,
.dp-my-routine-shell *::after{
    box-sizing:border-box;
}

.dp-routine-account-nav{
    display:flex;
    justify-content:center;
    gap:38px;

    min-height:48px;

    padding:0 22px;

    overflow-x:auto;

    border-top:1px solid rgba(255,215,0,.16);
    border-bottom:1px solid rgba(255,255,255,.16);

    background:#090a0a;
}

.dp-routine-account-nav a{
    position:relative;

    display:flex;
    align-items:center;

    min-height:48px;

    color:rgba(255,255,255,.82);

    font-size:12px;

    white-space:nowrap;

    text-decoration:none;
}

.dp-routine-account-nav a.is-active{
    color:var(--routine-gold);
}

.dp-routine-account-nav a.is-active::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:2px;

    background:var(--routine-gold);
}


.dp-my-routine{
    width:min(1460px,calc(100% - 48px));

    margin:0 auto;

    padding:30px 0 54px;
}


.dp-routine-loading{
    display:grid;
    place-items:center;

    min-height:420px;

    color:var(--routine-muted);
}


.dp-routine-message{
    max-width:720px;

    margin:80px auto;

    padding:50px;

    border:1px solid var(--routine-line);

    background:var(--routine-panel);
}

.dp-routine-message span,
.dp-routine-page-head > div > span,
.dp-routine-advice > span{
    color:var(--routine-gold);

    font-size:10px;
    font-weight:700;

    letter-spacing:.18em;
}

.dp-routine-message h1{
    margin:14px 0;

    font-size:46px;
    font-weight:400;
}

.dp-routine-message p{
    color:var(--routine-muted);

    line-height:1.6;
}

.dp-routine-message a{
    display:inline-flex;

    gap:30px;

    margin-top:18px;

    padding:14px 18px;

    border:1px solid var(--routine-gold);

    color:var(--routine-gold);

    text-decoration:none;
}


.dp-routine-page-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        300px;

    gap:34px;

    align-items:end;

    margin-bottom:24px;
}

.dp-routine-page-head h1{
    margin:12px 0 8px;

    font-size:clamp(44px,4.2vw,66px);
    font-weight:400;

    line-height:1;
}

.dp-routine-page-head p{
    max-width:850px;

    margin:0;

    color:rgba(255,255,255,.8);

    font-size:15px;

    line-height:1.5;
}

.dp-routine-page-head aside{
    display:flex;

    gap:12px;

    align-items:flex-start;
}

.dp-routine-page-head aside > b{
    color:var(--routine-gold);

    font-size:24px;
}

.dp-routine-page-head aside div{
    display:grid;

    gap:8px;
}

.dp-routine-page-head aside strong{
    font-size:12px;
    font-weight:400;

    line-height:1.45;
}

.dp-routine-page-head aside a{
    color:var(--routine-gold);

    font-size:10px;

    text-decoration:none;
}


.dp-routine-page-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        285px;

    gap:14px;

    align-items:start;
}


.dp-routine-products{
    display:grid;

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

    border-top:1px solid var(--routine-gold-line);
    border-left:1px solid var(--routine-gold-line);
    border-bottom:1px solid var(--routine-gold-line);
}


.dp-routine-product{
    display:flex;

    flex-direction:column;

    min-width:0;
    min-height:448px;

    padding:
        17px
        13px
        14px;

    border-right:1px solid var(--routine-gold-line);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        );
}


.dp-routine-step-head{
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.dp-routine-step-number{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border:1px solid var(--routine-gold);

    border-radius:50%;

    color:#fff;

    font-size:11px;
    font-weight:700;
}

.dp-routine-step-role{
    color:rgba(255,255,255,.78);

    font-size:8px;
    font-weight:700;

    letter-spacing:.16em;
}


.dp-routine-product-media{
    display:flex;

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

    height:205px;
}

.dp-routine-product-media img{
    width:auto;

    max-width:90%;

    height:185px;
    max-height:185px;

    object-fit:contain;
}


.dp-routine-product-copy{
    display:flex;

    flex:1;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.dp-routine-product-brand{
    margin-bottom:7px;

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

    letter-spacing:.14em;

    text-transform:uppercase;
}

.dp-routine-product-name{
    min-height:40px;

    margin:0;

    font-size:13px;
    font-weight:400;

    line-height:1.25;
}

.dp-routine-product-size{
    min-height:22px;

    margin-top:5px;

    color:var(--routine-muted);

    font-size:10px;
}

.dp-routine-product-usage{
    display:-webkit-box;

    min-height:43px;

    margin:11px 0 0;

    overflow:hidden;

    color:rgba(255,255,255,.72);

    font-size:10px;

    line-height:1.4;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.dp-routine-product-view{
    display:inline-flex;

    gap:10px;

    margin-top:auto;

    padding-top:13px;

    color:var(--routine-gold);

    border-bottom:1px solid var(--routine-gold);

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}


.dp-routine-add-all{
    display:grid;

    grid-template-columns:
        200px
        minmax(0,1fr)
        minmax(330px,410px);

    gap:20px;

    align-items:center;

    min-height:82px;

    margin-top:9px;

    padding:10px 16px;

    border:1px solid var(--routine-gold-line);

    background:#090a0a;
}

.dp-routine-miniatures{
    display:flex;

    align-items:end;

    gap:4px;

    height:58px;
}

.dp-routine-miniatures img{
    width:auto;

    max-width:34px;

    height:52px;

    object-fit:contain;
}

.dp-routine-add-copy{
    display:grid;

    gap:3px;
}

.dp-routine-add-copy strong{
    font-size:17px;
    font-weight:400;
}

.dp-routine-add-copy span{
    color:var(--routine-muted);

    font-size:11px;
}

.dp-routine-add-all button{
    display:flex;

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

    gap:16px;

    min-height:44px;

    padding:0 16px;

    border:1px solid var(--routine-gold);

    background:var(--routine-gold);

    color:#050606;

    font-size:10px;
    font-weight:800;

    cursor:pointer;
}


.dp-routine-status{
    padding:10px 14px;

    color:var(--routine-gold);

    border:
        1px solid
        rgba(255,215,0,.3);

    font-size:11px;
}

.dp-routine-status a{
    color:var(--routine-gold);
}


.dp-routine-subscribe{
    display:grid;

    grid-template-columns:
        44px
        minmax(0,1fr)
        290px;

    gap:15px;

    align-items:center;

    min-height:68px;

    margin-top:8px;

    padding:10px 18px;

    border:1px solid var(--routine-gold-line);

    background:#090a0a;
}

.dp-routine-subscribe-icon{
    color:var(--routine-gold);

    font-size:32px;
}

.dp-routine-subscribe > div:nth-child(2){
    display:grid;

    gap:3px;
}

.dp-routine-subscribe strong{
    font-size:15px;
    font-weight:400;
}

.dp-routine-subscribe span{
    color:var(--routine-muted);

    font-size:10px;
}

.dp-routine-subscribe > a{
    display:flex;

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

    gap:18px;

    min-height:40px;

    border:1px solid var(--routine-gold);

    color:var(--routine-gold);

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}


.dp-routine-sidebar > section{
    padding:22px;

    border:1px solid #574619;

    background:
        linear-gradient(
            145deg,
            rgba(255,215,0,.032),
            rgba(255,255,255,.012)
        );
}

.dp-routine-sidebar header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.16);
}

.dp-routine-sidebar h2{
    margin:0;

    font-size:16px;
    font-weight:400;
}

.dp-routine-sidebar header a{
    color:var(--routine-gold);

    font-size:10px;

    text-decoration:none;
}

.dp-routine-sidebar dl{
    display:grid;

    gap:9px;

    margin:15px 0 0;
}

.dp-routine-sidebar dl > div{
    display:grid;

    grid-template-columns:
        90px
        1fr;

    gap:8px;
}

.dp-routine-sidebar dt,
.dp-routine-sidebar dd{
    margin:0;

    font-size:11px;

    line-height:1.35;
}

.dp-routine-sidebar dt{
    color:rgba(255,255,255,.72);
}

.dp-routine-sidebar hr{
    height:1px;

    margin:22px 0;

    border:0;

    background:rgba(255,255,255,.15);
}

.dp-routine-goals{
    display:grid;

    gap:10px;

    margin-top:15px;
}

.dp-routine-goal{
    display:flex;

    gap:9px;

    align-items:center;

    font-size:11px;
}

.dp-routine-goal::before{
    content:"✦";

    color:var(--routine-gold);
}

.dp-routine-help p{
    color:var(--routine-muted);

    font-size:11px;

    line-height:1.5;
}

.dp-routine-help a{
    display:flex;

    justify-content:center;

    margin-top:16px;

    padding:12px;

    border:1px solid var(--routine-gold);

    color:var(--routine-gold);

    font-size:10px;

    text-decoration:none;
}


.dp-routine-advice{
    margin-top:18px;

    padding:32px;

    border-top:1px solid var(--routine-gold-line);
}

.dp-routine-advice h2{
    margin:11px 0 7px;

    font-size:28px;
    font-weight:400;
}

.dp-routine-advice p{
    max-width:700px;

    color:var(--routine-muted);

    line-height:1.6;
}

.dp-routine-advice > div{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:16px;
}

.dp-routine-advice a{
    padding:12px 15px;

    border:1px solid #484a4b;

    color:#fff;

    font-size:10px;

    text-decoration:none;
}

.dp-routine-advice a:first-child{
    border-color:var(--routine-gold);

    color:var(--routine-gold);
}


/* TABLET */

@media (max-width:1180px){

    .dp-my-routine{
        width:calc(100% - 30px);
    }

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

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

    .dp-routine-products{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

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

    .dp-routine-sidebar{
        margin-top:4px;
    }
}


/* MOBILE */

@media (max-width:700px){

    .dp-routine-account-nav{
        justify-content:flex-start;

        gap:25px;
    }

    .dp-my-routine{
        width:100%;

        padding-top:20px;
    }

    .dp-routine-page-head{
        padding:0 18px;
    }

    .dp-routine-page-head h1{
        font-size:42px;
    }

    .dp-routine-products{
        display:flex;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        border-left:0;
    }

    .dp-routine-product{
        flex:
            0 0
            min(78vw,290px);

        scroll-snap-align:start;
    }

    .dp-routine-add-all{
        grid-template-columns:1fr;

        margin:
            9px
            14px
            0;
    }

    .dp-routine-miniatures{
        justify-content:center;
    }

    .dp-routine-add-copy{
        text-align:center;
    }

    .dp-routine-subscribe{
        grid-template-columns:
            42px
            1fr;

        margin:
            8px
            14px
            0;
    }

    .dp-routine-subscribe > a{
        grid-column:1/-1;
    }

    .dp-routine-sidebar{
        margin:
            8px
            14px
            0;
    }

    .dp-routine-advice{
        padding:
            28px
            18px;
    }
}


/* ========================================================================
   F.SHOP.ROUTINE.PAGE.1C
   hidden must always remove inactive routine states from layout
   ======================================================================== */

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



/* ========================================================================
   F.SHOP.ROUTINE.PAGE.1C
   hidden must always remove inactive routine states from layout
   ======================================================================== */

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


/* =========================================================
   F.ACCOUNT.MYHAIR.3.1
   My Routine integrated into My Hair Nav 3
   ========================================================= */

.dp-my-routine .dp-routine-hair-nav3{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    width:100%;
    max-width:min(1460px,92vw);
    min-height:52px;
    margin:0 auto 12px;
    border:1px solid rgba(239,235,228,.11);
    border-top:0;
    background:#070808;
    overflow:hidden;
}

.dp-my-routine .dp-routine-hair-nav3 a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    min-height:52px;
    padding:0 10px;
    border-right:1px solid rgba(239,235,228,.08);
    color:#c7c7c3;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:10px;
    font-weight:500;
    line-height:1;
    text-decoration:none;
    transition:
        color .16s ease,
        background .16s ease;
}

.dp-my-routine .dp-routine-hair-nav3 a:last-child{
    border-right:0;
}

.dp-my-routine .dp-routine-hair-nav3 svg{
    width:16px;
    height:16px;
    flex:none;
    fill:none;
    stroke:#a9aaa7;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dp-my-routine .dp-routine-hair-nav3 a:hover{
    color:#fff;
    background:rgba(255,255,255,.018);
}

.dp-my-routine .dp-routine-hair-nav3 a.active{
    color:#fff;
}

.dp-my-routine .dp-routine-hair-nav3 a.active svg{
    stroke:#ffd700;
}

.dp-my-routine .dp-routine-hair-nav3 a.active:after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:2px;
    background:#ffd700;
}

@media(max-width:1080px){
    .dp-my-routine .dp-routine-hair-nav3{
        grid-template-columns:repeat(3,1fr);
    }

    .dp-my-routine .dp-routine-hair-nav3 a:nth-child(-n+3){
        border-bottom:1px solid rgba(239,235,228,.08);
    }
}

@media(max-width:700px){
    .dp-my-routine .dp-routine-hair-nav3{
        display:flex;
        max-width:100%;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .dp-my-routine .dp-routine-hair-nav3::-webkit-scrollbar{
        display:none;
    }

    .dp-my-routine .dp-routine-hair-nav3 a{
        flex:0 0 auto;
        min-width:124px;
        min-height:48px;
    }

    .dp-my-routine .dp-routine-hair-nav3 a:nth-child(-n+3){
        border-bottom:0;
    }
}

/* =========================================================
   F.ACCOUNT.MYHAIR.3.2
   Restore My Hair context header above Nav 3 on My Routine
   ========================================================= */

.dp-my-routine .dp-routine-hair-context{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    width:100%;
    max-width:min(1460px,92vw);
    min-height:132px;

    margin:0 auto;
    padding:24px 28px;

    border:1px solid rgba(239,235,228,.16);
    background:#0b0c0c;

    box-sizing:border-box;
}

.dp-my-routine .dp-routine-hair-context-copy{
    min-width:0;
}

.dp-my-routine .dp-routine-hair-context-copy>span{
    display:block;

    margin:0 0 9px;

    color:#ffd700;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px;
}

.dp-my-routine .dp-routine-hair-context-copy h1{
    margin:0;

    color:#f4f4f1;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:40px;
    font-weight:600;
    line-height:1;
    letter-spacing:-1.2px;
}

.dp-my-routine .dp-routine-hair-context-copy p{
    margin:12px 0 0;

    color:#a7a7a3;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.45;
}

.dp-my-routine .dp-routine-hair-context-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;

    text-align:right;
}

.dp-my-routine .dp-routine-hair-context-meta>span{
    color:#ffd700;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px;
}

.dp-my-routine .dp-routine-hair-context-meta strong{
    color:#858784;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:9px;
    font-weight:500;
    letter-spacing:.3px;
}

.dp-my-routine .dp-routine-hair-context
    + .dp-routine-hair-nav3{
    margin-top:0;
}

@media(max-width:700px){

    .dp-my-routine .dp-routine-hair-context{
        min-height:auto;

        padding:20px 18px;

        flex-direction:column;
        align-items:flex-start;
    }

    .dp-my-routine .dp-routine-hair-context-copy h1{
        font-size:34px;
    }

    .dp-my-routine .dp-routine-hair-context-meta{
        display:none;
    }
}

/* =========================================================
   F.ACCOUNT.MYHAIR.PROGRESS.REMOVE.1
   My Routine My Hair Nav 3 now contains five items.
   ========================================================= */

@media(min-width:1081px){

    .dp-my-routine .dp-routine-hair-nav3{
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
    }

}

/* =========================================================
   F.ACCOUNT.MYROUTINE.NAV3.MATCH.1
   My Routine Nav 3 matches account / Hair Goals Nav 3
   ========================================================= */

.dp-my-routine .dp-routine-hair-nav3{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;

    width:100%!important;
    max-width:min(1460px,92vw)!important;

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

    margin:0 auto 12px!important;
    padding:0!important;

    border:1px solid rgba(239,235,228,.11)!important;
    border-top:0!important;

    background:#070808!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
}

.dp-my-routine .dp-routine-hair-nav3 a{
    position:relative!important;

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

    gap:8px!important;

    min-width:0!important;
    min-height:52px!important;
    height:52px!important;

    padding:0 10px!important;

    border:0!important;
    border-right:1px solid rgba(239,235,228,.08)!important;

    background:transparent!important;

    color:#c7c7c3!important;

    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
    font-size:12px!important;
    font-weight:500!important;
    line-height:1!important;

    text-decoration:none!important;

    box-sizing:border-box!important;
}

.dp-my-routine .dp-routine-hair-nav3 a:last-child{
    border-right:0!important;
}

.dp-my-routine .dp-routine-hair-nav3 svg{
    width:16px!important;
    height:16px!important;

    flex:none!important;

    fill:none!important;
    stroke:#a9aaa7!important;

    stroke-width:1.6!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

.dp-my-routine .dp-routine-hair-nav3 a:hover{
    background:rgba(255,255,255,.018)!important;
    color:#fff!important;
}

.dp-my-routine .dp-routine-hair-nav3 a.active{
    background:transparent!important;
    color:#fff!important;
}

.dp-my-routine .dp-routine-hair-nav3 a.active svg{
    stroke:#ffd700!important;
}

.dp-my-routine .dp-routine-hair-nav3 a.active:after{
    content:""!important;

    position:absolute!important;

    left:16px!important;
    right:16px!important;
    bottom:0!important;

    width:auto!important;
    height:2px!important;

    transform:none!important;

    background:#ffd700!important;
}


/* Remove any inherited routine-specific spacing */

.dp-my-routine .dp-routine-hair-context
+ .dp-routine-hair-nav3{
    margin-top:0!important;
}


/* Tablet */

@media(max-width:1080px){

    .dp-my-routine .dp-routine-hair-nav3{
        height:auto!important;
        grid-template-columns:repeat(3,1fr)!important;
    }

    .dp-my-routine .dp-routine-hair-nav3 a:nth-child(-n+3){
        border-bottom:1px solid rgba(239,235,228,.08)!important;
    }
}


/* Mobile */

@media(max-width:700px){

    .dp-my-routine .dp-routine-hair-nav3{
        display:flex!important;

        max-width:100%!important;

        overflow-x:auto!important;
        scrollbar-width:none!important;
    }

    .dp-my-routine .dp-routine-hair-nav3::-webkit-scrollbar{
        display:none!important;
    }

    .dp-my-routine .dp-routine-hair-nav3 a{
        flex:0 0 124px!important;

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

    .dp-my-routine .dp-routine-hair-nav3 a:nth-child(-n+3){
        border-bottom:0!important;
    }
}


/* =========================================================
   F.ACCOUNT.MYROUTINE.NAV3.STRUCTURE.2
   My Routine header + Nav 3 share one exact account rail.
   ========================================================= */


/* One outer rail — same concept as account .v10-page */

.dp-my-routine .dp-routine-hair-shell{
    width:100%!important;
    max-width:min(1460px,92vw)!important;

    margin:0 auto 12px!important;
    padding:0!important;

    box-sizing:border-box!important;
}


/* Header fills that exact rail */

.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-context{
    width:100%!important;
    max-width:none!important;

    margin:0!important;

    box-sizing:border-box!important;

    border:
        1px solid
        rgba(239,235,228,.16)!important;
}


/* Nav immediately follows header */

.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3{
    display:grid!important;

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

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

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

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

    border-top:0!important;

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

    border-bottom:
        1px solid
        rgba(239,235,228,.11)!important;

    border-left:
        1px solid
        rgba(239,235,228,.11)!important;

    background:#070808!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
}


/* Exact five equal cells */

.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a{
    position:relative!important;

    display:flex!important;

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

    gap:8px!important;

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

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

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

    border:0!important;

    border-right:
        1px solid
        rgba(239,235,228,.08)!important;

    background:#070808!important;

    box-sizing:border-box!important;

    color:#c7c7c3!important;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif!important;

    font-size:12px!important;
    font-weight:500!important;
    line-height:1!important;

    text-decoration:none!important;
}


.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a:last-child{
    border-right:0!important;
}


/* Icons */

.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a svg{
    width:16px!important;
    height:16px!important;

    flex:0 0 16px!important;

    fill:none!important;
    stroke:#a9aaa7!important;

    stroke-width:1.6!important;
}


/* Active item */

.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a.active{
    color:#fff!important;
    background:#070808!important;
}


.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a.active svg{
    stroke:#ffd700!important;
}


.dp-my-routine
.dp-routine-hair-shell
> .dp-routine-hair-nav3
> a.active:after{
    content:""!important;

    position:absolute!important;

    left:16px!important;
    right:16px!important;
    bottom:0!important;

    width:auto!important;
    height:2px!important;

    margin:0!important;

    transform:none!important;

    background:#ffd700!important;
}


/* Remove old routine-nav positioning effects */

.dp-my-routine
.dp-routine-hair-context
+ .dp-routine-hair-nav3{
    margin:0!important;
}


/* Tablet */

@media(max-width:1080px){

    .dp-my-routine
    .dp-routine-hair-shell
    > .dp-routine-hair-nav3{
        height:auto!important;

        grid-template-columns:
            repeat(3,1fr)!important;
    }

}


/* Mobile */

@media(max-width:700px){

    .dp-my-routine
    .dp-routine-hair-shell{
        max-width:100%!important;
    }

    .dp-my-routine
    .dp-routine-hair-shell
    > .dp-routine-hair-nav3{
        display:flex!important;

        overflow-x:auto!important;
        scrollbar-width:none!important;
    }

    .dp-my-routine
    .dp-routine-hair-shell
    > .dp-routine-hair-nav3::-webkit-scrollbar{
        display:none!important;
    }

    .dp-my-routine
    .dp-routine-hair-shell
    > .dp-routine-hair-nav3
    > a{
        flex:0 0 124px!important;

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

}


/* =========================================================
   F.ACCOUNT.MYROUTINE.REFINE.3
   Routine product + sidebar refinement
   Neutral black / dark borders / tighter product cards
   ========================================================= */

:root{
    --routine-dark:#050606;
    --routine-panel:#080909;
    --routine-panel-2:#0a0b0c;
    --routine-line:#282a2c;
    --routine-line-soft:#202224;
    --routine-text:#f2f2ef;
    --routine-muted:#a2a4a1;
    --routine-gold:#ffd700;
}


/* =========================================================
   REMOVE OLIVE / GOLD PANEL CAST
   ========================================================= */

.dp-my-routine,
.dp-my-routine .dp-routine-main,
.dp-my-routine .dp-routine-products{
    background:var(--routine-dark)!important;
}

.dp-my-routine
:is(
    .dp-routine-products,
    .dp-routine-add-all,
    .dp-routine-status,
    .dp-routine-page-grid > aside,
    .dp-routine-sidebar,
    [class*="routine-profile"],
    [class*="routine-aside"]
){
    border-color:var(--routine-line)!important;
}


/* Remove tinted / gradient panel effects */

.dp-my-routine
:is(
    .dp-routine-page-grid > aside,
    .dp-routine-sidebar,
    [class*="routine-profile"],
    [class*="routine-aside"]
){
    background:#080909!important;
    background-image:none!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.dp-my-routine .dp-routine-products{
    border-color:var(--routine-line)!important;
}

.dp-my-routine .dp-routine-products > *{
    border-color:var(--routine-line)!important;
    background:#070808!important;
    background-image:none!important;
}


/*
 * Keep products visually substantial but remove the
 * excessive vertical void between the image and copy.
 */

.dp-my-routine .dp-routine-products article,
.dp-my-routine .dp-routine-products > div{
    min-height:470px!important;
    height:auto!important;

    padding:
        18px
        16px
        16px!important;

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

    box-sizing:border-box!important;
}


/* Step number / category row */

.dp-my-routine .dp-routine-products
:is(
    [class*="step"],
    [class*="product-head"],
    header
){
    min-height:42px!important;
}


/* STEP TEXT BIGGER */

.dp-my-routine .dp-routine-products
:is(
    [class*="step-label"],
    [class*="category"],
    header > span,
    header > small
){
    font-size:11px!important;
    letter-spacing:1.6px!important;
    font-weight:700!important;

    color:#c8cac7!important;
}


/* Circle number */

.dp-my-routine .dp-routine-products
:is(
    [class*="step-number"],
    header > b
){
    font-size:13px!important;
}


/* =========================================================
   PRODUCT IMAGE AREA
   ========================================================= */

.dp-my-routine .dp-routine-products
:is(
    [class*="image"],
    [class*="photo"],
    figure
){
    min-height:190px!important;
    height:190px!important;

    margin:
        8px
        0
        14px!important;

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

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

.dp-my-routine .dp-routine-products img{
    display:block!important;

    width:auto!important;
    height:auto!important;

    max-width:88%!important;
    max-height:180px!important;

    object-fit:contain!important;

    margin:auto!important;
}


/* =========================================================
   PRODUCT COPY
   ========================================================= */

.dp-my-routine .dp-routine-products
:is(
    [class*="brand"],
    article > span
){
    font-size:10px!important;
    letter-spacing:1.5px!important;
}

.dp-my-routine .dp-routine-products
:is(
    h2,
    h3,
    [class*="product-name"]
){
    margin:
        6px
        0
        8px!important;

    font-size:16px!important;
    line-height:1.25!important;

    color:var(--routine-text)!important;
}

.dp-my-routine .dp-routine-products
:is(
    [class*="size"],
    [class*="variant"]
){
    font-size:11px!important;
    color:#a5a7a4!important;
}


/*
 * Description gets enough room to be useful,
 * but no enormous dead section.
 */

.dp-my-routine .dp-routine-products p{
    margin:
        16px
        0
        12px!important;

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

    overflow:hidden!important;

    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;

    font-size:11px!important;
    line-height:1.48!important;

    color:#b8bab7!important;
}


/* View product naturally sits at bottom */

.dp-my-routine .dp-routine-products
:is(
    a[href*="/shop"],
    [class*="view-product"]
){
    margin-top:auto!important;

    padding-top:10px!important;

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

    color:var(--routine-gold)!important;
}


/* =========================================================
   ADD ALL CORE STEPS
   ========================================================= */

.dp-my-routine .dp-routine-add-all{
    min-height:88px!important;

    padding:
        12px
        16px!important;

    border-color:var(--routine-line)!important;

    background:#080909!important;
    background-image:none!important;

    display:grid!important;

    grid-template-columns:
        minmax(210px,auto)
        minmax(250px,1fr)
        minmax(390px,42%)!important;

    align-items:center!important;

    gap:20px!important;
}


/* Product miniatures made much more useful */

.dp-my-routine .dp-routine-miniatures{
    display:flex!important;
    align-items:flex-end!important;

    gap:11px!important;

    min-width:210px!important;
}

.dp-my-routine .dp-routine-miniatures img{
    width:auto!important;
    height:auto!important;

    max-width:48px!important;
    max-height:62px!important;

    object-fit:contain!important;
}

.dp-my-routine .dp-routine-miniatures > *{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;

    width:40px!important;
    min-width:40px!important;
    height:64px!important;

    background:transparent!important;
}


/* Add-all text */

.dp-my-routine .dp-routine-add-copy strong{
    font-size:18px!important;
    line-height:1.2!important;

    color:var(--routine-text)!important;
}

.dp-my-routine .dp-routine-add-copy span{
    margin-top:3px!important;

    font-size:11px!important;

    color:var(--routine-muted)!important;
}


/* Main add button */

.dp-my-routine .dp-routine-add-all
[data-add-routine]{
    min-height:52px!important;

    padding:0 24px!important;

    border-color:var(--routine-gold)!important;

    font-size:11px!important;
}


/* =========================================================
   SUBSCRIBE & SAVE ROW
   ========================================================= */

.dp-my-routine
:is(
    [class*="subscribe"],
    [class*="routine-status"]
){
    border-color:var(--routine-line)!important;
}

.dp-my-routine
.dp-routine-status{
    background:#080909!important;
    background-image:none!important;
}


/* =========================================================
   SIDEBAR — REMOVE BACKGROUND EFFECT
   ========================================================= */

.dp-my-routine
.dp-routine-page-grid > aside{
    align-self:start!important;

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

    padding:22px!important;

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

    background:#080909!important;
    background-image:none!important;

    box-shadow:none!important;
}


/* Any nested panels become one flat surface */

.dp-my-routine
.dp-routine-page-grid > aside
:is(
    section,
    article,
    div
){
    background-image:none!important;
}


/* Main sidebar titles */

.dp-my-routine
.dp-routine-page-grid > aside
h2,
.dp-my-routine
.dp-routine-page-grid > aside
h3{
    font-size:18px!important;
    line-height:1.2!important;

    color:var(--routine-text)!important;
}


/* Edit links */

.dp-my-routine
.dp-routine-page-grid > aside
a{
    color:var(--routine-gold)!important;
}


/* Profile labels and values */

.dp-my-routine
.dp-routine-page-grid > aside
:is(
    dt,
    label,
    [class*="label"]
){
    font-size:12px!important;
    color:#a8aaa7!important;
}

.dp-my-routine
.dp-routine-page-grid > aside
:is(
    dd,
    [class*="value"]
){
    font-size:12px!important;
    color:#f1f1ed!important;
}


/* Sidebar separators */

.dp-my-routine
.dp-routine-page-grid > aside hr,
.dp-my-routine
.dp-routine-page-grid > aside
[class*="divider"]{
    border-color:var(--routine-line)!important;
}


/* Reduce section dead space */

.dp-my-routine
.dp-routine-page-grid > aside
section{
    padding:
        18px
        0!important;

    margin:0!important;
}

.dp-my-routine
.dp-routine-page-grid > aside
section:first-child{
    padding-top:0!important;
}

.dp-my-routine
.dp-routine-page-grid > aside
section:last-child{
    padding-bottom:0!important;
}


/* Need help */

.dp-my-routine
.dp-routine-page-grid > aside
p{
    font-size:12px!important;
    line-height:1.5!important;

    color:#a8aaa7!important;
}


/* =========================================================
   POPULATED GOALS
   ========================================================= */

.dp-routine-populated-goals{
    display:grid;

    gap:9px;

    margin:
        14px
        0
        0;

    padding:0;

    list-style:none;
}

.dp-routine-populated-goals li{
    display:grid;

    grid-template-columns:
        22px
        minmax(0,1fr);

    gap:8px;

    align-items:start;

    font-size:11px;
    line-height:1.4;

    color:#d7d8d5;
}

.dp-routine-populated-goals li:before{
    content:"✓";

    width:20px;
    height:20px;

    display:grid;
    place-items:center;

    border:1px solid #ffd700;
    border-radius:50%;

    color:#ffd700;

    font-size:11px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px){

    .dp-my-routine .dp-routine-add-all{
        grid-template-columns:
            minmax(180px,auto)
            1fr!important;
    }

    .dp-my-routine .dp-routine-add-all
    [data-add-routine]{
        grid-column:1/-1!important;
    }
}


@media(max-width:700px){

    .dp-my-routine .dp-routine-products article,
    .dp-my-routine .dp-routine-products > div{
        min-height:0!important;
    }

    .dp-my-routine .dp-routine-add-all{
        display:flex!important;
        flex-direction:column!important;

        align-items:stretch!important;
    }

    .dp-my-routine .dp-routine-miniatures{
        min-width:0!important;
    }
}


/* =========================================================
   F.ACCOUNT.MYROUTINE.PRODUCTS.1
   My Routine — product cards only
   ========================================================= */


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-products{
    align-items:start!important;

    background:#050606!important;

    border-color:#282a2c!important;
}


/* ---------------------------------------------------------
   INDIVIDUAL PRODUCT CARD
   cancel old 470px broad override
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-products
> article.dp-routine-product{
    min-height:0!important;
    height:auto!important;

    align-self:start!important;

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

    padding:0!important;

    border:
        1px solid
        #282a2c!important;

    background:#050606!important;

    box-shadow:none!important;

    overflow:visible!important;
}


/* ---------------------------------------------------------
   IMAGE AREA
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-media{
    position:relative!important;

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

    padding:
        16px
        12px
        8px!important;

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

    background:#050606!important;
    background-image:none!important;

    overflow:visible!important;
}


.dp-my-routine
.dp-routine-product-media img{
    display:block!important;

    width:auto!important;
    height:auto!important;

    max-width:86%!important;
    max-height:145px!important;

    margin:auto!important;

    object-fit:contain!important;
}


/* ---------------------------------------------------------
   NUMBER — TRUE CIRCLE
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-media
.dp-routine-number{
    position:absolute!important;

    top:13px!important;
    left:13px!important;

    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;

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

    aspect-ratio:1 / 1!important;

    display:grid!important;
    place-items:center!important;

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

    border:
        1px solid
        #ffd700!important;

    border-radius:50%!important;

    box-sizing:border-box!important;

    background:#050606!important;

    color:#fff!important;

    font-size:12px!important;
    font-weight:600!important;
    line-height:1!important;

    letter-spacing:0!important;

    transform:none!important;
}


/* ---------------------------------------------------------
   STEP LABEL
   CLEANSE / CONDITION / TREATMENT etc.
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
:is(
    .dp-routine-step,
    .dp-routine-role,
    .dp-routine-product-role,
    .dp-routine-product-label
){
    font-size:11px!important;

    line-height:1.1!important;

    font-weight:700!important;

    letter-spacing:1.6px!important;

    color:#d0d1ce!important;
}


/* ---------------------------------------------------------
   PRODUCT COPY
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-copy{
    min-height:0!important;
    height:auto!important;

    padding:
        8px
        14px
        16px!important;

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

    overflow:visible!important;

    background:#050606!important;
}


/* brand */

.dp-my-routine
.dp-routine-brand{
    margin:0!important;

    font-size:10.5px!important;

    line-height:1.2!important;

    letter-spacing:1.5px!important;

    color:#e0e1de!important;
}


/* name */

.dp-my-routine
.dp-routine-name,
.dp-my-routine
.dp-routine-product-name{
    min-height:0!important;
    height:auto!important;

    margin:
        8px
        0
        0!important;

    font-size:15px!important;

    line-height:1.25!important;

    color:#f2f2ef!important;
}


/* product size */

.dp-my-routine
:is(
    .dp-routine-size,
    .dp-routine-product-size,
    .dp-routine-product-variant
){
    min-height:0!important;
    height:auto!important;

    margin-top:9px!important;

    font-size:11px!important;

    line-height:1.25!important;

    color:#9da09c!important;
}


/* ---------------------------------------------------------
   DESCRIPTION — FULL TEXT
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-usage{
    display:block!important;

    width:100%!important;

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

    margin:
        15px
        0
        0!important;

    padding:0!important;

    overflow:visible!important;

    white-space:normal!important;

    text-overflow:clip!important;

    -webkit-box-orient:initial!important;
    -webkit-line-clamp:unset!important;

    font-size:11px!important;

    line-height:1.45!important;

    color:#b8bab7!important;
}


/* ---------------------------------------------------------
   VIEW PRODUCT
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
a{
    flex:none!important;
}


.dp-my-routine
.dp-routine-product
a[href]{
    margin-top:16px!important;
}


/* avoid old auto-margin stretching cards */

.dp-my-routine
.dp-routine-product-copy
> a:last-child{
    margin-top:16px!important;
}


/* ---------------------------------------------------------
   REMOVE STRETCHING FROM COPY ELEMENTS
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-copy
> *{
    flex-grow:0!important;
    flex-shrink:0!important;
}


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

@media(max-width:700px){

    .dp-my-routine
    .dp-routine-product-media{
        height:155px!important;
        min-height:155px!important;
        max-height:155px!important;
    }


    .dp-my-routine
    .dp-routine-product-media img{
        max-height:130px!important;
    }

}


/* =========================================================
   F.ACCOUNT.MYROUTINE.PRODUCTS.1B
   Equal product row + full copy
   ========================================================= */


/* Six cards form one proper row */

.dp-my-routine .dp-routine-products{
    display:grid!important;

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

    align-items:stretch!important;

    background:#050606!important;
}


/* Every card stretches to the same row height */

.dp-my-routine
.dp-routine-products
> article.dp-routine-product{
    width:100%!important;

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

    height:100%!important;

    align-self:stretch!important;

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

    padding:0!important;

    border:1px solid #27292b!important;

    background:#050606!important;

    box-sizing:border-box!important;

    overflow:hidden!important;
}


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

.dp-my-routine .dp-routine-product-media{
    position:relative!important;

    flex:0 0 160px!important;

    width:100%!important;

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

    padding:12px!important;

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

    background:#050606!important;

    box-sizing:border-box!important;
}


.dp-my-routine .dp-routine-product-media img{
    width:auto!important;
    height:auto!important;

    max-width:82%!important;
    max-height:138px!important;

    object-fit:contain!important;

    margin:auto!important;
}


/* ---------------------------------------------------------
   TRUE CIRCULAR STEP NUMBER
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-media
.dp-routine-number{
    position:absolute!important;

    top:12px!important;
    left:12px!important;

    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;

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

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

    display:grid!important;
    place-items:center!important;

    flex:none!important;

    border:1px solid #ffd700!important;
    border-radius:999px!important;

    background:#050606!important;

    box-sizing:border-box!important;

    color:#fff!important;

    font-size:12px!important;
    font-weight:600!important;
    line-height:1!important;

    transform:none!important;
}


/* ---------------------------------------------------------
   COPY AREA
   --------------------------------------------------------- */

.dp-my-routine .dp-routine-product-copy{
    flex:1 1 auto!important;

    width:100%!important;

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

    height:auto!important;

    padding:
        10px
        14px
        16px!important;

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

    box-sizing:border-box!important;

    overflow:visible!important;

    background:#050606!important;
}


/* brand */

.dp-my-routine .dp-routine-brand{
    flex:none!important;

    font-size:10.5px!important;
    line-height:1.2!important;
    letter-spacing:1.4px!important;
}


/* product name */

.dp-my-routine
:is(
    .dp-routine-name,
    .dp-routine-product-name
){
    flex:none!important;

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

    margin:8px 0 0!important;

    font-size:15px!important;
    line-height:1.25!important;
}


/* size */

.dp-my-routine
:is(
    .dp-routine-size,
    .dp-routine-product-size,
    .dp-routine-product-variant
){
    flex:none!important;

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

    margin-top:9px!important;

    font-size:11px!important;
}


/* ---------------------------------------------------------
   DESCRIPTION — COMPLETELY REMOVE CLAMP
   --------------------------------------------------------- */

.dp-my-routine .dp-routine-product-usage{
    display:block!important;

    flex:none!important;

    width:100%!important;

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

    height:auto!important;
    max-height:none!important;

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

    overflow:visible!important;

    white-space:normal!important;
    text-overflow:clip!important;

    -webkit-box-orient:initial!important;
    -webkit-line-clamp:unset!important;

    line-clamp:unset!important;

    font-size:11px!important;
    line-height:1.45!important;

    color:#b8bab7!important;
}


/* Make sure nothing INSIDE the description is clamped */

.dp-my-routine
.dp-routine-product-usage *{
    max-height:none!important;

    overflow:visible!important;

    white-space:normal!important;

    text-overflow:clip!important;

    -webkit-line-clamp:unset!important;

    line-clamp:unset!important;
}


/* ---------------------------------------------------------
   VIEW PRODUCT
   all six links align at bottom
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product-copy
> a:last-child{
    flex:none!important;

    margin-top:auto!important;
    padding-top:16px!important;
    padding-bottom:0!important;

    font-size:11px!important;
}


/* ---------------------------------------------------------
   CLEANSE / CONDITION / TREATMENT LABELS
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
:is(
    .dp-routine-step,
    .dp-routine-role,
    .dp-routine-product-role,
    .dp-routine-product-label,
    .dp-routine-step-label
){
    font-size:11.5px!important;
    font-weight:700!important;

    line-height:1.1!important;
    letter-spacing:1.6px!important;
}


/* ---------------------------------------------------------
   DESKTOP: prevent old broad rules from making card 5 short
   --------------------------------------------------------- */

@media(min-width:701px){

    .dp-my-routine
    .dp-routine-products
    > article.dp-routine-product{
        height:100%!important;
    }

}


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

@media(max-width:700px){

    .dp-my-routine .dp-routine-products{
        display:flex!important;
        align-items:stretch!important;
    }

    .dp-my-routine .dp-routine-product-media{
        flex-basis:145px!important;

        height:145px!important;
        min-height:145px!important;
        max-height:145px!important;
    }

    .dp-my-routine
    .dp-routine-product-media img{
        max-height:125px!important;
    }

}


/* =========================================================
   F.ACCOUNT.MYROUTINE.PRODUCTS.1C
   Circle position + larger step labels + shorter descriptions
   ========================================================= */

/* Move number circles inward so they sit with the top step label row */
.dp-my-routine
.dp-routine-product-media
.dp-routine-number{
    top:12px!important;
    left:50%!important;
    transform:translateX(calc(-50% - 112px))!important;
}

/* Make CLEANSE / CONDITION / TREATMENT / etc larger */
.dp-my-routine
.dp-routine-product
:is(
    .dp-routine-step,
    .dp-routine-role,
    .dp-routine-product-role,
    .dp-routine-product-label,
    .dp-routine-step-label
){
    font-size:13px!important;
    line-height:1.1!important;
    letter-spacing:2.2px!important;
    font-weight:700!important;
    color:#cfcfcb!important;
}

/* Slightly tighten the top media area so the header row feels cleaner */
.dp-my-routine .dp-routine-product-media{
    height:152px!important;
    min-height:152px!important;
    max-height:152px!important;
    padding-top:10px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    padding-bottom:10px!important;
}

/* Restrict description text to fewer lines */
.dp-my-routine .dp-routine-product-usage{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;

    font-size:11px!important;
    line-height:1.45!important;

    max-height:4.35em!important;
}

/* Apply same clamp to common nested paragraph wrappers */
.dp-my-routine .dp-routine-product-usage p,
.dp-my-routine .dp-routine-product-usage div,
.dp-my-routine .dp-routine-product-usage span{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;

    max-height:4.35em!important;
}

/* Keep product names and sizes clean after reducing description depth */
.dp-my-routine
:is(
    .dp-routine-name,
    .dp-routine-product-name
){
    margin-top:10px!important;
}

.dp-my-routine
:is(
    .dp-routine-size,
    .dp-routine-product-size,
    .dp-routine-product-variant
){
    margin-top:10px!important;
}

/* Mobile: reduce the circle offset so it still aligns nicely */
@media(max-width:700px){
    .dp-my-routine
    .dp-routine-product-media
    .dp-routine-number{
        transform:translateX(calc(-50% - 72px))!important;
    }

    .dp-my-routine
    .dp-routine-product
    :is(
        .dp-routine-step,
        .dp-routine-role,
        .dp-routine-product-role,
        .dp-routine-product-label,
        .dp-routine-step-label
    ){
        font-size:12px!important;
        letter-spacing:1.8px!important;
    }
}


/* =========================================================
   F.ACCOUNT.MYROUTINE.PRODUCTS.1C
   Circle position + larger step labels + shorter descriptions
   ========================================================= */

/* Move number circles inward so they sit with the top step label row */
.dp-my-routine
.dp-routine-product-media
.dp-routine-number{
    top:12px!important;
    left:50%!important;
    transform:translateX(calc(-50% - 112px))!important;
}

/* Make CLEANSE / CONDITION / TREATMENT / etc larger */
.dp-my-routine
.dp-routine-product
:is(
    .dp-routine-step,
    .dp-routine-role,
    .dp-routine-product-role,
    .dp-routine-product-label,
    .dp-routine-step-label
){
    font-size:13px!important;
    line-height:1.1!important;
    letter-spacing:2.2px!important;
    font-weight:700!important;
    color:#cfcfcb!important;
}

/* Slightly tighten the top media area so the header row feels cleaner */
.dp-my-routine .dp-routine-product-media{
    height:152px!important;
    min-height:152px!important;
    max-height:152px!important;
    padding-top:10px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    padding-bottom:10px!important;
}

/* Restrict description text to fewer lines */
.dp-my-routine .dp-routine-product-usage{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;

    font-size:11px!important;
    line-height:1.45!important;

    max-height:4.35em!important;
}

/* Apply same clamp to common nested paragraph wrappers */
.dp-my-routine .dp-routine-product-usage p,
.dp-my-routine .dp-routine-product-usage div,
.dp-my-routine .dp-routine-product-usage span{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    line-clamp:3!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;

    max-height:4.35em!important;
}

/* Keep product names and sizes clean after reducing description depth */
.dp-my-routine
:is(
    .dp-routine-name,
    .dp-routine-product-name
){
    margin-top:10px!important;
}

.dp-my-routine
:is(
    .dp-routine-size,
    .dp-routine-product-size,
    .dp-routine-product-variant
){
    margin-top:10px!important;
}

/* Mobile: reduce the circle offset so it still aligns nicely */
@media(max-width:700px){
    .dp-my-routine
    .dp-routine-product-media
    .dp-routine-number{
        transform:translateX(calc(-50% - 72px))!important;
    }

    .dp-my-routine
    .dp-routine-product
    :is(
        .dp-routine-step,
        .dp-routine-role,
        .dp-routine-product-role,
        .dp-routine-product-label,
        .dp-routine-step-label
    ){
        font-size:12px!important;
        letter-spacing:1.8px!important;
    }
}


/* =========================================================
   F.ACCOUNT.MYROUTINE.PRODUCTS.2
   Dedicated My Routine product header + concise description
   ========================================================= */


/* ---------------------------------------------------------
   STEP HEADER
   Number + role become one deliberate row
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-step-head{
    width:100%!important;

    min-height:54px!important;

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

    gap:12px!important;

    padding:
        8px
        14px
        6px!important;

    box-sizing:border-box!important;

    background:#050606!important;
}


/* ---------------------------------------------------------
   TRUE CIRCLE
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-step-number{
    position:static!important;

    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;

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

    aspect-ratio:1/1!important;

    flex:0 0 38px!important;

    display:grid!important;
    place-items:center!important;

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

    border:1px solid #ffd700!important;
    border-radius:50%!important;

    box-sizing:border-box!important;

    background:#050606!important;

    color:#fff!important;

    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;

    transform:none!important;
}


/* ---------------------------------------------------------
   CLEANSE / CONDITION / TREATMENT / etc.
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-step-role{
    flex:0 1 auto!important;

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

    color:#d8d9d6!important;

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

    line-height:1!important;
    letter-spacing:1.8px!important;

    text-align:left!important;
    white-space:nowrap!important;
}


/* ---------------------------------------------------------
   IMAGE AREA
   now starts below the proper step header
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-product-media{
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;

    padding:
        6px
        12px
        8px!important;

    background:#050606!important;
}


.dp-my-routine
.dp-routine-product
.dp-routine-product-media img{
    max-height:138px!important;
    max-width:86%!important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   concise — 2 lines only
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-product-usage{
    display:-webkit-box!important;

    width:100%!important;

    min-height:2.9em!important;
    max-height:2.9em!important;

    height:auto!important;

    margin:
        13px
        0
        0!important;

    overflow:hidden!important;

    white-space:normal!important;
    text-overflow:ellipsis!important;

    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;

    line-clamp:2!important;

    font-size:11px!important;
    line-height:1.45!important;

    color:#b8bab7!important;
}


/* ---------------------------------------------------------
   PRODUCT VIEW LINK
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-product
.dp-routine-product-view{
    margin-top:15px!important;

    font-size:11px!important;

    flex:none!important;
}


/* ---------------------------------------------------------
   Keep the six cards equal height
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-products{
    align-items:stretch!important;
}


.dp-my-routine
.dp-routine-products
> .dp-routine-product{
    height:100%!important;

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


.dp-my-routine
.dp-routine-product-copy{
    flex:1 1 auto!important;

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


.dp-my-routine
.dp-routine-product-view{
    margin-top:auto!important;
    padding-top:15px!important;
}


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

@media(max-width:700px){

    .dp-my-routine
    .dp-routine-product
    .dp-routine-step-head{
        min-height:50px!important;

        gap:9px!important;

        padding:
            7px
            10px
            5px!important;
    }

    .dp-my-routine
    .dp-routine-product
    .dp-routine-step-number{
        width:34px!important;
        min-width:34px!important;
        max-width:34px!important;

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

        flex-basis:34px!important;
    }

    .dp-my-routine
    .dp-routine-product
    .dp-routine-step-role{
        font-size:11.5px!important;
        letter-spacing:1.2px!important;
    }
}


/* =========================================================
   F.ACCOUNT.MYROUTINE.SIDEBAR.1
   Right sidebar only
   Hair Intelligence profile + cleaner presentation
   ========================================================= */


/* ---------------------------------------------------------
   REMOVE OUTER BOX / PANEL EFFECT
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-page-grid
> aside,

.dp-my-routine
.dp-routine-sidebar{
    min-height:0!important;
    height:auto!important;

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

    border:0!important;

    background:#050606!important;
    background-image:none!important;

    box-shadow:none!important;
    backdrop-filter:none!important;
}


/* ---------------------------------------------------------
   SECTIONS
   No gold enclosing rectangle.
   Keep only subtle horizontal division.
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-sidebar
> section{
    margin:0!important;

    padding:
        18px
        0!important;

    border:0!important;
    border-bottom:
        1px solid
        #292b2c!important;

    background:#050606!important;
    background-image:none!important;

    box-shadow:none!important;
}


.dp-my-routine
.dp-routine-sidebar
> section:first-child{
    padding-top:0!important;
}


.dp-my-routine
.dp-routine-sidebar
> section:last-child{
    border-bottom:0!important;

    padding-bottom:0!important;
}


/* ---------------------------------------------------------
   HEADERS
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-sidebar header{
    min-height:34px!important;

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

    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;

    gap:14px!important;

    border:0!important;
}


.dp-my-routine
.dp-routine-sidebar h2{
    margin:0!important;

    color:#f2f2ef!important;

    font-size:18px!important;
    font-weight:400!important;

    line-height:1.2!important;
}


.dp-my-routine
.dp-routine-sidebar header a{
    margin-top:2px!important;

    color:#ffd700!important;

    font-size:10px!important;
    font-weight:500!important;

    text-decoration:none!important;
}


/* ---------------------------------------------------------
   PROFILE ROWS
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-sidebar dl{
    display:grid!important;

    gap:0!important;

    margin:
        10px
        0
        0!important;
}


.dp-my-routine
.dp-routine-sidebar dl
> div{
    display:grid!important;

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

    align-items:center!important;

    min-height:28px!important;

    gap:10px!important;

    padding:0!important;

    border:0!important;
}


.dp-my-routine
.dp-routine-sidebar dt,

.dp-my-routine
.dp-routine-sidebar dd{
    margin:0!important;
    padding:0!important;

    font-size:12px!important;
    line-height:1.3!important;
}


.dp-my-routine
.dp-routine-sidebar dt{
    color:#999c98!important;
}


.dp-my-routine
.dp-routine-sidebar dd{
    color:#f0f0ed!important;

    font-weight:500!important;
}


/* Kill old extra HR spacing */

.dp-my-routine
.dp-routine-sidebar hr{
    display:none!important;
}


/* ---------------------------------------------------------
   GOALS
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-goals{
    margin-top:10px!important;

    display:grid!important;

    gap:7px!important;
}


.dp-my-routine
.dp-routine-goal{
    min-height:26px!important;

    display:flex!important;
    align-items:center!important;

    gap:9px!important;

    padding:0!important;

    border:0!important;

    color:#e9e9e6!important;

    font-size:12px!important;
    line-height:1.35!important;
}


.dp-my-routine
.dp-routine-goal::before{
    color:#ffd700!important;
}


/* ---------------------------------------------------------
   NEED HELP
   --------------------------------------------------------- */

.dp-my-routine
.dp-routine-help p{
    max-width:260px!important;

    margin:
        8px
        0
        14px!important;

    color:#9da09c!important;

    font-size:11.5px!important;
    line-height:1.5!important;
}


/* Consultation CTA retains intentional gold outline */

.dp-my-routine
.dp-routine-help a{
    min-height:42px!important;

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

    padding:
        0
        16px!important;

    border:
        1px solid
        #ffd700!important;

    background:#050606!important;

    color:#ffd700!important;

    font-size:10.5px!important;
    font-weight:500!important;

    text-decoration:none!important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:900px){

    .dp-my-routine
    .dp-routine-sidebar{
        padding-top:10px!important;
    }

}


/* My Routine: keep the plan context inside the aligned profile panel. */
.dp-my-routine .dp-routine-context {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #25282a !important;
}
.dp-my-routine .dp-routine-context > b {
    flex: 0 0 auto;
    color: #ffdf00 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.dp-my-routine .dp-routine-context > div {
    display: grid !important;
    gap: 8px !important;
}
.dp-my-routine .dp-routine-context strong {
    color: #f2f2ef !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}
.dp-my-routine .dp-routine-context a {
    color: #ffdf00 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-decoration: none !important;
}

/* Final responsive containment for My Routine. */
.dp-my-routine-shell{max-width:100%;overflow-x:hidden}

@media screen and (min-width:701px) and (max-width:1080px){
    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3{grid-template-columns:repeat(5,minmax(0,1fr))!important;height:auto!important;max-height:none!important}
    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3 a{min-width:0!important;border-bottom:0!important}
}

@media screen and (max-width:900px){
    .dp-my-routine,
    .dp-routine-hair-shell,
    .dp-my-routine [data-routine-content],
    .dp-my-routine .dp-routine-page-grid,
    .dp-my-routine .dp-routine-main{
        box-sizing:border-box!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
    }

    .dp-my-routine{padding-top:20px!important}
    .dp-my-routine .dp-routine-page-head{box-sizing:border-box!important;width:100%!important;padding:0 18px!important}
    .dp-my-routine .dp-routine-page-head h1{font-size:clamp(38px,8vw,54px)!important;overflow-wrap:anywhere!important}
    .dp-my-routine .dp-routine-page-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}

    .dp-my-routine .dp-routine-products{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        overflow:visible!important;
    }

    .dp-my-routine .dp-routine-products>.dp-routine-product{
        box-sizing:border-box!important;
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        flex:initial!important;
    }

    .dp-my-routine .dp-routine-product-copy,
    .dp-my-routine .dp-routine-product-copy>*{
        min-width:0!important;
        max-width:100%!important;
        overflow-wrap:anywhere!important;
    }

    .dp-my-routine .dp-routine-sidebar{
        box-sizing:border-box!important;
        width:auto!important;
        min-width:0!important;
        max-width:calc(100% - 28px)!important;
        margin:12px 14px 0!important;
    }
}

@media screen and (max-width:700px){
    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3{
        display:grid!important;
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        height:auto!important;
        min-height:96px!important;
        max-height:none!important;
        overflow:visible!important;
    }

    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3 a{min-width:0!important;width:auto!important;padding:0 7px!important}
    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3 a:nth-child(-n+3){grid-column:span 2!important}
    .dp-my-routine>.dp-routine-hair-shell>.dp-routine-hair-nav3 a:nth-child(n+4){grid-column:span 3!important}
    .dp-my-routine .dp-routine-products{grid-template-columns:minmax(0,1fr)!important}
}