/* ============================================================
   DYSONET PRODUCT SYSTEM — OPTIMIZED MASTER
   Refactored: 2026-09-13
   Scope: Product UI only
   HTML selectors preserved for backward compatibility
============================================================ */

/* ==========================================================
   01 — DYSONET PRODUCT ROOT
   Base variables / layout / isolation
========================================================== */

.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;

    direction: rtl;
    color: var(--dys-text);
    font-family: inherit;

    box-sizing: border-box;
    isolation: isolate;
}

.dys-product,
.dys-product *,
.dys-product *::before,
.dys-product *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02 — PRODUCT HERO
   Video / Overlay / Glow / Liquid Glass
========================================================== */

.dys-product-hero {
    --dys-hero-height: 420px;
    --dys-hero-radius: 28px;
    --dys-hero-inner-radius: 22px;

    position: relative;
    isolation: isolate;

    width: 100%;
    height: var(--dys-hero-height);
    margin: 0 auto 28px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--dys-hero-radius);
    background: #111;

    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);

    clip-path: inset(0 round var(--dys-hero-radius));
    contain: paint;
}

.dys-product-hero::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 7;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--dys-hero-inner-radius);

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

    pointer-events: none;
}

.dys-product-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    z-index: 8;

    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .90), transparent);
    pointer-events: none;
}

.dys-product-hero > video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;

    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.005);
}

.dys-product-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    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%);

    pointer-events: none;
}

.dys-product-hero-glow {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    filter: blur(65px);
    opacity: .72;
    pointer-events: none;
}

.dys-product-hero-glow-1 {
    top: -130px;
    right: -110px;
    width: 280px;
    height: 280px;
    background: var(--dys-accent-glow);
}

.dys-product-hero-glow-2 {
    bottom: -160px;
    left: -130px;
    width: 300px;
    height: 300px;
    background: var(--dys-accent-soft);
}

.dys-product-hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 27px 26px;
}

.dys-product-hero-glass {
    position: relative;
    isolation: isolate;
    width: min(720px, 100%);
    padding: 21px 29px 23px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: var(--dys-hero-inner-radius);
    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);

    text-align: center;
    clip-path: inset(0 round var(--dys-hero-inner-radius));
}

.dys-product-hero-glass::before {
    content: "";
    position: absolute;
    top: -78px;
    left: 20%;
    z-index: -1;

    width: 60%;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .30);
    filter: blur(30px);
    pointer-events: none;
}

.dys-product-hero-glass::after {
    content: "";
    position: absolute;
    top: 0;
    left: 17%;
    width: 66%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
    pointer-events: none;
}


/* ==========================================================
   03 — PRODUCT BADGE & HERO TYPOGRAPHY
========================================================== */

.dys-product-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;
    margin: 0 0 10px;
    padding: 0 11px;

    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    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;
    color: var(--dys-accent-dark);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.6px;
    white-space: nowrap;
}

.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;
}

.dys-product-hero-glass h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;

    color: #fff !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
    text-align: center;
    text-shadow: 0 2px 13px rgba(0, 0, 0, .25);
}

.dys-product-hero-glass p {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    margin: 0 auto !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, .94) !important;
    font-size: 12px !important;
    line-height: 1.95 !important;
    text-align: center;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .18);
}


/* ==========================================================
   04 — MAIN PRODUCT CONTENT
   Main Glass / Shine / Title / Description
========================================================== */

.dys-product-main-glass {
    --dys-main-radius: 30px;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 48px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .90);
    border-radius: var(--dys-main-radius);

    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%);
    clip-path: inset(0 round var(--dys-main-radius));
    contain: paint;
}

.dys-product-main-glass::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -100px;
    z-index: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--dys-accent-glow);
    opacity: .70;
    filter: blur(58px);
    pointer-events: none;
}

.dys-product-main-glass::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -120px;
    z-index: 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: var(--dys-accent-soft);
    opacity: .72;
    filter: blur(62px);
    pointer-events: none;
}

.dys-product-shine {
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 2;
    width: 72%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    pointer-events: none;
}

.dys-product-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.dys-product-title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #171717 !important;
    font-size: clamp(27px, 4vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

.dys-product-color {
    margin: 0 0 24px;
    direction: ltr;
    text-align: right;
    color: var(--dys-accent-dark);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.6;
}

.dys-product-content > p {
    width: 100%;
    max-width: 1020px;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #56565b !important;
    font-size: 15px !important;
    line-height: 2.15 !important;
    text-align: justify;
}


/* ==========================================================
   05 — PRODUCT FEATURES
   Grid / Feature Card / Icon / Text
========================================================== */

.dys-product-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin: 31px 0;
}

.dys-product-feature {
    --dys-feature-radius: 19px;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 82px;
    gap: 10px;
    padding: 13px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: var(--dys-feature-radius);
    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%);
    clip-path: inset(0 round var(--dys-feature-radius));

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

.dys-product-feature::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    z-index: -1;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--dys-accent-soft);
    opacity: .80;
    filter: blur(15px);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .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);
    }
}

.dys-feature-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;

    border: 1px solid rgba(255, 255, 255, .97);
    border-radius: 50%;
    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;
    line-height: 1;
    user-select: none;
}

.dys-product-feature > div {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
}

.dys-product-feature strong {
    display: block;
    margin: 0 0 3px;
    color: #242424;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.dys-product-feature small {
    display: block;
    margin: 0;
    color: #818186;
    font-size: 9px;
    line-height: 1.65;
}


/* ============================================================
   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;

    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;

    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;

    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;

    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;
}


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

.dys-product-ba-glass {

    position:relative;

    width:100%;

    padding:18px;

    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;

    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;

    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;

    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;

    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;
    }

}

/* ==========================================
   DYSONET - IN THE BOX
   ========================================== */

.dys-box {
    width: 100%;
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 20px;
    box-sizing: border-box;
    direction: rtl;
    font-family: IranYekanWeb, Arial, sans-serif;
    color: #111;
}


/* HEADER */

.dys-box__header {
    margin-bottom: 35px;
}

.dys-box__eyebrow {
    display: block;
    direction: ltr;
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 8px;
}

.dys-box__header h2 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
}

.dys-box__header p {
    margin: 0;
    font-size: 13px;
    color: #777;
}


/* MAIN LAYOUT */

.dys-box__layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px;
    align-items: center;
}


/* PRODUCT */

.dys-box__product {
    text-align: center;
}

.dys-box__product-image {
    width: 100%;
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dys-box__product-image img {
    display: block;
    max-width: 100%;
    max-height: 310px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dys-box__product h3 {
    margin: 20px 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.dys-box__product > span {
    display: block;
    direction: ltr;
    font-size: 11px;
    color: #888;
}


/* ITEMS */

.dys-box__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* CARD */

.dys-box__item {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    background: #fff;
    overflow: hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.dys-box__item:hover {
    border-color: #ccc;
}

.dys-box__item[open] {
    box-shadow: 0 10px 35px rgba(0,0,0,.06);
}


/* SUMMARY */

.dys-box__item summary {
    min-height: 100px;
    padding: 12px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dys-box__item summary::-webkit-details-marker {
    display: none;
}

.dys-box__item summary::marker {
    display: none;
}


/* IMAGE + TITLE */

.dys-box__item-main {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dys-box__thumb {
    width: 90px;
    height: 75px;

    flex: 0 0 90px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.dys-box__thumb img {
    display: block;

    max-width: 100%;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* TEXT */

.dys-box__item-title {
    text-align: right;
}

.dys-box__item-title span {
    display: block;

    direction: ltr;
    text-align: right;

    margin-bottom: 5px;

    font-family: Arial, sans-serif;

    font-size: 9px;
    letter-spacing: 1px;

    color: #999;
}

.dys-box__item-title strong {
    display: block;

    font-size: 14px;
    font-weight: 600;

    color: #111;
}


/* ARROW */

.dys-box__arrow {
    position: relative;

    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    margin-right: 20px;

    border-left: 1.5px solid #111;
    border-bottom: 1.5px solid #111;

    transform: rotate(-45deg);

    transition: transform .3s ease;
}

.dys-box__item[open] .dys-box__arrow {
    transform: rotate(135deg);
}


/* DESCRIPTION */

.dys-box__description {
    margin: 0 20px 20px;

    padding: 18px 20px;

    border-top: 1px solid #eee;

    font-size: 12px;
    line-height: 2;

    color: #666;

    text-align: right;
}


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

@media (max-width: 700px) {

    .dys-box {
        margin: 40px auto;
        padding: 0 12px;
    }

    .dys-box__header {
        margin-bottom: 20px;
    }

    .dys-box__header h2 {
        font-size: 23px;
    }

    .dys-box__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dys-box__product-image {
        height: 230px;
    }

    .dys-box__product-image img {
        max-height: 220px;
    }

    .dys-box__product h3 {
        margin-top: 10px;
        font-size: 13px;
    }

    .dys-box__items {
        gap: 8px;
    }

    .dys-box__item summary {
        min-height: 82px;
        padding: 8px 14px;
    }

    .dys-box__thumb {
        width: 65px;
        height: 60px;
        flex-basis: 65px;
    }

    .dys-box__thumb img {
        max-height: 55px;
    }

    .dys-box__item-main {
        gap: 10px;
    }

    .dys-box__item-title strong {
        font-size: 12px;
    }

    .dys-box__item-title span {
        font-size: 8px;
    }

    .dys-box__description {
        margin: 0 14px 14px;
        padding: 14px 5px 5px;

        font-size: 11px;
        line-height: 1.9;
    }

    .dys-box__arrow {
        margin-right: 8px;
    }

}
/* ============================================================
   16 — IN THE BOX
============================================================ */

.dys-product-inbox {
    width:100%;
    margin-top:58px;
}


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

.dys-product-inbox-glass {
    position:relative;
    isolation:isolate;

    display:grid;
    grid-template-columns:
        minmax(280px,.85fr)
        minmax(420px,1.3fr);

    gap:14px;

    width:100%;
    padding:16px;

    overflow:hidden;

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

    border-radius:25px;

    background:

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

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

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

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

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

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

    contain:paint;
}


/* Glow */

.dys-product-inbox-glass::before {
    content:"";

    position:absolute;

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

    z-index:0;

    width:210px;
    height:210px;

    border-radius:50%;

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

    filter:
        blur(55px);

    opacity:.32;

    pointer-events:none;
}


/* ============================================================
   PRODUCT CARD
============================================================ */

.dys-product-inbox-product {
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

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

    padding:18px;

    overflow:hidden;

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

    border-radius:20px;

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

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

    backdrop-filter:
        blur(18px);

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


/* Product image */

.dys-product-inbox-product-image {
    display:flex;

    flex:1 1 auto;

    min-height:255px;

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

    padding:10px;
}


.dys-product-inbox-product-image img {
    display:block;

    width:auto;
    height:auto;

    max-width:88%;
    max-height:245px;

    object-fit:contain;

    transition:
        transform .35s ease;
}


@media (hover:hover) and (pointer:fine) {

    .dys-product-inbox-product:hover
    .dys-product-inbox-product-image img {

        transform:
            translateY(-3px)
            scale(1.025);
    }

}


/* Product info */

.dys-product-inbox-product-info {
    padding-top:14px;

    border-top:
        1px solid rgba(0,0,0,.055);

    text-align:right;
}


.dys-product-inbox-product-info > span {
    display:block;

    margin-bottom:5px;

    direction:ltr;
    text-align:right;

    font-size:7px;
    font-weight:750;

    letter-spacing:1.5px;

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


.dys-product-inbox-product-info h3 {
    margin:0 0 3px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    color:#242424 !important;

    font-size:13px !important;

    font-weight:700 !important;

    line-height:1.7 !important;
}


.dys-product-inbox-product-info small {
    display:block;

    direction:ltr;
    text-align:right;

    font-size:8px;

    color:#8b8b90;
}


/* ============================================================
   ITEMS
============================================================ */

.dys-product-inbox-items {
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    gap:9px;

    min-width:0;
}


/* ============================================================
   ITEM CARD
============================================================ */

.dys-product-inbox-item {
    position:relative;

    width:100%;

    overflow:hidden;

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

    border-radius:19px;

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

    box-shadow:
        0 10px 28px rgba(35,25,20,.045),
        inset 0 1px 0 rgba(255,255,255,1);

    backdrop-filter:
        blur(18px);

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

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


@media (hover:hover) and (pointer:fine) {

    .dys-product-inbox-item:hover {
        transform:
            translateY(-2px);

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

        box-shadow:
            0 15px 36px rgba(35,25,20,.07),
            inset 0 1px 0 rgba(255,255,255,1);
    }

}


.dys-product-inbox-item[open] {
    background:
        rgba(255,255,255,.80);
}


/* ============================================================
   SUMMARY
============================================================ */

.dys-product-inbox-item summary {
    display:grid;

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

    gap:15px;

    min-height:125px;

    padding:
        12px 18px;

    align-items:center;

    cursor:pointer;

    list-style:none;

    user-select:none;
}


.dys-product-inbox-item summary::-webkit-details-marker {
    display:none;
}


.dys-product-inbox-item summary::marker {
    content:"";
}


/* ============================================================
   ITEM IMAGE
============================================================ */

.dys-product-inbox-thumb {
    display:flex;

    width:100px;
    height:90px;

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


.dys-product-inbox-thumb img {
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:85px;

    object-fit:contain;

    transition:
        transform .3s ease;
}


@media (hover:hover) and (pointer:fine) {

    .dys-product-inbox-item:hover
    .dys-product-inbox-thumb img {

        transform:
            scale(1.04);
    }

}


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

.dys-product-inbox-item-info {
    min-width:0;

    text-align:right;
}


.dys-product-inbox-item-info > span {
    display:block;

    margin-bottom:5px;

    direction:ltr;
    text-align:right;

    font-size:7px;
    font-weight:750;

    letter-spacing:1.4px;

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


.dys-product-inbox-item-info h3 {
    margin:0 0 3px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    color:#242424 !important;

    font-size:13px !important;

    font-weight:700 !important;

    line-height:1.7 !important;
}


.dys-product-inbox-item-info small {
    display:block;

    direction:ltr;
    text-align:right;

    overflow:hidden;

    color:#8b8b90;

    font-size:8px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* ============================================================
   ARROW
============================================================ */

.dys-product-inbox-arrow {
    width:8px;
    height:8px;

    border-left:
        1.5px solid #333;

    border-bottom:
        1.5px solid #333;

    transform:
        rotate(-45deg);

    transition:
        transform .3s ease;
}


.dys-product-inbox-item[open]
.dys-product-inbox-arrow {

    transform:
        rotate(135deg);
}


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

.dys-product-inbox-description {
    margin:
        0 18px;

    padding:
        14px 0 17px;

    border-top:
        1px solid rgba(0,0,0,.055);
}


.dys-product-inbox-description p {
    margin:0 !important;

    padding:0 !important;

    font-size:10px !important;

    line-height:2 !important;

    text-align:right;

    color:#67676c !important;
}


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

@media (max-width:900px) {

    .dys-product-inbox-glass {

        grid-template-columns:
            minmax(240px,.8fr)
            minmax(320px,1.2fr);
    }

}


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

@media (max-width:600px) {

    .dys-product-inbox {
        margin-top:37px;
    }


    .dys-product-inbox-glass {
        grid-template-columns:
            1fr;

        gap:8px;

        padding:8px;

        border-radius:19px;

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


    /* PRODUCT */

    .dys-product-inbox-product {
        min-height:245px;

        padding:11px;

        border-radius:15px;
    }


    .dys-product-inbox-product-image {
        min-height:170px;

        padding:5px;
    }


    .dys-product-inbox-product-image img {
        max-width:80%;
        max-height:165px;
    }


    .dys-product-inbox-product-info {
        padding-top:9px;
    }


    .dys-product-inbox-product-info > span {
        margin-bottom:3px;

        font-size:6px;

        letter-spacing:1px;
    }


    .dys-product-inbox-product-info h3 {
        font-size:10px !important;
    }


    .dys-product-inbox-product-info small {
        font-size:7px;
    }


    /* ITEMS */

    .dys-product-inbox-items {
        gap:6px;
    }


    .dys-product-inbox-item {
        border-radius:14px;
    }


    .dys-product-inbox-item summary {

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

        gap:9px;

        min-height:85px;

        padding:
            8px 10px;
    }


    /* IMAGE */

    .dys-product-inbox-thumb {
        width:65px;
        height:65px;
    }


    .dys-product-inbox-thumb img {
        max-height:60px;
    }


    /* TEXT */

    .dys-product-inbox-item-info > span {
        margin-bottom:3px;

        font-size:5.5px;

        letter-spacing:.8px;
    }


    .dys-product-inbox-item-info h3 {
        margin-bottom:1px !important;

        font-size:9.5px !important;
    }


    .dys-product-inbox-item-info small {
        font-size:6.5px;
    }


    /* ARROW */

    .dys-product-inbox-arrow {
        width:6px;
        height:6px;
    }


    /* DESCRIPTION */

    .dys-product-inbox-description {
        margin:
            0 10px;

        padding:
            10px 0 12px;
    }


    .dys-product-inbox-description p {
        font-size:8.5px !important;

        line-height:1.9 !important;
    }

}
/* ============================================================
   PRODUCT SQUARE IMAGE PAIRS
============================================================ */

.dys-product-image-section {
    width: 100%;
    margin-top: 48px;
}


.dys-product-square-grid {
    display: grid;

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

    gap: 12px;
}


.dys-product-square-card {
    position: relative;

    aspect-ratio: 1 / 1;

    margin: 0;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        #f4f4f6;

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

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

    isolation: isolate;
}


.dys-product-square-card img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1);
}


.dys-product-square-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 53%,
            rgba(10,10,14,.60) 100%
        );

    pointer-events: none;
}


.dys-product-square-card figcaption {
    position: absolute;

    right: 18px;
    bottom: 18px;
    left: 18px;

    z-index: 3;

    color: #fff;

    text-align: right;
}


.dys-product-square-card figcaption span {
    display: block;

    margin-bottom: 4px;

    direction: ltr;
    text-align: right;

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

    letter-spacing: 1.5px;

    color:
        rgba(255,255,255,.77);
}


.dys-product-square-card figcaption strong {
    display: block;

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

    line-height: 1.7;

    color: #fff;
}


@media (hover:hover) and (pointer:fine) {

    .dys-product-square-card:hover img {
        transform:
            scale(1.035);
    }

}


/* MOBILE */

@media (max-width:600px) {

    .dys-product-image-section {
        margin-top: 34px;
    }

    .dys-product-square-grid {
        gap: 6px;
    }

    .dys-product-square-card {
        border-radius: 16px;

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

    .dys-product-square-card figcaption {
        right: 9px;
        bottom: 10px;
        left: 9px;
    }

    .dys-product-square-card figcaption span {
        font-size: 5px;

        letter-spacing: .7px;
    }

    .dys-product-square-card figcaption strong {
        font-size: 8.5px;

        line-height: 1.6;
    }

}
/* ============================================================
   AUTOMATIC PRODUCT BANNERS — TRUE INFINITE LOOP
============================================================ */

.dys-product-auto-banners {
    width: 100%;
    margin-top: 50px;
}

.dys-product-banner-window {
    position: relative;

    width: 100%;
    overflow: hidden;

    padding: 8px 0;

    direction: ltr;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 4%,
            #000 96%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 4%,
            #000 96%,
            transparent
        );
}

.dys-product-banner-track {
    display: flex;

    width: max-content;

    gap: 12px;

    will-change: transform;

    animation:
        dysProductBannerLoop 28s linear infinite;
}

.dys-product-banner-slide {
    flex: 0 0 430px;

    width: 430px;
    height: 190px;

    padding: 5px;

    overflow: hidden;

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

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

    box-shadow:
        0 15px 38px rgba(35,25,25,.07),
        inset 0 1px 0 rgba(255,255,255,.98);

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

.dys-product-banner-slide img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    border-radius: 17px;

    object-fit: cover;
}


/* نکته اصلی اینجاست */
@keyframes dysProductBannerLoop {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


@media (hover:hover) and (pointer:fine) {

    .dys-product-banner-window:hover
    .dys-product-banner-track {
        animation-play-state: paused;
    }

}


/* MOBILE */

@media (max-width:600px) {

    .dys-product-auto-banners {
        margin-top: 35px;
    }

    .dys-product-banner-track {
        gap: 7px;

        animation-duration: 24s;
    }

    .dys-product-banner-slide {
        flex-basis: 285px;

        width: 285px;
        height: 125px;

        padding: 4px;

        border-radius: 17px;

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

    .dys-product-banner-slide img {
        border-radius: 13px;
    }

}