:root {
                    --p: var(--dina-custom-color);
                    --s: var(--dina-sec-color);
                    --d: var(--dina-discount-color);
                    --bg: #fff7fa;
                    --card: #fff;
                    --tx: #201a33;
                    --mu: #837d99;
                    --bd: #f1e4ec;
                    --r: 20px;
                    --sh: var(--dina-custom-color, #ff4f81);
                    --g:var(--dina-custom-color, #ff4f81);
                }

                [data-theme=dark] {
                    --bg: #120f1e;
                    --card: #1d1932;
                    --tx: #f5f2ff;
                    --mu: #a59fc4;
                    --bd: #2d2848
                }
                * {
                    box-sizing: border-box
                }

                html {
                    scroll-behavior: smooth
                }

                body {
                    margin: 0;
                    background: var(--bg);
                    color: var(--tx);
                    font: 400 14px/1.9 Vazirmatn, Tahoma, sans-serif;
                    direction: rtl;
                    transition: background .3s, color .3s
                }

                a {
                    color: inherit;
                    text-decoration: none
                }

                img {
                    max-width: 100%
                }

                .wrap {
                    max-width: 1280px;
                    margin: auto;
                    padding: 0 16px
                }

                .hd {
                    position: sticky;
                    top: 0;
                    z-index: 50;
                    background: color-mix(in srgb, var(--bg) 82%, transparent);
                    backdrop-filter: blur(14px);
                    border-bottom: 1px solid var(--bd)
                }

                .hdr {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    height: 76px
                }

                .logo {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    font-weight: 900;
                    font-size: 22px
                }

                .lg {
                    width: 48px;
                    height: 48px;
                    overflow: visible
                }

                .hg {
                    transform-origin: 32px 8px;
                    animation: sw 3.2s ease-in-out infinite
                }

                .logo:hover .hg {
                    animation-duration: .8s
                }

                .sh0 {
                    fill: url(#lgg);
                    animation: pu 2.4s ease-in-out infinite;
                    transform-origin: 32px 40px
                }

                .hk {
                    fill: none;
                    stroke: var(--tx);
                    stroke-width: 3;
                    stroke-linecap: round
                }

                .sp {
                    fill: var(--d);
                    transform-box: fill-box;
                    transform-origin: center;
                    animation: tw 1.8s ease-in-out infinite
                }

                .s2 {
                    fill: var(--s);
                    animation-delay: .6s
                }

                .s3 {
                    fill: var(--p);
                    animation-delay: 1.1s
                }

                .logo b {
                    background: linear-gradient(90deg, var(--p), var(--s), var(--d), var(--p));
                    background-size: 300% 100%;
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    animation: sh 5s linear infinite
                }

                @keyframes sw {

                    0%,
                    100% {
                        transform: rotate(-8deg)
                    }

                    50% {
                        transform: rotate(8deg)
                    }
                }

                @keyframes pu {
                    50% {
                        transform: scale(1.06)
                    }
                }

                @keyframes tw {
                    50% {
                        transform: scale(1.9);
                        opacity: .2
                    }
                }

                @keyframes sh {
                    to {
                        background-position: -300% 0
                    }
                }

                .sr {
                    flex: 1;
                    display: flex;
                    max-width: 640px;
                    margin-inline: auto;
                    background: var(--card);
                    border: 2px solid var(--bd);
                    border-radius: 50px;
                    overflow: hidden;
                    transition: .25s
                }

                .sr:focus-within {
                    border-color: var(--p);
                    box-shadow: var(--sh)
                }

                .sr input {
                    flex: 1;
                    min-width: 0;
                    border: 0;
                    background: none;
                    padding: 0 16px;
                    color: inherit;
                    font: inherit;
                    outline: 0
                }

                .sr select {
                    border: 0;
                    border-left: 1px solid var(--bd);
                    background: none;
                    color: inherit;
                    font: inherit;
                    padding: 0 10px;
                    max-width: 130px;
                    height: 40px;
                }

                .sr button {
                    border: 0;
                    background: var(--g);
                    color: #fff;
                    width: 50px;
                    cursor: pointer;
                    font-size: 16px
                }

                .acts {
                    display: flex;
                    gap: 8px
                }

                .ib {
                    position: relative;
                    width: 44px;
                    height: 44px;
                    border: 0;
                    border-radius: 50%;
                    background: var(--card);
                    box-shadow: 0 3px 12px #0001;
                    cursor: pointer;
                    display: grid;
                    place-items: center;
                    font-size: 19px;
                    color: inherit;
                    transition: .25s
                }

                .ib:hover {
                    background: var(--g);
                    transform: translateY(-3px) rotate(-6deg)
                }

              .th::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f186";
    color: var(--dina-custom-color);
}

.th:hover::before {
  
    color: #fff;
}




                [data-theme=dark] .th::before {
                    content: "☀️"
                }

                .cart-amount {
                    position: absolute;
                    top: -4px;
                    left: -4px;
                    min-width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    background: var(--d);
                    color: #fff;
                    font: 700 11px/20px sans-serif;
                    text-align: center;
                    font-style: normal
                }

                .um {
                    position: relative
                }

                .pop {
                    position: absolute;
                    left: 0;
                    top: 100%;
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 16px;
                    padding: 8px;
                    box-shadow: var(--sh);
                    display: none;
                    flex-direction: column;
                    min-width: 160px;
                    z-index: 70
                }

                .pop a {
                    padding: 6px 12px;
                    border-radius: 10px
                }

                .pop a:hover {
                    background: var(--bd)
                }

                .um:hover .pop,
                .um:focus-within .pop,
                .pop.on {
                    display: flex
                }

                .pal {
                    flex-direction: row;
                    gap: 8px;
                    min-width: 0
                }

                .pal button {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    border: 2px solid var(--card);
                    cursor: pointer;
                    box-shadow: 0 0 0 1px var(--bd)
                }

                .mb {
                    display: none
                }

                .nv {
                    background: var(--card);
                    border-bottom: 1px solid var(--bd);
                    position: relative;
                    z-index: 40
                }

                .nv ul {
                    list-style: none;
                    margin: 0;
                    padding: 0
                }

                .nv>.wrap>ul {
                    display: flex;
                    gap: 4px;
                    padding: 6px 0
                }

                .nv li {
                    position: relative
                }

                .nv a {
                    display: block;
                    padding: 6px 14px;
                    border-radius: 12px;
                    font-weight: 600
                }

                .nv li:hover>a {
                    background: var(--g);
                    color: #fff
                }

                .nv li ul {
                    position: absolute;
                    top: 100%;
                    right: 0;
                    min-width: 210px;
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 16px;
                    padding: 8px;
                    box-shadow: var(--sh);
                    opacity: 0;
                    visibility: hidden;
                    transform: translateY(10px);
                    transition: .2s
                }

                .nv li:hover>ul {
                    opacity: 1;
                    visibility: visible;
                    transform: none
                }

                .tg {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    width: 30px;
                    height: 30px;
                    border: 0;
                    background: none;
                    color: inherit;
                    cursor: pointer;
                    font-size: 18px
                }

                .tg::before {
                    content: "+"
                }

                .open>.tg::before {
                    content: "−"
                }

                .nv .tg {
                    display: none
                }

                .bk {
                    display: none
                }

                .bc {
                    padding-top: 14px;
                    color: var(--mu);
                    font-size: 13px
                }

                .bc a::after {
                    content: ">";
                    margin: 0 8px
                }

                .bc b {
                    color: var(--p)
                }

                .hero {
                    position: relative;
                    margin-top: 18px
                }

                .slides {
                    position: relative;
                    height: clamp(250px, 42vw, 460px);
                    border-radius: 30px;
                    overflow: hidden;
                    box-shadow: var(--sh)
                }

                .sl {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    padding: 0 clamp(22px, 6vw, 90px);
                    color: #fff;
                    background: linear-gradient(120deg, var(--a, var(--p)), var(--b, var(--s)));
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity .9s, visibility .9s;
                    overflow: hidden
                }

                .sl.on {
                    opacity: 1;
                    visibility: visible
                }

                .sl:nth-child(3n+2) {
                    --a: var(--s);
                    --b: var(--d)
                }

                .sl:nth-child(3n) {
                    --a: var(--d);
                    --b: var(--p)
                }

                .sl::before,
                .sl::after {
                    content: "";
                    position: absolute;
                    border-radius: 50%;
                    background: #ffffff26;
                    animation: fl 8s ease-in-out infinite
                }

                .sl::before {
                    width: 360px;
                    height: 360px;
                    top: -130px;
                    left: -90px
                }

                .sl::after {
                    width: 210px;
                    height: 210px;
                    bottom: -70px;
                    left: 35%;
                    animation-delay: -4s
                }

                @keyframes fl {
                    50% {
                        transform: translate(24px, 30px) scale(1.12)
                    }
                }

                .sl img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
                    mask-image: linear-gradient(to right, #000 55%, transparent)
                }

                .st {
                    position: relative;
                    z-index: 2;
                    max-width: 46%
                }

                .on .st {
                    animation: up .9s both
                }

                @keyframes up {
                    from {
                        transform: translateY(34px);
                        opacity: 0
                    }
                }

                .st h2 {
                    font-size: clamp(22px, 4vw, 46px);
                    margin: 0 0 8px;
                    line-height: 1.4
                }

                .st p {
                    margin: 0;
                    opacity: .95;
                    font-size: clamp(13px, 1.6vw, 17px)
                }

                .btn {
                    display: inline-block;
                    margin-top: 14px;
                    padding: 10px 28px;
                    border-radius: 50px;
                    background: #fff;
                    color: var(--p);
                    font-weight: 800;
                    box-shadow: 0 10px 24px #0003;
                    transition: .25s
                }

                .btn:hover {
                    transform: translateY(-3px) scale(1.05)
                }

                .hero .cb {
                    position: absolute;
                    top: 50%;
                    margin-top: -19px;
                    z-index: 5;
                    background: #ffffff40;
                    color: #fff;
                    border: 0;
                    backdrop-filter: blur(6px)
                }

                .pv {
                    right: 14px
                }

                .nx {
                    left: 14px
                }

                .dots {
                    position: absolute;
                    bottom: 14px;
                    inset-inline: 0;
                    display: flex;
                    justify-content: center;
                    gap: 8px;
                    z-index: 5
                }

                .dots i {
                    width: 10px;
                    height: 10px;
                    border-radius: 9px;
                    background: #fff8;
                    cursor: pointer;
                    transition: .3s
                }

                .dots i.on {
                    width: 32px;
                    background: #fff
                }

                .bf {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 12px;
                    margin-top: 22px
                }

                .bf div {
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 18px;
                    padding: 12px;
                    text-align: center;
                    font-weight: 700;
                    transition: .25s
                }

                .bf div:hover {
                    transform: translateY(-4px);
                    box-shadow: var(--sh)
                }

                .sec {
                    margin: 46px 0
                }

                .sh {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    margin-bottom: 18px
                }

                .sh h2 {
                    margin: 0;
                    font-size: 22px;
                    flex: 1;
                    position: relative;
                    padding-right: 20px
                }

                .sh h2::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 15%;
                    width: 8px;
                    height: 70%;
                    border-radius: 8px;
                    background: var(--g)
                }

                .ma {
                    color: var(--p);
                    font-weight: 700
                }

                .cbs {
                    display: flex;
                    gap: 6px
                }

                .cb {
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    border: 1px solid var(--bd);
                    background: var(--card);
                    color: inherit;
                    cursor: pointer;
                    font-size: 20px;
                    transition: .2s
                }

                .cb:hover {
                    background: var(--g);
                    color: #fff;
                    border-color: transparent
                }

                .trk {
                    display: flex;
                    gap: 16px;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    scrollbar-width: none;
                    padding: 6px 50px 18px 0;
                    
                }

                .trk::-webkit-scrollbar {
                    display: none
                }

                .trk>* {
                    flex: 0 0 calc((100% - 64px)/5);
                    min-width: 250px;
                    scroll-snap-align: start
                }

                .hot {
                    background: var(--g);
                    border-radius: 34px;
                    padding: 26px 0;
                    color: #fff;
                    position: relative;
                    overflow: hidden;
                    background-image: url(https://loxup.ir/theme/shop01/theme/spec-offer.png);
                       
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto;
                }

                .hot .sh h2 {
                    color: #fff
                }

                .hot .sh h2::before {
                    background: #fff
                }

                .hot .cb {
                    background: #ffffff30;
                    color: #fff;
                    border: 0
                }

                .hot .pc {
                    color: var(--tx)
                }

                .fc .trk>* {
                    flex: 0 0 124px;
                    min-width: 0;
                    text-align: center
                }

                .fc img {
                    width: 108px;
                    height: 108px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 4px solid var(--card);
                    box-shadow: 0 0 0 3px var(--p);
                    transition: .4s
                }

                .fc a:hover img {
                    transform: rotate(8deg) scale(1.08);
                    box-shadow: 0 0 0 3px var(--d)
                }

                .fc small {
                    display: block;
                    color: var(--mu)
                }

                .br.trk>* {
                    flex: 0 0 auto;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 50px;
                    padding: 6px 18px
                }

                .br img {
                    height: 28px
                }

                .pc {
                    background: var(--card);
                    border-radius: var(--r);
                    overflow: hidden;
                    border: 1px solid var(--bd);
                    transition: .3s;
                    display: flex;
                    flex-direction: column
                }

                .pc:hover {
                    transform: translateY(-6px);
                    box-shadow: var(--sh);
                    border-color: transparent
                }

                .pm {
                    position: relative;
                    display: block;
                    aspect-ratio: 3/4;
                    overflow: hidden;
                    background: linear-gradient(135deg, color-mix(in srgb, var(--p) 16%, var(--card)), color-mix(in srgb, var(--s) 16%, var(--card)))
                }

                .pm img {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: .5s
                }

                .pc:hover .pm>img {
                    transform: scale(1.07)
                }

                .alts img {
                    opacity: 0;
                    display: none
                }

                .alts img:nth-child(2) {
                    display: block
                }

                .pc:hover .alts img {
                    opacity: 1
                }

                .bg {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 2;
                    background: var(--d);
                    color: #fff;
                    font-weight: 800;
                    border-radius: 50px;
                    padding: 0 11px;
                    font-size: 12px;
                    animation: pl 2s infinite
                }

                @keyframes pl {
                    50% {
                        transform: scale(1.12)
                    }
                }

                .so {
                    position: absolute;
                    inset: auto 0 0;
                    z-index: 2;
                    background: #000b;
                    color: #fff;
                    text-align: center;
                    font-size: 12px
                }

                .pi {
                    padding: 12px;
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    flex: 1
                }

                .pt {
                    font-weight: 700;
                    line-height: 1.7;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    min-height: 48px
                }

                .pp {
                    display: flex;
                    align-items: baseline;
                    gap: 8px;
                    flex-wrap: wrap;
                    margin-top: auto
                }

                .pp b {
                    color: var(--p);
                    font-size: 16px
                }

                .pp small {
                    font-size: 11px;
                    color: var(--mu)
                }

                .pp del {
                    color: var(--mu);
                    font-size: 12px
                }

                .pp:has(.fp) .np {
                    color: var(--mu);
                    font-size: 12px;
                    text-decoration: line-through
                }

                .pp .fp {
                    font-size: 16px
                }

                .cd {
                    align-self: flex-start;
                    direction: ltr;
                    background: var(--d);
                    color: #fff;
                    border-radius: 50px;
                    padding: 0 12px;
                    font: 700 12px/22px monospace
                }

                .cd:empty {
                    display: none
                }

                .pa {
                    text-align: center;
                    padding: 8px;
                    border-radius: 50px;
                    background: var(--g);
                    color: #fff;
                    font-weight: 700;
                    transition: .25s
                }

                .pa:hover {
                    filter: brightness(1.12);
                    transform: scale(1.03)
                }

                .gr {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
                    gap: 16px
                }

                .pgn {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6px;
                    justify-content: center;
                    align-items: center;
                    margin-top: 28px
                }

                .pgn a,
                .pgn span,
                .pgn b {
                    min-width: 40px;
                    padding: 0 12px;
                    line-height: 40px;
                    border-radius: 12px;
                    background: var(--card);
                    border: 1px solid var(--bd);
                    text-align: center
                }

                .pgn a:hover,
                .pgn b,
                .pgn .current {
                    background: var(--g);
                    color: #fff
                }

                .lay {
                    display: grid;
                    grid-template-columns: 290px minmax(0, 1fr);
                    gap: 24px;
                    margin-top: 20px;
                    margin-bottom: 40px
                }

                .lay h1 {
                    margin: 0 0 16px;
                    font-size: 26px
                }

                .fb {
                    display: none
                }

                .bx {
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 22px;
                    padding: 16px;
                    margin-bottom: 16px
                }

                .bx h3 {
                    margin: 0 0 10px;
                    font-size: 16px
                }

                .cl,
                .cl ul {
                    list-style: none;
                    margin: 0;
                    padding: 0
                }

                .cl li {
                    position: relative
                }

                .cl a {
                    display: block;
                    padding: 5px 10px;
                    border-radius: 10px
                }

                .cl a:hover {
                    background: var(--bd);
                    color: var(--p)
                }

                .cl ul {
                    display: none;
                    padding-right: 14px
                }

                .cl li.open>ul {
                    display: block
                }

                .chips {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6px
                }

                .chips a {
                    padding: 2px 14px;
                    border-radius: 50px;
                    background: var(--bd)
                }

                .chips a:hover {
                    background: var(--g);
                    color: #fff
                }

                .mc {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    padding: 6px 0
                }

                .mc img {
                    width: 56px;
                    height: 70px;
                    object-fit: cover;
                    border-radius: 12px
                }

                .mc b {
                    display: block;
                    color: var(--p);
                    font-size: 13px
                }

                .pd {
                    display: grid;
                    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
                    gap: 30px;
                    margin-top: 20px
                }

                .pinfo,
                .box,
                .lx-reviews {
                    background: var(--card);
                    border: 1px solid var(--bd);
                    border-radius: 26px;
                    padding: 24px;
                    margin-bottom: 20px
                }

                .pinfo h1 {
                    margin: 0 0 10px;
                    font-size: 24px;
                    line-height: 1.6
                }

                .pinfo .bg {
                    position: static;
                    display: inline-block;
                    margin-bottom: 8px;
                    animation: none
                }

                .lx-gallery-main-wrap {
                    border-radius: 26px;
                    overflow: hidden
                }

                .lx-gallery-thumb {
                    border: 2px solid var(--bd);
                    border-radius: 12px;
                    overflow: hidden;
                    padding: 0;
                    background: none
                }

                .variation-row {
                    margin: 12px 0
                }

                .variation-label {
                    font-weight: 700;
                    display: block
                }

                .hidden-select {
                    display: none
                }

                .lx-color-swatch {
                    min-width: 40px;
                    height: 40px;
                    margin: 4px;
                    padding: 0 12px;
                    border-radius: 12px;
                    border: 2px solid var(--bd);
                    background: var(--swatch-color, var(--card));
                    color: inherit;
                    cursor: pointer;
                    font: inherit;
                    transition: .2s
                }

                .lx-color-swatch:not([data-color=""]) {
                    font-size: 0;
                    width: 40px;
                    padding: 0;
                    border-radius: 50%
                }

                .lx-color-swatch.selected,
                .lx-color-swatch.active,
                .lx-color-swatch:hover {
                    border-color: var(--p);
                    box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 30%, transparent)
                }

                .variation-price-amount {
                    font-size: 26px;
                    font-weight: 900;
                    color: var(--p)
                }

                .variation-price-label {
                    color: var(--mu)
                }

                .variations_button {
                    display: flex;
                    gap: 12px;
                    flex-wrap: wrap;
                    align-items: center;
                    margin-top: 14px
                }

                .lx_pro_counter {
                    display: inline-flex;
                    align-items: center;
                    border: 1px solid var(--bd);
                    border-radius: 50px;
                    overflow: hidden
                }

                .lx_pro_counter .fxc {
                    width: 40px;
                    height: 44px;
                    display: grid;
                    place-items: center;
                    cursor: pointer;
                    font-size: 20px
                }

                .lx_pro_counter input {
                    width: 46px;
                    text-align: center;
                    border: 0;
                    background: none;
                    color: inherit;
                    font: inherit
                }

                .single_add_to_cart_button {
                    flex: 1;
                    background: var(--g);
                    color: #fff;
                    border: 0;
                    border-radius: 50px;
                    padding: 12px 28px;
                    font: 700 15px Vazirmatn, Tahoma;
                    cursor: pointer;
                    box-shadow: var(--sh);
                    transition: .25s
                }

                .single_add_to_cart_button:hover {
                    transform: translateY(-3px)
                }

                .tb {
                    width: 100%;
                    border-collapse: collapse
                }

                .tb th,
                .tb td {
                    padding: 10px;
                    border-bottom: 1px solid var(--bd);
                    text-align: right
                }

                .tb th {
                    color: var(--mu);
                    width: 35%
                }

                .cart-wrapper-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20px
                }

                .cart-main-items-column {
                    flex: 1 1 560px
                }

                .cart-summary-sidebar {
                    flex: 0 1 340px
                }

                .shadow-around,
                .cart_totals {
                    background: var(--card);
                    border-radius: var(--r);
                    padding: 16px;
                    border: 1px solid var(--bd)
                }

                .modern-cart-table {
                    width: 100%
                }

                .checkout-button {
                    display: block;
                    text-align: center;
                    background: var(--g);
                    color: #fff;
                    padding: 12px;
                    border-radius: 50px;
                    font-weight: 700
                }

                .ft {
                    margin-top: 60px;
                    background: var(--card);
                    border-top: 4px solid var(--p);
                    padding-top: 34px
                }

                .fg {
                    display: grid;
                    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
                    gap: 28px;
                    padding-bottom: 26px
                }

                .ft h4 {
                    margin: 0 0 10px
                }

                .ft ul {
                    list-style: none;
                    margin: 0;
                    padding: 0
                }

                .ft li a:hover {
                    color: var(--p)
                }

                .ft p {
                    color: var(--mu);
                    margin: 6px 0
                }

                .cp {
                    border-top: 1px solid var(--bd);
                    text-align: center;
                    padding: 14px;
                    color: var(--mu)
                }

                @media(max-width:1000px) {
                    .trk>* {
                        flex-basis: calc((100% - 32px)/3)
                    }

                    .pd,
                    .lay {
                        grid-template-columns: 1fr
                    }

                    .fg {
                        grid-template-columns: 1fr 1fr
                    }

                    .hdr {
                        flex-wrap: wrap;
                        height: auto;
                        padding: 10px 16px;
                        gap: 10px
                    }

                    .sr {
                        order: 9;
                        flex: 1 1 100%;
                        max-width: none
                    }

                    .sr select {
                        display: none
                    }

                    .logo {
                        margin-inline-end: auto
                    }

                    .mb {
                        display: grid
                    }

                    .nv {
                        position: fixed;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        width: min(86vw, 340px);
                        z-index: 99;
                        transform: translateX(105%);
                        transition: .3s;
                        overflow: auto;
                        padding: 60px 12px 20px
                    }

                    .nav-open .nv {
                        transform: none
                    }

                    .nav-open .bk,
                    .sb-open .bk {
                        display: block;
                        position: fixed;
                        inset: 0;
                        background: #0008;
                        z-index: 90
                    }

                    .nv>.wrap>ul {
                        display: block
                    }

                    .nv li ul {
                        position: static;
                        opacity: 1;
                        visibility: visible;
                        transform: none;
                        box-shadow: none;
                        border: 0;
                        display: none
                    }

                    .nv li.open>ul {
                        display: block
                    }

                    .nv .tg {
                        display: block
                    }

                    .fb {
                        display: inline-block;
                        border: 0;
                        background: var(--g);
                        color: #fff;
                        border-radius: 50px;
                        padding: 6px 18px;
                        font: 700 13px Vazirmatn;
                        cursor: pointer;
                        margin-bottom: 12px
                    }

                    .sbar {
                        position: fixed;
                        inset: auto 0 0;
                        max-height: 78vh;
                        overflow: auto;
                        background: var(--bg);
                        border-radius: 26px 26px 0 0;
                        padding: 16px;
                        z-index: 99;
                        transform: translateY(105%);
                        transition: .3s
                    }

                    .sb-open .sbar {
                        transform: none
                    }
                }

                @media(max-width:640px) {
                    .trk>* {
                        flex-basis: calc((100% - 16px)/2.15);
                        min-width: 150px
                    }

                    .bf,
                    .fg {
                        grid-template-columns: 1fr 1fr
                    }

                    .st {
                        max-width: 100%
                    }

                    .sl img {
                        width: 100%;
                        opacity: .35;
                        -webkit-mask-image: none;
                        mask-image: none
                    }

                    .gr {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 10px
                    }

                    .hot {
                        border-radius: 24px
                    }
                }





                .theme-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #282828;
    text-decoration: none;
    transition: 0.25s ease;
}

.theme-menu-item i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--dina-custom-color);
   
    font-size: 20px;
    transition: inherit;
}

.theme-menu-item:hover {
    color:var(--dina-sec-color)
}

.theme-menu-item:hover i {
    color: #fff;
    background: var(--dina-custom-color);
    transform: scale(1.06);
}










.secure-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid #d1fae5;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--dina-sec-color), var(--dina-sec-color));
    color: var(--dina-custom-color);
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: default;
}

.secure-payment svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.secure-payment:hover {
    background: linear-gradient(135deg, var(--dina-sec-color), var(--dina-sec-color));
    border-color: var(--dina-sec-color);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.12);
    transform: translateY(-2px);
}

.secure-payment:hover svg {
    transform: scale(1.1);
}

















#main .row{display:flex;flex-wrap:wrap;gap:20px}
#main .row>[class*=col-]{min-width:0}
#main .col-12{flex:1 1 100%}
#main .g-4{gap:20px}
@media(min-width:992px){#main .col-lg-8{flex:1 1 calc(66% - 20px)}
#main .col-lg-4{flex:1 1 calc(34% - 20px)}
}
#main .mb-0{margin-bottom:0}
#main .mb-1{margin-bottom:4px}
#main .mb-2{margin-bottom:8px}
#main .mb-3{margin-bottom:16px}
#main .mb-4,#main .mb-5{margin-bottom:24px}
#main .mt-2{margin-top:8px}
#main .mt-3{margin-top:16px}
#main .mt-4{margin-top:24px}
#main .me-1{margin-inline-end:4px}
#main .me-2{margin-inline-end:8px}
#main .ms-2{margin-inline-start:8px}
#main .pb-2{padding-bottom:8px}
#main .d-flex{display:flex}
#main .align-items-center{align-items:center}
#main .justify-content-between{justify-content:space-between}
#main .flex-grow-1{flex-grow:1}
#main .w-100{width:100%}
#main .text-muted{color:var(--mu)}
#main .fw-bold,#main .font-weight-bold{font-weight:800}
#main .border-bottom{border-bottom:1px solid var(--bd)}
#main .text-danger{color:#e5484d}
#main .color-primary,#main .text-primary{color:var(--p)}
#main .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#main .sticky-top{position:sticky}
#main .fal{font-style:normal}
#main .shadow-around,#main .account-section,#main .section-card,#main .cart_totals,#main .success-hero-card{background:var(--card);border:1px solid var(--bd);border-radius:24px;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--s) 40%,transparent);padding:22px}
#main .page-sys .section,#main .page-content{margin-top:10px}
#main .page-title,#main .special-heading-title,#main .checkout-section-title+*,#main .title{margin:0}
#main .blog-header-section{margin:22px 0 18px}
#main .special-heading-title,#main .block.static-page .title{font-size:28px;font-weight:900;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 18px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
#main .special-heading-second-title{font-size:13px;font-weight:600;color:var(--mu);-webkit-text-fill-color:var(--mu)}
#main input[type=text],#main input[type=email],#main input[type=tel],#main input[type=password],#main input[type=number],#main input[type=search],#main input[type=url],#main input:not([type]),#main select,#main textarea,#main .form-control,#main .input-text{width:100%;background:var(--bg);color:var(--tx);border:2px solid var(--bd);border-radius:14px;padding:10px 14px;font:inherit;outline:0;transition:.2s}
#main textarea{min-height:110px;resize:vertical}
#main input:focus,#main select:focus,#main textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 18%,transparent)}
#main input::placeholder,#main textarea::placeholder{color:var(--mu)}
#main label{font-weight:600}
#main input[type=radio],#main input[type=checkbox]{accent-color:var(--p);width:18px;height:18px}
#main form p,#main .form-group,#main .form-row{margin:0 0 14px}
#main button,#main .button,#main .btn_shop,#main .btn_filter,#main input[type=submit],#main input[type=button]{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:50px;padding:10px 24px;margin:0 10px;background:var(--g);color:#fff;font:700 14px Vazirmatn,Tahoma,sans-serif;cursor:pointer;box-shadow:var(--sh);transition:.25s}
#main button:hover,#main .button:hover,#main .btn_shop:hover,#main .btn_filter:hover,#main input[type=submit]:hover{transform:translateY(-3px);filter:brightness(1.08)}
#main .btn_success{background:linear-gradient(135deg,#22c55e,#10b981)}
#main .btn_danger,#main .btn_delete{background:linear-gradient(135deg,#ef4444,#f97316)}
#main table{width:100%;border-collapse:separate;border-spacing:0 10px}
#main th{color:var(--mu);font-weight:600;font-size:13px;padding:6px 12px;text-align:right}
#main td{padding:12px;background:var(--card);vertical-align:middle}
#main td:first-child{border-radius:0 18px 18px 0}
#main td:last-child{border-radius:18px 0 0 18px}
#main .modern-cart-table tr.cart_item{box-shadow:none;border:0;padding:0;background:none}
#main .modern-cart-table td{border-block:1px solid var(--bd)}
#main .modern-cart-table td:first-child{border-right:1px solid var(--bd)}
#main .modern-cart-table td:last-child{border-left:1px solid var(--bd)}
#main .product-thumbnail img{width:84px;height:104px;object-fit:cover;border-radius:14px;display:block}
#main .product-title-link{font-weight:700;display:block;margin-bottom:4px}
#main .product-title-link:hover{color:var(--p)}
#main .cart_percent,#main .product-discount{display:inline-block;background:var(--d);color:#fff;font-size:12px;font-weight:800;border-radius:50px;padding:0 10px}
#main dl.variation{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--mu)}
#main dl.variation dt,#main dl.variation dd,#main dl.variation p{margin:0;display:inline}
#main .price-label{display:none;color:var(--mu);font-size:12px}
#main .woocommerce-Price-amount{font-weight:800;color:var(--p)}
#main .currency-symbol-text{font-size:11px;font-weight:500;color:var(--mu)}
#main del{color:var(--mu)}
#main .lx_pro_counter{display:inline-flex;align-items:center;border:2px solid var(--bd);border-radius:50px;overflow:hidden;background:var(--bg)}
#main .lx_pro_counter .fxc{width:36px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:20px;user-select:none;transition:.2s}
#main .lx_pro_counter .fxc:hover{background:var(--g);color:#fff}
#main .lx_pro_counter input,#main .product_number{width:44px;padding:0;text-align:center;border:0;border-radius:0;background:none;font-weight:700}
#main .lx_pro_counter input:focus{box-shadow:none}
#main .remove{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,#ef4444 14%,transparent);color:#ef4444;transition:.25s}
#main .remove:hover{background:#ef4444;color:#fff;transform:rotate(90deg)}
#main .cart-actions-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px}
#main .btn-continue-shopping{color:var(--p);font-weight:700}
#main .btn-continue-shopping:hover{text-decoration:underline}
#main .cart-summary-sidebar .sticky-top{top:96px!important}
#main .cart-totals-heading{font-size:18px;font-weight:800;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--bd)}
#main .cart-subtotal,#main .cart-discount-row,#main .order-total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0}
#main .discount-amount,#main .discount-row .product-price{color:#16a34a}
#main .discount-amount .woocommerce-Price-amount{color:#16a34a}
#main .lbn-divider{height:1px;margin:10px 0;background:repeating-linear-gradient(90deg,var(--bd) 0 8px,transparent 8px 14px)}
#main .order-total{font-size:16px}
#main .order-total strong .woocommerce-Price-amount{font-size:20px;color:var(--p)}
#main .checkout-button,#main .wc-proceed-to-checkout a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:50px;background:var(--g);color:#fff;font-weight:800;box-shadow:var(--sh);transition:.25s}
#main .checkout-button:hover{transform:translateY(-3px)}
#main .trust-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#main .trust-item{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:14px;padding:8px 10px;font-size:12px;font-weight:600}
#main .trust-icon{color:var(--p);font-size:18px}
#main .checkout-section-title{margin:0 0 14px;font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
#main .checkout-section-title i,#main .order-review-heading i{color:var(--p)}
#main .checkout-section-subtitle{color:var(--mu);font-size:13px;margin-bottom:14px}
#main .address_methods,#main .transport_methods,#main .payment-methods{display:grid;gap:12px}
#main .address_option,#main .transport_option,#main .payment-methods label{display:block;cursor:pointer}
#main .address_option input,#main .transport_option input{position:absolute;opacity:0;pointer-events:none}
#main .address_card,#main .transport_card{display:flex;align-items:center;gap:12px;border:2px solid var(--bd);border-radius:18px;padding:14px;background:var(--bg);transition:.25s}
#main .address_option:hover .address_card,#main .transport_option:hover .transport_card{border-color:color-mix(in srgb,var(--p) 50%,var(--bd))}
#main .address_option input:checked+.address_card,#main .transport_option input:checked+.transport_card{border-color:var(--p);background:color-mix(in srgb,var(--p) 8%,var(--card));box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 15%,transparent)}
#main .address_radio,#main .transport_radio{flex:0 0 22px;height:22px;border:2px solid var(--bd);border-radius:50%;display:grid;place-items:center}
#main .address_radio span,#main .transport_radio span{width:10px;height:10px;border-radius:50%;background:var(--g);transform:scale(0);transition:.25s}
#main input:checked+.address_card .address_radio span,#main input:checked+.transport_card .transport_radio span{transform:scale(1)}
#main input:checked+.address_card .address_radio,#main input:checked+.transport_card .transport_radio{border-color:var(--p)}
#main .address_content,#main .transport_content{flex:1;min-width:0}
#main .address_location{font-weight:700;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#main .address_location i,#main .transport_address i{color:var(--p)}
#main .address_text,#main .transport_description,#main .transport_address{color:var(--mu);font-size:13px}
#main .transport_name{font-weight:700}
#main .transport_price{font-weight:800;color:var(--p);white-space:nowrap}
#main .transport_price small{color:var(--mu);font-weight:500}
#main .address-add-wrapper{margin-top:14px}
#main .new_addres{background:none;color:var(--p);border:2px dashed var(--p);box-shadow:none}
#main .new_addres:hover{background:var(--p);color:#fff}
#main .form_add_addres{margin-top:16px;padding-top:16px;border-top:1px dashed var(--bd)}
#main .payment-methods label{border:2px solid var(--bd);border-radius:18px;padding:14px;background:var(--bg);transition:.25s}
#main .payment-methods label:hover,#main .payment-methods label:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 8%,var(--card))}
#main .payment-methods ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#main .complete-order-content{text-align:center}
#main .complete-order-icon{width:70px;height:70px;margin:0 auto 10px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-size:28px;animation:pl 2.4s infinite}
#main .complete-order-content h3{margin:0 0 6px}
#main .complete-order-content p{color:var(--mu);margin:0 0 16px}
#main .complete-order-button button,#main .complete-order-button input[type=submit]{padding:14px 44px;font-size:16px}
#main .order-review-section{top:96px!important}
#main .order-review-heading{font-size:17px!important;color:var(--tx)!important;margin:0 0 14px;padding-bottom:10px;border-bottom:1px dashed var(--bd)!important}
#main .cart-item-card{display:flex;gap:10px;padding:8px;border:1px solid var(--bd);border-radius:16px;background:var(--bg)}
#main .cart-item-thumb img{width:46px;height:54px;object-fit:cover;border-radius:10px;display:block}
#main .cart-item-details{min-width:0}
#main .cart-item-details .product-name{margin:0 0 2px;font-size:13px;font-weight:700}
#main .product-variations{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--mu)}
#main .product-variation strong{color:var(--tx);margin-inline-start:4px}
#main .product-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#main .product-quantity-badge{background:var(--bd);border-radius:50px;padding:0 10px;font-size:12px;font-weight:700}
#main .product-subtotal-price{font-size:13px}
#main .coupon{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
#main .coupon input{flex:1 1 140px;border-radius:50px}
#main .coupon button{padding:8px 18px}
#main .shipping-method-header-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0}
#main .shipping-methods-wrapper ul{list-style:none;margin:0;padding:0}
#main .shipping-cost{font-weight:800}
#main .order-review-note{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mu);background:var(--bg);border-radius:14px;padding:10px}
#main .order-review-note i{color:#16a34a}
#main .thankyou-page-wrapper{--ok:#16a34a}
#main .thankyou-status-failed{--ok:#ef4444}
#main .success-hero-card{text-align:center;padding:30px 22px;background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 10%,var(--card)),var(--card))}
#main .success-badge-icon{width:78px;height:78px;margin:0 auto 14px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:34px;box-shadow:0 0 0 10px color-mix(in srgb,var(--ok) 18%,transparent);animation:pl 2.4s infinite}
#main .success-hero-card ul{list-style:none;margin:12px 0;padding:0;color:var(--mu)}
#main .order-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;text-align:right}
#main .overview-item{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:12px}
#main .overview-icon{flex:0 0 40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p);display:grid;place-items:center}
#main .overview-content{display:flex;flex-direction:column;min-width:0}
#main .overview-label{font-size:12px;color:var(--mu)}
#main .overview-value{font-weight:800;word-break:break-word}
#main .highlight-price{color:var(--p)}
#main .copy-badge-btn{padding:0;width:26px;height:26px;border-radius:8px;background:var(--bd);color:var(--tx);box-shadow:none}
#main .thankyou-columns-grid{margin-top:20px}
#main .section-header{margin-bottom:12px}
#main .section-title{display:flex;gap:8px;align-items:center;font-weight:800;font-size:17px}
#main .order-items-list{display:grid;gap:10px}
#main .order-item-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--bd);border-radius:18px;padding:10px;background:var(--bg)}
#main .item-thumbnail img,#main .order-item-img{width:70px;height:70px;object-fit:cover;border-radius:12px;display:block}
#main .item-info{flex:1;min-width:160px}
#main .item-name{font-weight:700}
#main .selected_var{display:inline-block;font-size:12px;color:var(--mu);margin-inline-end:10px}
#main .item-quantity-pill{background:var(--bd);border-radius:50px;padding:0 12px;font-size:13px}
#main .item-price{font-weight:800;color:var(--p)}
#main .account-container{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;margin:22px 0}
#main .account-sidebar{position:sticky;top:96px}
#main .lxshop-trigger,#main .lxshop-overlay,#main .lxshop-header{display:none}
#main .lxshop-sheet-navigation{background:var(--card);border:1px solid var(--bd);border-radius:26px;padding:18px;box-shadow:var(--sh)}
#main .lxshop-sidebar-logo{text-align:center;margin-bottom:14px}
#main .lxshop-sidebar-logo img{max-height:56px;object-fit:contain}
#main .lxshop-account-navigation{display:grid;gap:6px}
#main .lxshop-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;font-weight:600;transition:.25s}
#main .lxshop-nav-item:hover{background:var(--bd);transform:translateX(-4px)}
#main .lxshop-nav-item.current{background:var(--g);color:#fff;box-shadow:var(--sh)}
#main .lxshop-sheet-item-icon{width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--p) 14%,transparent);display:grid;place-items:center}
#main .lxshop-nav-item.current .lxshop-sheet-item-icon{background:#ffffff30}
#main .lxshop-sheet-item-icon img{width:20px;height:20px}
[data-theme=dark] #main .lxshop-sheet-item-icon img{filter:invert(1)}
#main .lxshop-nav-item.current img{filter:brightness(0) invert(1)}
#main .account-content{background:var(--card);border:1px solid var(--bd);border-radius:26px;padding:24px;min-width:0;overflow-x:auto}
#main .pnl_title{margin:0 0 18px;font-size:22px;font-weight:900}
#main .mB_40{margin-bottom:24px}
#main .account-content table{min-width:520px}
@media(max-width:991px){#main .order-overview-grid{grid-template-columns:1fr 1fr}
#main .account-container{grid-template-columns:1fr}
#main .account-sidebar{position:static}
#main .lxshop-trigger{display:flex;width:100%;margin-bottom:12px}
#main .lxshop-overlay{display:block;position:fixed;inset:0;background:#0008;z-index:998;opacity:0;visibility:hidden;transition:.3s}
#main .lxshop-sheet-navigation{position:fixed;inset:auto 0 0;z-index:999;max-height:82vh;overflow:auto;border-radius:26px 26px 0 0;transform:translateY(105%);transition:.35s}
#main .lxshop-overlay:is(.active,.open,.show,.is-active,.is-open){opacity:1;visibility:visible}
#main .lxshop-sheet-navigation:is(.active,.open,.show,.is-active,.is-open){transform:none}
#main .lxshop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:800}
#main .lxshop-close{width:36px;height:36px;padding:0}
}
@media(max-width:700px){#main .modern-cart-table thead{display:none}
#main .modern-cart-table,#main .modern-cart-table tbody{display:block}
#main .modern-cart-table tr.cart_item{display:grid;grid-template-columns:90px 1fr auto;grid-template-areas:"th nm nm" "th pr rm" "th qt qt";gap:6px 10px;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:10px;margin-bottom:12px}
#main .modern-cart-table td{display:block;border:0!important;padding:0;border-radius:0!important}
#main .modern-cart-table .product-thumbnail{grid-area:th}
#main .modern-cart-table .product-name{grid-area:nm}
#main .modern-cart-table .product-price{grid-area:pr;align-self:center}
#main .modern-cart-table .product-quantity{grid-area:qt}
#main .modern-cart-table .product-remove{grid-area:rm;align-self:center}
#main .product-thumbnail img{width:90px;height:112px}
#main .order-overview-grid,#main .trust-badges{grid-template-columns:1fr}
#main .cart-actions-bar{flex-direction:column;align-items:stretch;text-align:center}
#main .shadow-around,#main .account-section,#main .section-card,#main .cart_totals{padding:16px;border-radius:20px}
#main .special-heading-title,#main .block.static-page .title{font-size:22px}
}








#main .swiper-slide-visible button {
  /* استایل عمومی دکمه را خنثی کن */
  border: initial;
  border-radius: initial;
  padding: initial;
  background: initial;
  color: initial;
  font: initial;
  box-shadow: initial;
  transition: initial;
}