/* ============================================================
   DYSONET PRODUCT LIQUID GLASS SYSTEM
   CLEAN MASTER VERSION
============================================================ */


/* ============================================================
   PRODUCT ROOT
============================================================ */

.dys-product {

    --dys-accent:#777;
    --dys-accent-2:#aaa;
    --dys-accent-dark:#444;

    --dys-accent-soft:rgba(100,100,100,.14);
    --dys-accent-glow:rgba(100,100,100,.24);

    --dys-text:#181819;
    --dys-muted:#6f7075;

    position:relative;

    width:100%;
    max-width:1180px;

    margin:35px auto 50px;

    padding:0 16px;

    box-sizing:border-box;

    direction:rtl;

    color:var(--dys-text);

    font-family:inherit;
}



/* ============================================================
   HERO
============================================================ */

.dys-product-hero {

    position:relative;

    width:100%;

    height:420px;
    min-height:420px;
    max-height:420px;

    margin:0 auto 28px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:28px;

    background:#111;

    border:
        1px solid rgba(255,255,255,.72);

    box-shadow:
        0 22px 55px rgba(30,20,18,.15),
        0 7px 20px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.72);

    isolation:isolate;

    clip-path:
        inset(0 round 28px);

    contain:paint;
}



/* لبه شیشه */

.dys-product-hero::before {

    content:"";

    position:absolute;

    inset:6px;

    z-index:7;

    pointer-events:none;

    box-sizing:border-box;

    border-radius:22px;

    border:
        1px solid rgba(255,255,255,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -1px 0 rgba(255,255,255,.08);
}



/* انعکاس بالا */

.dys-product-hero::after {

    content:"";

    position:absolute;

    top:0;
    left:15%;

    width:70%;
    height:1px;

    z-index:8;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.90),
            transparent
        );
}



/* ============================================================
   HERO VIDEO
============================================================ */

.dys-product-hero > video {

    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

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

    object-fit:cover !important;
    object-position:center center !important;

    border:0 !important;

    border-radius:28px !important;

    z-index:0;

    transform:scale(1.005);
}



/* ============================================================
   HERO OVERLAY
============================================================ */

.dys-product-hero-overlay {

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    border-radius:inherit;

    background:

        radial-gradient(
            circle at 88% 5%,
            var(--dys-accent-soft),
            transparent 34%
        ),

        radial-gradient(
            circle at 8% 95%,
            var(--dys-accent-soft),
            transparent 36%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.13) 48%,
            rgba(0,0,0,.28) 100%
        );
}



/* ============================================================
   HERO GLOW
============================================================ */

.dys-product-hero-glow {

    position:absolute;

    z-index:2;

    pointer-events:none;

    border-radius:50%;

    filter:blur(65px);

    opacity:.72;
}



.dys-product-hero-glow-1 {

    width:280px;
    height:280px;

    right:-110px;
    top:-130px;

    background:
        var(--dys-accent-glow);
}



.dys-product-hero-glow-2 {

    width:300px;
    height:300px;

    left:-130px;
    bottom:-160px;

    background:
        var(--dys-accent-soft);
}



/* ============================================================
   HERO CONTENT
============================================================ */

.dys-product-hero-content {

    position:relative;

    z-index:5;

    display:flex;

    width:100%;

    height:420px;
    min-height:420px;

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

    padding:27px 26px;

    box-sizing:border-box;
}



/* ============================================================
   HERO GLASS
============================================================ */

.dys-product-hero-glass {

    position:relative;

    width:min(720px,100%);

    padding:21px 29px 23px;

    overflow:hidden;

    box-sizing:border-box;

    text-align:center;

    border-radius:22px;

    border:
        1px solid rgba(255,255,255,.48);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.27),
            rgba(255,255,255,.10)
        );

    background-clip:padding-box;

    box-shadow:
        0 17px 45px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.60),
        inset 0 -1px 0 rgba(255,255,255,.12);

    backdrop-filter:
        blur(26px)
        saturate(165%)
        brightness(1.05);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(165%)
        brightness(1.05);

    isolation:isolate;

    clip-path:
        inset(0 round 22px);
}



.dys-product-hero-glass::before {

    content:"";

    position:absolute;

    width:60%;
    height:110px;

    top:-78px;
    left:20%;

    border-radius:50%;

    background:
        rgba(255,255,255,.30);

    filter:blur(30px);

    pointer-events:none;

    z-index:-1;
}



.dys-product-hero-glass::after {

    content:"";

    position:absolute;

    top:0;
    left:17%;

    width:66%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.92),
            transparent
        );
}



/* ============================================================
   BADGE
============================================================ */

.dys-product-badge {

    position:relative;

    z-index:2;

    display:inline-flex;

    min-height:26px;

    padding:0 11px;

    margin-bottom:10px;

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

    box-sizing:border-box;

    border-radius:999px;

    border:
        1px solid rgba(255,255,255,.86);

    background:
        rgba(255,255,255,.53);

    box-shadow:
        0 5px 15px rgba(30,20,15,.04),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    direction:ltr;

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

    letter-spacing:1.6px;

    color:
        var(--dys-accent-dark);
}



.dys-product-hero .dys-product-badge {

    border-color:
        rgba(255,255,255,.40);

    background:
        rgba(255,255,255,.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42);

    color:#fff;
}



/* ============================================================
   HERO TEXT
============================================================ */

.dys-product-hero-glass h2 {

    position:relative;

    z-index:2;

    margin:0 0 5px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:27px !important;

    font-weight:700 !important;

    line-height:1.65 !important;

    color:#fff !important;

    text-shadow:
        0 2px 13px rgba(0,0,0,.25);
}



.dys-product-hero-glass p {

    position:relative;

    z-index:2;

    max-width:650px;

    margin:0 auto !important;

    padding:0 !important;

    font-size:12px !important;

    line-height:1.95 !important;

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

    text-shadow:
        0 2px 9px rgba(0,0,0,.18);
}



/* ============================================================
   MAIN PRODUCT GLASS
============================================================ */

.dys-product-main-glass {

    position:relative;

    width:100%;

    padding:48px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:30px;

    border:
        1px solid rgba(255,255,255,.90);

    background:

        radial-gradient(
            circle at 100% 0,
            var(--dys-accent-soft),
            transparent 28%
        ),

        radial-gradient(
            circle at 0 100%,
            var(--dys-accent-soft),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.84),
            rgba(255,255,255,.49)
        );

    box-shadow:
        0 24px 65px rgba(40,28,22,.08),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(255,255,255,.36);

    backdrop-filter:
        blur(25px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(25px)
        saturate(150%);

    isolation:isolate;

    clip-path:
        inset(0 round 30px);

    contain:paint;
}



.dys-product-main-glass::before {

    content:"";

    position:absolute;

    z-index:0;

    width:260px;
    height:260px;

    right:-100px;
    top:-110px;

    border-radius:50%;

    background:
        var(--dys-accent-glow);

    opacity:.70;

    filter:blur(58px);

    pointer-events:none;
}



.dys-product-main-glass::after {

    content:"";

    position:absolute;

    z-index:0;

    width:290px;
    height:290px;

    left:-120px;
    bottom:-130px;

    border-radius:50%;

    background:
        var(--dys-accent-soft);

    opacity:.72;

    filter:blur(62px);

    pointer-events:none;
}



/* ============================================================
   SHINE
============================================================ */

.dys-product-shine {

    position:absolute;

    z-index:2;

    top:0;
    left:14%;

    width:72%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        );
}



.dys-product-content {

    position:relative;

    z-index:3;
}



/* ============================================================
   TITLE
============================================================ */

.dys-product-title {

    margin:0 0 5px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:
        clamp(27px,4vw,42px) !important;

    font-weight:800 !important;

    line-height:1.5 !important;

    color:#171717 !important;
}



.dys-product-color {

    margin-bottom:24px;

    direction:ltr;

    text-align:right;

    font-size:14px;

    font-weight:650;

    color:
        var(--dys-accent-dark);
}



/* ============================================================
   DESCRIPTION
============================================================ */

.dys-product-content > p {

    max-width:1020px;

    margin:0 0 16px !important;

    padding:0 !important;

    font-size:15px !important;

    line-height:2.15 !important;

    text-align:justify;

    color:#56565b !important;
}



/* ============================================================
   FEATURES
============================================================ */

.dys-product-features {

    display:grid;

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

    gap:11px;

    margin:31px 0;
}



.dys-product-feature {

    position:relative;

    display:flex;

    min-height:82px;

    padding:13px;

    align-items:center;

    gap:10px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:19px;

    border:
        1px solid rgba(255,255,255,.92);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.76),
            rgba(255,255,255,.39)
        );

    box-shadow:
        0 11px 28px rgba(35,25,20,.055),
        inset 0 1px 0 rgba(255,255,255,.97);

    backdrop-filter:
        blur(19px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(19px)
        saturate(145%);

    isolation:isolate;

    clip-path:
        inset(0 round 19px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}



.dys-product-feature::before {

    content:"";

    position:absolute;

    z-index:-1;

    width:75px;
    height:75px;

    right:-24px;
    bottom:-28px;

    border-radius:50%;

    background:
        var(--dys-accent-soft);

    filter:blur(15px);

    opacity:.80;

    pointer-events:none;
}



@media (hover:hover) {

    .dys-product-feature:hover {

        transform:
            translateY(-3px);

        box-shadow:
            0 16px 38px rgba(35,25,20,.09),
            inset 0 1px 0 rgba(255,255,255,1);
    }

}



/* ============================================================
   FEATURE ICON
============================================================ */

.dys-feature-icon {

    position:relative;

    z-index:2;

    display:flex;

    flex:0 0 37px;

    width:37px;
    height:37px;

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

    box-sizing:border-box;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.97);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            var(--dys-accent-soft)
        );

    box-shadow:
        0 5px 15px rgba(35,20,15,.06),
        inset 0 1px 0 rgba(255,255,255,.98);

    color:
        var(--dys-accent-dark);

    font-size:14px;
}



.dys-product-feature > div {

    position:relative;

    z-index:2;

    min-width:0;
}



.dys-product-feature strong {

    display:block;

    margin-bottom:3px;

    font-size:12px;

    color:#242424;
}



.dys-product-feature small {

    display:block;

    font-size:9px;

    line-height:1.65;

    color:#818186;
}



/* ============================================================
   HIGHLIGHT CARDS
============================================================ */

.dys-product-highlights {

    display:grid;

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

    gap:9px;

    margin-top:27px;
}



.dys-product-highlights > div {

    display:flex;

    align-items:center;

    gap:8px;

    min-height:55px;

    padding:11px 13px;

    box-sizing:border-box;

    overflow:hidden;

    border-radius:16px;

    border:
        1px solid rgba(255,255,255,.94);

    background:
        rgba(255,255,255,.53);

    box-shadow:
        0 7px 20px rgba(35,25,25,.035),
        inset 0 1px 0 rgba(255,255,255,.98);

    font-size:10px;

    line-height:1.75;

    color:#606065;
}



.dys-product-highlights > div > span {

    display:flex;

    flex:0 0 27px;

    width:27px;
    height:27px;

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            var(--dys-accent-soft)
        );

    color:
        var(--dys-accent-dark);

    font-size:8px;

    font-weight:750;
}



/* ============================================================
   INFO GLASS CARDS
============================================================ */

.dys-product-info-card {

    position:relative;

    width:100%;

    margin-top:16px;

    padding:29px 32px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:24px;

    border:
        1px solid rgba(255,255,255,.92);

    background:

        radial-gradient(
            circle at 100% 0,
            var(--dys-accent-soft),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.77),
            rgba(255,255,255,.41)
        );

    box-shadow:
        0 16px 42px rgba(35,25,25,.065),
        inset 0 1px 0 rgba(255,255,255,.98);

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);

    isolation:isolate;

    clip-path:
        inset(0 round 24px);

    contain:paint;
}



.dys-product-info-card::before {

    content:"";

    position:absolute;

    z-index:0;

    width:180px;
    height:180px;

    right:-75px;
    top:-85px;

    border-radius:50%;

    background:
        var(--dys-accent-glow);

    filter:blur(45px);

    opacity:.45;

    pointer-events:none;
}



.dys-product-info-card::after {

    content:"";

    position:absolute;

    top:0;
    right:12%;

    width:45%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        );
}



.dys-product-info-tag {

    position:relative;

    z-index:2;

    display:inline-flex;

    min-height:23px;

    margin-bottom:8px;

    padding:0 9px;

    align-items:center;

    border-radius:999px;

    border:
        1px solid rgba(255,255,255,.95);

    background:
        rgba(255,255,255,.57);

    box-shadow:
        inset 0 1px 0 #fff;

    direction:ltr;

    font-size:7px;

    font-weight:750;

    letter-spacing:1.5px;

    color:
        var(--dys-accent-dark);
}



.dys-product-info-card h3 {

    position:relative;

    z-index:2;

    margin:0 0 10px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:20px !important;

    font-weight:750 !important;

    line-height:1.7 !important;

    color:#202022 !important;
}



.dys-product-info-card p {

    position:relative;

    z-index:2;

    margin:0 0 12px !important;

    padding:0 !important;

    font-size:14px !important;

    line-height:2.15 !important;

    text-align:justify;

    color:#5c5c61 !important;
}



.dys-product-info-card p:last-child {

    margin-bottom:0 !important;
}



/* ============================================================
   6 IN 1
============================================================ */

.dys-product-six-card {

    position:relative;

    margin-top:16px;

    padding:26px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:24px;

    border:
        1px solid rgba(255,255,255,.93);

    background:

        radial-gradient(
            circle at 50% 150%,
            var(--dys-accent-soft),
            transparent 52%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.43)
        );

    box-shadow:
        0 17px 44px rgba(35,20,25,.07),
        inset 0 1px 0 #fff;

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);

    isolation:isolate;

    clip-path:
        inset(0 round 24px);
}



.dys-product-six-head {

    margin-bottom:18px;

    text-align:center;
}



.dys-product-six-head > span {

    display:block;

    margin-bottom:4px;

    direction:ltr;

    font-size:7px;

    font-weight:750;

    letter-spacing:2px;

    color:
        var(--dys-accent-dark);
}



.dys-product-six-head h3 {

    margin:0 !important;

    padding:0 !important;

    font-size:20px !important;

    font-weight:750 !important;

    color:#202020 !important;
}



.dys-product-six-grid {

    display:grid;

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

    gap:7px;
}



.dys-product-six-grid > div {

    display:flex;

    min-height:70px;

    padding:9px 5px;

    flex-direction:column;

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

    box-sizing:border-box;

    border-radius:15px;

    border:
        1px solid rgba(255,255,255,.95);

    background:
        rgba(255,255,255,.57);

    box-shadow:
        inset 0 1px 0 white;

    font-size:9px;

    color:#55555b;
}



.dys-product-six-grid > div > span {

    margin-bottom:4px;

    direction:ltr;

    font-size:7px;

    font-weight:750;

    color:
        var(--dys-accent-dark);
}



/* ============================================================
   BEFORE / AFTER
   SAFE VERSION
============================================================ */

.dys-product-ba-section {

    width:100%;

    margin-top:48px;
}



/* Before After Header */

.dys-product-ba-section .dys-product-section-head {

    margin-bottom:20px;

    text-align:center;
}



.dys-product-ba-section .dys-product-section-head > span {

    display:inline-block;

    margin-bottom:6px;

    direction:ltr;

    font-size:8px;

    font-weight:700;

    letter-spacing:2px;

    color:
        var(--dys-accent-dark);
}



.dys-product-ba-section .dys-product-section-head h2 {

    margin:0 0 6px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:27px !important;

    font-weight:800 !important;

    line-height:1.6 !important;

    color:#191919 !important;
}



.dys-product-ba-section .dys-product-section-head p {

    margin:0 !important;

    padding:0 !important;

    font-size:11px !important;

    line-height:1.9 !important;

    color:#838388 !important;
}



/* ============================================================
   BEFORE AFTER ROOT
============================================================ */

.dys-product .dnhair-root {

    direction:rtl;

    width:100%;

    max-width:1600px;

    margin:0 auto;

    padding:0;

    box-sizing:border-box;
}



/* ============================================================
   BEFORE AFTER OUTER GLASS
   فقط قاب بیرونی
============================================================ */

.dys-product-ba-glass {

    position:relative;

    width:100%;

    padding:18px;

    box-sizing:border-box;

    overflow:hidden;

    border-radius:30px;

    border:
        1px solid rgba(255,255,255,.92);

    background:

        radial-gradient(
            circle at 100% 0%,
            var(--dys-accent-soft),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(239,240,245,.62)
        );

    box-shadow:
        0 22px 55px rgba(30,35,60,.10),
        inset 0 1px 0 rgba(255,255,255,.96);

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);
}



.dys-product-ba-glass::before {

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-80px;
    top:-90px;

    border-radius:50%;

    background:
        var(--dys-accent-glow);

    filter:
        blur(55px);

    opacity:.28;

    pointer-events:none;
}



/* ============================================================
   BEFORE AFTER TABS
============================================================ */

.dys-product .dnhair-tabs {

    position:relative;

    z-index:20;

    display:flex;

    width:fit-content;
    max-width:100%;

    margin:0 auto 18px;

    padding:5px;

    gap:4px;

    box-sizing:border-box;

    border-radius:999px;

    border:
        1px solid rgba(255,255,255,.92);

    background:
        rgba(255,255,255,.60);

    box-shadow:
        0 8px 25px rgba(30,35,60,.07),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}



.dys-product .dnhair-tabs button {

    border:0;

    outline:0;

    cursor:pointer;

    padding:10px 18px;

    border-radius:999px;

    background:transparent;

    color:#222;

    font-family:inherit;

    font-size:11px;

    white-space:nowrap;
}



/* فقط حالت اولیه */

.dys-product .dnhair-tabs .dnhair-straight {

    background:#181818;

    color:#fff;
}



/* ============================================================
   BEFORE AFTER BOX
   هسته اصلی دستکاری نشده
============================================================ */

.dys-product .dnhair-box {

    position:relative;

    width:100%;

    height:520px;

    overflow:hidden;

    border-radius:28px;

    background:#f1f1f3;

    box-shadow:
        0 20px 55px rgba(20,25,45,.15);

    cursor:ew-resize;

    touch-action:none;

    user-select:none;
    -webkit-user-select:none;
}



/* ============================================================
   BEFORE AFTER IMAGES
============================================================ */

.dys-product .dnhair-before,
.dys-product .dnhair-after {

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    max-width:none;

    object-fit:cover;
    object-position:center center;

    display:block;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;
}



.dys-product .dnhair-after {

    clip-path:
        inset(0 0 0 50%);
}



/* ============================================================
   BEFORE / AFTER LABELS
============================================================ */

.dys-product .dnhair-label {

    position:absolute;

    top:18px;

    z-index:9;

    padding:8px 13px;

    border-radius:999px;

    background:
        rgba(20,20,24,.72);

    color:#fff;

    font-size:11px;

    border:
        1px solid rgba(255,255,255,.25);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    pointer-events:none;
}



.dys-product .dnhair-label-before {

    left:18px;
}



.dys-product .dnhair-label-after {

    right:18px;
}



/* ============================================================
   BEFORE AFTER LINE
============================================================ */

.dys-product .dnhair-line {

    position:absolute;

    top:0;
    left:50%;

    width:2px;

    height:100%;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 0 2px rgba(0,0,0,.25);

    transform:
        translateX(-50%);

    z-index:5;

    pointer-events:none;
}



/* ============================================================
   BEFORE AFTER HANDLE
============================================================ */

.dys-product .dnhair-handle {

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    width:76px;
    height:54px;

    border-radius:999px;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid rgba(255,255,255,.90);

    color:#111;

    display:flex;

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

    gap:12px;

    font-size:25px;

    z-index:10;

    box-shadow:
        0 12px 32px rgba(20,25,45,.22),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    pointer-events:none;
}



/* ============================================================
   VIDEO SECTION
============================================================ */

.dys-product-videos {

    width:100%;

    margin-top:58px;
}



.dys-product-section-head {

    margin-bottom:24px;

    text-align:center;
}



.dys-product-section-head > span {

    display:inline-block;

    margin-bottom:6px;

    direction:ltr;

    font-size:8px;

    font-weight:700;

    letter-spacing:2px;

    color:
        var(--dys-accent-dark);
}



.dys-product-section-head h2 {

    margin:0 0 5px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:27px !important;

    font-weight:800 !important;

    line-height:1.6 !important;

    color:#191919 !important;
}



.dys-product-section-head p {

    margin:0 !important;

    padding:0 !important;

    font-size:11px !important;

    color:#838388 !important;
}



/* ============================================================
   VIDEO GLASS CARD
============================================================ */

.dys-product-video-card {

    position:relative;

    width:min(100%,820px);

    margin:0 auto 23px;

    padding:16px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:25px;

    border:
        1px solid rgba(255,255,255,.92);

    background:

        radial-gradient(
            circle at 100% 0,
            var(--dys-accent-soft),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.76),
            rgba(255,255,255,.40)
        );

    box-shadow:
        0 20px 50px rgba(35,25,20,.075),
        inset 0 1px 0 rgba(255,255,255,.98);

    backdrop-filter:
        blur(23px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(23px)
        saturate(145%);

    isolation:isolate;

    clip-path:
        inset(0 round 25px);

    contain:paint;
}



.dys-product-video-card::after {

    content:"";

    position:absolute;

    z-index:-1;

    width:190px;
    height:190px;

    left:-75px;
    bottom:-95px;

    border-radius:50%;

    background:
        var(--dys-accent-soft);

    filter:
        blur(32px);

    opacity:.75;

    pointer-events:none;
}



/* ============================================================
   VIDEO HEADER
============================================================ */

.dys-product-video-top {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:12px;
}



.dys-product-video-number {

    display:flex;

    flex:0 0 36px;

    width:36px;
    height:36px;

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

    box-sizing:border-box;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.97);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            var(--dys-accent-soft)
        );

    box-shadow:
        0 5px 15px rgba(35,20,15,.06);

    color:
        var(--dys-accent-dark);

    font-size:8px;

    font-weight:750;
}



.dys-product-video-top small {

    display:block;

    margin-bottom:2px;

    direction:ltr;

    text-align:right;

    font-size:7px;

    letter-spacing:1px;

    color:
        var(--dys-accent-dark);
}



.dys-product-video-top h3 {

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    font-size:14px !important;

    font-weight:750 !important;

    line-height:1.7 !important;

    color:#222 !important;
}



/* ============================================================
   VIDEO WRAPPER
============================================================ */

.dys-product-video-wrap {

    position:relative;

    z-index:2;

    width:min(100%,720px);

    margin:0 auto;

    padding:5px;

    overflow:hidden;

    box-sizing:border-box;

    border-radius:20px;

    border:
        1px solid rgba(255,255,255,.90);

    background:
        rgba(255,255,255,.43);

    box-shadow:
        0 14px 32px rgba(25,20,20,.12),
        inset 0 1px 0 rgba(255,255,255,.80);

    clip-path:
        inset(0 round 20px);
}



/* Froala wrapper */

.dys-product-video-wrap .fr-video {

    display:block !important;

    width:100% !important;

    max-width:100% !important;

    margin:0 auto !important;

    float:none !important;

    clear:both !important;

    text-align:center !important;
}



/* Video */

.dys-product-video-wrap video {

    display:block !important;

    width:100% !important;

    height:auto !important;

    max-width:100% !important;

    margin:0 auto !important;

    padding:0 !important;

    aspect-ratio:
        16 / 9;

    object-fit:cover;

    box-sizing:border-box !important;

    border:0 !important;

    border-radius:
        15px !important;

    background:#111;
}



.dys-product-video-desc {

    position:relative;

    z-index:2;

    max-width:700px;

    margin:
        11px auto
        2px !important;

    padding:
        0 5px !important;

    text-align:center;

    font-size:
        10px !important;

    line-height:
        1.9 !important;

    color:
        #747479 !important;
}



/* ============================================================
   HS09 GOLD DETAIL
============================================================ */

.dys-product-hs09 .dys-feature-icon {

    border-color:
        rgba(222,196,130,.48);

    box-shadow:
        0 5px 16px rgba(70,30,20,.07),
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(203,164,77,.12);
}



.dys-product-hs09 .dys-product-badge {

    box-shadow:
        0 5px 17px rgba(80,20,30,.05),
        inset 0 1px 0 white,
        inset 0 -1px 0 rgba(203,164,77,.12);
}



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

@media (max-width:900px) {

    .dys-product {

        padding:
            0 12px;
    }


    /* HERO */

    .dys-product-hero {

        height:360px;
        min-height:360px;
        max-height:360px;

        border-radius:25px;

        clip-path:
            inset(0 round 25px);
    }


    .dys-product-hero > video {

        border-radius:
            25px !important;
    }


    .dys-product-hero-content {

        height:360px;
        min-height:360px;

        padding:
            22px 20px;
    }


    .dys-product-hero-glass {

        width:
            min(650px,100%);

        padding:
            18px 23px 20px;

        border-radius:
            20px;

        clip-path:
            inset(0 round 20px);
    }


    .dys-product-hero-glass h2 {

        font-size:
            23px !important;
    }


    .dys-product-hero-glass p {

        font-size:
            11px !important;
    }


    /* MAIN */

    .dys-product-main-glass {

        padding:
            36px 28px;

        border-radius:
            27px;

        clip-path:
            inset(0 round 27px);
    }


    .dys-product-features {

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


    .dys-product-highlights {

        grid-template-columns:
            1fr;
    }


    .dys-product-six-grid {

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


    /* Before / After */

    .dys-product .dnhair-box {

        height:
            430px;
    }

}



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

@media (max-width:600px) {

    .dys-product {

        width:100%;

        margin:
            20px auto 32px;

        padding:
            0 8px;
    }



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

    .dys-product-hero {

        width:100%;

        height:300px;
        min-height:300px;
        max-height:300px;

        margin-bottom:15px;

        border-radius:20px;

        clip-path:
            inset(0 round 20px);

        box-shadow:
            0 15px 35px rgba(30,20,18,.12),
            inset 0 1px 0 rgba(255,255,255,.65);
    }


    .dys-product-hero > video {

        border-radius:
            20px !important;
    }


    .dys-product-hero::before {

        inset:4px;

        border-radius:16px;
    }


    .dys-product-hero-content {

        height:300px;
        min-height:300px;

        padding:
            12px 10px;
    }


    .dys-product-hero-glass {

        width:100%;

        padding:
            13px 12px 14px;

        border-radius:16px;

        clip-path:
            inset(0 round 16px);

        backdrop-filter:
            blur(18px)
            saturate(155%);

        -webkit-backdrop-filter:
            blur(18px)
            saturate(155%);
    }


    .dys-product-hero-glow {

        filter:
            blur(45px);
    }


    .dys-product-hero-glow-1 {

        width:180px;
        height:180px;

        right:-75px;
        top:-85px;
    }


    .dys-product-hero-glow-2 {

        width:190px;
        height:190px;

        left:-80px;
        bottom:-100px;
    }


    .dys-product-badge {

        min-height:21px;

        padding:
            0 8px;

        margin-bottom:6px;

        font-size:6px;

        letter-spacing:1px;
    }


    .dys-product-hero-glass h2 {

        margin-bottom:
            3px !important;

        font-size:
            17px !important;

        line-height:
            1.6 !important;
    }


    .dys-product-hero-glass p {

        max-width:
            300px;

        font-size:
            8.5px !important;

        line-height:
            1.8 !important;
    }



    /* ========================================================
       MAIN
    ======================================================== */

    .dys-product-main-glass {

        padding:
            22px 14px;

        border-radius:
            21px;

        clip-path:
            inset(0 round 21px);
    }


    .dys-product-main-glass::before {

        width:170px;
        height:170px;

        right:-65px;
        top:-70px;

        filter:
            blur(42px);
    }


    .dys-product-main-glass::after {

        width:180px;
        height:180px;

        left:-75px;
        bottom:-80px;

        filter:
            blur(45px);
    }


    .dys-product-title {

        font-size:
            20px !important;

        line-height:
            1.55 !important;
    }


    .dys-product-color {

        margin-bottom:15px;

        font-size:10px;
    }


    .dys-product-content > p {

        margin-bottom:
            11px !important;

        font-size:
            11px !important;

        line-height:
            2 !important;

        text-align:right;
    }



    /* ========================================================
       FEATURES
    ======================================================== */

    .dys-product-features {

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

        gap:6px;

        margin:
            20px 0;
    }


    .dys-product-feature {

        min-height:68px;

        gap:6px;

        padding:
            7px 6px;

        border-radius:15px;

        clip-path:
            inset(0 round 15px);
    }


    .dys-feature-icon {

        flex-basis:28px;

        width:28px;
        height:28px;

        font-size:10px;
    }


    .dys-product-feature strong {

        font-size:9px;
    }


    .dys-product-feature small {

        font-size:7px;

        line-height:1.55;
    }



    /* ========================================================
       HIGHLIGHTS
    ======================================================== */

    .dys-product-highlights {

        grid-template-columns:1fr;

        gap:5px;

        margin-top:18px;
    }


    .dys-product-highlights > div {

        min-height:45px;

        padding:
            8px 9px;

        border-radius:13px;

        font-size:8px;
    }


    .dys-product-highlights > div > span {

        flex-basis:23px;

        width:23px;
        height:23px;

        font-size:6px;
    }



    /* ========================================================
       INFO
    ======================================================== */

    .dys-product-info-card {

        margin-top:10px;

        padding:
            18px 14px;

        border-radius:19px;

        clip-path:
            inset(0 round 19px);
    }


    .dys-product-info-tag {

        min-height:20px;

        margin-bottom:6px;

        padding:
            0 7px;

        font-size:6px;

        letter-spacing:1px;
    }


    .dys-product-info-card h3 {

        margin-bottom:
            6px !important;

        font-size:
            15px !important;
    }


    .dys-product-info-card p {

        margin-bottom:
            8px !important;

        font-size:
            10.5px !important;

        line-height:
            2 !important;

        text-align:right;
    }



    /* ========================================================
       SIX
    ======================================================== */

    .dys-product-six-card {

        margin-top:10px;

        padding:
            17px 11px;

        border-radius:19px;

        clip-path:
            inset(0 round 19px);
    }


    .dys-product-six-head {

        margin-bottom:12px;
    }


    .dys-product-six-head h3 {

        font-size:
            15px !important;
    }


    .dys-product-six-grid {

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

        gap:5px;
    }


    .dys-product-six-grid > div {

        min-height:52px;

        padding:
            7px 4px;

        border-radius:12px;

        font-size:8px;
    }



    /* ========================================================
       BEFORE / AFTER MOBILE
    ======================================================== */

    .dys-product-ba-section {

        margin-top:
            34px;
    }


    .dys-product-ba-section .dys-product-section-head {

        margin-bottom:
            14px;
    }


    .dys-product-ba-section .dys-product-section-head > span {

        margin-bottom:4px;

        font-size:6px;
    }


    .dys-product-ba-section .dys-product-section-head h2 {

        font-size:
            19px !important;
    }


    .dys-product-ba-section .dys-product-section-head p {

        font-size:
            9px !important;
    }


    .dys-product-ba-glass {

        padding:8px;

        border-radius:21px;
    }


    .dys-product .dnhair-tabs {

        width:100%;

        margin-bottom:8px;

        padding:4px;

        gap:2px;

        overflow-x:auto;
    }


    .dys-product .dnhair-tabs button {

        flex:
            1 0 auto;

        padding:
            8px 10px;

        font-size:
            8px;
    }


    .dys-product .dnhair-box {

        height:
            320px;

        border-radius:
            17px;
    }


    .dys-product .dnhair-label {

        top:9px;

        padding:
            5px 8px;

        font-size:8px;
    }


    .dys-product .dnhair-label-before {

        left:9px;
    }


    .dys-product .dnhair-label-after {

        right:9px;
    }


    .dys-product .dnhair-handle {

        width:60px;
        height:43px;

        gap:9px;

        font-size:19px;
    }



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

    .dys-product-videos {

        margin-top:
            37px;
    }


    .dys-product-section-head {

        margin-bottom:
            15px;

        padding:
            0 5px;
    }


    .dys-product-section-head > span {

        margin-bottom:
            4px;

        font-size:
            6px;
    }


    .dys-product-section-head h2 {

        margin-bottom:
            3px !important;

        font-size:
            18px !important;
    }


    .dys-product-section-head p {

        font-size:
            8px !important;
    }


    .dys-product-video-card {

        width:100%;

        margin-bottom:
            14px;

        padding:8px;

        border-radius:
            19px;

        clip-path:
            inset(0 round 19px);
    }


    .dys-product-video-top {

        gap:7px;

        margin-bottom:
            7px;
    }


    .dys-product-video-number {

        flex-basis:28px;

        width:28px;
        height:28px;

        font-size:6px;
    }


    .dys-product-video-top small {

        font-size:6px;

        letter-spacing:.6px;
    }


    .dys-product-video-top h3 {

        font-size:
            10.5px !important;
    }


    .dys-product-video-wrap {

        width:100%;

        padding:4px;

        border-radius:18px;

        clip-path:
            inset(0 round 18px);
    }


    .dys-product-video-wrap video {

        border-radius:
            15px !important;
    }


    .dys-product-video-desc {

        margin-top:
            7px !important;

        font-size:
            8px !important;

        line-height:
            1.75 !important;
    }

}



/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width:380px) {

    .dys-product-hero {

        height:280px;
        min-height:280px;
        max-height:280px;
    }


    .dys-product-hero-content {

        height:280px;
        min-height:280px;
    }


    .dys-product-hero-glass h2 {

        font-size:
            16px !important;
    }


    .dys-product-main-glass {

        padding:
            20px 12px;
    }

}



/* ============================================================
   BROWSER FALLBACK
============================================================ */

@supports not (backdrop-filter:blur(10px)) {

    .dys-product-main-glass,
    .dys-product-feature,
    .dys-product-info-card,
    .dys-product-six-card,
    .dys-product-video-card,
    .dys-product-ba-glass {

        background:
            rgba(250,250,250,.96);
    }


    .dys-product-hero-glass {

        background:
            rgba(30,30,30,.56);
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce) {

    .dys-product-feature {

        transition:none;
    }

}