* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  max-width: 100vw;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  direction: rtl;
}
body,
input,
button,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "tanha";
}

@font-face {
  font-family: "tanha";
  src:
    url("../tanha-font-v0.9/Tanha.woff2") format("woff2"),
    url("../tanha-font-v0.9/Tanha.woff") format("woff"),
    url("../tanha-font-v0.9/Tanha.eot") format("eot"),
    url("../tanha-font-v0.9/Tanha.ttf") format("truetype");
}

:root {
  --main-color: #ff8a3d;
  --main-color2: #ffb27a;
  --glass: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.25);
  --text:#1c1c1c;
  --text-light:#3b3b3b;
  --shadow: 0 30px 80px rgba(0,0,0,.18);
  --shadow-soft: 0 15px 40px rgba(0,0,0,.10);
  --blur: blur(22px);
  --accent-gold: #ffd166;
  --accent-dark: #2b2b2b;
  --glass-orange: rgba(255, 138, 61, 0.15);
  --glass-strong: rgba(255,255,255,.18);
  --glass-soft: rgba(255,255,255,.08);

  --orange-glow: rgba(255,138,61,.35);

  --white-glow: rgba(255,255,255,.4);
}



body {
  background: radial-gradient(
    circle at top right,
    #ffcfac 0%,
    #fff6ef 35%,
    #ffffff 100%
  );
}

/* هدر اصلی */

.header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 138, 61, 0.15);
}

/* قسمت بالا */

.head1 {
  position: relative;
  z-index: 1000 !important;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;

  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.15);
}

/* لوگو */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo i {
  font-size: 28px;
  color: var(--main-color);
  text-shadow: 0 0 15px rgba(255, 138, 61, 0.4);
}

.logo h2 {
  color: #ff7b1d;
  font-weight: 900;
  letter-spacing: 1px;
}

/* سرچ */

.search-basket {
  position: relative;
  z-index: 99999 !important;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  z-index: 99999 !important;
}

.search-basket input {
  width: 340px;
  padding: 12px 50px 12px 15px;
z-index: 1000 !important;
  border: none;
  outline: none;

  border-radius: 50px;

  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);

  box-shadow: 0 8px 25px rgba(255, 138, 61, 0.12);

  transition: 0.35s;
}

.search-basket input:focus {
  width: 390px;

  box-shadow: 0 10px 35px rgba(255, 138, 61, 0.25);
}

.search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--main-color);
}

/* منو */

.head2 {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px;
}

.head2 a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff7b1d;
  padding: 12px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: 0.35s;
}

.head2 a:hover {
  transform: translateY(-4px);

  background: linear-gradient(135deg, #ff8a3d, #ffb27a);

  color: white;

  box-shadow: 0 10px 30px rgba(255, 138, 61, 0.35);
}

.head2 a i {
  font-size: 15px;
}

/*===Category===*/
.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 50px 20px;
}

.category-box {
  position: relative;

  width: 190px;
  height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;

  border-radius: 32px;

  background: rgba(255, 255, 255, 0.28);

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

  border: 1px solid rgba(255, 255, 255, 0.45);

  overflow: hidden;
  cursor: pointer;

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.05),
    0 2px 12px rgba(255, 138, 61, 0.08);

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* افکت شیشه */
.category-box::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.15) 35%,
    transparent 65%
  );

  pointer-events: none;
}

/* نور محو */
.category-box::after {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  background: radial-gradient(
    circle,
    rgba(255, 138, 61, 0.15),
    transparent 70%
  );

  bottom: -90px;
  right: -90px;

  pointer-events: none;
}

.category-box:hover {
  transform: translateY(-10px);

  background: rgba(255, 255, 255, 0.38);

  border-color: rgba(255, 138, 61, 0.3);

  box-shadow:
    0 25px 60px rgba(255, 138, 61, 0.18),
    0 10px 25px rgba(0, 0, 0, 0.08);
}

.category-box img {
  width: 100px;
  height: 100px;

  object-fit: contain;

  z-index: 2;

  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.08));

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-box:hover img {
  transform: scale(1.18);

  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.15));
}

.category-box h2 {
  z-index: 2;

  margin: 0;

  font-size: 1.05rem;
  font-weight: 700;

  color: #444;

  transition:
    color 0.4s ease,
    letter-spacing 0.4s ease;
}

.category-box:hover h2 {
  color: var(--main-color);
  letter-spacing: 0.5px;
}

/* موبایل */
@media (max-width: 768px) {
  .category {
    gap: 18px;
  }

  .category-box {
    width: 160px;
    height: 190px;
  }

  .category-box img {
    width: 85px;
    height: 85px;
  }

  .category-box h2 {
    font-size: 0.95rem;
  }

  .slider {
    z-index: 1 !important;
  }
}

/*===slider===*/
.slider {
  position: relative;
  z-index: 1;

  width: min(1200px, 95%);
  height: clamp(250px, 35vw, 500px);
  margin: 30px auto;

  overflow: hidden;
  border-radius: 28px;
  background: #f5f5f5;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.slider-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.slide img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  user-select: none;
  pointer-events: none;
}

/* افکت محو ملایم روی لبه‌ها */

.slide::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.08),
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.08)
  );
}

/* دکمه‌ها */

.slider-btn {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;
  height: 48px;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  z-index: 20;

  color: white;

  background: rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(12px);

  transition: 0.25s ease;
}

.slider-btn:hover {
  background: rgba(0, 0, 0, 0.3);

  transform: translateY(-50%) scale(1.05);
}

.prev {
  right: 15px;
}

.next {
  left: 15px;
}

/* تایمر پایین */
.progress {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: rgba(255, 255, 255, 0.15);

  overflow: hidden;

  z-index: 50;
}

.progress-fill {
  width: 100%;
  height: 100%;

  background: linear-gradient(90deg, var(--main-color), var(--main-color2));

  transform-origin: right;
  transform: scaleX(0);
}
























/* ==================================================
   LUXURY FEATURED PRODUCTS
================================================== */

.featured-new{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 5%;
    overflow: hidden;
}

.featured-new-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}

/* ================= TEXT SIDE ================= */

.featured-left{
    width: 600px;
    flex-shrink: 0;

    text-align: right;
}

.featured-left .tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    padding: 0 20px;

    border-radius: 999px;

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

    backdrop-filter: blur(20px);

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

    letter-spacing: 2px;

    color: var(--main-color);

    margin-bottom: 18px;
}

.featured-left h2{
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.4;

    color: var(--text-color);

    margin-bottom: 10px;
}

.featured-left p{
    font-size: .95rem;
    line-height: 2;

    color: #777;
}

.featured-line{
    width: 80px;
    height: 4px;

    border-radius: 50px;

    background: var(--main-color);

    margin-top: 20px;

    margin-right: 0;
    margin-left: auto;
}

/* ================= PRODUCT SIDE ================= */

.featured-right{
    width: 520px;
    min-height: 650px;

    flex-shrink: 0;

    position: relative;
}

/* ================= SLIDER ================= */

.products-stage{
    position: relative;

    width: 520px;
    height: 650px;

    margin: 0 auto;

    perspective: 4500px;
    transform-style: preserve-3d;

    overflow: hidden;

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

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

.products-stage .product{
    position: absolute;

    top: 50%;
    left: 50%;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -50%)
        rotateY(-90deg)
        translateZ(-600px);

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition: none;
}

/* ================= ACTIVE ================= */

.products-stage .product.active{
    visibility: visible;
    z-index: 30;

    animation:
        luxuryFlipIn 1.2s cubic-bezier(.22,1,.36,1) forwards,
        floatingLuxury 6s ease-in-out infinite 1.3s;
}

/* ================= PREV ================= */

.products-stage .product.prev{
    visibility: visible;
    z-index: 20;

    animation:
        luxuryFlipOut 1s cubic-bezier(.22,1,.36,1) forwards;
}

/* ================= BUTTONS ================= */

.scroll-btn{
    position: absolute;

    top: 50%;

    width: 58px;
    height: 58px;

    border: none;
    outline: none;

    border-radius: 50%;

    cursor: pointer;

    z-index: 999;

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

    backdrop-filter: blur(30px);

    box-shadow: 0 15px 40px rgba(0,0,0,.08);

    transition: .4s;
}

.scroll-btn i{
    font-size: 20px;
}

.scroll-btn:hover{
    background: var(--main-color);
    color: #fff;
}

.scroll-btn.left{
    left: 10px;
}

.scroll-btn.right{
    right: 10px;
}

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

.products-stage::before{
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 70%
        );

    pointer-events: none;
}

.products-stage::after{
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: 50%;
    bottom: -180px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.15),
            transparent 70%
        );

    filter: blur(40px);

    pointer-events: none;
}

/* ================= ANIMATIONS ================= */

@keyframes luxuryFlipIn{

    0%{
        opacity: 0;
        filter: blur(14px);

        transform:
            translate(-50%,-50%)
            rotateY(-100deg)
            rotateX(12deg)
            translateZ(-700px)
            scale(.7);
    }

    45%{
        opacity: .7;

        transform:
            translate(-50%,-50%)
            rotateY(15deg)
            rotateX(-4deg)
            translateZ(100px)
            scale(1.03);
    }

    100%{
        opacity: 1;
        filter: blur(0);

        transform:
            translate(-50%,-50%)
            rotateY(0deg)
            rotateX(0deg)
            translateZ(0)
            scale(1);
    }
}

@keyframes luxuryFlipOut{

    0%{
        opacity: 1;

        transform:
            translate(-50%,-50%)
            rotateY(0deg)
            scale(1);
    }

    100%{
        opacity: 0;
        filter: blur(10px);

        transform:
            translate(-50%,-50%)
            rotateY(95deg)
            translateZ(-600px)
            scale(.75);
    }
}

@keyframes floatingLuxury{

    0%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-10px);
    }

    100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }
}


/* ================= VIEW ALL PRODUCTS BUTTON ================= */

.view-all-products{

    margin-top: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;


    height: 55px;

    padding: 0 35px;


    background: var(--main-color);

    color: #fff;


    border-radius: 50px;


    text-decoration: none;

    font-size: 15px;

    font-weight: 700;


    transition: .4s;


    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

}



.view-all-products span{

    font-size: 22px;

    transition: .4s;

}



.view-all-products:hover{


    transform: translateY(-5px);


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


}



.view-all-products:hover span{

    transform: translateX(-8px);

}




















/*======*/
.section-title{
    text-align:center;
    margin-bottom:90px;
}

.section-title span{
    display:block;

    font-size:.85rem;
    letter-spacing:6px;
    text-transform:uppercase;

    color:var(--main-color);

    margin-bottom:12px;
}

.section-title h1{
    font-size:clamp(2.2rem,4vw,4.5rem);
    font-weight:900;

    color:#2f2118;

    position:relative;

    display:inline-block;
}

.section-title h1::before,
.section-title h1::after{
    content:"";

    position:absolute;

    top:50%;

    width:120px;
    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        var(--main-color)
    );
}

.section-title h1::before{
    right:100%;
    margin-right:25px;
}

.section-title h1::after{
    left:100%;
    margin-left:25px;

    transform:scaleX(-1);
}
/* ==================================
   PRODUCTS GRID
================================== */

.products-grid {
  display: flex;

  gap: 28px;

  overflow-x: auto;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  padding: 15px 5px 25px;

  scrollbar-width: none;
}

.products-grid::-webkit-scrollbar {
  display: none;
}

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

.product {
  flex: none;

  width: 320px;
  height: 500px;

  position: relative;

  overflow: hidden;

  border-radius: 32px;

  scroll-snap-align: start;

  cursor: pointer;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.15)
  );

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

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

  box-shadow: 0 20px 50px rgba(255, 138, 61, 0.12);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

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

.product-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}

.product-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition: transform .45s cubic-bezier(.22,.61,.36,1);

    will-change: transform;
}

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

.product::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,
    rgba(60, 30, 10, 0.65),
    rgba(60, 30, 10, 0.25),
    transparent 60%
  );

  pointer-events: none;
}

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

.product-content {
  position: absolute;

  right: 14px;
  left: 14px;
  bottom: 14px;

  z-index: 5;

  padding: 14px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.14);

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

  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  box-shadow: 0 8px 20px rgba(255, 138, 61, 0.08) !important;

  font-family: "tanha";
}

.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  padding: 7px 13px;
  margin-bottom: 10px;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    rgba(255, 138, 61, 0.25),
    rgba(255, 178, 122, 0.15)
  );

  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.price-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.price-badge path {
  fill: currentColor;
}
.product-content h3 {
  color: white;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.5;
}

.product-content p {
  color: rgba(255, 255, 255, 0.92);

  font-size: 0.82rem;

  line-height: 1.7;

  margin-bottom: 12px;
}

.btn-product {
  width: 100%;

  height: 45px;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  color: white;

  font-size: 0.88rem;

  font-weight: 800;

  background: linear-gradient(135deg, var(--main-color), var(--main-color2));

  transition: 0.3s;
}

.btn-product:hover {
  transform: translateY(-2px);
}

/* ==================================
   HOVER
================================== */

.product:hover {
  transform: translateY(-10px);

  box-shadow: 0 35px 80px rgba(255, 138, 61, 0.2);
}

.product:hover .product-image img {
    transform: scale(1.04);
}
/* ==================================
   DISCOUNT SHOWCASE
================================== */

.discount-showcase {
  width: min(1400px, 95%);
  margin: 120px auto;

  display: grid;
  grid-template-columns: 340px 1fr;

  gap: 35px;
}

/* ==================================
   BRAND SIDE
================================== */

.brand-side {
  position: relative;

  overflow: hidden;

  padding: 40px;

  border-radius: 40px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.15)
  );

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

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

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  box-shadow: 0 20px 60px rgba(255, 138, 61, 0.15);
}

.brand-glow {
  position: absolute;

  width: 250px;
  height: 250px;

  top: -120px;
  right: -120px;

  background: radial-gradient(
    circle,
    rgba(255, 138, 61, 0.35),
    transparent 70%
  );

  filter: blur(40px);
}

.brand-side img {
  width: 100px;

  margin-bottom: 20px;

  z-index: 2;
}

.brand-name {
  font-size: 1rem;

  font-weight: 900;

  color: var(--main-color);

  letter-spacing: 4px;

  margin-bottom: 15px;

  z-index: 2;
}

.brand-side h2 {
  font-size: 2rem;

  color: #3a2b22;

  margin-bottom: 15px;

  z-index: 2;
}

.brand-side p {
  color: #6b5c52;

  line-height: 2;

  z-index: 2;
}

.discount-badge {
  margin-top: 25px;

  padding: 12px 28px;

  border-radius: 50px;

  color: white;

  font-weight: 900;

  background: linear-gradient(135deg, var(--main-color), var(--main-color2));

  box-shadow: 0 10px 30px rgba(255, 138, 61, 0.3);
  z-index: 2;
}
/* ==================================
   SLIDER
================================== */

.discount-slider{
    position:relative;
    overflow:hidden;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.45),
        rgba(255,255,255,.15)
    );

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

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

    padding:25px;

    width:100%;
}

.discount-slider::-webkit-scrollbar{
    display:none;
}

/* ==================================
   TRACK
================================== */

.discount-track{

    display:flex;

    gap:25px;

    width:max-content;

    will-change:transform;

    direction:ltr;
}

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

.product{

    flex:0 0 320px;

    direction:rtl;
}

/* ==================================
   EDGE FADE
================================== */

.discount-slider::before,
.discount-slider::after{

    content:"";

    position:absolute;

    top:0;

    width:120px;
    height:100%;

    z-index:20;

    pointer-events:none;
}

.discount-slider::before{

    right:0;

    background:linear-gradient(
        to left,
        #f6e9df,
        transparent
    );
}

.discount-slider::after{

    left:0;

    background:linear-gradient(
        to right,
        #f6e9df,
        transparent
    );
}
/* ==================================
   CARD
================================== */

.discount-card {
  width: 300px;
  height: 420px;

  flex: none;

  position: relative;

  overflow: hidden;

  border-radius: 30px;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 20px 50px rgba(255, 138, 61, 0.15);

  transition: 0.4s;
}

.discount-card:hover {
  transform: translateY(-10px);
}

.discount-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.8s;
}

.discount-card:hover img {
  transform: scale(1.08);
}

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

.discount-info {
  position: absolute;

  right: 15px;
  left: 15px;
  bottom: 15px;

  padding: 15px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.14);

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

  border: 1px solid rgba(255, 255, 255, 0.18);
}

.discount-info h3 {
  color: white;

  font-size: 1.1rem;

  margin-bottom: 8px;

  font-weight: 800;
}

.discount-info span {
  color: white;

  font-weight: 900;
}











































/* =========================
   PRICE BOX
========================= */

.price-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 12px;

    width: 100%;

    flex-wrap: nowrap !important;
}


/* =========================
   قیمت فعلی
========================= */

.price-box .new-price {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: auto !important;
    flex: 0 0 auto !important;

    white-space: nowrap !important;

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

    color: #fff !important;

    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #fff !important;

    letter-spacing: -0.4px;

    gap: 6px;
}


/* =========================
   آیکون تومان
========================= */

.price-box .new-price svg {
    width: 17px;
    height: 17px;

    color: #fff !important;

    opacity: .9;

    transform: translateY(1px);

    flex-shrink: 0;
}


/* =========================
   قیمت اصلی خط‌خورده
========================= */

.price-box .old-price {
    display: inline-block !important;

    width: auto !important;
    flex: 0 0 auto !important;

    white-space: nowrap !important;

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

    text-decoration: line-through !important;

    opacity: .65;
}



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

.product-image {
    position: relative;
}


/* =========================
   DISCOUNT BADGE
   روی عکس - بالا سمت چپ
========================= */
.sale-ribbon {
    position: absolute !important;

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

    right: auto !important;
    bottom: auto !important;

    z-index: 30 !important;

    display: inline-flex !important;

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

    /* کمی بزرگ‌تر شدن فضای داخلی */
    padding: 9px 15px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    color: #fff;

    background: linear-gradient(
        135deg,
        #ff4d4d,
        var(--main-color)
    );

    /* کمی کمتر از قبل */
    border-radius: 13px;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(255, 77, 77, .22);

    backdrop-filter: blur(10px);

    pointer-events: none;
}

/* =========================
   TOMAN ICON (FIXED ALIGNMENT)
========================= */

.new-price svg{
    width:18px;
    height:18px;
    color: #fff;

    opacity:.9;

    transform: translateY(2px);

    flex-shrink:0;
}




















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

.veil-showcase{
    width:92%;
    max-width:1250px;
    margin:90px auto;
    position:relative;
}

/* background glow */
.veil-showcase::before{
    content:"";
    position:absolute;
    inset:-140px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,122,47,.25), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,191,138,.18), transparent 50%);
    filter: blur(70px);
    z-index:-1;
}

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

.veil-grid{
    display:grid;
    grid-template-columns: 2.3fr 1fr 1fr;
    grid-template-rows: 270px 270px;
    gap:20px;

    animation: fadeUp .9s cubic-bezier(.2,.8,.2,1);
}

@keyframes fadeUp{
    from{opacity:0; transform:translateY(30px);}
    to{opacity:1; transform:translateY(0);}
}

/* ==========================
   BASE CARDS
========================== */

.veil-hero-card,
.veil-fabric-card,
.veil-style-card{
    position:relative;
    overflow:hidden;

    border-radius:30px;

    background:var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);

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

    box-shadow: var(--shadow-soft);

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

    transform: translateZ(0);
    backface-visibility: hidden;
}

/* hover فقط lift (بدون لرزش) */
.veil-hero-card:hover,
.veil-fabric-card:hover,
.veil-style-card:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

/* soft shine layer */
.veil-hero-card::after,
.veil-fabric-card::after,
.veil-style-card::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,.10),
        transparent 40%,
        rgba(255,255,255,.05)
    );
    z-index:1;
    pointer-events:none;
}

/* ==========================
   GRID POSITION
========================== */

.veil-hero-card{grid-column:1/2; grid-row:1/3;}
.veil-fabric-card:nth-child(2){grid-column:2/3; grid-row:1/2;}
.veil-fabric-card:nth-child(3){grid-column:2/3; grid-row:2/3;}
.veil-style-card:nth-child(4){grid-column:3/4; grid-row:1/2;}
.veil-style-card:nth-child(5){grid-column:3/4; grid-row:2/3;}

/* ==========================
   IMAGES (NO JITTER ZOOM)
========================== */

.veil-hero-card img,
.veil-fabric-card img,
.veil-style-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    transform: scale(1);
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

/* zoom only image */
.veil-hero-card:hover img,
.veil-fabric-card:hover img,
.veil-style-card:hover img{
    transform: scale(1.12);
}

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

.veil-overlay{
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at right,
        rgba(0,0,0,.65),
        rgba(0,0,0,.25),
        transparent 75%
    );
    z-index:1;
}

/* ==========================
   HERO CONTENT (FIXED PREMIUM UI)
========================== */

.veil-content{
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    z-index:3;

    width:260px;

    padding:26px;

    border-radius:26px;

    background: rgba(255,255,255,.10);
    backdrop-filter: blur(22px);

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.15);

    display:flex;
    flex-direction:column;
    gap:8px;

    animation: floatIn .9s cubic-bezier(.2,.8,.2,1);
}

@keyframes floatIn{
    from{opacity:0; transform:translateY(-50%) translateX(20px);}
    to{opacity:1; transform:translateY(-50%) translateX(0);}
}

/* badge */
.veil-content span{
    display:inline-block;

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

    color:#fff;

    background: rgba(255,122,47,.25);
    border:1px solid rgba(255,122,47,.35);

    padding:6px 10px;
    border-radius:999px;

    width:fit-content;
}

/* title */
.veil-content h2{
    color:#fff;
    font-size:32px;
    line-height:1.2;
    margin:4px 0;
}

/* description */
.veil-content p{
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.6;
}

/* CTA button */
.veil-content a{
    margin-top:10px;

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

    padding:11px 16px;

    border-radius:14px;

    background:linear-gradient(135deg, var(--main-color), var(--main-color2));

    color:#fff;
    text-decoration:none;

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

    box-shadow: 0 15px 35px rgba(255,122,47,.25);

    transition: all .35s ease;
}

.veil-content a:hover{
    transform:translateY(-2px);
    box-shadow: 0 20px 45px rgba(255,122,47,.35);
}

/* ==========================
   FABRIC + STYLE CONTENT
========================== */

.veil-card-content,
.veil-style-content{
    position:absolute;
    bottom:16px;
    right:16px;
    z-index:3;

    padding:11px 15px;

    border-radius:18px;

    background: rgba(255,255,255,.14);
    backdrop-filter: blur(18px);

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

    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.veil-card-content span,
.veil-style-content span{
    color:var(--main-color2);
    font-size:12px;
}

.veil-card-content h3,
.veil-style-content h4{
    color:#fff;
    font-size:16px;
    margin-top:4px;
}

/* ==========================
   BENEFITS
========================== */

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

.veil-benefit-card{
    position:relative;

    padding:60px 20px 26px;
    text-align:center;

    border-radius:28px;

    background: rgba(255,255,255,.12);
    backdrop-filter: blur(22px);

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

    box-shadow: var(--shadow-soft);

    transition:.5s ease;
}

.veil-benefit-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow);
}

.veil-benefit-card i{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);

    width:66px;
    height:66px;

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

    font-size:26px;

    color:#fff;

    background:linear-gradient(135deg, var(--main-color), var(--main-color2));

    border-radius:50%;
}

















































































/* =========================
   SINGLE PAGE LUXURY UI
========================= */

.single_page{
  padding: 70px;
}

/* =========================
   LAYOUT
========================= */

.sp_wrap{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:stretch;
}

.sp_info,
.sp_gallery,
.reviews{
  height:100%;
}

/* =========================
   CORE GLASS (LIGHT LUXURY)
========================= */

.sp_gallery,
.sp_info,
.reviews{
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 20px 50px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
  position:relative;
  overflow:hidden;
}

/* light reflection */
.sp_gallery::before,
.sp_info::before,
.reviews::before{
  content:"";
  position:absolute;
  inset:-120px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,138,61,.08),
    transparent
  );
  transform: rotate(12deg);
  pointer-events:none;
}

/* =========================
   GALLERY
========================= */

.sp_gallery{
  padding:18px;
}

.big_slider{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:20px;
    aspect-ratio:1/1;
    min-height:600px;
}

.gallery_track{
    display:flex;
    height:100%;
    transition:.5s;
}

.gallery_track img{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* NAV */
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:48px;
    height:48px;

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

    border:none;
    border-radius:50%;

    background:#fff;

    cursor:pointer;

    z-index:9999;

    color:#222;

    box-shadow:0 5px 20px rgba(0,0,0,.2);
}

.nav i{
    font-size:20px;
    color:#222;
}

.nav:hover{
  transform:translateY(-50%) scale(1.12);
  background:#fff;
}

.prev{
    right:14px;
}

.next{
    left:14px;
}

/* THUMBS */
.thumb_grid{
    display:flex;
    gap:10px;
    margin-top:15px;
    overflow-x:auto;
    padding-bottom:5px;
}

.thumb_grid::-webkit-scrollbar{
    height:4px;
}

.thumb_grid::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:50px;
}

.thumb_grid img{
    width:90px;
    min-width:90px;
    height:90px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    opacity:.5;
    transition:.3s;
    border:2px solid transparent;
}

.thumb_grid img.active{
    opacity:1;
    border-color:var(--main-color);
}

.thumb_grid img:hover{
    opacity:1;
}

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

.sp_info{
  padding:34px;
}

.sp_info h1{
  font-size:26px;
  margin:0 0 8px;
  letter-spacing:-0.3px;
}

.sub{
  color:#666;
  margin-bottom:18px;
  font-size:14px;
}

/* PRICE */
.price{
  font-size:32px;
  font-weight:700;
  margin:18px 0;
  color:var(--main-color);
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================
   COLORS
========================= */

.colors{
  display:flex;
  gap:12px;
  margin-top:12px;
}

.c{
  width:30px;
  height:30px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 15px rgba(0,0,0,.08);
  transition:.25s;
}

.c:hover{
  transform:scale(1.2);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.c1{background:var(--main-color)}
.c2{background:#111}
.c3{background:#c9a27d}

/* =========================
   BUY BUTTON
========================= */

.buy{
  width:100%;
  padding:15px;
  margin-top:18px;
  border:none;
  border-radius:16px;
  background:var(--main-color);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
  box-shadow: 0 12px 30px rgba(255,138,61,.25);
}

.buy:hover{
  transform:translateY(-2px);
  box-shadow: 0 18px 45px rgba(255,138,61,.35);
}

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

.info_btn{
  width:100%;
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
  cursor:pointer;
  font-weight:500;
  transition:.25s;
}

.info_btn:hover{
  background:#fff;
  transform:translateY(-2px);
}

/* =========================
   STATUS SWITCH (cart / stock)
========================= */

.status_box{
  margin-top:12px;
  position:relative;
  height:42px;
  overflow:hidden;
}

.status_item{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.06);
  opacity:0;
  transform: translateY(10px);
  transition:.5s ease;
}

.status_item.active{
  opacity:1;
  transform: translateY(0);
}

.status_item.warn{
  background: rgba(255,138,61,.12);
  color: var(--main-color);
  border-color: rgba(255,138,61,.25);
}

/* =========================
   REVIEWS
========================= */

.reviews{
  margin-top:40px;
  padding:32px;
}

.review{
  padding:14px;
  margin-top:10px;
  border-radius:14px;
  background: rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  transition:.25s;
}

.review:hover{
  transform:translateX(-5px);
  background:#fff;
}

/* =========================
   MODAL
========================= */
.modal{
    position:fixed;
    inset:0;

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

    z-index:999999;

    /* start hidden */
    opacity:0;
    visibility:hidden;

    background: rgba(255,255,255,.25);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
        opacity .55s cubic-bezier(.16,1,.3,1),
        backdrop-filter .6s ease,
        visibility .55s;
}

/* ACTIVE STATE */
.modal.active{
    opacity:1;
    visibility:visible;

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

/* soft light atmosphere */
.modal::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 50% 30%,
        rgba(255,255,255,.7),
        rgba(255,255,255,.25),
        rgba(0,0,0,.05));

    opacity:0;
    transition:.6s ease;
}

.modal.active::before{
    opacity:1;
}

/* =========================
   MODAL CARD (GLASS SHEET)
========================= */

.modal_box{
    position:relative;

    width:640px;
    max-width:92%;

    padding:36px;

    border-radius:32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.65)
        );

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

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

    box-shadow:
        0 40px 120px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.9);

    overflow:hidden;

    /* initial state (hidden) */
    transform:
        translateY(45px)
        scale(.88)
        rotateX(14deg);

    opacity:0;

    transition:
        transform .65s cubic-bezier(.16,1,.3,1),
        opacity .55s ease;
}

/* OPEN */
.modal.active .modal_box{
    transform:
        translateY(0)
        scale(1)
        rotateX(0);

    opacity:1;
}

/* CLOSE (smooth sink) */
.modal.closing .modal_box{
    transform:
        translateY(50px)
        scale(.84)
        rotateX(-12deg);

    opacity:0;
}

/* subtle shine animation */
.modal_box::before{
    content:"";
    position:absolute;
    inset:-120px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,138,61,.15),
        rgba(255,255,255,.2),
        transparent
    );

    transform: rotate(10deg) translateX(-60%);

    animation: shineMove 7s linear infinite;

    pointer-events:none;
}

@keyframes shineMove{
    0%{ transform: translateX(-70%) rotate(10deg); }
    100%{ transform: translateX(70%) rotate(10deg); }
}

/* =========================
   CLOSE BUTTON (APPLE STYLE IMPROVED)
========================= */

.modal_close{
    position:absolute;

    top:18px;
    left:18px;

    width:48px;
    height:48px;

    border:none;
    cursor:pointer;

    border-radius:16px;

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

    backdrop-filter: blur(18px);

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

    box-shadow:
        0 15px 40px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .45s ease;
}

/* X lines */
.modal_close span{
    position:absolute;
    left:50%;
    top:50%;

    width:18px;
    height:2px;

    background:#444;
    border-radius:20px;

    transition:.35s;
}

.modal_close span:first-child{
    transform:translate(-50%,-50%) rotate(45deg);
}

.modal_close span:last-child{
    transform:translate(-50%,-50%) rotate(-45deg);
}

/* hover luxury */
.modal_close:hover{
    transform: scale(1.12) rotate(180deg);

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 25px 60px rgba(255,138,61,.25);
}

.modal_close:hover span{
    background:#fff;
}

/* =========================
   AI PANEL (FINAL VERSION)
========================= */

.ai_panel{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  background: rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition:.25s;
  position:relative;
  overflow:hidden;
}

.ai_panel::before{
  content:"";
  position:absolute;
  inset:-100px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,138,61,.18),
    transparent
  );
  transform: translateX(-60%);
  animation: aiMove 3s infinite linear;
}

@keyframes aiMove{
  0%{ transform:translateX(-60%) rotate(10deg); }
  100%{ transform:translateX(60%) rotate(10deg); }
}

.ai_panel:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.ai_icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background: linear-gradient(135deg, #111, #333);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.ai_pulse{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--main-color);
  box-shadow: 0 0 10px var(--main-color);
  animation: pulse 1.5s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:.6; }
  100%{ transform:scale(1); opacity:1; }
}

.ai_text{
  flex:1;
}

.ai_title{
  font-size:14px;
  font-weight:700;
  color:#111;
}

.ai_sub{
  font-size:12px;
  color:#666;
  margin-top:2px;
}

.ai_arrow{
  font-size:18px;
  color:#999;
  transition:.25s;
}

.ai_panel:hover .ai_arrow{
  transform: translateX(4px);
  color:#111;
}


























/* =========================
   REVIEWS SYSTEM (ULTRA MODERN)
========================= */

.reviews{
  padding:32px;
  position:relative;
}

/* =========================
   AI SUMMARY BOX
========================= */

.ai_review_box{
  margin-top:12px;
  padding:14px;
  border-radius:16px;

  background: rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  display:flex;
  gap:10px;
  align-items:flex-start;

  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.ai_badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:10px;
  background: linear-gradient(135deg,#111,#333);
  color:#fff;
  white-space:nowrap;
}

.ai_review_text{
  font-size:13px;
  color:#333;
  line-height:1.5;
}

/* =========================
   REVIEW CAROUSEL
========================= */

.review_carousel{
  margin-top:18px;
  position:relative;
  display:flex;
  align-items:center;
}

/* TRACK */
.review_track{
  display:flex;
  gap:16px;
  overflow:hidden;
  width:100%;
  scroll-behavior:smooth;
}

/* CARD */
.review_card{
  min-width:280px;
  padding:16px;
  border-radius:18px;

  background: rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 12px 30px rgba(0,0,0,.06);

  transition:.25s;
  flex-shrink:0;
}

.review_card:hover{
  transform: translateY(-5px);
  background:#fff;
}

/* USER INFO */
.user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.user img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}

.name{
  font-weight:600;
  font-size:14px;
}

.stars{
  font-size:12px;
  color:#f5a623;
}

/* REVIEW TEXT */
.review_card p{
  font-size:13px;
  color:#444;
  margin:0 0 10px;
  line-height:1.6;
}

/* ACTIONS */
.actions{
  display:flex;
  gap:12px;
  font-size:12px;
  color:#666;
}

.actions span{
  cursor:pointer;
  transition:.2s;
}

.actions span:hover{
  transform:scale(1.15);
}

/* NAV BUTTONS */
.rev_btn{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  cursor:pointer;
  z-index:2;
  transition:.2s;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.rev_btn:hover{
  transform:scale(1.1);
}

.rev_btn.left{left:-10px}
.rev_btn.right{right:-10px}

/* =========================
   AI TRIGGER PANEL
========================= */

.ai_panel{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;

  display:flex;
  align-items:center;
  gap:12px;

  cursor:pointer;

  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition:.25s;
  position:relative;
  overflow:hidden;
}

/* subtle glow line */
.ai_panel::before{
  content:"";
  position:absolute;
  inset:-120px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,138,61,.18),
    transparent
  );
  transform: translateX(-60%);
  animation: aiSweep 3s infinite linear;
}

@keyframes aiSweep{
  0%{transform:translateX(-60%) rotate(10deg);}
  100%{transform:translateX(60%) rotate(10deg);}
}

.ai_panel:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* ICON */
.ai_icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background: linear-gradient(135deg,#111,#333);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.ai_pulse{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--main-color);
  box-shadow:0 0 10px var(--main-color);
  animation: pulse 1.5s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:.5}
  100%{transform:scale(1);opacity:1}
}

.ai_text{
  flex:1;
}

.ai_title{
  font-size:14px;
  font-weight:700;
  color:#111;
}

.ai_sub{
  font-size:12px;
  color:#666;
}

.ai_arrow{
  font-size:18px;
  color:#999;
  transition:.2s;
}

.ai_panel:hover .ai_arrow{
  transform:translateX(4px);
  color:#111;
}

/* =========================
   AI MODAL (CHAT STYLE)
========================= */

.ai_modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index:9999;
}

.ai_box{
  width:520px;
  max-width:92%;
  padding:18px;
  border-radius:18px;

  background: rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.06);

  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: pop .25s ease;
}

@keyframes pop{
  from{transform:scale(.95);opacity:0}
  to{transform:scale(1);opacity:1}
}

.ai_header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.ai_header button{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  opacity:.6;
  transition:.2s;
}

.ai_header button:hover{
  opacity:1;
  transform:scale(1.2);
}

.ai_content{
  font-size:14px;
  color:#333;
  line-height:1.8;
  min-height:120px;
  white-space:pre-wrap;
}

/* typing cursor */
.cursor::after{
  content:"|";
  animation: blink .8s infinite;
}

@keyframes blink{
  50%{opacity:0}
}



/* ===========================
   PREMIUM IMAGE VIEWER
=========================== */

.imageViewer{

    position:fixed;
    inset:0;

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

    background:
        radial-gradient(circle at center,
        rgba(35,35,35,.45),
        rgba(0,0,0,.96));

    backdrop-filter:blur(12px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:999999;

    overflow:hidden;

}

.imageViewer.active{

    opacity:1;
    visibility:visible;

}

.imageViewer img{

    max-width:88vw;
    max-height:88vh;

    object-fit:contain;

    border-radius:22px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 80px rgba(255,255,255,.06);

    transform:scale(.85);

    opacity:0;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        opacity .35s;

}

.imageViewer.active img{

    transform:scale(1);

    opacity:1;

}

/* دکمه بستن */

#closeViewer{

    position:absolute;

    top:28px;
    right:34px;

    width:54px;
    height:54px;

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

    border-radius:50%;

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

    backdrop-filter:blur(18px);

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

    user-select:none;

    z-index:5;

}

#closeViewer:hover{

    background:#fff;

    color:#111;

    transform:rotate(90deg) scale(1.08);

}

/* نور پشت عکس */

.imageViewer::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,138,61,.18),
        transparent 70%);

    filter:blur(70px);

    animation:viewerGlow 6s ease-in-out infinite alternate;

}

@keyframes viewerGlow{

    from{

        transform:translate(-80px,-40px) scale(1);

    }

    to{

        transform:translate(80px,40px) scale(1.2);

    }

}






































































































:root{
  --main:#ff8a3d;
  --text:#1f1a17;
  --muted:#6e5f55;
}

/* =========================
   ICON STYLE
========================= */

.icon{
    width:22px;
    height:22px;
    fill:currentColor;
    opacity:.8;
}

.icon.small{
    width:16px;
    height:16px;
}

.icon.mini{
    width:14px;
    height:14px;
}

/* =========================
   BLOG BOX
========================= */

.lux-blog{
    width:92%;
    margin:100px auto;
    padding:30px;

    border-radius:40px;

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

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

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

    position:relative;
    overflow:hidden;

    box-shadow:0 40px 100px rgba(0,0,0,.12);
}

/* moving light animation */
.lux-blog::before{
    content:"";
    position:absolute;
    inset:-50%;

    background:radial-gradient(circle at 30% 30%, rgba(255,138,61,.25), transparent 60%);

    animation:floatGlow 6s ease-in-out infinite alternate;
}

@keyframes floatGlow{
    from{ transform:translateY(-20px); }
    to{ transform:translateY(20px); }
}

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

.lux-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:25px;
    position:relative;
    z-index:2;
}

.lux-head h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:26px;
    color:var(--text);
    margin:0;
}

.lux-head p{
    font-size:13px;
    color:var(--muted);
}

.lux-head a{
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:var(--main);
    font-weight:700;
}

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

.lux-row{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
}

.lux-row::-webkit-scrollbar{
    display:none;
}

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

.lux-card{
    min-width:280px;
    border-radius:28px;
    overflow:hidden;

    background:rgba(255,255,255,.18);
    backdrop-filter:blur(25px);

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

    position:relative;

    transition:.4s ease;

    transform:translateY(0);
}

.lux-card:hover{
    transform:translateY(-12px) scale(1.03);
}

/* shine */
.lux-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-70%;
    width:50%;
    height:100%;

    background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
    transform:skewX(-20deg);
    transition:.7s;
}

.lux-card:hover::after{
    left:120%;
}

/* =========================
   IMAGE ANIMATION
========================= */

.lux-img{
    height:190px;
    overflow:hidden;
}

.lux-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}

.lux-card:hover img{
    transform:scale(1.1) rotate(1deg);
}

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

.lux-content{
    padding:16px;
}

.lux-content span{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:11px;
    letter-spacing:2px;
    color:var(--main);
    font-weight:800;
}

.lux-content h3{
    margin-top:8px;
    font-size:15px;
    color:var(--text);
}


























































































.brand-stats {
    position: relative;
    width: 94%;
    max-width: 1280px;
    margin: 110px auto;
    padding: 90px 65px;
    border-radius: 52px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        rgba(255,250,245,0.95),
        rgba(255,240,230,0.80)
    );

    box-shadow:
        0 60px 140px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);

    border: 1px solid rgba(255,255,255,0.35);
}

/* ===== BACKGROUND LIGHT LAYERS ===== */

.brand-stats::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,138,61,0.15), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.18), transparent 60%);

    filter: blur(40px);
    opacity: 0.9;
}

.brand-stats::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -280px;
    top: -280px;

    background: radial-gradient(circle, rgba(255,138,61,0.12), transparent 60%);
    filter: blur(120px);
    opacity: 0.6;
}

/* ===== SHOOTING STARS ===== */

.shooting-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.meteor {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(255,138,61,0.9),
        0 0 18px rgba(255,255,255,0.6);

    will-change: transform;
}

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

.stats-header {
    text-align: center;
    margin-bottom: 65px;
    position: relative;
    z-index: 2;
}

.stats-header span {
    font-size: 12px;
    padding: 10px 18px;
    border-radius: 999px;

    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.4);

    color: var(--main-color);
    letter-spacing: 1px;
}

.stats-header h2 {
    font-size: 44px;
    font-weight: 900;
    color: var(--text);
    margin-top: 20px;
}

.stats-header p {
    font-size: 15px;
    color: var(--text-light);
    max-width: 700px;
    margin: 15px auto 0;
    line-height: 1.9;
}

/* ===== GRID (NO SCROLL) ===== */

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;

    position: relative;
    z-index: 2;
}

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

.stat-card {
    flex: 1 1 calc(16.6% - 18px);
    min-width: 150px;
    max-width: 185px;

    padding: 24px 18px;
    border-radius: 24px;

    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.6);

    text-align: center;
    transition: 0.35s ease;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(255,138,61,0.4);
}

/* ICON */

.stat-card i {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 14px;

    border-radius: 18px;

    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.5);

    color: var(--main-color);
    font-size: 22px;
}

/* NUMBER */

.stat-card h3 {
    font-size: 36px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
}

/* TEXT */

.stat-card p {
    font-size: 13.5px;
    color: var(--text-light);
}




























































/* ======================================
   LUXURY FOOTER V2
====================================== */

.lux-footer{

    position:relative;

    width:92%;

    margin:140px auto 40px;

    padding:40px;

    border-radius:45px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.20),
        rgba(255,255,255,.08)
    );

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

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

    box-shadow:var(--shadow);
}

/* BG TEXT */

.footer-bg-text{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:180px;

    font-weight:900;

    opacity:.03;

    white-space:nowrap;

    pointer-events:none;
}

/* FEATURES */

.footer-features{

    display:grid;

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

    gap:18px;

    margin-bottom:50px;
}

.feature-box{

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    border-radius:24px;

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

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

.feature-box i{

    font-size:22px;

    color:var(--main-color);
}

.feature-box h4{

    margin-bottom:4px;
}

.feature-box span{

    color:var(--text-light);

    font-size:13px;
}

/* MAIN */

.footer-main{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1.4fr;

    gap:40px;

    margin-bottom:50px;
}

.footer-brand h2{

    font-size:42px;

    margin-bottom:15px;

    background:
    linear-gradient(
        90deg,
        var(--main-color),
        var(--main-color2)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.footer-brand p{

    line-height:2;

    color:var(--text-light);

    margin-bottom:25px;
}

/* SOCIAL */

.socials{

    display:flex;

    gap:12px;
}

.socials a{

    width:50px;
    height:50px;

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

    border-radius:18px;

    text-decoration:none;

    color:var(--main-color);

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

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

    transition:.3s;
}

.socials a:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 30px var(--orange-glow);
}

/* LINKS */

.footer-links h3,
.footer-trust h3{

    margin-bottom:18px;
}

.footer-links a{

    display:block;

    margin-bottom:12px;

    text-decoration:none;

    color:var(--text-light);

    transition:.3s;
}

.footer-links a:hover{

    color:var(--main-color);

    transform:translateX(-8px);
}

/* TRUST */

.trust-grid{

    display:grid;

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

    gap:12px;
}

.trust-card{

    padding:12px;

    text-align:center;

    border-radius:18px;

    text-decoration:none;

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

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

.trust-card img{

    width:60px;

    height:60px;

    object-fit:contain;

    display:block;

    margin:auto auto 10px;
}

.trust-card span{

    color:var(--text);

    font-size:13px;
}

/* NEWSLETTER */

.newsletter{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    padding:30px;

    border-radius:30px;

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

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

    margin-bottom:40px;
}

.newsletter p{

    color:var(--text-light);

    margin-top:8px;
}

.newsletter-box{

    display:flex;

    gap:10px;

    width:450px;
}

.newsletter-box input{

    flex:1;

    border:none;

    outline:none;

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

    padding:15px 18px;

    border-radius:16px;

    color:var(--text);
}

.newsletter-box button{

    border:none;

    cursor:pointer;

    padding:15px 24px;

    border-radius:16px;

    color:#fff;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        var(--main-color),
        var(--main-color2)
    );
}

/* BOTTOM */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:25px;

    border-top:
    1px solid rgba(255,255,255,.15);

    color:var(--text-light);

    font-size:14px;
}
/* CONTACT */

.footer-contact h3{
    margin-bottom:18px;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:18px;

    color:var(--text-light);

    line-height:1.9;
}

.contact-item i{
    color:var(--main-color);

    font-size:16px;

    margin-top:6px;

    min-width:18px;
}

.contact-item span{
    font-size:14px;
}



























































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

.cart-overlay{

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,138,61,.20),
        rgba(0,0,0,.72));

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .45s ease,
        visibility .45s ease;

    z-index:9998;

}

.cart-overlay.active{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

/*==========================
        PANEL
==========================*/

.cart-panel{

    position:fixed;

    top:16px;
    right:-400px;

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

    height:calc(100vh - 32px);

    display:flex;
    flex-direction:column;

    border-radius:24px 0 0 24px;

    background:var(--glass);

    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur);

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

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

    overflow:hidden;

    transition:right .55s cubic-bezier(.22,1,.36,1);

    z-index:9999;

}

.cart-panel.active{

    right:16px;

}


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

.cart-header{

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

    padding:16px 18px;

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

    backdrop-filter:blur(20px);

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

}


.cart-title{

    display:flex;
    align-items:center;
    gap:12px;

}

.cart-title i{

    width:50px;
    height:50px;

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

    border-radius:16px;

    color:#fff;

    font-size:20px;

    background:
        linear-gradient(
            145deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 10px 24px var(--orange-glow),
        inset 0 1px 0 rgba(255,255,255,.45);

}

.cart-title h2{

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

    color:var(--text);

    letter-spacing:.3px;

    margin-bottom:4px;

}

.cart-count-text{

    color:var(--text-light);

    font-size:12px;

    font-weight:500;

}

/*==========================
        CLOSE BUTTON
==========================*/

.close-cart{

    width:44px;
    height:44px;

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

    border:none;

    cursor:pointer;

    border-radius:14px;

    color:var(--text);

    background:var(--glass-soft);

    backdrop-filter:blur(15px);

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

    transition:.35s;

}

.close-cart:hover{

    background:var(--main-color);

    color:#fff;

    transform:
        rotate(180deg)
        scale(1.08);

    box-shadow:
        0 12px 30px var(--orange-glow);

}

/*==========================
        SHIPPING
==========================*/

.shipping-box{

    margin:12px 16px;

    padding:12px 14px;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:16px;

    background:rgba(255,138,61,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,138,61,.45);

    box-shadow:
        0 0 0 1px rgba(255,138,61,.10),
        0 8px 24px rgba(255,138,61,.18),
        inset 0 1px 0 rgba(255,255,255,.20);

}
.shipping-box{

    transition:.3s;

}

.shipping-box:hover{

    border-color:var(--main-color);

    box-shadow:
        0 0 0 1px rgba(255,138,61,.20),
        0 12px 30px rgba(255,138,61,.28),
        inset 0 1px 0 rgba(255,255,255,.25);

    transform:translateY(-2px);

}


.shipping-box i{

    width:42px;
    height:42px;

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

    border-radius:14px;

    color:#fff;

    font-size:18px;

    background:
        linear-gradient(
            145deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 8px 20px var(--orange-glow);

}

.shipping-box span{

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;

}

/*==========================
        CART BODY
==========================*/
.cart-items{

    flex:1;

    overflow-y:auto;

    padding:12px 16px;

    margin-bottom:4px;

    min-height:0;

    scroll-behavior:smooth;

}
/*==========================
        SCROLLBAR
==========================*/

.cart-items::-webkit-scrollbar{

    width:6px;

}

.cart-items::-webkit-scrollbar-track{

    background:transparent;

}

.cart-items::-webkit-scrollbar-thumb{

    border-radius:50px;

    background:
        linear-gradient(
            var(--main-color),
            var(--main-color2)
        );

}

.cart-items::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            #ff7a1e,
            #ffb46c
        );

}

/*==========================
        EMPTY CART
==========================*/

.cart-empty{

    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    text-align:center;

    padding:24px;

}

.cart-empty i{

    width:90px;
    height:90px;

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

    margin-bottom:18px;

    border-radius:50%;

    color:#fff;

    font-size:34px;

    background:
        linear-gradient(
            145deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 16px 34px var(--orange-glow);

}

.cart-empty h3{

    color:var(--text);

    font-size:21px;

    font-weight:800;

    margin-bottom:10px;

}

.cart-empty p{

    max-width:270px;

    color:var(--text-light);

    font-size:13px;

    line-height:24px;

}

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

@media(max-width:768px){

    .cart-panel{

        width:100%;

        height:100vh;

        top:0;

        right:-100%;

        border-radius:0;

    }

    .cart-panel.active{

        right:0;

    }

    .cart-header{

        padding:18px;

    }

    .shipping-box{

        margin:14px;

        padding:12px 14px;

    }

    .cart-items{

        padding:14px;

    }

}/*==========================================================
        BIBSHOP CART UI 2026
        PART 2 (Optimized Size)
        Product Card + Coupon + Summary
==========================================================*/


/*==========================
        CART ITEM
==========================*/

.cart-item{

    position:relative;

    display:flex;
    align-items:center;

    gap:14px;

    padding:14px;

    margin-bottom:16px;

    border-radius:20px;

    background:var(--glass);

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

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

    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.35);

    overflow:hidden;

    transition:
        .35s cubic-bezier(.22,1,.36,1);

}

.cart-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 55%);

    pointer-events:none;

}

.cart-item:hover{

    transform:
        translateY(-4px)
        scale(1.01);

    border-color:
        rgba(255,138,61,.35);

    box-shadow:
        0 20px 45px rgba(0,0,0,.12),
        0 8px 22px var(--orange-glow);

}


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

.cart-item img{

    width:82px;
    height:82px;

    object-fit:cover;

    border-radius:18px;

    flex-shrink:0;

    border:2px solid rgba(255,255,255,.35);

    box-shadow:
        0 10px 24px rgba(0,0,0,.15);

}


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

.cart-item-info{

    flex:1;

    display:flex;

    flex-direction:column;

}

.cart-item-info h3{

    font-size:15px;

    font-weight:800;

    color:var(--text);

    margin-bottom:6px;

    line-height:1.5;

}

.cart-item-info p{

    font-size:12px;

    color:#6f6f6f;

    line-height:20px;

    margin-bottom:8px;

}

.cart-item-price{

    font-size:18px;

    font-weight:800;

    color:var(--main-color);

}


/*==========================
        ACTIONS
==========================*/

.cart-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

}


/*==========================
        QUANTITY
==========================*/

.quantity-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:6px 8px;

    border-radius:14px;

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

    backdrop-filter:blur(15px);

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

}

.quantity-box button{

    width:30px;
    height:30px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:white;

    color:var(--text);

    font-size:15px;

    font-weight:bold;

    transition:.30s;

    box-shadow:
        0 6px 14px rgba(0,0,0,.08);

}

.quantity-box button:hover{

    background:var(--main-color);

    color:#fff;

    transform:
        scale(1.08);

}

.quantity-box span{

    min-width:22px;

    text-align:center;

    font-size:15px;

    font-weight:700;

    color:var(--text);

}


/*==========================
        DELETE
==========================*/

.delete-item{

    width:36px;
    height:36px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:rgba(255,77,77,.12);

    backdrop-filter:blur(12px);

    color:#ff4444;

    transition:.30s;

}

.delete-item:hover{

    background:#ff4444;

    color:#fff;

    transform:
        rotate(8deg)
        scale(1.08);

}


/*==========================
        COUPON
==========================*/
/*==========================
        COUPON
==========================*/

.coupon-box{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0 0 10px;

}

.coupon-box input{

    flex:1;

    height:44px;

    padding:0 14px;

    border-radius:12px;

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

    outline:none;

    font-size:13px;

    color:var(--text);

    background:var(--glass);

    backdrop-filter:blur(18px);

    transition:.30s;

}

.coupon-box input::placeholder{

    color:#777;

}

.coupon-box input:focus{

    border-color:var(--main-color);

    box-shadow:
        0 0 0 4px rgba(255,138,61,.15);

}

.coupon-box button{

    width:84px;

    height:44px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-size:13px;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color2));

    transition:.30s;

    box-shadow:
        0 8px 18px var(--orange-glow);

}

.coupon-box button:hover{

    transform:translateY(-2px);

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

.cart-summary{

    margin:0 0 12px;

    padding:14px;

    border-radius:16px;

    background:var(--glass);

    backdrop-filter:blur(22px);

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

    box-shadow:
        var(--shadow-soft);

}

.cart-summary div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.cart-summary div:last-child{

    margin-bottom:0;

    padding-top:12px;

    border-top:1px dashed rgba(255,138,61,.30);

}

.cart-summary span{

    font-size:13px;

    color:#666;

}

.cart-summary strong{

    font-size:15px;

    color:var(--text);

}

.cart-final{

    font-size:18px !important;

    color:var(--main-color) !important;

    font-weight:900 !important;

}


/*==========================
        ITEM ANIMATION
==========================*/

.cart-item{

    animation:cartFade .45s cubic-bezier(.22,1,.36,1);

}

@keyframes cartFade{

    from{

        opacity:0;

        transform:
            translateY(24px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

@media(max-width:768px){

    .cart-item{

        padding:12px;

        gap:10px;

        border-radius:18px;

    }

    .cart-item img{

        width:68px;
        height:68px;

        border-radius:14px;

    }

    .cart-item-info h3{

        font-size:14px;

    }

    .cart-item-price{

        font-size:16px;

    }

    .quantity-box{

        gap:6px;

    }

    .quantity-box button{

        width:28px;
        height:28px;

    }

    .coupon-box{

        flex-direction:column;

    }

    .coupon-box button{

        width:100%;
        height:46px;

    }

}/*==========================================================
        BIBSHOP CART UI 2026
        PART 3 (Optimized Size)
        Footer + Checkout + Final Effects
==========================================================*/


/*==========================
        FOOTER
==========================*/

.cart-footer{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:12px 14px 14px;

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

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

    border-top:1px solid rgba(255,255,255,.18);

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

    flex-shrink:0;

}


/*==========================
        PRICE BOX
==========================*/

.price-box{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:18px;

}

.price-box div{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.price-box span{

    font-size:13px;

    font-weight:500;

    color:var(--text-light);

}

.price-box strong{

    font-size:17px;

    font-weight:800;

    color:var(--text);

}

.price-box div:last-child{

    padding-top:14px;

    border-top:1px dashed rgba(255,138,61,.35);

}

.price-box div:last-child strong{

    font-size:21px;

    color:var(--main-color);

}


/*==========================
        CHECKOUT BUTTON
==========================*/
/*==========================
        CHECKOUT BUTTON
==========================*/

.checkout-btn{

    position:relative;

    width:100%;

    height:50px;

    margin:0;

    border:none;

    cursor:pointer;

    overflow:hidden;

    border-radius:14px;

    color:#fff;

    font-size:15px;

    font-weight:800;

    letter-spacing:.3px;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color2));

    box-shadow:
        0 10px 24px var(--orange-glow);

    transition:
        .35s cubic-bezier(.22,1,.36,1);

}

.checkout-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:1s;

}

.checkout-btn:hover{

    transform:
        translateY(-2px)
        scale(1.01);

    box-shadow:
        0 16px 34px var(--orange-glow);

}

.checkout-btn:hover::before{

    left:150%;

}

.checkout-btn:active{

    transform:scale(.98);

}


/*==========================
        CLEAR BUTTON
==========================*/

.clear-cart{

    width:100%;

    height:46px;

    margin-top:10px;

    border:none;

    cursor:pointer;

    border-radius:14px;

    color:var(--text);

    font-size:14px;

    font-weight:700;

    background:var(--glass);

    backdrop-filter:blur(18px);

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

    transition:.35s;

}

.clear-cart:hover{

    background:#ff4d4d;

    color:#fff;

    border-color:#ff4d4d;

    box-shadow:
        0 14px 30px rgba(255,77,77,.30);

}


/*==========================
        BUTTON FOCUS
==========================*/

.checkout-btn:focus,
.clear-cart:focus,
.close-cart:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(255,138,61,.18);

}


/*==========================
        SMOOTH TRANSITIONS
==========================*/

.cart-panel *,
.cart-panel *::before,
.cart-panel *::after{

    transition:
        background .30s,
        color .30s,
        border-color .30s,
        box-shadow .30s,
        transform .30s;

}


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

.cart-panel::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            transparent 18%,
            transparent 80%,
            rgba(255,255,255,.05));

    z-index:1;

}

.cart-header,
.cart-items,
.cart-footer{

    position:relative;

    z-index:2;

}



















































































































































.category-box{
    text-decoration: none;
    color: inherit;

}









































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

.category-hero{

    position: relative;

    width: 92%;

    max-width: 1450px;

    margin: 45px auto;

    padding: 70px 60px;

    overflow: hidden;

    border-radius: 35px;

    background:
    linear-gradient(135deg,#ffffff,#faf9ff);

    border:1px solid rgba(255,138,61,.15);

    box-shadow:
    0 30px 70px rgba(30,30,30,.06);

}

.category-hero::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(255,138,61,.10);

    filter:blur(15px);

}

.category-hero::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-100px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(255,178,122,.12);

    filter:blur(15px);

}

.category-hero-content{

    position:relative;

    z-index:5;

}

.category-breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:18px;

    font-size:14px;

    color:#8a8a8a;

}

.category-breadcrumb a{

    text-decoration:none;

    color:var(--main-color);

    transition:.3s;

}

.category-breadcrumb a:hover{

    color:#5d36d6;

}

.category-hero h1{

    font-size:48px;

    font-weight:800;

    text-align:center;

    color:#222;

    margin-bottom:18px;

    letter-spacing:-1px;

}

.category-hero p{

    width:100%;

    max-width:550px;

    margin:auto;

    text-align:center;

    line-height:2;

    color:#777;

    font-size:16px;

}

/*=========================================
            CATEGORY GRID
=========================================*/

.category{

    width:92%;

    max-width:1450px;

    margin:auto;

}


/*=========================================
            CATEGORY GRID
=========================================*/

.category{

    width:92%;
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:28px;

    padding:20px 0 80px;

}

/*=========================================
            CATEGORY CARD
=========================================*/

.category-box{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:170px;

    padding:35px;

    border-radius:30px;

    background:var(--glass-strong);

    backdrop-filter:var(--blur);

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

    box-shadow:var(--shadow-soft);

    text-decoration:none;

    color:inherit;

    transition:.35s cubic-bezier(.2,.8,.2,1);

}

/* نور داخل کارت */

.category-box::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:var(--glass-orange);

    filter:blur(10px);

    transition:.45s;

}

/* نور پایین */

.category-box::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    left:-40px;

    bottom:-40px;

    border-radius:50%;

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

    filter:blur(25px);

    transition:.45s;

}

.category-box-content{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

    z-index:5;

}

.category-box h2{

    font-size:1.2rem;

    font-weight:700;

    color:var(--muted);

    transition:.35s;

}

.category-arrow{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

    color:var(--main-color);

    transition:.35s;

}

.category-arrow svg{

    width:24px;

}

/*==============================
            HOVER
==============================*/

.category-box:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    border-color:rgba(255,138,61,.28);

    box-shadow:

    0 18px 35px rgba(0,0,0,.08),

    0 30px 80px rgba(255,138,61,.15);

}
.category-box:hover::before{

    transform:scale(1.5);

    background:var(--orange-glow);

}

.category-box:hover::after{

    transform:scale(1.6);

}

.category-box:hover h2{

    color:var(--main-color);

    letter-spacing:.4px;

}

.category-box:hover .category-arrow{

    background:var(--main-color);

    color:#fff;

    transform:translateX(-8px) rotate(-8deg);

}


/*=========================================
            PREMIUM CATEGORY
=========================================*/

.category-box{

    isolation:isolate;

}

.category-box::before{

    animation:floatGlow 7s ease-in-out infinite;

}

/* خط نور متحرک */

.category-box .shine{

    position:absolute;

    top:0;

    left:-160%;

    width:70%;

    height:100%;

    background:linear-gradient(

        115deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:3;

}

.category-box:hover .shine{

    left:180%;

}

/* دایره نور */

.category-box .circle{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--main-color);

    right:35px;

    bottom:30px;

    opacity:.18;

    box-shadow:

    0 0 20px var(--orange-glow);

}

/* شماره دسته */

.category-number{

    position:absolute;

    top:28px;

    left:28px;

    font-size:60px;

    font-weight:800;

    color:rgba(255,138,61,.08);

    line-height:1;

    user-select:none;

}

/* خط پایین کارت */

.category-line{

    position:absolute;

    bottom:0;

    right:0;

    width:0;

    height:3px;

    border-radius:50px;

    background:linear-gradient(

    90deg,

    var(--main-color),

    var(--main-color2)

    );

    transition:.45s;

}

.category-box:hover .category-line{

    width:100%;

}

/* انیمیشن ورود */

.category-box{

    opacity:0;

    transform:translateY(45px);

    animation:cardFade .8s forwards;

}

.category-box:nth-child(2){

    animation-delay:.08s;

}

.category-box:nth-child(3){

    animation-delay:.16s;

}

.category-box:nth-child(4){

    animation-delay:.24s;

}

.category-box:nth-child(5){

    animation-delay:.32s;

}

.category-box:nth-child(6){

    animation-delay:.40s;

}

@keyframes cardFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes floatGlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/* افکت کلیک */

.category-box:active{

    transform:scale(.97);

}

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

.category-hero{

    position:relative;

    overflow:hidden;

}

.hero-pattern{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,138,61,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,138,61,.05) 1px,transparent 1px);

    background-size:28px 28px;

    opacity:.4;

    pointer-events:none;

}

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(25px);

    animation:heroFloat 9s ease-in-out infinite;

}

.hero-circle-1{

    width:260px;

    height:260px;

    top:-80px;

    right:-80px;

    background:rgba(255,138,61,.16);

}

.hero-circle-2{

    width:170px;

    height:170px;

    bottom:-40px;

    left:-40px;

    background:rgba(255,178,122,.25);

    animation-delay:2s;

}

.category-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.category-badge{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,138,61,.12);

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

    color:var(--main-color);

    font-weight:700;

    font-size:14px;

    backdrop-filter:blur(10px);

}

.category-hero h1{

    font-size:52px;

    font-weight:800;

    margin:0;

    color:var(--text);

}

.category-hero p{

    margin-top:22px;

    font-size:17px;

    color:var(--text-light);

    line-height:2;

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/*=========================================
            MOUSE GLOW
=========================================*/

.mouse-glow{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,138,61,.18),

        transparent 70%

    );

    pointer-events:none;

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

    left:50%;

    top:50%;

    opacity:0;

    transition:

    opacity .25s,

    width .25s,

    height .25s;

    z-index:1;

}

.category-box:hover .mouse-glow{

    opacity:1;

}

.category-box:hover{

    overflow:hidden;

}
























































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

.product-hero{

    position:relative;

    width:92%;

    max-width:1450px;

    margin:45px auto;

    padding:75px 60px;

    overflow:hidden;

    border-radius:35px;

    background:var(--glass-strong);

    backdrop-filter:var(--blur);

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

    box-shadow:var(--shadow-soft);

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,138,61,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,138,61,.05) 1px,transparent 1px);

    background-size:26px 26px;

}

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(20px);

}

.hero-glow1{

    width:280px;

    height:280px;

    right:-100px;

    top:-100px;

    background:rgba(255,138,61,.12);

}

.hero-glow2{

    width:180px;

    height:180px;

    left:-60px;

    bottom:-60px;

    background:rgba(255,178,122,.18);

}

.hero-content{

    position:relative;

    z-index:5;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:#888;

    margin-bottom:20px;

}

.breadcrumb a{

    color:var(--main-color);

    text-decoration:none;

}

.product-hero h1{

    text-align:center;

    font-size:50px;

    margin-bottom:15px;

    color:var(--text);

}

.product-hero p{

    text-align:center;

    color:var(--text-light);

    font-size:16px;

}

.products-container{

    width:92%;

    max-width:1450px;

    margin:auto;

}






































/*=========================================
            PRODUCTS GRID
=========================================*/

.products-grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
    padding: 15px 0 80px;
    align-items: center;
}

/*=========================================
            EMPTY PRODUCTS
=========================================*/

.empty-products{

    width:100%;

    padding:90px 30px;

    text-align:center;

    border-radius:30px;

    background:var(--glass-strong);

    backdrop-filter:var(--blur);

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

}

.empty-products i{

    font-size:70px;

    color:var(--main-color);

}

.empty-products h2{

    margin:20px 0 10px;

}

.empty-products p{

    color:#777;

}




































/*=========================
COLOR MODAL
=========================*/

.color-modal {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);

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

    opacity: 0;
    visibility: hidden;

    transition: .3s;

    z-index: 99999;
}

.color-modal.active {
    opacity: 1;
    visibility: visible;
}


/*=========================
COLOR BOX
=========================*/

.color-box {
    width: 430px;
    max-width: 95%;

    background: #fff;

    border-radius: 28px;

    padding: 30px;

    position: relative;

    text-align: center;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
}


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

.color-product-image img {
    width: 170px;
    height: 170px;

    object-fit: cover;

    border-radius: 20px;

    margin: auto;

    display: block;
}


/*=========================
CLOSE BUTTON
=========================*/

.close-color-modal {
    position: absolute;

    left: 20px;
    top: 20px;

    width: 42px;
    height: 42px;

    border: none;

    background: #f3f3f3;

    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;
}


/*=========================
COLORS LIST
=========================*/

.colors-list {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

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

    column-gap: 12px;
    row-gap: 42px;

    margin: 30px 0;

    padding: 8px 5px;

    /*
       وقتی تعداد رنگ‌ها زیاد شود
       فقط همین قسمت اسکرول می‌شود
    */
    max-height: 230px;

    overflow-y: auto;
    overflow-x: hidden;
}


/*=========================
COLORS SCROLLBAR
=========================*/

.colors-list::-webkit-scrollbar {
    width: 6px;
}

.colors-list::-webkit-scrollbar-track {
    background: #f1f1f1;

    border-radius: 10px;
}

.colors-list::-webkit-scrollbar-thumb {
    background: #cfcfcf;

    border-radius: 10px;
}

.colors-list::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}


/*=========================
COLOR ITEM
=========================*/

.color-item {
    width: 46px;
    height: 46px;

    min-width: 46px;
    min-height: 46px;

    border-radius: 50%;

    cursor: pointer;

    /*
       رنگ واقعی توسط JS
       روی background این عنصر قرار می‌گیرد
    */
    background-color: #ddd;

    border: 3px solid transparent;

    transition: .25s;

    position: relative;

    flex-shrink: 0;

    box-sizing: border-box;
}


/*=========================
ACTIVE COLOR
=========================*/

.color-item.active {
    transform: scale(1.12);

    border-color: var(--main-color);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, .08),
        0 5px 15px rgba(0, 0, 0, .15);
}


/*=========================
DISABLED COLOR
=========================*/

.color-item.disabled {
    opacity: .35;

    cursor: not-allowed;

    filter: grayscale(.4);
}


/*=========================
COLOR NAME
=========================*/

.color-item span {
    position: absolute;

    top: 55px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 12px;

    white-space: nowrap;

    color: #444;

    pointer-events: none;
}


/*=========================
CONFIRM BUTTON
=========================*/

.confirm-color {
    width: 100%;

    height: 52px;

    border: none;

    border-radius: 15px;

    background: var(--main-color);

    color: #fff;

    font-size: 16px;

    cursor: pointer;

    font-family: tanha;
}


/*=========================
DISABLED CONFIRM BUTTON
=========================*/

.confirm-color:disabled {
    opacity: .45;

    cursor: not-allowed;
}




























.cart-color{

display:flex;

align-items:center;

gap:8px;

margin:6px 0;

font-size:.82rem;

opacity:.9;

}

.cart-color-circle{

width:18px;

height:18px;

border-radius:50%;

border:2px solid #fff;

box-shadow:0 0 6px rgba(0,0,0,.15);

flex-shrink:0;

}




.out-stock-label{

    position:absolute;

    top:15px;

    left:15px;

    background:#dc2626;

    color:#fff;

    padding:8px 14px;

    border-radius:8px;

    font-size:13px;

    font-weight:bold;

    z-index:5;

}

.out-of-stock .btn-product{
    background:#9ca3af !important;
    cursor:not-allowed;
    color:#fff;
}

.out-of-stock-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(3px);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

}

.out-badge{

    background:#afafaf;

    color:#fff;

    padding:12px 28px;

    border-radius:999px;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    box-shadow:0 12px 30px rgba(136, 136, 136, 0.35);

}


.out-of-stock{
    opacity:.55;
    filter:grayscale(100%);
    position:relative;
}





.product-item.out-of-stock{
    filter: grayscale(100%);
    opacity: .7;
}














.pagination {

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

    gap:14px;

    margin:60px 0;

    padding:14px 22px;

    width:max-content;
    margin-left:auto;
    margin-right:auto;

    background:var(--glass-soft);

    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur);

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

    border-radius:30px;

    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0 var(--white-glow);

}



/* دکمه ها */

.pagination button {

    position:relative;
    overflow:hidden;


    width:48px;
    height:48px;


    border:none;

    border-radius:16px;


    cursor:pointer;


    font-size:16px;

    font-weight:700;


    color:var(--text);



    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.35),

        rgba(255,255,255,.08)

    );



    backdrop-filter:blur(15px);


    border:

    1px solid rgba(255,255,255,.35);



    box-shadow:

        0 10px 30px rgba(0,0,0,.12),

        inset 0 1px 2px rgba(255,255,255,.8);



    transition:

        .35s cubic-bezier(.2,.8,.2,1);

}



/* نور متحرک روی دکمه */

.pagination button::before {


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );


    transform:translateX(-120%);


    transition:.6s;


}



.pagination button:hover::before{

    transform:translateX(120%);

}




.pagination button:hover {


    transform:

    translateY(-8px)

    scale(1.08);



    color:var(--main-color);



    box-shadow:

        0 20px 45px rgba(255,138,61,.25),

        0 10px 30px rgba(0,0,0,.15);



}




/* صفحه فعال */

.pagination button.active {


    color:white;



    background:


    linear-gradient(

        135deg,

        var(--main-color),

        var(--main-color2)

    );



    border:

    1px solid rgba(255,255,255,.5);



    box-shadow:


        0 15px 40px var(--orange-glow),


        inset 0 2px 8px rgba(255,255,255,.45);



    transform:

    translateY(-5px)

    scale(1.12);



}



/* افکت نور دور صفحه فعال */

.pagination button.active::after {


    content:"";


    position:absolute;


    inset:-8px;


    border-radius:20px;


    background:

    radial-gradient(

        circle,

        var(--orange-glow),

        transparent 70%

    );


    z-index:-1;


    animation:pulsePagination 2s infinite;


}




@keyframes pulsePagination {


    0%,100%{

        opacity:.5;

        transform:scale(.9);

    }


    50%{

        opacity:1;

        transform:scale(1.1);

    }


}





.pagination button:active {


    transform:

    scale(.92);


}





@media(max-width:600px){


.pagination{

    gap:8px;

    padding:10px 15px;

}



.pagination button{


    width:40px;

    height:40px;


    border-radius:13px;


}



}












































.is-disabled-product {
    opacity: .6;
}

.is-disabled-product .btn-product {
    cursor: not-allowed;
}































































/* =========================================================
   COLOR POPUP - LIGHT MODE
========================================================= */

.color_popup {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

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

    padding: 20px;

    background: rgba(28, 28, 28, 0.28);

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

    opacity: 0;

    transition: opacity .25s ease;
}

.color_popup.active {
    display: flex;
    opacity: 1;
}


/* =========================================================
   POPUP BOX
========================================================= */

.color_popup_box {
    position: relative;

    width: min(430px, 100%);

    background:
        rgba(255, 255, 255, 0.92);

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

    border-radius: 26px;

    padding: 26px;

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(22px);

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

    transform:
        translateY(20px)
        scale(.96);

    transition:
        .3s ease;
}

.color_popup.active .color_popup_box {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.color_popup_close {
    position: absolute;

    top: 18px;
    left: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(28,28,28,.08);

    border-radius: 12px;

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

    color:
        var(--text);

    display: flex;

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

    cursor: pointer;

    transition:
        .25s ease;

    box-shadow:
        0 6px 18px rgba(0,0,0,.06);
}

.color_popup_close:hover {
    background:
        var(--glass-orange);

    color:
        var(--main-color);

    border-color:
        rgba(255,138,61,.25);

    transform:
        rotate(90deg);
}


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

.color_popup_header {
    display: flex;

    align-items: center;

    gap: 14px;

    direction: rtl;

    margin-bottom: 24px;

    padding-left: 45px;
}

.color_popup_icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 15px;

    display: flex;

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

    background:
        var(--glass-orange);

    color:
        var(--main-color);

    font-size: 19px;

    border:
        1px solid rgba(255,138,61,.18);

    box-shadow:
        0 8px 25px rgba(255,138,61,.12);
}

.color_popup_header h3 {
    margin: 0;

    color:
        var(--text);

    font-size: 18px;

    font-weight: 800;
}

.color_popup_header p {
    margin: 5px 0 0;

    color:
        var(--text-light);

    opacity: .7;

    font-size: 12px;
}


/* =========================================================
   COLOR OPTIONS
========================================================= */

.color_options {
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.color_option {
    position: relative;

    width: 100%;

    min-height: 62px;

    border:
        1px solid rgba(28,28,28,.08);

    border-radius: 17px;

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

    color:
        var(--text);

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 0 17px;

    cursor: pointer;

    direction: rtl;

    text-align: right;

    transition:
        .25s ease;

    box-shadow:
        0 7px 22px rgba(0,0,0,.045);
}


/* HOVER */

.color_option:hover {
    background:
        rgba(255,138,61,.07);

    border-color:
        rgba(255,138,61,.25);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(255,138,61,.10);
}


/* SELECTED */

.color_option.active {
    background:
        var(--glass-orange);

    border-color:
        rgba(255,138,61,.38);

    box-shadow:
        0 10px 30px rgba(255,138,61,.12);
}


/* =========================================================
   COLOR CIRCLE
========================================================= */

.color_circle {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 50%;

    border:
        2px solid rgba(28,28,28,.12);

    box-shadow:
        0 0 0 4px rgba(255,255,255,.75),
        0 5px 15px rgba(0,0,0,.10);
}


/* =========================================================
   COLOR NAME
========================================================= */

.color_option span:nth-child(2) {
    color:
        var(--text);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   CHECK ICON
========================================================= */

.color_option i {
    margin-right: auto;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    display: flex;

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

    background:
        var(--main-color);

    color:
        #fff;

    font-size: 11px;

    opacity: 0;

    transform:
        scale(.5);

    transition:
        .22s ease;

    box-shadow:
        0 6px 15px var(--orange-glow);
}


.color_option.active i {
    opacity: 1;

    transform:
        scale(1);
}


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

@media (max-width: 500px) {

    .color_popup {
        padding: 15px;
    }

    .color_popup_box {
        padding: 22px;

        border-radius: 23px;
    }

    .color_popup_header h3 {
        font-size: 17px;
    }

    .color_option {
        min-height: 58px;
    }

}
/* =========================================================
   COLOR SELECT BUTTON - LIGHT ORANGE GLASS
========================================================= */

.color_select_btn {
    position: relative;

    width: 100%;
    min-height: 58px;

    padding: 0 18px;

    display: flex;
    align-items: center;

    direction: rtl;

    border: 1px solid rgba(255, 138, 61, .20);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .92),
            rgba(255, 138, 61, .07)
        );

    color: var(--text);

    cursor: pointer;

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

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

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


/* خط نارنجی خیلی ظریف بالای دکمه */

.color_select_btn::before {
    content: "";

    position: absolute;

    top: 0;
    right: 18px;
    left: 18px;

    height: 2px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--main-color),
            transparent
        );

    opacity: .45;
}


/* Hover */

.color_select_btn:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 138, 61, .38);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(255, 138, 61, .11)
        );

    box-shadow:
        0 13px 32px rgba(255, 138, 61, .13);
}


/* وقتی کلیک میشه */

.color_select_btn:active {
    transform: translateY(0) scale(.985);

    box-shadow:
        0 6px 18px rgba(255, 138, 61, .10);
}


/* =========================================================
   COLOR DOT
========================================================= */

.selected_color_dot {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

    margin-left: 12px;

    border-radius: 50%;

    background: #d8d8d8;

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

    box-shadow:
        0 0 0 3px rgba(255, 138, 61, .10),
        0 5px 13px rgba(0, 0, 0, .13);

    transition:
        background .25s ease,
        transform .25s ease;
}


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

.selected_color_text {
    display: flex;
    align-items: center;

    gap: 5px;

    color:
        var(--text-light);

    font-size: 13px;

    font-weight: 500;
}

.selected_color_text strong {
    color:
        var(--text);

    font-size: 14px;

    font-weight: 750;

    transition:
        color .2s ease;
}


/* Hover text */

.color_select_btn:hover .selected_color_text strong {
    color:
        var(--main-color);
}


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

.color_select_btn > i {
    margin-right: auto;

    width: 31px;
    height: 31px;

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

    border-radius: 10px;

    background:
        rgba(255, 138, 61, .08);

    color:
        var(--main-color);

    font-size: 11px;

    transition:
        transform .25s ease,
        background .25s ease;
}


/* Hover arrow */

.color_select_btn:hover > i {
    background:
        rgba(255, 138, 61, .15);

    transform:
        translateY(2px);
}


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

@media (max-width: 500px) {

    .color_select_btn {
        min-height: 56px;

        border-radius: 15px;

        padding: 0 15px;
    }

    .selected_color_dot {
        width: 25px;
        height: 25px;
    }

}






















































.product.product-item {
    text-decoration: none;
    color: inherit;
}

.product.product-item:hover {
    color: inherit;
}























































/* =========================================================
   CONTAINER
   ========================================================= */

.checkout-container {
    width: min(1280px, 94%);

    margin:
        45px auto 90px;
}


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

.checkout-title {
    position: relative;

    margin-bottom: 35px;

    padding:
        25px 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.18)
        );

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

    box-shadow:
        var(--shadow-soft);

    backdrop-filter:
        var(--blur);

    -webkit-backdrop-filter:
        var(--blur);

    overflow: hidden;
}

.checkout-title::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,61,.25),
            transparent 70%
        );

    pointer-events: none;
}

.checkout-title::after {
    content: "";

    position: absolute;

    left: -80px;
    bottom: -120px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.55),
            transparent 70%
        );

    pointer-events: none;
}

.checkout-title h1 {
    position: relative;

    z-index: 2;

    margin: 0;

    font-size: 32px;

    font-weight: 900;

    letter-spacing: -.8px;
}

.checkout-title p {
    position: relative;

    z-index: 2;

    margin:
        10px 0 0;

    color:
        var(--text-light);

    font-size: 14px;
}


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

.checkout-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(340px, .75fr);

    gap: 25px;

    align-items: start;
}


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

.checkout-card {
    position: relative;

    padding: 30px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.42),
            rgba(255,255,255,.14)
        );

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        var(--blur);

    -webkit-backdrop-filter:
        var(--blur);

    overflow: hidden;

    isolation: isolate;
}

.checkout-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -180px;
    left: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.55),
            transparent 70%
        );

    z-index: -1;

    pointer-events: none;
}

.checkout-card::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    bottom: -170px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,61,.16),
            transparent 70%
        );

    z-index: -1;

    pointer-events: none;
}

.checkout-card h2 {
    position: relative;

    margin:
        0 0 26px;

    font-size: 21px;

    font-weight: 900;
}

.checkout-card h2::after {
    content: "";

    display: block;

    width: 48px;
    height: 4px;

    margin-top: 10px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 0 14px
        var(--orange-glow);
}


/* =========================================================
   USER LOGIN BOX
   ========================================================= */

.logged-user-message {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

    padding: 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.38),
            rgba(255,255,255,.12)
        );

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

    box-shadow:
        var(--shadow-soft);

    backdrop-filter:
        blur(15px);
}

.logged-user-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #36d477,
            #16a34a
        );

    color: white;

    font-size: 20px;

    box-shadow:
        0 10px 25px
        rgba(22,163,74,.22);
}

.logged-user-message > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.logged-user-message strong {
    font-size: 14px;
}

.logged-user-message span {
    color: #777;

    font-size: 12px;
}


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

.account-info-box {
    display: grid;

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

    gap: 13px;

    margin-bottom: 30px;
}

.account-info-box > div {
    position: relative;

    padding: 17px;

    border-radius: 18px;

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

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

    backdrop-filter:
        blur(15px);

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

    transition:
        .3s ease;

    overflow: hidden;
}

.account-info-box > div::before {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    top: -45px;
    left: -35px;

    border-radius: 50%;

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

.account-info-box > div:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255,138,61,.35);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.09);
}

.account-info-box span {
    position: relative;

    display: block;

    margin-bottom: 7px;

    color: #777;

    font-size: 11px;
}

.account-info-box strong {
    position: relative;

    font-size: 13px;

    color: var(--text);
}


/* =========================================================
   SAVED ADDRESS
   ========================================================= */

.saved-address-section {
    grid-column: 1 / -1;

    margin-top: 8px;
}

.saved-address-header {
    margin-bottom: 16px;
}

.saved-address-header h3 {
    margin: 0 0 6px;

    font-size: 18px;

    font-weight: 900;
}

.saved-address-header p {
    margin: 0;

    color: #777;

    font-size: 12px;
}

.saved-addresses {
    display: grid;

    gap: 14px;
}


/* =========================================================
   ADDRESS CARD
   ========================================================= */

.checkout-address-card {
    position: relative;

    display: block;

    padding: 20px;

    border-radius: 22px;

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

    border:
        1.5px solid
        rgba(255,255,255,.60);

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

    backdrop-filter:
        blur(18px);

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

    cursor: pointer;

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

.checkout-address-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255,138,61,.45);

    box-shadow:
        0 20px 45px
        rgba(255,138,61,.12);
}

.checkout-address-card.selected {
    border-color:
        var(--main-color);

    background:
        linear-gradient(
            135deg,
            rgba(255,138,61,.18),
            rgba(255,255,255,.22)
        );

    box-shadow:
        0 15px 45px
        rgba(255,138,61,.18),
        inset 0 0 25px
        rgba(255,255,255,.12);
}

.checkout-address-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.checkout-address-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 14px;
}

.checkout-address-title {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 900;
}

.checkout-address-title i {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 13px;

    background:
        var(--glass-orange);

    color:
        var(--main-color);

    box-shadow:
        0 8px 20px
        rgba(255,138,61,.12);
}

.checkout-address-check {
    width: 29px;
    height: 29px;

    display: flex;

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

    border-radius: 50%;

    border:
        2px solid
        rgba(0,0,0,.12);

    color: transparent;

    transition:
        .3s ease;
}

.checkout-address-card.selected
.checkout-address-check {
    color: white;

    border-color:
        var(--main-color);

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color2)
        );

    box-shadow:
        0 0 20px
        var(--orange-glow);
}

.checkout-address-info {
    display: grid;

    gap: 7px;

    color: #666;

    font-size: 12px;

    line-height: 1.9;
}

.checkout-address-info strong {
    color:
        var(--text);
}


/* =========================================================
   SHIPPING OPTIONS
   ========================================================= */

.shipping-methods {
    display: grid;

    gap: 12px;

    margin-top: 30px;
}

.shipping-methods h3,
.payment-box h3 {
    margin: 0 0 13px;

    font-size: 15px;

    font-weight: 900;
}

.shipping-option {
    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px;

    border-radius: 19px;

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

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

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

    backdrop-filter:
        blur(15px);

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

    cursor: pointer;

    transition:
        .3s ease;
}

.shipping-option:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,138,61,.45);

    box-shadow:
        0 15px 30px
        rgba(255,138,61,.09);
}

.shipping-option:has(input:checked) {
    border-color:
        var(--main-color);

    background:
        linear-gradient(
            135deg,
            rgba(255,138,61,.18),
            rgba(255,255,255,.18)
        );

    box-shadow:
        0 12px 30px
        rgba(255,138,61,.13);
}

.shipping-option input {
    width: 18px;
    height: 18px;

    accent-color:
        var(--main-color);
}


/* =========================================================
   PAYMENT
   ========================================================= */

.payment-box {
    margin-top: 30px;
}

.payment-option {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 19px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,138,61,.18),
            rgba(255,255,255,.16)
        );

    border:
        1.5px solid
        var(--main-color);

    box-shadow:
        0 12px 35px
        rgba(255,138,61,.12),
        inset 0 0 20px
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(18px);

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

    font-size: 13px;

    font-weight: 800;
}

.payment-option input {
    width: 18px;
    height: 18px;

    accent-color:
        var(--main-color);
}


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

.order-items {
    display: flex;

    flex-direction: column;

    gap: 13px;

    max-height: 470px;

    overflow-y: auto;

    padding-left: 4px;
}

.order-items::-webkit-scrollbar {
    width: 5px;
}

.order-items::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--main-color),
            var(--main-color2)
        );

    border-radius: 20px;
}

.order-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px;

    border-radius: 19px;

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

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

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

    backdrop-filter:
        blur(15px);

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

    transition:
        .3s ease;
}

.order-item:hover {
    transform:
        translateX(-4px);

    border-color:
        rgba(255,138,61,.3);

    box-shadow:
        0 15px 35px
        rgba(255,138,61,.08);
}

.order-item img {
    width: 76px;
    height: 76px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 16px;

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);
}

.order-item-info {
    flex: 1;

    min-width: 0;
}

.order-item-info h3 {
    margin:
        0 0 7px;

    font-size: 14px;

    font-weight: 900;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.order-item-info p {
    margin: 3px 0;

    color: #777;

    font-size: 11px;
}

.order-item-price {
    color:
        var(--main-color);

    font-size: 13px;

    font-weight: 900;

    white-space: nowrap;
}


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

.summary {
    margin-top: 25px;

    padding-top: 22px;

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

.summary-row {
    display: flex;

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

    gap: 15px;

    margin-bottom: 16px;

    color: #666;

    font-size: 13px;
}

.summary-row strong {
    color:
        var(--text);

    font-size: 13px;
}

.summary-row.final {
    margin-top: 25px;

    padding:
        22px 0 5px;

    border-top:
        1px dashed
        rgba(0,0,0,.14);

    color:
        var(--text);

    font-size: 16px;

    font-weight: 900;
}

.summary-row.final strong {
    color:
        var(--main-color);

    font-size: 23px;

    font-weight: 900;

    text-shadow:
        0 0 20px
        rgba(255,138,61,.15);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.submit-order {
    position: relative;

    width: 100%;

    margin-top: 28px;

    padding: 18px;

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

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            #ff6b20
        );

    color: white;

    font-family: inherit;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 15px 40px
        rgba(255,138,61,.30);

    transition:
        .3s ease;
}

.submit-order::before {
    content: "";

    position: absolute;

    top: 0;
    right: -120%;

    width: 80%;
    height: 100%;

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

    transform:
        skewX(-25deg);

    transition:
        .8s ease;
}

.submit-order:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 22px 50px
        rgba(255,138,61,.38);
}

.submit-order:hover::before {
    right: 130%;
}

.submit-order:active {
    transform:
        translateY(-1px);
}

.submit-order:disabled {
    opacity: .55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   LOGIN REQUIRED
   ========================================================= */

.login-required-box {
    display: flex;

    align-items: center;

    gap: 20px;

    padding: 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,138,61,.14),
            rgba(255,255,255,.18)
        );

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

    box-shadow:
        var(--shadow-soft);

    backdrop-filter:
        blur(20px);

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

.login-required-icon {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            #ff641f
        );

    color: white;

    font-size: 26px;

    box-shadow:
        0 12px 30px
        var(--orange-glow);
}

.login-required-content {
    flex: 1;
}

.login-required-content h3 {
    margin:
        0 0 8px;

    font-size: 17px;

    font-weight: 900;
}

.login-required-content p {
    margin:
        0 0 18px;

    color: #666;

    font-size: 13px;

    line-height: 1.9;
}

.login-required-btn {
    display: inline-flex;

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

    padding:
        12px 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            #ff641f
        );

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    box-shadow:
        0 10px 25px
        var(--orange-glow);

    transition:
        .3s ease;
}

.login-required-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        var(--orange-glow);
}


/* =========================================================
   EMPTY CART
   ========================================================= */

.empty-cart {
    grid-column:
        1 / -1;

    padding:
        100px 30px;

    text-align:
        center;
}


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

@media (max-width: 950px) {

    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-card:last-child {
        order: -1;
    }
}


@media (max-width: 700px) {

    .checkout-container {
        width: 92%;

        margin:
            25px auto 60px;
    }

    .checkout-title {
        padding: 22px;

        border-radius: 22px;
    }

    .checkout-title h1 {
        font-size: 27px;
    }

    .checkout-card {
        padding: 20px;

        border-radius: 23px;
    }

    .account-info-box {
        grid-template-columns: 1fr;
    }

    .login-required-box {
        flex-direction: column;

        text-align: center;
    }

    .login-required-content {
        width: 100%;
    }

    .login-required-btn {
        width: 100%;
    }

    .logged-user-message {
        align-items: flex-start;
    }
}


@media (max-width: 450px) {

    .checkout-container {
        width: 94%;
    }

    .checkout-card {
        padding: 16px;

        border-radius: 20px;
    }

    .checkout-title h1 {
        font-size: 24px;
    }

    .checkout-title p {
        font-size: 12px;
    }

    .order-item {
        padding: 9px;

        gap: 9px;
    }

    .order-item img {
        width: 58px;
        height: 58px;
    }

    .order-item-info h3 {
        font-size: 12px;
    }

    .order-item-info p {
        font-size: 10px;
    }

    .order-item-price {
        font-size: 10px;
    }

    .summary-row.final strong {
        font-size: 19px;
    }
}


/* =========================================================
   ENTRY ANIMATION
   ========================================================= */

.checkout-card,
.checkout-title {
    animation:
        glassEnter .6s cubic-bezier(.22,.61,.36,1) both;
}

.checkout-card:nth-child(2) {
    animation-delay: .08s;
}

@keyframes glassEnter {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}















































































































/* =========================================================
   MSTORE MOBILE BOTTOM NAV
   ORANGE GLASS THEME
========================================================= */

.head2 {
    display: flex;
}


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

@media screen and (max-width: 768px) {

    .head2 {

        display: flex !important;

        position: fixed !important;

        top: auto !important;
        bottom: 12px !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;

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

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

        box-sizing: border-box !important;

        z-index: 2147483647 !important;

        /* =================================================
           ORANGE GLASS
        ================================================= */

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, .72),
                rgba(255, 138, 61, .18)
            ) !important;

        backdrop-filter:
            blur(22px)
            saturate(180%) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(180%) !important;

        /* =================================================
           BORDER
        ================================================= */

        border:
            1px solid rgba(255, 255, 255, .45) !important;

        /* =================================================
           SHAPE
        ================================================= */

        border-radius: 32px !important;

        /* =================================================
           ORANGE SHADOW / GLOW
        ================================================= */

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .14),
            0 5px 18px rgba(255, 138, 61, .18),
            0 0 25px rgba(255, 138, 61, .08),
            inset 0 1px 0 rgba(255, 255, 255, .65),
            inset 0 -1px 0 rgba(255, 138, 61, .08) !important;

        /* =================================================
           LAYOUT
        ================================================= */

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

        gap: 2px !important;

        overflow: hidden !important;

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

        animation:
            mstoreNavIn .45s cubic-bezier(.22, 1, .36, 1) both;
    }


    /* =====================================================
       LINKS
    ===================================================== */

    .head2 > a {

        position: relative !important;

        flex: 1 1 0 !important;

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

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

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

        box-sizing: border-box !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 4px !important;

        color: var(--text-light) !important;

        background: transparent !important;

        border: none !important;
        border-radius: 22px !important;

        text-decoration: none !important;

        font-family: inherit !important;

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

        line-height: 1 !important;

        white-space: nowrap !important;

        transition:
            color .25s ease,
            background .25s ease,
            transform .2s ease,
            box-shadow .25s ease !important;

        -webkit-tap-highlight-color: transparent;
    }


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

    .head2 > a > i {

        width: 23px !important;
        height: 23px !important;

        display: flex !important;

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

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

        font-size: 17px !important;

        color: var(--text-light) !important;

        transition:
            color .25s ease,
            transform .25s ease,
            filter .25s ease !important;
    }


    /* =====================================================
       HOVER
    ===================================================== */

    .head2 > a:hover {

        color: var(--main-color) !important;

        background:
            var(--glass-orange) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            0 4px 15px rgba(255,138,61,.08) !important;

        transform: translateY(-2px);
    }


    .head2 > a:hover > i {

        color: var(--main-color) !important;

        transform: translateY(-2px);

        filter:
            drop-shadow(0 3px 6px rgba(255,138,61,.25));
    }


    /* =====================================================
       ACTIVE
    ===================================================== */

    .head2 > a.active {

        color: var(--main-color) !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,138,61,.18),
                rgba(255,178,122,.12)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.45),
            0 5px 15px rgba(255,138,61,.10) !important;
    }


    .head2 > a.active > i {

        color: var(--main-color) !important;

        filter:
            drop-shadow(
                0 3px 7px
                rgba(255,138,61,.30)
            );
    }


    /* =====================================================
       ACTIVE DOT
    ===================================================== */

    .head2 > a.active::after {

        content: "" !important;

        position: absolute !important;

        left: 50% !important;
        bottom: 3px !important;

        width: 4px !important;
        height: 4px !important;

        transform: translateX(-50%) !important;

        border-radius: 50% !important;

        background: var(--main-color) !important;

        box-shadow:
            0 0 8px var(--orange-glow) !important;
    }


    /* =====================================================
       TOUCH
    ===================================================== */

    .head2 > a:active {

        transform: scale(.90) !important;

        background:
            rgba(255,138,61,.16) !important;
    }


    .head2 > a:active > i {

        transform: scale(.92);
    }


    /* =====================================================
       CART
    ===================================================== */

    .head2 > a#cart-btn {

        position: relative !important;
    }


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

    .head2 > a#mobile-menu-btn {

        cursor: pointer;
    }


    /* =====================================================
       BOTTOM SAFE AREA
    ===================================================== */

    @supports (bottom: env(safe-area-inset-bottom)) {

        .head2 {

            bottom:
                calc(
                    10px + env(safe-area-inset-bottom)
                ) !important;
        }

    }


    /* =====================================================
       PAGE BOTTOM SPACE
    ===================================================== */

    body {

        padding-bottom: 95px !important;
    }

}


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

@media screen and (max-width: 390px) {

    .head2 {

        left: 7px !important;
        right: 7px !important;

        bottom: 8px !important;

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

        padding: 5px !important;

        border-radius: 29px !important;
    }


    .head2 > a {

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

        font-size: 8px !important;
    }


    .head2 > a > i {

        width: 21px !important;
        height: 21px !important;

        font-size: 16px !important;
    }

}


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

@media screen and (max-width: 350px) {

    .head2 {

        left: 5px !important;
        right: 5px !important;

        height: 63px !important;

        border-radius: 27px !important;
    }


    .head2 > a {

        font-size: 7px !important;
    }


    .head2 > a > i {

        font-size: 15px !important;
    }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes mstoreNavIn {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.94);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

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

    .head2 {

        animation: none !important;
    }

    .head2 > a,
    .head2 > a > i {

        transition: none !important;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width: 769px) {

    .head2 {
        display: flex !important;
    }

}
/* =========================================================
   MOBILE - SHOW ONLY 4 ITEMS
========================================================= */

@media screen and (max-width: 768px) {

    /* تخفیفات */
    .head2 > a:nth-child(2) {
        display: none !important;
    }

    /* پیگیری سفارشات */
    .head2 > a:nth-child(3) {
        display: none !important;
    }

    /* علاقه‌مندی‌ها */
    .head2 > a:nth-child(6) {
        display: none !important;
    }


    /* فقط 4 آیتم باقی‌مانده */
    .head2 > a {
        flex: 1 1 25% !important;
        max-width: 25% !important;
    }

}
/* =========================================================
   MSTORE - CREATIVE EXPAND MENU
========================================================= */

@media screen and (max-width: 768px) {

    /* نوار در حالت عادی */
    .head2 {
        overflow: visible !important;
        transition:
            background .35s ease,
            box-shadow .35s ease,
            height .35s ease !important;
    }


    /* =====================================================
       آیتم‌های مخفی در حالت عادی
    ===================================================== */

    .head2 > a:nth-child(2),
    .head2 > a:nth-child(3),
    .head2 > a:nth-child(6) {
        display: none !important;
    }


    /* =====================================================
       وقتی منو باز شده
    ===================================================== */

    .head2.menu-open {

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.78),
                rgba(255,138,61,.20)
            ) !important;

        box-shadow:
            0 20px 50px rgba(0,0,0,.16),
            0 0 35px rgba(255,138,61,.15),
            inset 0 1px 0 rgba(255,255,255,.75) !important;
    }


    /* =====================================================
       آیتم‌های اضافی
    ===================================================== */

    .head2.menu-open > a:nth-child(2),
    .head2.menu-open > a:nth-child(3),
    .head2.menu-open > a:nth-child(6) {

        display: flex !important;

        position: absolute !important;

        width: 125px !important;
        max-width: none !important;

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

        padding: 5px 12px !important;

        box-sizing: border-box !important;

        flex: none !important;

        flex-direction: row !important;

        justify-content: center !important;

        gap: 8px !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.82),
                rgba(255,138,61,.15)
            ) !important;

        border:
            1px solid rgba(255,255,255,.65) !important;

        backdrop-filter:
            blur(20px)
            saturate(180%) !important;

        -webkit-backdrop-filter:
            blur(20px)
            saturate(180%) !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.12),
            0 4px 15px rgba(255,138,61,.12),
            inset 0 1px 0 rgba(255,255,255,.8) !important;

        color: var(--text-light) !important;

        z-index: 20 !important;

        opacity: 0;

        transform:
            translateY(20px)
            scale(.75);

        animation:
            mstoreExtraMenuIn .45s
            cubic-bezier(.22,1,.36,1)
            forwards;
    }


    /* =====================================================
       تخفیفات
    ===================================================== */

    .head2.menu-open > a:nth-child(2) {

        top: -65px !important;

        right: 8px !important;

        animation-delay: .04s;
    }


    /* =====================================================
       پیگیری سفارش
    ===================================================== */

    .head2.menu-open > a:nth-child(3) {

        top: -125px !important;

        left: 50% !important;

        transform:
            translateX(-50%)
            translateY(20px)
            scale(.75);

        animation-name: mstoreExtraMenuCenterIn;
        animation-delay: .10s;
    }


    /* =====================================================
       علاقه‌مندی
    ===================================================== */

    .head2.menu-open > a:nth-child(6) {

        top: -65px !important;

        left: 8px !important;

        animation-delay: .16s;
    }


    /* =====================================================
       آیکون آیتم‌های باز شده
    ===================================================== */

    .head2.menu-open > a:nth-child(2) > i,
    .head2.menu-open > a:nth-child(3) > i,
    .head2.menu-open > a:nth-child(6) > i {

        width: 25px !important;
        height: 25px !important;

        font-size: 16px !important;

        color: var(--main-color) !important;

        filter:
            drop-shadow(
                0 3px 7px
                rgba(255,138,61,.28)
            );
    }


    /* =====================================================
       Hover کارت‌ها
    ===================================================== */

    .head2.menu-open > a:nth-child(2):hover,
    .head2.menu-open > a:nth-child(3):hover,
    .head2.menu-open > a:nth-child(6):hover {

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.92),
                rgba(255,138,61,.22)
            ) !important;

        transform:
            translateY(-3px)
            scale(1.03) !important;

        box-shadow:
            0 15px 35px rgba(0,0,0,.14),
            0 5px 20px rgba(255,138,61,.18) !important;
    }


    /* =====================================================
       منو - حالت باز
    ===================================================== */

    .head2 > a#mobile-menu-btn {

        z-index: 50 !important;

        transition:
            transform .35s ease,
            background .35s ease,
            color .35s ease !important;
    }


    .head2.menu-open > a#mobile-menu-btn {

        background:
            rgba(255,138,61,.16) !important;

        color: var(--main-color) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.5),
            0 4px 15px rgba(255,138,61,.10) !important;
    }


    .head2.menu-open > a#mobile-menu-btn i {

        color: var(--main-color) !important;

        transform:
            rotate(90deg)
            scale(1.05);

        filter:
            drop-shadow(
                0 3px 7px
                rgba(255,138,61,.3)
            );
    }


    /* =====================================================
       افکت نور پشت منوی باز
    ===================================================== */

    .head2.menu-open::before {

        content: "";

        position: absolute;

        left: 50%;
        bottom: 100%;

        width: 150px;
        height: 150px;

        transform: translateX(-50%);

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(255,138,61,.18),
                rgba(255,138,61,.05) 45%,
                transparent 70%
            );

        filter: blur(10px);

        pointer-events: none;

        z-index: -1;

        animation:
            mstoreMenuGlow .5s ease both;
    }


    /* =====================================================
       انیمیشن کارت‌های کناری
    ===================================================== */

    @keyframes mstoreExtraMenuIn {

        0% {

            opacity: 0;

            transform:
                translateY(25px)
                scale(.72);
        }

        70% {

            opacity: 1;

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

        100% {

            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }
    }


    /* =====================================================
       انیمیشن کارت وسط
    ===================================================== */

    @keyframes mstoreExtraMenuCenterIn {

        0% {

            opacity: 0;

            transform:
                translateX(-50%)
                translateY(25px)
                scale(.72);
        }

        70% {

            opacity: 1;

            transform:
                translateX(-50%)
                translateY(-3px)
                scale(1.03);
        }

        100% {

            opacity: 1;

            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }
    }


    /* =====================================================
       Glow
    ===================================================== */

    @keyframes mstoreMenuGlow {

        from {

            opacity: 0;

            transform:
                translateX(-50%)
                scale(.65);
        }

        to {

            opacity: 1;

            transform:
                translateX(-50%)
                scale(1);
        }
    }


    /* =====================================================
       بستن منو
    ===================================================== */

    .head2:not(.menu-open) > a:nth-child(2),
    .head2:not(.menu-open) > a:nth-child(3),
    .head2:not(.menu-open) > a:nth-child(6) {

        display: none !important;
    }


    /* =====================================================
       موبایل خیلی کوچک
    ===================================================== */

    @media screen and (max-width: 390px) {

        .head2.menu-open > a:nth-child(2),
        .head2.menu-open > a:nth-child(3),
        .head2.menu-open > a:nth-child(6) {

            width: 112px !important;

            height: 45px !important;

            min-height: 45px !important;

            font-size: 8px !important;
        }

        .head2.menu-open > a:nth-child(2) {
            right: 5px !important;
        }

        .head2.menu-open > a:nth-child(6) {
            left: 5px !important;
        }

    }

}








































/* =========================================================
   MSTORE MOBILE HEADER
   PREMIUM GLASS + MORPH SEARCH
   ========================================================= */

@media screen and (max-width: 768px) {

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

    .head1 {
        width: 100% !important;
        min-height: 108px !important;
        box-sizing: border-box !important;

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

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

        gap: 9px !important;

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

        position: relative !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.20),
                rgba(255,255,255,.07)
            ) !important;

        backdrop-filter:
            blur(24px)
            saturate(180%) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(180%) !important;

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

        box-shadow:
            0 8px 30px rgba(0,0,0,.035) !important;

        z-index: 1000 !important;

        overflow: visible !important;
    }


    /* =====================================================
       GLASS LIGHT
       ===================================================== */

    .head1::before {

        content: "" !important;

        position: absolute !important;

        top: -30px !important;
        left: -30px !important;

        width: 130px !important;
        height: 130px !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(255,138,61,.16),
                transparent 70%
            ) !important;

        pointer-events: none !important;

        opacity: .8 !important;

        transition:
            all .8s cubic-bezier(.22,1,.36,1) !important;
    }


    /* =====================================================
       LOGO / TEXT
       بالا سمت چپ
       ===================================================== */

    .head1 .logo {

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

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        text-align: left !important;

        direction: ltr !important;

        gap: 7px !important;

        order: 1 !important;

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

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        transition:
            transform .65s cubic-bezier(.22,1,.36,1),
            opacity .4s ease !important;

        z-index: 2 !important;
    }


    .head1 .logo i {

        margin: 0 !important;

        font-size: 18px !important;

        color: var(--main-color) !important;

        transition:
            transform .65s cubic-bezier(.22,1,.36,1),
            opacity .35s ease !important;
    }


    .head1 .logo h2 {

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

        font-size: 18px !important;

        font-weight: 800 !important;

        letter-spacing: 1px !important;
        white-space: nowrap !important;

        direction: ltr !important;

        text-align: left !important;

        transition:
            transform .65s cubic-bezier(.22,1,.36,1),
            opacity .35s ease !important;
    }


    /* =====================================================
       SEARCH AREA
       ===================================================== */

    .head1 .search-basket {

        width: 100% !important;

        height: 44px !important;

        display: flex !important;

        align-items: center !important;

        position: relative !important;

        order: 2 !important;

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

        opacity: 1 !important;

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        transition:
            width .7s cubic-bezier(.22,1,.36,1),
            transform .7s cubic-bezier(.22,1,.36,1),
            opacity .45s ease !important;

        z-index: 3 !important;

        overflow: visible !important;
    }


    /* =====================================================
       INPUT
       ===================================================== */

    .head1 .search-basket input {

        width: 100% !important;

        height: 44px !important;

        box-sizing: border-box !important;

        padding:
            0 45px 0 14px !important;

        border:
            1px solid rgba(255,138,61,.16) !important;

        border-radius: 15px !important;

        outline: none !important;

        background:
            rgba(255,255,255,.45) !important;

        backdrop-filter:
            blur(15px) !important;

        -webkit-backdrop-filter:
            blur(15px) !important;

        color: var(--text) !important;

        font-family: inherit !important;

        font-size: 13px !important;

        direction: rtl !important;

        opacity: 1 !important;

        transform:
            scale(1)
            translateX(0) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.45),
            0 6px 20px rgba(0,0,0,.035) !important;

        transition:
            width .7s cubic-bezier(.22,1,.36,1),
            height .7s cubic-bezier(.22,1,.36,1),
            opacity .35s ease,
            transform .7s cubic-bezier(.22,1,.36,1),
            border-radius .7s cubic-bezier(.22,1,.36,1),
            background .4s ease,
            box-shadow .5s ease !important;
    }


    .head1 .search-basket input:focus {

        border-color:
            rgba(255,138,61,.35) !important;

        background:
            rgba(255,255,255,.70) !important;

        box-shadow:
            0 8px 28px rgba(255,138,61,.10),
            0 0 0 3px rgba(255,138,61,.035) !important;
    }


    /* =====================================================
       SEARCH ICON
       ===================================================== */

    .head1 .search-icon {

        position: absolute !important;

        right: 14px !important;

        top: 50% !important;

        width: 22px !important;
        height: 22px !important;

        display: flex !important;

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

        margin: 0 !important;

        color: var(--main-color) !important;

        font-size: 15px !important;

        pointer-events: none !important;

        z-index: 10 !important;

        opacity: 1 !important;

        transform:
            translateY(-50%)
            scale(1)
            rotate(0deg) !important;

        transition:
            transform .7s cubic-bezier(.22,1,.36,1),
            opacity .35s ease !important;
    }


    /* =====================================================
       SCROLLED HEADER
       ===================================================== */

    .head1.is-scrolled {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

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

        padding: 10px 14px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 0 !important;

        /* GLASS */

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.48),
                rgba(255,255,255,.18)
            ) !important;

        backdrop-filter:
            blur(28px)
            saturate(190%) !important;

        -webkit-backdrop-filter:
            blur(28px)
            saturate(190%) !important;

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

        box-shadow:
            0 8px 35px rgba(0,0,0,.09),
            inset 0 1px 0 rgba(255,255,255,.45) !important;

        z-index: 2147483647 !important;

        overflow: visible !important;
    }


    /* =====================================================
       GLASS REFLECTION
       ===================================================== */

    .head1.is-scrolled::after {

        content: "" !important;

        position: absolute !important;

        top: -60px !important;

        right: 15% !important;

        width: 180px !important;

        height: 120px !important;

        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.38),
                transparent 70%
            ) !important;

        filter: blur(12px) !important;

        pointer-events: none !important;

        opacity: .7 !important;
    }


    /* =====================================================
       LOGO هنگام اسکرول
       سمت چپ
       ===================================================== */

    .head1.is-scrolled .logo {

        width: auto !important;

        height: 44px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        order: unset !important;

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

        transform:
            translate3d(0,0,0)
            scale(1) !important;
    }


    .head1.is-scrolled .logo i {

        font-size: 20px !important;

        transform:
            rotate(360deg)
            scale(1) !important;
    }


    .head1.is-scrolled .logo h2 {

        font-size: 19px !important;

        transform:
            translateX(0) !important;
    }


    /* =====================================================
       SEARCH → ICON MORPH
       ===================================================== */

    .head1.is-scrolled .search-basket {

        width: 44px !important;

        min-width: 44px !important;

        max-width: 44px !important;

        height: 44px !important;

        order: unset !important;

        margin: 0 !important;

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        overflow: hidden !important;

        border-radius: 15px !important;

        background:
            rgba(255,255,255,.32) !important;

        border:
            1px solid rgba(255,138,61,.12) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.5),
            0 7px 22px rgba(0,0,0,.06) !important;

        backdrop-filter:
            blur(16px) !important;

        -webkit-backdrop-filter:
            blur(16px) !important;

        animation:
            searchMorph .75s cubic-bezier(.22,1,.36,1) both !important;
    }


    /* =====================================================
       INPUT COLLAPSE
       ===================================================== */

    .head1.is-scrolled .search-basket input {

        width: 44px !important;

        height: 44px !important;

        padding: 0 !important;

        border-radius: 15px !important;

        border-color:
            transparent !important;

        background:
            transparent !important;

        opacity: 0 !important;

        transform:
            scale(.25)
            translateX(18px) !important;

        pointer-events: none !important;

        box-shadow: none !important;

        animation:
            inputCollapse .65s cubic-bezier(.22,1,.36,1) both !important;
    }


    /* =====================================================
       ICON MORPH
       ===================================================== */

    .head1.is-scrolled .search-icon {

        right: 11px !important;

        width: 22px !important;

        height: 22px !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        transform:
            translateY(-50%)
            scale(1)
            rotate(0deg) !important;

        animation:
            iconAppear .75s cubic-bezier(.22,1,.36,1) both !important;
    }


    /* =====================================================
       ANIMATIONS
       ===================================================== */

    @keyframes searchMorph {

        0% {
            width: 100%;
            border-radius: 15px;
            transform: scaleX(1);
        }

        35% {
            width: 85%;
            border-radius: 18px;
            transform: scaleX(.98);
        }

        65% {
            width: 44px;
            border-radius: 17px;
            transform: scaleX(1.08);
        }

        82% {
            transform: scaleX(.94);
        }

        100% {
            width: 44px;
            border-radius: 15px;
            transform: scaleX(1);
        }
    }


    @keyframes inputCollapse {

        0% {
            opacity: 1;
            transform: scale(1);
        }

        35% {
            opacity: .75;
            transform: scale(.88);
        }

        70% {
            opacity: .15;
            transform:
                scale(.42)
                translateX(12px);
        }

        100% {
            opacity: 0;
            transform:
                scale(.25)
                translateX(18px);
        }
    }


    @keyframes iconAppear {

        0% {
            opacity: 0;
            transform:
                translateY(-50%)
                scale(.15)
                rotate(-35deg);
        }

        35% {
            opacity: .25;
            transform:
                translateY(-50%)
                scale(.55)
                rotate(-15deg);
        }

        65% {
            opacity: .8;
            transform:
                translateY(-50%)
                scale(1.18)
                rotate(5deg);
        }

        82% {
            transform:
                translateY(-50%)
                scale(.92)
                rotate(-2deg);
        }

        100% {
            opacity: 1;
            transform:
                translateY(-50%)
                scale(1)
                rotate(0);
        }
    }


    /* =====================================================
       HEADER عمومی
       ===================================================== */

    .header {

        position: static !important;

        top: auto !important;

        width: 100% !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;

        background: transparent !important;

        border-bottom: none !important;

        z-index: auto !important;
    }


    /* =====================================================
       جلوگیری از اسکرول افقی
       ===================================================== */

    html,
    body {

        max-width: 100% !important;

        overflow-x: hidden !important;
    }
}
/* =========================================================
   MSTORE — ULTRA SMOOTH GLASS MORPH
   ========================================================= */

@media screen and (max-width: 768px) {

    /* =====================================================
       GLASS HEADER — نرم‌تر و طبیعی‌تر
       ===================================================== */

    .head1.is-scrolled {

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.62),
                rgba(255,255,255,.28)
            ) !important;

        backdrop-filter:
            blur(32px)
            saturate(175%) !important;

        -webkit-backdrop-filter:
            blur(32px)
            saturate(175%) !important;

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

        box-shadow:
            0 10px 35px rgba(0,0,0,.055),
            inset 0 1px 0 rgba(255,255,255,.65) !important;

        transition:
            background .8s ease,
            backdrop-filter .8s ease,
            box-shadow .8s ease !important;
    }


    /* =====================================================
       نور شیشه
       ===================================================== */

    .head1.is-scrolled::after {

        content: "" !important;

        position: absolute !important;

        top: -70px !important;
        right: 5% !important;

        width: 260px !important;
        height: 150px !important;

        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.48) 0%,
                rgba(255,255,255,.12) 38%,
                transparent 72%
            ) !important;

        filter: blur(18px) !important;

        opacity: .65 !important;

        pointer-events: none !important;

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        animation:
            glassLight 5s ease-in-out infinite alternate !important;
    }


    @keyframes glassLight {

        0% {
            opacity: .45;
            transform:
                translateX(-15px)
                scale(.95);
        }

        100% {
            opacity: .72;
            transform:
                translateX(20px)
                scale(1.08);
        }
    }


    /* =====================================================
       SEARCH CONTAINER
       ===================================================== */

    .head1 .search-basket {

        transition:
            width .9s cubic-bezier(.16,1,.3,1),
            height .7s cubic-bezier(.16,1,.3,1),
            transform .9s cubic-bezier(.16,1,.3,1),
            border-radius .9s cubic-bezier(.16,1,.3,1),
            background .7s ease,
            box-shadow .7s ease !important;

        will-change:
            width,
            transform,
            border-radius !important;
    }


    /* =====================================================
       حالت اسکرول — ظرف سرچ
       ===================================================== */

    .head1.is-scrolled .search-basket {

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

        height: 43px !important;

        border-radius: 15px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.62),
                rgba(255,255,255,.20)
            ) !important;

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

        backdrop-filter:
            blur(18px) !important;

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

        box-shadow:
            0 7px 24px rgba(0,0,0,.065),
            inset 0 1px 0 rgba(255,255,255,.75),
            inset 0 -1px 0 rgba(255,255,255,.16) !important;

        overflow: hidden !important;

        animation:
            morphContainer .95s cubic-bezier(.16,1,.3,1) both !important;
    }


    /* =====================================================
       INPUT
       ===================================================== */

    .head1 .search-basket input {

        transition:
            width .85s cubic-bezier(.16,1,.3,1),
            opacity .45s ease,
            transform .85s cubic-bezier(.16,1,.3,1),
            border-radius .85s cubic-bezier(.16,1,.3,1),
            filter .55s ease !important;

        will-change:
            width,
            transform,
            opacity,
            filter !important;
    }


    /* =====================================================
       INPUT → MORPH
       ===================================================== */

    .head1.is-scrolled .search-basket input {

        width: 43px !important;
        height: 43px !important;

        padding: 0 !important;

        border-radius: 15px !important;

        opacity: 0 !important;

        transform:
            translate3d(20px,0,0)
            scale(.18) !important;

        filter:
            blur(5px) !important;

        pointer-events: none !important;

        animation:
            inputMorph .85s cubic-bezier(.16,1,.3,1) both !important;
    }


    /* =====================================================
       SEARCH ICON
       ===================================================== */

    .head1 .search-icon {

        transition:
            opacity .35s ease,
            transform .85s cubic-bezier(.16,1,.3,1),
            color .3s ease !important;

        will-change:
            transform,
            opacity !important;
    }


    .head1.is-scrolled .search-icon {

        right: 10px !important;

        opacity: 1 !important;

        transform:
            translateY(-50%)
            scale(1) !important;

        animation:
            morphIcon 1s cubic-bezier(.16,1,.3,1) both !important;
    }


    /* =====================================================
       MORPH CONTAINER
       ===================================================== */

    @keyframes morphContainer {

        0% {

            width: 100%;

            border-radius: 15px;

            transform:
                translateX(0)
                scaleX(1);
        }

        22% {

            width: 88%;

            border-radius: 17px;

            transform:
                translateX(0)
                scaleX(.985);
        }

        45% {

            width: 64%;

            border-radius: 19px;

            transform:
                translateX(0)
                scaleX(.96);
        }

        67% {

            width: 105px;

            border-radius: 18px;

            transform:
                translateX(3px)
                scaleX(.92);
        }

        82% {

            width: 48px;

            border-radius: 16px;

            transform:
                translateX(0)
                scaleX(1.04);
        }

        92% {

            width: 41px;

            border-radius: 15px;

            transform:
                scaleX(.98);
        }

        100% {

            width: 43px;

            border-radius: 15px;

            transform:
                scaleX(1);
        }
    }


    /* =====================================================
       MORPH INPUT
       ===================================================== */

    @keyframes inputMorph {

        0% {

            opacity: 1;

            transform:
                translate3d(0,0,0)
                scale(1);

            filter: blur(0);
        }

        20% {

            opacity: 1;

            transform:
                translate3d(-2px,0,0)
                scale(.97);

            filter: blur(0);
        }

        42% {

            opacity: .85;

            transform:
                translate3d(8px,0,0)
                scale(.78);

            filter: blur(.3px);
        }

        62% {

            opacity: .45;

            transform:
                translate3d(17px,0,0)
                scale(.53);

            filter: blur(1px);
        }

        80% {

            opacity: .12;

            transform:
                translate3d(20px,0,0)
                scale(.31);

            filter: blur(3px);
        }

        100% {

            opacity: 0;

            transform:
                translate3d(20px,0,0)
                scale(.18);

            filter: blur(5px);
        }
    }


    /* =====================================================
       MORPH ICON
       ===================================================== */

    @keyframes morphIcon {

        0% {

            opacity: 0;

            transform:
                translateY(-50%)
                translateX(-7px)
                scale(.15)
                rotate(-45deg);
        }

        28% {

            opacity: .2;

            transform:
                translateY(-50%)
                translateX(-4px)
                scale(.45)
                rotate(-25deg);
        }

        52% {

            opacity: .7;

            transform:
                translateY(-50%)
                translateX(1px)
                scale(1.18)
                rotate(8deg);
        }

        68% {

            opacity: 1;

            transform:
                translateY(-50%)
                translateX(0)
                scale(.88)
                rotate(-4deg);
        }

        82% {

            transform:
                translateY(-50%)
                scale(1.08)
                rotate(2deg);
        }

        92% {

            transform:
                translateY(-50%)
                scale(.96)
                rotate(0);
        }

        100% {

            opacity: 1;

            transform:
                translateY(-50%)
                scale(1)
                rotate(0);
        }
    }


    /* =====================================================
       SEARCH GLASS HIGHLIGHT
       ===================================================== */

    .head1.is-scrolled .search-basket::before {

        content: "" !important;

        position: absolute !important;

        top: 2px !important;
        left: 5px !important;

        width: 25px !important;
        height: 9px !important;

        border-radius: 50% !important;

        background:
            rgba(255,255,255,.48) !important;

        filter: blur(4px) !important;

        opacity: .7 !important;

        pointer-events: none !important;

        z-index: 8 !important;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .head1 .logo {

        justify-content: flex-start !important;

        text-align: left !important;

        direction: ltr !important;
    }


    .head1 .logo h2 {

        direction: ltr !important;

        text-align: left !important;
    }
}


@media screen and (max-width: 768px) {

    /* =====================================================
       SCROLL HEADER — LIGHT & SMOOTH
       ===================================================== */

    .head1 {
        will-change: height, padding, background;
    }


    .head1.is-scrolled {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

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

        padding: 9px 14px !important;

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

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

        gap: 0 !important;

        background:
            rgba(255,255,255,.82) !important;

        /* سبک‌تر از blur 32px */
        backdrop-filter:
            blur(14px) !important;

        -webkit-backdrop-filter:
            blur(14px) !important;

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

        box-shadow:
            0 6px 24px rgba(0,0,0,.06) !important;

        z-index: 2147483647 !important;

        overflow: visible !important;

        transition:
            height .45s cubic-bezier(.22,1,.36,1),
            min-height .45s cubic-bezier(.22,1,.36,1),
            padding .45s cubic-bezier(.22,1,.36,1),
            background .35s ease,
            box-shadow .35s ease !important;

        will-change:
            height,
            padding,
            background;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .head1.is-scrolled .logo {

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

        display: flex !important;

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

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

        transform: translate3d(0,0,0) !important;

        transition:
            transform .45s cubic-bezier(.22,1,.36,1) !important;

        will-change: transform;
    }


    .head1.is-scrolled .logo i {

        font-size: 20px !important;

        transform: rotate(0deg) !important;

        transition:
            transform .45s cubic-bezier(.22,1,.36,1) !important;
    }


    .head1.is-scrolled .logo h2 {

        font-size: 19px !important;

        transform: translate3d(0,0,0) !important;

        transition:
            transform .45s cubic-bezier(.22,1,.36,1),
            font-size .45s ease !important;
    }


    /* =====================================================
       SEARCH CONTAINER
       ===================================================== */

    .head1 .search-basket {

        transition:
            width .55s cubic-bezier(.22,1,.36,1),
            min-width .55s cubic-bezier(.22,1,.36,1),
            max-width .55s cubic-bezier(.22,1,.36,1),
            height .45s ease,
            transform .55s cubic-bezier(.22,1,.36,1),
            border-radius .45s ease !important;

        will-change:
            width,
            transform;
    }


    .head1.is-scrolled .search-basket {

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

        height: 43px !important;

        margin: 0 !important;

        border-radius: 14px !important;

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

        border:
            1px solid rgba(255,138,61,.14) !important;

        box-shadow:
            0 5px 18px rgba(0,0,0,.05) !important;

        backdrop-filter:
            blur(10px) !important;

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

        overflow: hidden !important;

        transform:
            translate3d(0,0,0) !important;
    }


    /* =====================================================
       INPUT
       ===================================================== */

    .head1.is-scrolled .search-basket input {

        width: 43px !important;
        height: 43px !important;

        padding: 0 !important;

        border-radius: 14px !important;

        border-color: transparent !important;

        background: transparent !important;

        opacity: 0 !important;

        transform:
            scale(.35) !important;

        pointer-events: none !important;

        box-shadow: none !important;

        transition:
            width .5s cubic-bezier(.22,1,.36,1),
            opacity .25s ease,
            transform .5s cubic-bezier(.22,1,.36,1) !important;

        will-change:
            transform,
            opacity;
    }


    /* =====================================================
       SEARCH ICON
       ===================================================== */

    .head1.is-scrolled .search-icon {

        right: 10px !important;

        opacity: 1 !important;

        transform:
            translateY(-50%)
            scale(1) !important;

        transition:
            opacity .3s ease,
            transform .5s cubic-bezier(.22,1,.36,1) !important;

        will-change:
            transform,
            opacity;
    }


    /* =====================================================
       حذف انیمیشن‌های دائمی و سنگین
       ===================================================== */

    .head1.is-scrolled::after {

        animation: none !important;

        filter: none !important;

        opacity: .35 !important;

        transform: translate3d(0,0,0) !important;
    }


    .head1.is-scrolled .search-basket {

        animation: none !important;
    }


    .head1.is-scrolled .search-basket input {

        animation: none !important;
    }


    .head1.is-scrolled .search-icon {

        animation: none !important;
    }


    /* =====================================================
       کاهش محاسبات مرورگر هنگام اسکرول
       ===================================================== */

    .head1,
    .head1 .search-basket,
    .head1 .search-basket input,
    .head1 .search-icon,
    .head1 .logo {

        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

}













































/* =========================================================
   FEATURED NEW — MOBILE RESPONSIVE
   فقط موبایل
========================================================= */

@media screen and (max-width: 768px) {

    /* ===============================
       بخش اصلی
    =============================== */

    .featured-new {
        width: 100%;
        padding: 45px 16px 20px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        overflow: hidden;
        box-sizing: border-box;
    }


    /* ===============================
       بخش متن
    =============================== */

    .featured-left {
        width: 100%;
        flex-shrink: 1;
        text-align: right;
        box-sizing: border-box;
        margin-bottom: 22px;
    }


    .featured-left .tag {
        height: 34px;
        padding: 0 15px;
        margin-bottom: 13px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    .featured-left h2 {
        font-size: clamp(1.65rem, 7vw, 2.2rem);
        line-height: 1.45;
        margin: 0 0 7px;
        max-width: 100%;
    }


    .featured-left p {
        font-size: .82rem;
        line-height: 1.9;
        margin: 0;
        color: #777;
    }


    .featured-line {
        width: 55px;
        height: 3px;
        margin-top: 14px;
    }


    /* ===============================
       دکمه کالکشن
    =============================== */

    .view-all-products {
        margin-top: 18px;
        height: 46px;
        padding: 0 20px;
        gap: 10px;
        font-size: 12px;
        border-radius: 50px;
    }


    .view-all-products span {
        font-size: 18px;
    }


    /* ===============================
       بخش محصولات
    =============================== */

    .featured-right {
        width: 100%;
        min-height: 470px;
        height: auto;
        flex-shrink: 1;
        position: relative;
        box-sizing: border-box;
    }


    /* ===============================
       اسلایدر
    =============================== */

    .products-stage {
        width: 100%;
        height: 470px;
        margin: 0;
        perspective: 1800px;
        overflow: hidden;
        box-sizing: border-box;
    }


    /* ===============================
       کارت محصول
    =============================== */

    .products-stage .product {
        width: min(76vw, 285px);
        height: min(112vw, 435px);
        max-height: 435px;
    }


    /* ===============================
       محتوای کارت
    =============================== */

    .product-content {
        right: 10px;
        left: 10px;
        bottom: 10px;
        padding: 11px;
        border-radius: 17px;
    }


    .price-badge {
        padding: 6px 10px;
        margin-bottom: 7px;
        font-size: .72rem;
    }


    .product-content h3 {
        font-size: .92rem;
        line-height: 1.45;
        margin-bottom: 4px;
    }


    .product-content p {
        font-size: .72rem;
        line-height: 1.6;
        margin-bottom: 9px;
    }


    .btn-product {
        height: 39px;
        border-radius: 12px;
        font-size: .76rem;
    }


    /* ===============================
       دکمه‌های اسلایدر
    =============================== */

    .scroll-btn {
        width: 42px;
        height: 42px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        box-shadow:
            0 10px 25px rgba(0,0,0,.10);
    }


    .scroll-btn.left {
        left: 4px;
    }


    .scroll-btn.right {
        right: 4px;
    }


    .scroll-btn:hover {
        transform: translateY(-50%);
    }


    /* ===============================
       نور پس‌زمینه
    =============================== */

    .products-stage::before {
        width: 430px;
        height: 430px;
    }


    .products-stage::after {
        width: 270px;
        height: 270px;
        bottom: -130px;
        filter: blur(32px);
    }

}
@media (max-width: 768px){

    .featured-new{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 760px;
        padding: 35px 18px 30px;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 80% 35%,
                rgba(255,138,61,.09),
                transparent 35%
            );
    }

    /* خطوط تکنولوژیک پس‌زمینه */

    .featured-new::before{
        content: "01";
        position: absolute;
        top: 20px;
        left: 18px;

        font-family: monospace;
        font-size: 11px;
        letter-spacing: 3px;

        color: var(--main-color);
        opacity: .55;
    }

    .featured-new::after{
        content: "";
        position: absolute;

        width: 180px;
        height: 180px;

        right: -100px;
        top: 250px;

        border: 1px solid rgba(255,138,61,.15);
        border-radius: 50%;

        box-shadow:
            0 0 0 30px rgba(255,138,61,.025),
            0 0 0 60px rgba(255,138,61,.018);

        pointer-events: none;
    }

}




















































/* =========================================================
   POPULAR PRODUCTS — CLEAN RESPONSIVE
   فقط اندازه و چیدمان
   استایل اصلی کارت‌ها حفظ می‌شود
========================================================= */


/* =========================================================
   TABLET — 1024px
========================================================= */

@media screen and (max-width: 1024px) {

    .popular-products {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .popular-products .section-title {
        width: 100%;
        margin-bottom: 60px;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .popular-products .section-title h1 {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .popular-products .products-grid {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 22px;
        padding: 15px 30px 25px;
        box-sizing: border-box;

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

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .popular-products .products-grid::-webkit-scrollbar {
        display: none;
    }

    /* تمام کارت‌ها یک اندازه */
    .popular-products .products-grid .product {
        flex: 0 0 290px;
        width: 290px;
        height: 460px;

        min-width: 290px;
        max-width: 290px;

        min-height: 460px;
        max-height: 460px;

        margin: 0;

        box-sizing: border-box;
        scroll-snap-align: start;
    }
}


/* =========================================================
   MOBILE — 768px
========================================================= */

@media screen and (max-width: 768px) {

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

    .popular-products {
        width: 100%;
        margin: 0;
        padding: 45px 0 35px;

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


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

    .popular-products .section-title {
        width: 100%;

        margin: 0 0 30px;
        padding: 0 18px;

        box-sizing: border-box;
        text-align: center;
    }

    .popular-products .section-title span {
        display: block;

        margin-bottom: 10px;

        font-size: .72rem;
        line-height: 1.4;
    }

    .popular-products .section-title h1 {
        display: inline-block;

        max-width: 100%;
        margin: 0;

        font-size: clamp(1.65rem, 7vw, 2.1rem);
        line-height: 1.5;

        white-space: normal;
    }


    /* =========================
       PRODUCTS CONTAINER
    ========================= */

    .popular-products .products-grid {
        width: 100%;

        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;

        gap: 15px;

        margin: 0;
        padding: 8px 18px 25px;

        box-sizing: border-box;

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

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .popular-products .products-grid::-webkit-scrollbar {
        display: none;
    }


    /* =========================
       ALL PRODUCT CARDS
       فقط یک قانون برای اندازه
    ========================= */

    .popular-products .products-grid .product {

        flex: 0 0 76vw;

        width: 76vw;
        height: 118vw;

        min-width: 250px;
        max-width: 300px;

        min-height: 370px;
        max-height: 455px;

        margin: 0;

        box-sizing: border-box;

        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}


/* =========================================================
   SMALL MOBILE — 430px
========================================================= */

@media screen and (max-width: 430px) {

    .popular-products {
        padding: 40px 0 30px;
    }


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

    .popular-products .section-title {
        margin-bottom: 25px;
        padding: 0 16px;
    }

    .popular-products .section-title span {
        margin-bottom: 8px;
        font-size: .68rem;
    }

    .popular-products .section-title h1 {
        font-size: 1.7rem;
        line-height: 1.5;
    }


    /* =========================
       PRODUCTS CONTAINER
    ========================= */

    .popular-products .products-grid {

        gap: 13px;

        padding:
            7px
            16px
            22px;
    }


    /* =========================
       ALL PRODUCT CARDS
    ========================= */

    .popular-products .products-grid .product {

        flex: 0 0 78vw;

        width: 78vw;
        height: 119vw;

        min-width: 245px;
        max-width: 285px;

        min-height: 350px;
        max-height: 425px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — 360px
========================================================= */

@media screen and (max-width: 360px) {

    .popular-products {
        padding: 35px 0 25px;
    }


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

    .popular-products .section-title {
        margin-bottom: 22px;
        padding: 0 14px;
    }

    .popular-products .section-title span {
        font-size: .63rem;
    }

    .popular-products .section-title h1 {
        font-size: 1.55rem;
        line-height: 1.5;
    }


    /* =========================
       PRODUCTS CONTAINER
    ========================= */

    .popular-products .products-grid {

        gap: 12px;

        padding-left: 14px;
        padding-right: 14px;
    }


    /* =========================
       ALL PRODUCT CARDS
    ========================= */

    .popular-products .products-grid .product {

        flex: 0 0 82vw;

        width: 82vw;
        height: 121vw;

        min-width: 235px;
        max-width: 275px;

        min-height: 335px;
        max-height: 400px;
    }
}


/* =========================================================
   TOUCH DEVICES
   فقط جلوگیری از hover سنگین
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .popular-products .product:hover {
        transform: none;
    }

    .popular-products .product:hover .product-image img {
        transform: none;
    }
}





































































































































































































































/* =========================================================
   LUX BLOG — RESPONSIVE ONLY
   استایل اصلی دسکتاپ دست نخورده
========================================================= */


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

@media (max-width: 900px) {

    .lux-blog {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .lux-head {
        width: 100%;
        box-sizing: border-box;
        gap: 15px;
    }

    .lux-head > div {
        min-width: 0;
    }

    .lux-head h2 {
        font-size: 25px;
        line-height: 1.5;
    }

    .lux-head p {
        font-size: 13px;
        line-height: 1.7;
    }

    .lux-row {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .lux-card {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .lux-img {
        width: 100%;
        overflow: hidden;
    }

    .lux-img img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }

    .lux-content {
        min-width: 0;
        box-sizing: border-box;
    }

    .lux-content h3 {
        overflow-wrap: anywhere;
    }
}


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

@media (max-width: 700px) {

    .lux-blog {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .lux-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
    }

    .lux-head > div {
        min-width: 0;
    }

    .lux-head h2 {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 21px;
        line-height: 1.5;
        margin: 0;
        white-space: nowrap;
    }

    .lux-head h2 .icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .lux-head p {
        margin: 3px 0 0;
        font-size: 11px;
        line-height: 1.7;
        white-space: nowrap;
    }

    .lux-head > a {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    .lux-head > a .icon.small {
        width: 15px;
        height: 15px;
    }


    /* =========================
       HORIZONTAL BLOG CARDS
    ========================= */

    .lux-row {
        width: calc(100% + 0px);
        display: flex;
        gap: 12px;

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

        padding: 3px 2px 10px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .lux-row::-webkit-scrollbar {
        display: none;
    }

    .lux-card {
        flex: 0 0 78%;
        width: 78%;
        min-width: 0;

        box-sizing: border-box;

        scroll-snap-align: start;
    }


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

    .lux-img {
        width: 100%;
        aspect-ratio: 1.5 / 1;
        overflow: hidden;
    }

    .lux-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


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

    .lux-content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .lux-content span {
        display: flex;
        align-items: center;
        gap: 4px;

        font-size: 9px;
        line-height: 1.5;
    }

    .lux-content span .icon.mini {
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
    }

    .lux-content h3 {
        margin: 5px 0 0;

        font-size: 14px;
        line-height: 1.7;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}


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

@media (max-width: 480px) {

    .lux-head {
        gap: 8px;
    }

    .lux-head h2 {
        font-size: 19px;
        gap: 6px;
    }

    .lux-head h2 .icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .lux-head p {
        font-size: 10px;
    }

    .lux-head > a {
        font-size: 10px;
    }

    .lux-head > a .icon.small {
        width: 14px;
        height: 14px;
    }


    .lux-row {
        gap: 10px;
        padding-bottom: 8px;
    }

    .lux-card {
        flex-basis: 82%;
        width: 82%;
    }

    .lux-img {
        aspect-ratio: 1.5 / 1;
    }

    .lux-content span {
        font-size: 8px;
    }

    .lux-content span .icon.mini {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    .lux-content h3 {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 4px;
    }
}


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

@media (max-width: 360px) {

    .lux-head h2 {
        font-size: 17px;
    }

    .lux-head h2 .icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .lux-head p {
        font-size: 9px;
    }

    .lux-head > a {
        font-size: 9px;
    }

    .lux-card {
        flex-basis: 86%;
        width: 86%;
    }

    .lux-content h3 {
        font-size: 12px;
    }
}






























/* =========================================================
   BRAND STATS — RESPONSIVE ONLY
   بزرگ و لوکس در موبایل
========================================================= */

@media (max-width: 900px) {

    .brand-stats {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .stats-header {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .stats-header h2 {
        font-size: 30px;
        line-height: 1.6;
    }

    .stats-header p {
        font-size: 14px;
        line-height: 2;
    }

    .stats-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .stat-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}


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

@media (max-width: 700px) {

    .brand-stats {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }


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

    .stats-header {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .stats-header > span {
        font-size: 13px;
        line-height: 1.6;
    }

    .stats-header h2 {
        margin: 8px 0;
        font-size: 24px;
        line-height: 1.6;
    }

    .stats-header p {
        margin: 0;
        font-size: 12px;
        line-height: 2;
    }

    .stats-header p br {
        display: none;
    }


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

    .stats-grid {
        width: 100%;

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

        gap: 12px;

        box-sizing: border-box;
    }


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

    .stat-card {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 20px 10px;

        min-height: 145px;
    }


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

    .stat-card i {
        font-size: 27px;
        margin-bottom: 9px;
    }


    /* =========================
       NUMBER
    ========================= */

    .stat-card h3 {
        margin: 0;

        font-size: 32px;
        line-height: 1.2;

        white-space: nowrap;
    }


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

    .stat-card p {
        margin: 7px 0 0;

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

        white-space: nowrap;
    }
}


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

@media (max-width: 480px) {

    .stats-header {
        padding: 0 12px;
    }

    .stats-header > span {
        font-size: 12px;
    }

    .stats-header h2 {
        font-size: 22px;
        line-height: 1.6;
    }

    .stats-header p {
        font-size: 11px;
        line-height: 1.9;
    }


    .stats-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 18px 8px;
        min-height: 138px;
    }

    .stat-card i {
        font-size: 25px;
        margin-bottom: 8px;
    }

    .stat-card h3 {
        font-size: 29px;
    }

    .stat-card p {
        font-size: 11px;
        margin-top: 6px;
    }
}


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

@media (max-width: 360px) {

    .stats-grid {
        gap: 9px;
    }

    .stats-header h2 {
        font-size: 20px;
    }

    .stats-header p {
        font-size: 10px;
    }

    .stat-card {
        padding: 16px 7px;
        min-height: 130px;
    }

    .stat-card i {
        font-size: 23px;
    }

    .stat-card h3 {
        font-size: 27px;
    }

    .stat-card p {
        font-size: 10px;
    }
}











































/* =========================================================
   BIBSHOP LUX FOOTER — RESPONSIVE ONLY
   استایل اصلی دسکتاپ دست نخورده
========================================================= */


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

@media (max-width: 1000px) {

    .lux-footer {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* FEATURES */

    .footer-features {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        box-sizing: border-box;
    }

    .feature-box {
        min-width: 0;
        box-sizing: border-box;
    }


    /* MAIN */

    .footer-main {
        width: 100%;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 28px;
        box-sizing: border-box;
    }

    .footer-brand,
    .footer-links,
    .footer-trust {
        min-width: 0;
    }


    /* TRUST */

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


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

@media (max-width: 700px) {

    .lux-footer {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }


    /* =====================================================
       BIG BACKGROUND TEXT
    ===================================================== */

    .footer-bg-text {
        font-size: clamp(65px, 21vw, 120px);
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
    }


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

    .footer-features {
        width: 100%;

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

        gap: 10px;

        box-sizing: border-box;
    }

    .feature-box {
        width: 100%;
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 10px;

        padding: 15px 12px;

        box-sizing: border-box;
    }

    .feature-box > i {
        flex: 0 0 auto;
        font-size: 23px;
    }

    .feature-box > div {
        min-width: 0;
    }

    .feature-box h4 {
        margin: 0 0 3px;

        font-size: 13px;
        line-height: 1.5;

        white-space: nowrap;
    }

    .feature-box span {
        display: block;

        font-size: 10px;
        line-height: 1.6;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


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

    .footer-main {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;

        box-sizing: border-box;
    }


    /* =====================================================
       BRAND
    ===================================================== */

    .footer-brand {
        width: 100%;
        min-width: 0;

        text-align: center;
    }

    .footer-brand h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    .footer-brand p {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;

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

        text-align: center;
    }


    /* =====================================================
       SOCIALS
    ===================================================== */

    .socials {
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 10px;
    }

    .socials a {
        width: 42px;
        height: 42px;

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

        flex: 0 0 42px;
    }

    .socials a i {
        font-size: 17px;
    }


    /* =====================================================
       LINKS
    ===================================================== */

    .footer-links {
        width: 100%;
        min-width: 0;

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

        column-gap: 20px;
        row-gap: 9px;

        box-sizing: border-box;
    }

    .footer-links h3 {
        grid-column: 1 / -1;

        margin-bottom: 4px;

        font-size: 16px;
        line-height: 1.6;
    }

    .footer-links a {
        min-width: 0;

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

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* =====================================================
       TRUST
    ===================================================== */

    .footer-trust {
        width: 100%;
        min-width: 0;

        text-align: center;
    }

    .footer-trust h3 {
        margin-bottom: 13px;

        font-size: 16px;
        line-height: 1.6;
    }

    .trust-grid {
        width: 100%;

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

        gap: 9px;

        box-sizing: border-box;
    }

    .trust-card {
        min-width: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 10px 6px;

        box-sizing: border-box;
    }

    .trust-card img {
        width: 48px;
        height: 48px;

        max-width: 100%;

        object-fit: contain;
    }

    .trust-card span {
        margin-top: 5px;

        font-size: 10px;
        line-height: 1.5;

        white-space: nowrap;
    }


    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .newsletter {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 15px;

        box-sizing: border-box;
        text-align: center;
    }

    .newsletter > div:first-child {
        width: 100%;
    }

    .newsletter h3 {
        font-size: 18px;
        line-height: 1.6;
    }

    .newsletter p {
        font-size: 11px;
        line-height: 1.8;
    }

    .newsletter-box {
        width: 100%;

        display: flex;
        align-items: stretch;

        box-sizing: border-box;
    }

    .newsletter-box input {
        min-width: 0;
        flex: 1;

        height: 48px;

        font-size: 12px;
    }

    .newsletter-box button {
        flex: 0 0 auto;

        min-width: 80px;
        height: 48px;

        font-size: 12px;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .footer-contact {
        width: 100%;

        box-sizing: border-box;
    }

    .footer-contact h3 {
        font-size: 17px;
        line-height: 1.6;

        margin-bottom: 14px;
    }

    .contact-item {
        width: 100%;

        display: flex;
        align-items: flex-start;

        gap: 10px;

        margin-bottom: 12px;

        box-sizing: border-box;
    }

    .contact-item i {
        flex: 0 0 auto;

        font-size: 16px;

        margin-top: 3px;
    }

    .contact-item span {
        min-width: 0;

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

        overflow-wrap: anywhere;
    }


    /* =====================================================
       BOTTOM
    ===================================================== */

    .footer-bottom {
        width: 100%;

        display: flex;
        flex-direction: column;

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

        gap: 7px;

        text-align: center;

        box-sizing: border-box;
    }

    .footer-bottom span {
        font-size: 10px;
        line-height: 1.8;
    }
}


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

@media (max-width: 480px) {

    .footer-features {
        gap: 8px;
    }

    .feature-box {
        padding: 14px 10px;
        gap: 8px;
    }

    .feature-box > i {
        font-size: 21px;
    }

    .feature-box h4 {
        font-size: 12px;
    }

    .feature-box span {
        font-size: 9px;
    }


    .footer-main {
        gap: 27px;
    }


    .footer-brand h2 {
        font-size: 28px;
    }

    .footer-brand p {
        font-size: 11px;
        line-height: 2;
    }


    .socials {
        gap: 8px;
    }

    .socials a {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .footer-links h3 {
        font-size: 15px;
    }

    .footer-links a {
        font-size: 11px;
    }


    .footer-trust h3 {
        font-size: 15px;
    }

    .trust-card img {
        width: 44px;
        height: 44px;
    }

    .trust-card span {
        font-size: 9px;
    }


    .newsletter h3 {
        font-size: 17px;
    }

    .newsletter p {
        font-size: 10px;
    }

    .newsletter-box input,
    .newsletter-box button {
        height: 46px;
    }


    .contact-item span {
        font-size: 10px;
    }

    .footer-bottom span {
        font-size: 9px;
    }
}


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

@media (max-width: 360px) {

    .footer-features {
        gap: 7px;
    }

    .feature-box {
        padding: 12px 8px;
        gap: 7px;
    }

    .feature-box > i {
        font-size: 19px;
    }

    .feature-box h4 {
        font-size: 11px;
    }

    .feature-box span {
        font-size: 8px;
    }


    .footer-brand h2 {
        font-size: 26px;
    }

    .footer-brand p {
        font-size: 10px;
    }


    .footer-links h3 {
        font-size: 14px;
    }

    .footer-links a {
        font-size: 10px;
    }


    .trust-card img {
        width: 40px;
        height: 40px;
    }

    .trust-card span {
        font-size: 8px;
    }


    .newsletter h3 {
        font-size: 16px;
    }

    .newsletter-box input {
        font-size: 10px;
    }

    .newsletter-box button {
        min-width: 70px;
        font-size: 10px;
    }


    .contact-item span {
        font-size: 9px;
    }

    .footer-bottom span {
        font-size: 8px;
    }
}










































/* =========================================================
   MSTORE
   CART + CATEGORY
   MOBILE RESPONSIVE
   FINAL
========================================================= */


/* =========================================================
   CART BASE
========================================================= */

.cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483646 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    outline: none !important;
    border: 0 !important;
}

.cart-overlay.active {
    visibility: visible !important;
    pointer-events: auto !important;
}


.cart-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    box-sizing: border-box !important;

    z-index: 2147483647 !important;

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

    overflow: hidden !important;

    visibility: hidden !important;
    pointer-events: none !important;

    outline: none !important;
    border: 0 !important;
}

.cart-panel.active {
    visibility: visible !important;
    pointer-events: auto !important;
}


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

@media (max-width: 768px) {

    /* =====================================================
       CART PANEL
    ===================================================== */

    .cart-panel {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;

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

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

        overflow: hidden !important;

        box-sizing: border-box !important;

        outline: none !important;
        border: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       CART HEADER
    ===================================================== */

    .cart-header {
        flex: 0 0 62px !important;

        width: 100% !important;

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

        padding: 9px 16px !important;

        box-sizing: border-box !important;

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

        flex-shrink: 0 !important;

        outline: none !important;
    }

    .cart-header h2 {
        margin: 0 !important;
        padding: 0 !important;

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

        gap: 10px !important;

        font-size: 20px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
    }

    .cart-header h2 i {
        font-size: 19px !important;
    }

    .close-cart {
        width: 40px !important;
        height: 40px !important;

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

        max-width: 40px !important;
        max-height: 40px !important;

        padding: 0 !important;

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

        flex-shrink: 0 !important;

        outline: none !important;
    }

    .close-cart i {
        font-size: 19px !important;
    }


    /* =====================================================
       SHIPPING BOX
    ===================================================== */

    .shipping-box {
        width: fit-content !important;
        max-width: calc(100% - 24px) !important;

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

        flex: 0 0 auto !important;

        padding: 7px 14px !important;

        margin: 7px auto !important;

        gap: 9px !important;

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

        box-sizing: border-box !important;

        font-size: 13px !important;
        line-height: 1.4 !important;

        border-radius: 9px !important;

        overflow: hidden !important;
    }

    .shipping-box i {
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }

    .shipping-box span {
        min-width: 0 !important;

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

        white-space: nowrap !important;
    }


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

    .cart-items {
        flex: 1 1 auto !important;

        width: 100% !important;

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

        padding: 12px !important;

        box-sizing: border-box !important;

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

        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior: contain !important;

        scrollbar-width: none !important;
    }

    .cart-items::-webkit-scrollbar {
        display: none !important;
    }


    /* =====================================================
       CART ITEM
    ===================================================== */

    .cart-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        flex-shrink: 0 !important;
    }

    .cart-item img {
        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        min-height: 82px !important;

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

        object-fit: cover !important;

        flex-shrink: 0 !important;
    }


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

    .cart-item-info {
        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: hidden !important;
    }

    .cart-item-info h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

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

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

        white-space: nowrap !important;
    }

    .cart-item-info p {
        margin: 5px 0 !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .cart-color {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .cart-color-circle {
        width: 15px !important;
        height: 15px !important;

        min-width: 15px !important;
        min-height: 15px !important;
    }

    .cart-item-price {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }


    /* =====================================================
       ACTIONS
    ===================================================== */

    .cart-actions {
        flex-shrink: 0 !important;

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

    .quantity-box {
        transform: scale(1) !important;
        transform-origin: center !important;

        flex-shrink: 0 !important;
    }

    .delete-item {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        max-width: 36px !important;
        max-height: 36px !important;

        flex-shrink: 0 !important;
    }

    .delete-item i {
        font-size: 14px !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .cart-footer {
        flex: 0 0 auto !important;

        width: 100% !important;

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

        padding: 12px 14px 14px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       COUPON
    ===================================================== */

    .coupon-box {
        width: 100% !important;

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

        align-items: center !important;

        gap: 8px !important;

        box-sizing: border-box !important;
    }

    .coupon-box input {
        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;

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

        padding: 7px 12px !important;

        box-sizing: border-box !important;

        font-size: 13px !important;
    }

    .coupon-box button {
        flex: 0 0 72px !important;

        width: 72px !important;

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

        padding: 0 !important;

        box-sizing: border-box !important;

        font-size: 13px !important;
    }


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

    .cart-summary {
        width: 100% !important;

        margin-top: 9px !important;

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

        gap: 4px !important;

        box-sizing: border-box !important;
    }

    .cart-summary > div {
        width: 100% !important;

        height: 27px !important;

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

        padding: 0 !important;

        box-sizing: border-box !important;

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

        justify-content: space-between !important;
    }

    .cart-summary span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .cart-summary strong {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }


    /* =====================================================
       CHECKOUT
    ===================================================== */

    .checkout-btn {
        width: 100% !important;

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

        margin-top: 9px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        font-size: 14px !important;
    }


    /* =====================================================
       CART Z-INDEX
    ===================================================== */

    .header,
    .head1,
    .head2 {
        z-index: 100 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   481 — 768
========================================================= */

@media (min-width: 481px) and (max-width: 768px) {

    .cart-header {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }

    .cart-header h2 {
        font-size: 21px !important;
    }

    .cart-header h2 i {
        font-size: 20px !important;
    }

    .close-cart {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .shipping-box {
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;

        font-size: 13px !important;
    }

    .cart-item img {
        width: 86px !important;
        height: 86px !important;

        min-width: 86px !important;
        min-height: 86px !important;

        max-width: 86px !important;
        max-height: 86px !important;
    }

    .cart-item-info h3 {
        font-size: 16px !important;
    }

    .cart-item-info p,
    .cart-color {
        font-size: 13px !important;
    }

    .cart-item-price {
        font-size: 14px !important;
    }
}


/* =========================================================
   480px
========================================================= */

@media (max-width: 480px) {

    .cart-header {
        flex-basis: 58px !important;

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

        padding: 8px 13px !important;
    }

    .cart-header h2 {
        font-size: 18px !important;
        gap: 9px !important;
    }

    .cart-header h2 i {
        font-size: 17px !important;
    }

    .close-cart {
        width: 38px !important;
        height: 38px !important;

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

        max-width: 38px !important;
        max-height: 38px !important;
    }

    .close-cart i {
        font-size: 18px !important;
    }


    .shipping-box {
        max-width: calc(100% - 18px) !important;

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

        padding: 6px 11px !important;

        margin: 6px auto !important;

        gap: 8px !important;

        font-size: 12px !important;
    }

    .shipping-box i {
        font-size: 15px !important;
    }


    .cart-items {
        padding: 10px !important;
    }


    .cart-item img {
        width: 76px !important;
        height: 76px !important;

        min-width: 76px !important;
        min-height: 76px !important;

        max-width: 76px !important;
        max-height: 76px !important;
    }


    .cart-item-info h3 {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .cart-item-info p {
        font-size: 11px !important;
        margin: 4px 0 !important;
    }

    .cart-color {
        font-size: 11px !important;
    }

    .cart-color-circle {
        width: 14px !important;
        height: 14px !important;

        min-width: 14px !important;
        min-height: 14px !important;
    }

    .cart-item-price {
        font-size: 12px !important;
    }


    .quantity-box {
        transform: scale(.92) !important;
    }

    .delete-item {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
    }

    .delete-item i {
        font-size: 13px !important;
    }


    .cart-footer {
        padding: 10px 11px 12px !important;
    }


    .coupon-box {
        gap: 7px !important;
    }

    .coupon-box input {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        padding: 6px 10px !important;

        font-size: 12px !important;
    }

    .coupon-box button {
        width: 66px !important;
        flex-basis: 66px !important;

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

        font-size: 12px !important;
    }


    .cart-summary {
        margin-top: 7px !important;
        gap: 3px !important;
    }

    .cart-summary > div {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
    }

    .cart-summary span {
        font-size: 10px !important;
    }

    .cart-summary strong {
        font-size: 11px !important;
    }


    .checkout-btn {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin-top: 7px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   VERY SMALL
   360px
========================================================= */

@media (max-width: 360px) {

    .cart-header {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        padding: 7px 11px !important;
    }

    .cart-header h2 {
        font-size: 17px !important;
    }

    .cart-header h2 i {
        font-size: 16px !important;
    }

    .close-cart {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;
    }


    .shipping-box {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        padding: 6px 10px !important;

        margin: 5px auto !important;

        font-size: 11px !important;
    }


    .cart-items {
        padding: 9px !important;
    }


    .cart-item img {
        width: 70px !important;
        height: 70px !important;

        min-width: 70px !important;
        min-height: 70px !important;

        max-width: 70px !important;
        max-height: 70px !important;
    }

    .cart-item-info h3 {
        font-size: 13px !important;
    }

    .cart-item-info p,
    .cart-color {
        font-size: 10px !important;
    }

    .cart-item-price {
        font-size: 11px !important;
    }

    .quantity-box {
        transform: scale(.88) !important;
    }

    .delete-item {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        min-height: 32px !important;
    }


    .cart-footer {
        padding: 9px 10px 10px !important;
    }

    .coupon-box input {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        font-size: 11px !important;
    }

    .coupon-box button {
        width: 62px !important;
        flex-basis: 62px !important;

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

        font-size: 11px !important;
    }

    .cart-summary > div {
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
    }

    .cart-summary span {
        font-size: 10px !important;
    }

    .cart-summary strong {
        font-size: 11px !important;
    }

    .checkout-btn {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        font-size: 11px !important;
    }
}


/* =========================================================
   CATEGORY
   فقط حذف خط مشکی و حفظ ظاهر فعلی
========================================================= */

@media (max-width: 768px) {

    .category {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 13px !important;

        padding: 8px 12px 10px !important;

        margin: 0 !important;

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

        grid-template-columns: none !important;

        scroll-behavior: smooth !important;

        scroll-padding-left: 12px !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

        overscroll-behavior-x: contain !important;

        /* حذف خط مشکی */
        outline: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .category::-webkit-scrollbar {
        display: none !important;
    }


    .category-box {
        flex: 0 0 172px !important;

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

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

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 14px 10px 12px !important;

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

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

        overflow: hidden !important;

        flex-shrink: 0 !important;

        text-decoration: none !important;

        outline: none !important;
        box-shadow: none !important;
    }

    .category-box:focus,
    .category-box:focus-visible,
    .category-box:active {
        outline: none !important;
        box-shadow: none !important;
    }


    .category-box img {
        display: block !important;

        width: 88px !important;
        height: 88px !important;

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

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

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

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

        flex: 0 0 88px !important;

        align-self: center !important;
    }


    .category-box h2 {
        display: -webkit-box !important;

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

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;
        max-height: 40px !important;

        margin: 12px 0 0 !important;

        padding: 0 7px !important;

        box-sizing: border-box !important;

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

        line-height: 1.45 !important;

        text-align: center !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: normal !important;

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

        flex: 0 0 auto !important;

        outline: none !important;
        border: 0 !important;
    }
}


/* =========================================================
   CATEGORY 481 — 768
========================================================= */

@media (min-width: 481px) and (max-width: 768px) {

    .category {
        gap: 14px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .category-box {
        flex-basis: 178px !important;

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

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

        padding: 15px 11px 13px !important;
    }

    .category-box img {
        width: 94px !important;
        height: 94px !important;

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

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

        flex-basis: 94px !important;
    }

    .category-box h2 {
        margin-top: 12px !important;
        font-size: 14px !important;
        max-height: 42px !important;
    }
}


/* =========================================================
   CATEGORY 480
========================================================= */

@media (max-width: 480px) {

    .category {
        gap: 11px !important;

        padding: 7px 9px 9px !important;

        scroll-padding-left: 9px !important;
    }

    .category-box {
        flex: 0 0 160px !important;

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

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

        padding: 13px 9px 11px !important;
    }

    .category-box img {
        width: 82px !important;
        height: 82px !important;

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

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

        flex-basis: 82px !important;
    }

    .category-box h2 {
        margin-top: 11px !important;

        padding: 0 6px !important;

        font-size: 13px !important;

        line-height: 1.45 !important;

        max-height: 38px !important;
    }
}


/* =========================================================
   CATEGORY 360
========================================================= */

@media (max-width: 360px) {

    .category {
        gap: 9px !important;

        padding: 6px 7px 8px !important;

        scroll-padding-left: 7px !important;
    }

    .category-box {
        flex: 0 0 148px !important;

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

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

        padding: 11px 8px 9px !important;
    }

    .category-box img {
        width: 76px !important;
        height: 76px !important;

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

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

        flex-basis: 76px !important;
    }

    .category-box h2 {
        margin-top: 10px !important;

        padding: 0 5px !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        max-height: 34px !important;
    }
}


/* =========================================================
   CATEGORY 320
========================================================= */

@media (max-width: 320px) {

    .category {
        gap: 8px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .category-box {
        flex-basis: 138px !important;

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

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

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

    .category-box img {
        width: 70px !important;
        height: 70px !important;

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

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

        flex-basis: 70px !important;
    }

    .category-box h2 {
        margin-top: 9px !important;

        font-size: 11px !important;

        line-height: 1.35 !important;

        max-height: 30px !important;
    }
}

































































/* =========================================================
   DISCOUNT SHOWCASE — FULL RESPONSIVE
   کارت‌ها = اندازه فعلی و تأییدشده
   BRAND SIDE = ریسپانسیو و کامپکت در موبایل
========================================================= */


/* =========================================================
   TABLET — 1024px
========================================================= */

@media screen and (max-width: 1024px) {

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

    .discount-showcase {
        width: 100%;
        margin: 80px 0;
        padding: 0 30px;

        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 22px;

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


    /* =========================
       BRAND SIDE
    ========================= */

    .discount-showcase .brand-side {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* =========================
       SLIDER
    ========================= */

    .discount-showcase .discount-slider {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }


    .discount-showcase .discount-track {
        display: flex;
        flex-direction: row;
        gap: 22px;
        width: max-content;
    }


    /* =========================
       PRODUCT CARDS
    ========================= */

    .discount-showcase .discount-track .product {
        flex: 0 0 290px;

        width: 290px;
        height: 460px;

        min-width: 290px;
        max-width: 290px;

        min-height: 460px;
        max-height: 460px;

        margin: 0;
        box-sizing: border-box;
    }
}


/* =========================================================
   MOBILE — 768px
========================================================= */

@media screen and (max-width: 768px) {

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

    .discount-showcase {
        width: 100%;

        margin: 50px 0 40px;
        padding: 0;

        display: flex;
        flex-direction: column;

        gap: 22px;

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


    /* =====================================================
       BRAND SIDE — MOBILE COMPACT
    ===================================================== */

    .discount-showcase .brand-side {

        width: calc(100% - 36px);

        min-width: 0;
        min-height: 0;

        margin: 0 18px;

        padding: 18px 20px;

        box-sizing: border-box;

        /*
         * تبدیل ساختار عمودی به ساختار افقی
         */
        display: grid;

        grid-template-columns: auto 1fr auto;

        grid-template-rows: auto auto;

        column-gap: 15px;
        row-gap: 3px;

        align-items: center;

        text-align: right;

        border-radius: 24px;
    }


    /* =========================
       LOGO
    ========================= */

    .discount-showcase .brand-side img {

        grid-column: 1;
        grid-row: 1 / 3;

        width: 58px;
        height: 58px;

        object-fit: contain;

        margin: 0;

        justify-self: center;
        align-self: center;
    }


    /* =========================
       BRAND NAME
    ========================= */

    .discount-showcase .brand-name {

        grid-column: 2;
        grid-row: 1;

        margin: 0;

        font-size: .68rem;
        letter-spacing: 2px;

        line-height: 1.3;

        text-align: right;
    }


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

    .discount-showcase .brand-side h2 {

        grid-column: 2;
        grid-row: 2;

        margin: 0;

        font-size: 1.05rem;

        line-height: 1.5;

        white-space: nowrap;

        text-align: right;
    }


    /* =========================
       DESCRIPTION
       در موبایل حذف می‌شود تا
       باکس کوچک و تمیز بماند
    ========================= */

    .discount-showcase .brand-side p {

        display: none;
    }


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

    .discount-showcase .discount-badge {

        grid-column: 3;
        grid-row: 1 / 3;

        margin: 0;

        padding: 9px 12px;

        font-size: .72rem;

        line-height: 1.4;

        white-space: nowrap;

        text-align: center;

        border-radius: 999px;

        align-self: center;
    }


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

    .discount-showcase .brand-glow {

        width: 150px;
        height: 150px;

        top: -80px;
        right: -70px;

        pointer-events: none;
    }


    /* =====================================================
       SLIDER
    ===================================================== */

    .discount-showcase .discount-slider {

        width: 100%;
        min-width: 0;

        padding: 8px 18px 25px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* =========================
       TRACK
    ========================= */

    .discount-showcase .discount-track {

        display: flex;
        flex-direction: row;

        gap: 15px;

        width: max-content;

        will-change: transform;
    }


    /* =========================
       PRODUCT CARDS
       اندازه همان نسخه‌ای که تأیید کردی
    ========================= */

    .discount-showcase .discount-track .product {

        flex: 0 0 76vw;

        width: 76vw;

        height: 118vw;

        min-width: 250px;
        max-width: 300px;

        min-height: 370px;
        max-height: 455px;

        margin: 0;

        box-sizing: border-box;

        scroll-snap-align: start;
    }
}


/* =========================================================
   SMALL MOBILE — 430px
========================================================= */

@media screen and (max-width: 430px) {

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

    .discount-showcase {
        margin: 42px 0 35px;
        gap: 20px;
    }


    /* =====================================================
       BRAND — EXTRA COMPACT
    ===================================================== */

    .discount-showcase .brand-side {

        width: calc(100% - 32px);

        margin: 0 16px;

        padding: 15px 16px;

        grid-template-columns: 48px 1fr auto;

        column-gap: 11px;

        border-radius: 21px;
    }


    /* =========================
       LOGO
    ========================= */

    .discount-showcase .brand-side img {

        width: 48px;
        height: 48px;
    }


    /* =========================
       BRAND NAME
    ========================= */

    .discount-showcase .brand-name {

        font-size: .61rem;
        letter-spacing: 1.5px;
    }


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

    .discount-showcase .brand-side h2 {

        font-size: .92rem;

        line-height: 1.45;
    }


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

    .discount-showcase .discount-badge {

        padding: 8px 10px;

        font-size: .65rem;

        max-width: 78px;

        white-space: normal;

        line-height: 1.5;
    }


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

    .discount-showcase .brand-glow {

        width: 120px;
        height: 120px;

        top: -65px;
        right: -55px;
    }


    /* =========================
       SLIDER
    ========================= */

    .discount-showcase .discount-slider {

        padding:
            7px
            16px
            22px;
    }


    /* =========================
       TRACK
    ========================= */

    .discount-showcase .discount-track {
        gap: 13px;
    }


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

    .discount-showcase .discount-track .product {

        flex: 0 0 78vw;

        width: 78vw;

        height: 119vw;

        min-width: 245px;
        max-width: 285px;

        min-height: 350px;
        max-height: 425px;

        box-sizing: border-box;
    }
}


/* =========================================================
   VERY SMALL MOBILE — 360px
========================================================= */

@media screen and (max-width: 360px) {

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

    .discount-showcase {
        margin: 38px 0 30px;
        gap: 18px;
    }


    /* =====================================================
       BRAND — VERY COMPACT
    ===================================================== */

    .discount-showcase .brand-side {

        width: calc(100% - 28px);

        margin: 0 14px;

        padding: 13px 14px;

        grid-template-columns: 43px 1fr auto;

        column-gap: 9px;

        border-radius: 19px;
    }


    /* =========================
       LOGO
    ========================= */

    .discount-showcase .brand-side img {

        width: 43px;
        height: 43px;
    }


    /* =========================
       BRAND NAME
    ========================= */

    .discount-showcase .brand-name {

        font-size: .56rem;
        letter-spacing: 1px;
    }


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

    .discount-showcase .brand-side h2 {

        font-size: .82rem;

        line-height: 1.4;
    }


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

    .discount-showcase .discount-badge {

        padding: 7px 8px;

        max-width: 68px;

        font-size: .58rem;

        line-height: 1.45;
    }


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

    .discount-showcase .brand-glow {

        width: 100px;
        height: 100px;

        top: -55px;
        right: -45px;
    }


    /* =========================
       SLIDER
    ========================= */

    .discount-showcase .discount-slider {

        padding:
            7px
            14px
            20px;
    }


    /* =========================
       TRACK
    ========================= */

    .discount-showcase .discount-track {
        gap: 12px;
    }


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

    .discount-showcase .discount-track .product {

        flex: 0 0 82vw;

        width: 82vw;

        height: 121vw;

        min-width: 235px;
        max-width: 275px;

        min-height: 335px;
        max-height: 400px;

        box-sizing: border-box;
    }
}


/* =========================================================
   TOUCH DEVICES
   جلوگیری از hover سنگین روی موبایل
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .discount-showcase .product:hover {
        transform: none;
    }

    .discount-showcase .product:hover .product-image img {
        transform: none;
    }

    .discount-showcase .brand-side:hover {
        transform: none;
    }
}























































/* =========================================================
   VEIL SHOWCASE — RESPONSIVE
   COLLECTION + BENEFITS
   فقط RESPONSIVE
========================================================= */


/* =========================================================
   TABLET — 1100px
========================================================= */

@media screen and (max-width: 1100px) {

    .veil-showcase {
        width: 94%;
        max-width: 100%;
        margin: 70px auto;
    }

    /* =========================
       COLLECTION
    ========================= */

    .veil-grid {
        grid-template-columns: 1.8fr 1fr 1fr;
        grid-template-rows: 240px 240px;
        gap: 16px;
    }

    .veil-content {
        right: 22px;
        width: 230px;
        padding: 22px;
    }

    .veil-content h2 {
        font-size: 28px;
    }

    /* =========================
       BENEFITS
    ========================= */

    .veil-benefits {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 85px;
    }

    .veil-benefit-card {
        padding: 55px 15px 22px;
    }

    .veil-benefit-card i {
        width: 58px;
        height: 58px;
        top: -29px;
        font-size: 23px;
    }

    .veil-benefit-card h5 {
        font-size: 15px;
    }

    .veil-benefit-card p {
        font-size: 12px;
    }
}



/* =========================================================
   TABLET — 950px
========================================================= */

@media screen and (max-width: 950px) {

    .veil-showcase {
        width: 94%;
        margin: 65px auto;
    }

    /* =========================
       COLLECTION
    ========================= */

    .veil-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:
            420px
            230px
            230px;

        gap: 16px;
    }

    .veil-hero-card {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
    }

    .veil-fabric-card:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .veil-fabric-card:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .veil-style-card:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .veil-style-card:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

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

    .veil-content {
        right: 25px;
        width: 270px;
        padding: 24px;
    }

    .veil-content h2 {
        font-size: 30px;
    }

    /* =========================
       BENEFITS
    ========================= */

    .veil-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px 18px;

        /*
         فضای بالا برای آیکون‌ها
        */
        margin-top: 105px;
    }

    .veil-benefit-card {
        min-height: 145px;
        padding: 58px 20px 22px;
    }

    .veil-benefit-card i {
        width: 60px;
        height: 60px;
        top: -30px;
        font-size: 24px;
    }
}



/* =========================================================
   MOBILE — 768px
========================================================= */

@media screen and (max-width: 768px) {

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

    .veil-showcase {
        width: 100%;
        margin: 50px 0;
        padding: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    /* =========================
       COLLECTION
    ========================= */

    .veil-grid {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            390px
            205px
            205px;

        gap: 12px;

        padding: 0 15px;

        box-sizing: border-box;
    }

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

    .veil-hero-card {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;

        border-radius: 24px;
    }

    /* =========================
       OTHER CARDS
    ========================= */

    .veil-fabric-card:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .veil-fabric-card:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .veil-style-card:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .veil-style-card:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .veil-hero-card,
    .veil-fabric-card,
    .veil-style-card {
        border-radius: 21px;
    }

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

    .veil-content {

        right: 15px;
        bottom: 15px;
        top: auto;

        width: calc(100% - 30px);

        padding: 18px;

        box-sizing: border-box;

        border-radius: 20px;

        transform: none;

        gap: 5px;
    }

    .veil-content h2 {
        font-size: clamp(22px, 7vw, 28px);
        line-height: 1.35;
    }

    .veil-content p {
        font-size: 12px;
        line-height: 1.6;
    }

    .veil-content span {
        font-size: 10px;
    }

    /* =========================
       SMALL CARD CONTENT
    ========================= */

    .veil-card-content,
    .veil-style-content {

        right: 10px;
        bottom: 10px;

        padding: 8px 11px;

        border-radius: 14px;

        max-width: calc(100% - 20px);
        box-sizing: border-box;
    }

    .veil-card-content span,
    .veil-style-content span {
        font-size: 9px;
    }

    .veil-card-content h3,
    .veil-style-content h4 {
        font-size: 14px;
    }


    /* =====================================================
       BENEFITS
       بدون اسکرول
       2 × 2
    ===================================================== */

    .veil-benefits {

        width: 100%;

        display: grid;

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

        gap: 55px 12px;

        margin-top: 105px;

        padding:
            0
            15px
            25px;

        box-sizing: border-box;

        overflow: visible;
    }


    /* =========================
       BENEFIT CARD
    ========================= */

    .veil-benefit-card {

        width: 100%;
        min-width: 0;

        min-height: 140px;

        padding:
            55px
            12px
            18px;

        box-sizing: border-box;

        border-radius: 21px;
    }


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

    .veil-benefit-card i {

        width: 56px;
        height: 56px;

        top: -28px;

        font-size: 22px;

        z-index: 5;
    }


    .veil-benefit-card h5 {

        font-size: 13px;

        margin:
            0
            0
            6px;
    }


    .veil-benefit-card p {

        font-size: 10px;

        line-height: 1.8;

        margin: 0;
    }
}



/* =========================================================
   SMALL MOBILE — 430px
========================================================= */

@media screen and (max-width: 430px) {

    .veil-showcase {
        margin: 42px 0;
    }


    /* =========================
       COLLECTION
    ========================= */

    .veil-grid {

        grid-template-rows:
            330px
            175px
            175px;

        gap: 10px;

        padding:
            0
            12px;
    }


    .veil-hero-card,
    .veil-fabric-card,
    .veil-style-card {
        border-radius: 19px;
    }


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

    .veil-content {

        right: 11px;
        bottom: 11px;

        width: calc(100% - 22px);

        padding: 15px;

        border-radius: 17px;
    }


    .veil-content h2 {
        font-size: 21px;
    }

    .veil-content p {
        font-size: 11px;
    }


    /* =========================
       SMALL CARDS
    ========================= */

    .veil-card-content,
    .veil-style-content {

        right: 8px;
        bottom: 8px;

        padding: 7px 9px;

        border-radius: 12px;
    }

    .veil-card-content span,
    .veil-style-content span {
        font-size: 8px;
    }

    .veil-card-content h3,
    .veil-style-content h4 {
        font-size: 12px;
    }


    /* =====================================================
       BENEFITS
    ===================================================== */

    .veil-benefits {

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

        gap: 50px 10px;

        /*
         فاصله کافی از کالکشن
         تا آیکون نصفه نشود
        */
        margin-top: 100px;

        padding:
            0
            12px
            22px;
    }


    .veil-benefit-card {

        min-height: 125px;

        padding:
            51px
            9px
            15px;

        border-radius: 18px;
    }


    .veil-benefit-card i {

        width: 50px;
        height: 50px;

        top: -25px;

        font-size: 20px;
    }


    .veil-benefit-card h5 {
        font-size: 12px;
        margin-bottom: 5px;
    }


    .veil-benefit-card p {
        font-size: 9px;
        line-height: 1.7;
    }
}



/* =========================================================
   VERY SMALL MOBILE — 360px
========================================================= */

@media screen and (max-width: 360px) {

    .veil-showcase {
        margin: 38px 0;
    }


    /* =========================
       COLLECTION
    ========================= */

    .veil-grid {

        grid-template-rows:
            300px
            155px
            155px;

        gap: 9px;

        padding:
            0
            10px;
    }


    .veil-hero-card,
    .veil-fabric-card,
    .veil-style-card {
        border-radius: 17px;
    }


    .veil-content {

        right: 9px;
        bottom: 9px;

        width: calc(100% - 18px);

        padding: 13px;

        border-radius: 15px;
    }


    .veil-content h2 {
        font-size: 19px;
    }

    .veil-content p {
        font-size: 10px;
    }


    /* =========================
       SMALL CARDS
    ========================= */

    .veil-card-content,
    .veil-style-content {

        right: 7px;
        bottom: 7px;

        padding: 6px 8px;

        border-radius: 10px;
    }


    .veil-card-content h3,
    .veil-style-content h4 {
        font-size: 11px;
    }


    /* =====================================================
       BENEFITS
    ===================================================== */

    .veil-benefits {

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

        gap: 46px 8px;

        margin-top: 92px;

        padding:
            0
            10px
            18px;
    }


    .veil-benefit-card {

        min-height: 115px;

        padding:
            47px
            8px
            13px;

        border-radius: 16px;
    }


    .veil-benefit-card i {

        width: 46px;
        height: 46px;

        top: -23px;

        font-size: 18px;
    }


    .veil-benefit-card h5 {
        font-size: 11px;
    }


    .veil-benefit-card p {
        font-size: 8.5px;
    }
}



/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .veil-hero-card:hover,
    .veil-fabric-card:hover,
    .veil-style-card:hover,
    .veil-benefit-card:hover {

        transform: none;
    }

    .veil-hero-card:hover img,
    .veil-fabric-card:hover img,
    .veil-style-card:hover img {

        transform: scale(1);
    }
}




























































































/* ==========================================================
   SINGLE PRODUCT PAGE
   RESPONSIVE SYSTEM
   MOBILE / TABLET
   فقط برای همین صفحه
========================================================== */


/* ==========================================================
   GLOBAL SAFETY
========================================================== */

.single_page,
.single_page *,
.modal,
.modal *,
.imageViewer,
.imageViewer * {
    box-sizing: border-box;
}

.single_page {
    width: 100%;
    max-width: 100%;
}

.single_page img {
    max-width: 100%;
}

.sp_wrap,
.sp_gallery,
.sp_info,
.reviews,
.modal,
.modal_box,
.imageViewer {
    min-width: 0;
}


/* ==========================================================
   TABLET
   <= 1200px
========================================================== */

@media (max-width: 1200px) {

    .single_page {
        width: 100%;
        padding: 45px 30px;
    }

    .sp_wrap {
        grid-template-columns: 1.1fr 1fr;
        gap: 24px;
        width: 100%;
    }

    .sp_gallery {
        width: 100%;
        padding: 14px;
    }

    .big_slider {
        width: 100%;
        min-height: 480px;
    }

    .sp_info {
        width: 100%;
        padding: 25px;
    }

    .sp_info h1 {
        font-size: 23px;
        line-height: 1.7;
    }

    .sub {
        font-size: 14px;
        line-height: 1.8;
    }

    .price {
        font-size: 28px;
    }

    .thumb_grid {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .thumb_grid::-webkit-scrollbar {
        display: none;
    }

    .thumb_grid img {
        width: 74px;
        min-width: 74px;
        height: 74px;
    }

    .reviews {
        width: 100%;
        padding: 25px;
    }
}


/* ==========================================================
   SMALL TABLET
   <= 992px
========================================================== */

@media (max-width: 992px) {

    .single_page {
        padding: 35px 22px;
    }

    .sp_wrap {
        display: flex;
        flex-direction: column;
        gap: 22px;
        width: 100%;
    }

    .sp_gallery,
    .sp_info {
        width: 100%;
        max-width: 100%;
    }

    .big_slider {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
    }

    .sp_info {
        padding: 24px;
    }

    .sp_info h1 {
        font-size: 23px;
        line-height: 1.7;
    }

    .sub {
        font-size: 13px;
        line-height: 1.85;
    }

    .price {
        font-size: 28px;
    }

    .reviews {
        width: 100%;
        margin-top: 22px;
        padding: 22px;
    }
}


/* ==========================================================
   MOBILE
   <= 768px
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------
       PAGE
    ------------------------------------------------------ */

    .single_page {
        width: 100%;
        max-width: 100%;
        padding: 18px 12px 30px;
        overflow-x: hidden;
    }

    .sp_wrap {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 100%;
    }


    /* ------------------------------------------------------
       GALLERY
    ------------------------------------------------------ */

    .sp_gallery {
        width: 100%;
        max-width: 100%;
        padding: 9px;
        border-radius: 18px;

        box-shadow:
            0 12px 35px rgba(0, 0, 0, .06),
            inset 0 1px 0 rgba(255, 255, 255, .7);
    }

    .big_slider {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 15px;
        overflow: hidden;
    }

    .gallery_track {
        width: 100%;
        height: 100%;
        min-width: 0;
    }

    .gallery_track img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        border-radius: 15px;
    }


    /* ------------------------------------------------------
       GALLERY NAVIGATION
    ------------------------------------------------------ */

    .nav {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, .14);

        opacity: .95;
    }

    .nav i {
        font-size: 14px;
    }

    .prev {
        right: 7px;
    }

    .next {
        left: 7px;
    }


    /* ------------------------------------------------------
       THUMBNAILS
    ------------------------------------------------------ */

    .thumb_grid {
        width: 100%;
        max-width: 100%;

        display: flex;

        gap: 6px;
        margin-top: 9px;

        padding: 2px 2px 5px;

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

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .thumb_grid::-webkit-scrollbar {
        display: none;
    }

    .thumb_grid img {
        width: 60px;
        min-width: 60px;
        height: 60px;

        border-radius: 9px;
        border-width: 2px;

        opacity: .55;
    }

    .thumb_grid img.active {
        opacity: 1;
    }


    /* ------------------------------------------------------
       PRODUCT INFO
    ------------------------------------------------------ */

    .sp_info {
        width: 100%;
        max-width: 100%;

        padding: 20px 16px;
        border-radius: 18px;

        overflow: hidden;
    }

    .sp_info h1 {
        width: 100%;

        font-size: 19px;
        line-height: 1.7;

        margin-bottom: 5px;

        overflow-wrap: anywhere;
        word-break: normal;
    }

    .sub {
        width: 100%;

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

        margin-bottom: 9px;

        overflow-wrap: anywhere;
    }


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

    .price {
        display: flex;
        align-items: center;

        max-width: 100%;

        font-size: 23px;
        line-height: 1.5;

        margin: 12px 0;

        gap: 7px;

        flex-wrap: wrap;
    }

    .price del {
        font-size: 12px;
    }


    /* ------------------------------------------------------
       STOCK
    ------------------------------------------------------ */

    .status_box {
        width: 100%;
        max-width: 100%;

        height: auto;
        min-height: 38px;

        margin-top: 7px;

        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .status_item {
        max-width: 100%;

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

        padding: 8px 10px;

        border-radius: 10px;

        overflow-wrap: anywhere;
    }


    /* ------------------------------------------------------
       COLOR
    ------------------------------------------------------ */

    .section_title {
        font-size: 13px;
        line-height: 1.6;

        margin-top: 14px;
    }

    .color_select_btn {
        width: 100%;
        max-width: 100%;

        min-height: 46px;

        margin-top: 7px;
        padding: 9px 12px;

        border-radius: 12px;

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

        overflow: hidden;
    }


    /* ------------------------------------------------------
       BUY BUTTON
    ------------------------------------------------------ */

    .buy {
        width: 100%;
        max-width: 100%;

        min-height: 50px;

        padding: 13px 12px;
        margin-top: 12px;

        border-radius: 13px;

        font-size: 13px;
        line-height: 1.5;
    }


    /* ------------------------------------------------------
       AI PANEL
    ------------------------------------------------------ */

    .ai_panel {
        width: 100%;
        max-width: 100%;

        display: flex;
        align-items: center;

        padding: 10px 11px;

        border-radius: 13px;

        gap: 8px;
        margin-top: 10px;

        overflow: hidden;
    }

    .ai_icon {
        width: 32px;
        min-width: 32px;
        height: 32px;

        border-radius: 9px;
    }

    .ai_title {
        font-size: 12px;
        line-height: 1.5;
    }

    .ai_sub {
        font-size: 10px;
        line-height: 1.5;
    }

    .ai_arrow {
        font-size: 15px;
        min-width: 15px;
    }


    /* ------------------------------------------------------
       INFO BUTTONS
    ------------------------------------------------------ */

    .info_btn {
        width: 100%;
        max-width: 100%;

        min-height: 45px;

        padding: 10px 11px;
        margin-top: 8px;

        border-radius: 12px;

        font-size: 12px;
        line-height: 1.5;
    }


    /* ------------------------------------------------------
       REVIEWS
    ------------------------------------------------------ */

    .reviews {
        width: 100%;
        max-width: 100%;

        margin-top: 15px;
        padding: 16px;

        border-radius: 18px;

        overflow: hidden;
    }

    .reviews_header {
        width: 100%;
        max-width: 100%;
    }

    .reviews h2 {
        font-size: 17px;
        line-height: 1.6;

        margin: 0;
    }


    /* ------------------------------------------------------
       REVIEW CAROUSEL
    ------------------------------------------------------ */

    .review_carousel {
        width: 100%;
        max-width: 100%;

        margin-top: 12px;

        position: relative;
    }

    .review_track {
        width: 100%;
        max-width: 100%;

        display: flex;

        gap: 9px;

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

        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        padding: 3px 2px 7px;

        -webkit-overflow-scrolling: touch;
    }

    .review_track::-webkit-scrollbar {
        display: none;
    }

    .review_card {
        flex: 0 0 calc(100% - 20px);

        width: calc(100% - 20px);
        min-width: calc(100% - 20px);

        padding: 12px;

        border-radius: 13px;

        scroll-snap-align: start;

        overflow: hidden;
    }

    .review_card p {
        font-size: 11px;
        line-height: 1.75;

        overflow-wrap: anywhere;
    }

    .user img {
        width: 36px;
        height: 36px;
    }

    .name {
        font-size: 12px;
    }

    .stars {
        font-size: 10px;
    }


    /* ------------------------------------------------------
       REVIEW NAVIGATION
    ------------------------------------------------------ */

    .rev_btn {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .rev_btn.left {
        left: -3px;
    }

    .rev_btn.right {
        right: -3px;
    }


    /* ======================================================
       PRODUCT MODAL
    ====================================================== */

    /*
       نکته مهم:
       خود صفحه هنگام باز بودن Modal نباید اسکرول شود.
       این بخش فقط ظاهر Modal را کنترل می‌کند.
    */

    .modal {
        position: fixed;

        inset: 0;

        width: 100vw;
        height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;

        padding: 12px;

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

        overflow: hidden;

        overscroll-behavior: none;

        z-index: 9999;
    }

    .modal_box {
        position: relative;

        width: min(100%, 520px);
        max-width: 520px;

        /*
           به جای max-height خیلی کوچک،
           از ارتفاع واقعی viewport استفاده می‌کنیم.
        */
        max-height: calc(100dvh - 24px);

        margin: 0;

        padding: 20px 15px;

        border-radius: 20px;

        /*
           مهم:
           اینجا دیگر auto نیست.
           اگر Modal محتوای معمولی دارد،
           خود Modal اسکرول نمی‌شود.
        */
        overflow: hidden;

        overscroll-behavior: contain;

        /*
           جلوگیری از بیرون زدن محتوا
        */
        overflow-wrap: anywhere;
    }

    .modal_box h2 {
        width: 100%;

        font-size: 17px;
        line-height: 1.6;

        margin: 0 35px 12px 0;

        padding: 0;

        overflow-wrap: anywhere;
    }

    .modal_box p,
    .modal_box span,
    .modal_box label,
    .modal_box li {
        font-size: 12px;
        line-height: 1.8;

        overflow-wrap: anywhere;
    }

    .modal_close {
        position: absolute;

        top: 10px;
        left: 10px;

        width: 36px;
        height: 36px;

        min-width: 36px;

        border-radius: 11px;

        z-index: 5;
    }


    /* ======================================================
       IMAGE VIEWER
    ====================================================== */

    .imageViewer {
        position: fixed;

        inset: 0;

        width: 100vw;
        height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;

        padding: 12px;

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

        overflow: hidden;

        overscroll-behavior: none;

        z-index: 10000;
    }

    .imageViewer img {
        display: block;

        width: auto;
        height: auto;

        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 80px);

        object-fit: contain;

        border-radius: 13px;
    }

    #closeViewer {
        position: fixed;

        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;

        min-width: 40px;

        font-size: 21px;

        z-index: 10001;
    }
}


/* ==========================================================
   SMALL MOBILE
   <= 480px
========================================================== */

@media (max-width: 480px) {

    .single_page {
        padding: 12px 9px 25px;
    }


    /* ------------------------------------------------------
       GALLERY
    ------------------------------------------------------ */

    .sp_gallery {
        padding: 7px;
        border-radius: 16px;
    }

    .big_slider {
        border-radius: 13px;
    }

    .gallery_track img {
        border-radius: 13px;
    }

    .nav {
        width: 33px;
        height: 33px;
        min-width: 33px;
    }

    .nav i {
        font-size: 12px;
    }

    .prev {
        right: 5px;
    }

    .next {
        left: 5px;
    }


    /* ------------------------------------------------------
       THUMBNAILS
    ------------------------------------------------------ */

    .thumb_grid {
        gap: 5px;
        margin-top: 7px;
    }

    .thumb_grid img {
        width: 54px;
        min-width: 54px;
        height: 54px;

        border-radius: 8px;
    }


    /* ------------------------------------------------------
       INFO
    ------------------------------------------------------ */

    .sp_info {
        padding: 17px 13px;
        border-radius: 16px;
    }

    .sp_info h1 {
        font-size: 17px;
        line-height: 1.7;
    }

    .sub {
        font-size: 11px;
        line-height: 1.8;
    }


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

    .price {
        font-size: 21px;
        margin: 10px 0;
    }

    .price del {
        font-size: 11px;
    }


    /* ------------------------------------------------------
       STATUS
    ------------------------------------------------------ */

    .status_item {
        font-size: 10px;
        padding: 7px 9px;
    }


    /* ------------------------------------------------------
       COLOR
    ------------------------------------------------------ */

    .section_title {
        font-size: 12px;
    }

    .color_select_btn {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 11px;
    }


    /* ------------------------------------------------------
       BUY
    ------------------------------------------------------ */

    .buy {
        min-height: 48px;
        padding: 11px;
        font-size: 12px;
    }


    /* ------------------------------------------------------
       AI
    ------------------------------------------------------ */

    .ai_panel {
        padding: 9px;
        border-radius: 12px;
    }

    .ai_icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .ai_title {
        font-size: 11px;
    }

    .ai_sub {
        font-size: 9px;
    }

    .ai_arrow {
        font-size: 14px;
    }


    /* ------------------------------------------------------
       INFO BUTTONS
    ------------------------------------------------------ */

    .info_btn {
        min-height: 44px;
        font-size: 11px;
    }


    /* ------------------------------------------------------
       REVIEWS
    ------------------------------------------------------ */

    .reviews {
        padding: 13px;
        border-radius: 16px;
    }

    .reviews h2 {
        font-size: 15px;
    }

    .review_card {
        min-width: calc(100% - 14px);
        width: calc(100% - 14px);

        padding: 11px;

        border-radius: 12px;
    }

    .review_card p {
        font-size: 10px;
        line-height: 1.75;
    }

    .rev_btn {
        width: 29px;
        height: 29px;

        font-size: 12px;
    }


    /* ------------------------------------------------------
       MODAL
    ------------------------------------------------------ */

    .modal {
        padding: 8px;
    }

    .modal_box {
        width: 100%;
        max-width: 100%;

        max-height: calc(100dvh - 16px);

        padding: 18px 13px;

        border-radius: 18px;
    }

    .modal_box h2 {
        font-size: 15px;
        line-height: 1.6;

        margin-right: 34px;
        margin-bottom: 10px;
    }

    .modal_box p,
    .modal_box span,
    .modal_box label,
    .modal_box li {
        font-size: 11px;
        line-height: 1.75;
    }

    .modal_close {
        width: 34px;
        height: 34px;
        min-width: 34px;

        top: 8px;
        left: 8px;

        border-radius: 10px;
    }


    /* ------------------------------------------------------
       IMAGE VIEWER
    ------------------------------------------------------ */

    .imageViewer {
        padding: 8px;
    }

    .imageViewer img {
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 70px);

        border-radius: 11px;
    }

    #closeViewer {
        top: 9px;
        right: 9px;

        width: 37px;
        height: 37px;
        min-width: 37px;

        font-size: 20px;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
   <= 360px
========================================================== */

@media (max-width: 360px) {

    .single_page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .sp_info {
        padding: 15px 11px;
    }

    .sp_info h1 {
        font-size: 16px;
    }

    .sub {
        font-size: 10px;
    }

    .price {
        font-size: 19px;
    }

    .price del {
        font-size: 10px;
    }

    .thumb_grid img {
        width: 50px;
        min-width: 50px;
        height: 50px;
    }

    .section_title {
        font-size: 11px;
    }

    .color_select_btn {
        font-size: 10px;
    }

    .buy {
        font-size: 11px;
    }

    .ai_title {
        font-size: 10px;
    }

    .ai_sub {
        font-size: 8px;
    }

    .info_btn {
        font-size: 10px;
    }

    .reviews {
        padding: 11px;
    }

    .reviews h2 {
        font-size: 14px;
    }

    .review_card {
        min-width: calc(100% - 10px);
        width: calc(100% - 10px);
    }

    .review_card p {
        font-size: 9px;
    }

    .modal {
        padding: 6px;
    }

    .modal_box {
        max-height: calc(100dvh - 12px);

        padding: 16px 11px;

        border-radius: 16px;
    }

    .modal_box h2 {
        font-size: 14px;
    }

    .modal_box p,
    .modal_box span,
    .modal_box label,
    .modal_box li {
        font-size: 10px;
    }
}































































/* =========================================================
   CATEGORY PAGE — RESPONSIVE ONLY
   ظاهر و استایل اصلی دست‌نخورده باقی می‌ماند
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   1200px
========================================================= */

@media (max-width: 1200px) {

    .category-hero {
        min-height: 360px;
    }

    .category-hero-content {
        width: min(92%, 1000px);
        margin: 0 auto;
    }

    .category-title h1 {
        font-size: clamp(34px, 4vw, 52px);
    }

    .category {
        width: min(92%, 1000px);
        margin-left: auto;
        margin-right: auto;

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

    .category-box {
        min-height: 230px;
    }

}


/* =========================================================
   TABLET
   992px
========================================================= */

@media (max-width: 992px) {

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

    .category-hero {
        min-height: 330px;
        padding: 70px 0 55px;
    }

    .category-hero-content {
        width: calc(100% - 60px);
        max-width: 850px;
    }

    .category-breadcrumb {
        flex-wrap: wrap;
        gap: 7px;
    }

    .category-title {
        gap: 12px;
        flex-wrap: wrap;
    }

    .category-title h1 {
        font-size: clamp(32px, 5vw, 46px);
        line-height: 1.2;
    }

    .category-badge {
        font-size: 13px;
        white-space: nowrap;
    }

    .category-hero-content > p {
        max-width: 650px;
        line-height: 2;
        font-size: 14px;
    }


    /* ================= CATEGORY GRID ================= */

    .category {
        width: calc(100% - 60px);
        margin-left: auto;
        margin-right: auto;

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

        gap: 18px;
        padding-top: 35px;
        padding-bottom: 50px;
    }

    .category-box {
        min-width: 0;
        min-height: 220px;
    }

    .category-box-content {
        min-width: 0;
    }

    .category-box-content h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

}


/* =========================================================
   MOBILE LARGE
   768px
========================================================= */

@media (max-width: 768px) {

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

    .category-hero {
        min-height: auto;
        padding: 55px 0 45px;
    }

    .category-hero-content {
        width: calc(100% - 36px);
        max-width: none;
    }

    .category-breadcrumb {
        width: 100%;
        font-size: 12px;
        line-height: 1.8;

        gap: 5px;
    }

    .category-title {
        width: 100%;

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

        gap: 10px;
    }

    .category-title h1 {
        min-width: 0;
        margin: 0;

        font-size: clamp(28px, 7vw, 40px);
        line-height: 1.25;

        overflow-wrap: anywhere;
    }

    .category-badge {
        flex-shrink: 0;

        font-size: 12px;
        padding: 7px 11px;
    }

    .category-hero-content > p {
        width: 100%;

        margin-top: 14px;

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

        max-width: 100%;
    }


    /* ================= DECORATIONS ================= */

    .hero-circle-1 {
        transform: scale(.75);
    }

    .hero-circle-2 {
        transform: scale(.65);
    }


    /* ================= CATEGORY GRID ================= */

    .category {
        width: calc(100% - 36px);

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

        gap: 14px;

        padding-top: 28px;
        padding-bottom: 40px;
    }

    .category-box {
        min-height: 200px;
    }

    .category-number {
        font-size: 12px;
    }

    .category-box-content h2 {
        font-size: clamp(17px, 4vw, 22px);
        line-height: 1.5;
    }

    .category-arrow {
        flex-shrink: 0;
    }

    .category-arrow svg {
        width: 21px;
        height: 21px;
    }

}


/* =========================================================
   MOBILE
   600px
========================================================= */

@media (max-width: 600px) {

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

    .category-hero {
        padding: 45px 0 38px;
    }

    .category-hero-content {
        width: calc(100% - 28px);
    }

    .category-breadcrumb {
        font-size: 11px;
        gap: 4px;
    }

    .category-title {
        align-items: flex-start;
    }

    .category-title h1 {
        font-size: clamp(25px, 8vw, 34px);
    }

    .category-badge {
        font-size: 11px;
        padding: 6px 9px;
        margin-top: 3px;
    }

    .category-hero-content > p {
        font-size: 12px;
        line-height: 2.1;
        margin-top: 12px;
    }


    /* ================= CATEGORY ================= */

    .category {
        width: calc(100% - 28px);

        gap: 12px;

        padding-top: 22px;
        padding-bottom: 35px;
    }

    .category-box {
        min-height: 175px;
    }

    .category-number {
        font-size: 10px;
    }

    .category-box-content {
        gap: 7px;
    }

    .category-box-content h2 {
        font-size: 16px;
        line-height: 1.45;
    }

    .category-arrow svg {
        width: 19px;
        height: 19px;
    }

}


/* =========================================================
   SMALL MOBILE
   480px
========================================================= */

@media (max-width: 480px) {

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

    .category-hero {
        padding: 38px 0 32px;
    }

    .category-hero-content {
        width: calc(100% - 24px);
    }

    .category-breadcrumb {
        font-size: 10px;
        gap: 3px;
    }

    .category-title {
        gap: 7px;
    }

    .category-title h1 {
        font-size: clamp(23px, 8.5vw, 31px);
    }

    .category-badge {
        font-size: 10px;
        padding: 5px 8px;
    }

    .category-hero-content > p {
        font-size: 11px;
        line-height: 2;
    }


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

    .category {
        width: calc(100% - 24px);

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

        gap: 10px;

        padding-top: 18px;
    }

    .category-box {
        min-height: 155px;
    }

    .category-number {
        font-size: 9px;
    }

    .category-box-content h2 {
        font-size: 14px;
        line-height: 1.5;
    }

    .category-arrow svg {
        width: 17px;
        height: 17px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   380px
========================================================= */

@media (max-width: 380px) {

    .category-hero {
        padding-top: 32px;
        padding-bottom: 28px;
    }

    .category-hero-content {
        width: calc(100% - 20px);
    }

    .category-title {
        align-items: center;
    }

    .category-title h1 {
        font-size: 22px;
    }

    .category-badge {
        font-size: 9px;
        padding: 5px 7px;
    }

    .category-hero-content > p {
        font-size: 10px;
    }


    .category {
        width: calc(100% - 20px);

        gap: 8px;
    }

    .category-box {
        min-height: 145px;
    }

    .category-box-content h2 {
        font-size: 13px;
    }

    .category-arrow svg {
        width: 15px;
        height: 15px;
    }

}


/* =========================================================
   ULTRA SMALL DEVICES
   340px
========================================================= */

@media (max-width: 340px) {

    .category-hero-content {
        width: calc(100% - 16px);
    }

    .category-title {
        gap: 5px;
    }

    .category-title h1 {
        font-size: 20px;
    }

    .category-badge {
        font-size: 8px;
        padding: 4px 6px;
    }

    .category {
        width: calc(100% - 16px);
        gap: 7px;
    }

    .category-box {
        min-height: 135px;
    }

    .category-box-content h2 {
        font-size: 12px;
    }

}

































































/* =========================================
   PRODUCT CARDS - MOBILE
========================================= */

@media (max-width: 768px) {

    .products-grid2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        padding: 0 17px;
        box-sizing: border-box;
    }


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

    .products-grid2 .product {



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

    .products-grid2 .product-image {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;

        overflow: hidden;
    }

    .products-grid2 .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    /* =========================
       PRODUCT CONTENT
    ========================= */
    .products-grid2 .product-content {
        height: 180px !important;
        min-height: 0 !important;

        padding: 10px 11px !important;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        box-sizing: border-box;
    }


    /* =========================
       PRICE
    ========================= */

    .products-grid2 .price-badge {
        font-size: 12px !important;
        line-height: 1.2;
        margin: 0 !important;
    }


    /* =========================
       PRODUCT NAME
    ========================= */

    .products-grid2 .product-content h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;

        margin: 2px 0 !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


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

    .products-grid2 .product-content p {
        font-size: 10px !important;
        line-height: 1.3 !important;

        margin: 0 !important;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }


    /* =========================
       BUY BUTTON
    ========================= */

    .products-grid2 .btn-product {
        font-size: 12px !important;
        padding: 10px 14px !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.3 !important;
    }

}


/* =========================================================
   COLLECTION PAGE - MOBILE RESPONSIVE
   فقط مخصوص صفحه کالکشن
========================================================= */

@media (max-width: 768px) {

    /* =========================
       PRODUCTS CONTAINER
    ========================= */

    body.collection-page .products-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* =========================
       PRODUCTS GRID
    ========================= */

    body.collection-page .products-grid2 {
        display: grid !important;

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

        gap: 14px !important;

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

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

        box-sizing: border-box !important;
    }


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

    body.collection-page .products-grid2 .product {
        display: block !important;

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

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

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


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

    body.collection-page .products-grid2 .product-image {
        width: 100% !important;

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

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    body.collection-page .products-grid2 .product-image img {
        display: block !important;

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

        max-width: 100% !important;

        object-fit: cover !important;

        margin: 0 !important;
    }


    /* =========================
       PRODUCT CONTENT
    ========================= */

    body.collection-page .products-grid2 .product-content {
        display: flex !important;

        flex-direction: column !important;
        justify-content: space-between !important;

        width: 100% !important;

        height: 130px !important;
        min-height: 0 !important;
        max-height: 130px !important;

        padding: 7px 11px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =========================
       PRICE
    ========================= */

    body.collection-page .products-grid2 .price-badge {
        display: block !important;

        width: auto !important;

        font-size: 12px !important;

        line-height: 1.2 !important;

        margin: 0 !important;
    }


    /* =========================
       PRODUCT NAME
    ========================= */

    body.collection-page .products-grid2 .product-content h3 {
        display: block !important;

        width: 100% !important;

        font-size: 14px !important;

        line-height: 1.3 !important;

        margin: 2px 0 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


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

    body.collection-page .products-grid2 .product-content p {
        display: -webkit-box !important;

        width: 100% !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

        margin: 0 !important;

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

        overflow: hidden !important;
    }


    /* =========================
       BUY BUTTON
    ========================= */

    body.collection-page .products-grid2 .btn-product {
        display: block !important;

        width: 100% !important;

        font-size: 12px !important;

        padding: 10px 14px !important;

        margin: 0 !important;

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

        line-height: 1.3 !important;

        box-sizing: border-box !important;
    }


    /* =========================
       PAGINATION
    ========================= */

    body.collection-page .pagination {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        padding: 20px 17px !important;
    }
}




























































/* =========================================
   DISCOUNT PRICE - MOBILE
   قیمت‌ها کنار هم
========================================= */

@media (max-width: 768px) {

    .products-grid2 .price-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

        width: 100% !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .products-grid2 .price-box .new-price,
    .products-grid2 .price-box .old-price {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

}













































/* =====================================================
   BIBSHOP PAGE LOADER
===================================================== */

.bib-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;

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

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 138, 61, 0.08),
            transparent 38%
        ),
        #ffffff;

    z-index: 999999999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .55s cubic-bezier(.22, 1, .36, 1),
        visibility .55s ease;
}


/* وقتی صفحه آماده شد */
.bib-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* محتوای Loader */

.bib-loader-inner {
    width: min(320px, 80vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* لوگو */

.bib-loader-logo {
    width: 68px;
    height: 68px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 138, 61, .14),
            rgba(255, 138, 61, .04)
        );

    border: 1px solid rgba(255, 138, 61, .14);

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

    animation:
        bibLoaderLogo
        1.8s
        ease-in-out
        infinite;
}


.bib-loader-logo i {
    font-size: 28px;

    color: #ff8a3d;

    animation:
        bibLoaderIcon
        1.8s
        ease-in-out
        infinite;
}


/* اسم فروشگاه */

.bib-loader-brand {
    margin-top: 18px;

    font-size: 25px;
    font-weight: 800;
    letter-spacing: 3px;

    color: #202020;
}


/* نوار */

.bib-loader-line {
    position: relative;

    width: 180px;
    height: 4px;

    margin-top: 22px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(0,0,0,.06);
}


.bib-loader-line span {
    position: absolute;

    top: 0;
    left: -40%;

    width: 40%;
    height: 100%;

    border-radius: inherit;

    background: #ff8a3d;

    animation:
        bibLoaderProgress
        1.15s
        cubic-bezier(.4,0,.2,1)
        infinite;
}


/* متن */

.bib-loader-text {
    margin-top: 13px;

    font-size: 12px;
    font-weight: 500;

    color: #888;

    animation:
        bibLoaderText
        1.5s
        ease-in-out
        infinite;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes bibLoaderLogo {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.025);
    }

}


@keyframes bibLoaderIcon {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.08) rotate(-3deg);
    }

}


@keyframes bibLoaderProgress {

    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }

}


@keyframes bibLoaderText {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }

}


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

@media (max-width: 768px) {

    .bib-loader-inner {
        width: 270px;
    }

    .bib-loader-logo {
        width: 62px;
        height: 62px;
        border-radius: 20px;
    }

    .bib-loader-logo i {
        font-size: 25px;
    }

    .bib-loader-brand {
        margin-top: 16px;
        font-size: 22px;
        letter-spacing: 2.5px;
    }

    .bib-loader-line {
        width: 160px;
        margin-top: 20px;
    }

    .bib-loader-text {
        font-size: 11px;
    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

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

    .bib-loader *,
    .bib-loader {
        animation: none !important;
        transition: none !important;
    }

}







































.gallery_track img,
.thumb_grid img {
    content-visibility: auto;
}

.gallery_track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.gallery_track img {
    transform: translateZ(0);
    backface-visibility: hidden;
}





































/* =========================================================
   MOBILE SLIDER — PREMIUM / BOLD
   ========================================================= */

@media screen and (max-width: 768px) {

    .slider {
        width: calc(100% - 20px) !important;
        height: 245px !important;
        margin: 14px auto 20px !important;
        padding: 0 !important;

        border-radius: 22px !important;
        overflow: hidden !important;

        position: relative !important;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .12),
            0 2px 8px rgba(0, 0, 0, .06) !important;
    }

    .slider-content {
        width: 100% !important;
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;

        position: relative !important;
        overflow: hidden !important;
    }

    .slide {
        width: 100% !important;
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: scale(1.035) !important;

        transition:
            opacity .55s ease,
            transform .8s cubic-bezier(.22,1,.36,1) !important;
    }

    .slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }

    .slide picture,
    .slide a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;

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

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


    /* =====================================================
       PREMIUM OVERLAY
       ===================================================== */

    .slide::after {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.02) 20%,
                rgba(0,0,0,.06) 48%,
                rgba(0,0,0,.42) 100%
            ) !important;

        z-index: 4 !important;
    }


    /* =====================================================
       ARROWS
       ===================================================== */

    .slider-btn {
        position: absolute !important;

        top: 50% !important;

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

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

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

        transform: translateY(-50%) !important;

        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 13px !important;

        background: rgba(255,255,255,.18) !important;

        color: #fff !important;

        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;

        box-shadow:
            0 6px 20px rgba(0,0,0,.18) !important;

        z-index: 30 !important;

        transition:
            transform .2s ease,
            background .2s ease !important;
    }

    .slider-btn.prev {
        right: 11px !important;
        left: auto !important;
    }

    .slider-btn.next {
        left: 11px !important;
        right: auto !important;
    }

    .slider-btn i {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .slider-btn:active {
        transform: translateY(-50%) scale(.9) !important;
    }


    /* =====================================================
       SLIDE BUTTON
       ===================================================== */

    .slide-button {
        position: absolute !important;

        right: 50% !important;
        left: auto !important;

        bottom: 38px !important;

        transform: translateX(50%) !important;

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

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

        padding: 0 18px !important;

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

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

        background: rgba(255,255,255,.18) !important;

        color: #fff !important;

        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;

        box-shadow:
            0 7px 22px rgba(0,0,0,.2) !important;

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

        white-space: nowrap !important;

        z-index: 20 !important;
    }


    /* =====================================================
       PROGRESS
       ===================================================== */

    .progress {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;

        bottom: 14px !important;

        transform: translateX(-50%) !important;

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

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

        overflow: hidden !important;

        border-radius: 20px !important;

        background: rgba(255,255,255,.28) !important;

        backdrop-filter: blur(5px) !important;

        z-index: 30 !important;
    }

    .progress-fill {
        width: 0;
        height: 100% !important;

        border-radius: inherit !important;

        background: #fff !important;

        box-shadow:
            0 0 12px rgba(255,255,255,.8) !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 480px) {

    .slider {
        width: calc(100% - 16px) !important;

        height: 225px !important;

        margin: 12px auto 18px !important;

        border-radius: 20px !important;
    }

    .slider-content {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }

    .slide {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }

    .slider-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;

        border-radius: 11px !important;
    }

    .slider-btn.prev {
        right: 9px !important;
    }

    .slider-btn.next {
        left: 9px !important;
    }

    .slider-btn i {
        font-size: 11px !important;
    }

    .slide-button {
        bottom: 35px !important;

        min-width: 112px !important;
        height: 36px !important;

        padding: 0 15px !important;

        border-radius: 10px !important;

        font-size: 10px !important;
    }

    .progress {
        bottom: 12px !important;
        width: 68px !important;
        height: 3px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media screen and (max-width: 360px) {

    .slider {
        width: calc(100% - 14px) !important;
        height: 205px !important;
        border-radius: 18px !important;
    }

    .slider-content {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
    }

    .slide {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
    }

    .slider-btn {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        border-radius: 10px !important;
    }

    .slide-button {
        bottom: 32px !important;
        min-width: 105px !important;
        height: 34px !important;
        font-size: 9px !important;
    }

    .progress {
        width: 60px !important;
        bottom: 11px !important;
    }
}

}


































/* =========================================================
   BIBSHOP — PREMIUM GLASS SEARCH
========================================================= */

.search-basket {
    position: relative;
    width: min(520px, 100%);
    z-index: 1000; 
}




/* =========================================================
   FOCUS
========================================================= */

.search-basket.search-active .search-input-wrap,
.search-input-wrap:focus-within {

    border-color: rgba(255,138,61,.55);

    box-shadow:
        0 18px 55px rgba(255,138,61,.16),
        0 0 0 4px rgba(255,138,61,.07),
        inset 0 1px 0 rgba(255,255,255,.8);

    transform: translateY(-1px);
}



/* =========================================================
   INPUT
========================================================= */

#bib-search-input {

    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    padding:
        0 68px
        0 92px;

    font-family: inherit;

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

    color: #242424;

    direction: rtl;
}


#bib-search-input::placeholder {

    color: #777;

    font-weight: 500;

    transition: .2s ease;
}


#bib-search-input:focus::placeholder {

    color: #aaa;

    transform: translateX(-3px);
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.search-clear {

    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    width: 32px;
    height: 32px;

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

    border: none;

    border-radius: 10px;

    background: rgba(0,0,0,.05);

    color: #777;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition: .25s ease;

    z-index: 5;
}


.search-clear.show {

    opacity: 1;
    visibility: visible;
}


.search-clear:hover {

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

    color: #ff8a3d;

    transform:
        translateY(-50%)
        rotate(8deg);
}


/* =========================================================
   LOADER
========================================================= */

.search-loader {

    position: absolute;

    left: 53px;
    top: 50%;

    width: 20px;
    height: 20px;

    transform: translateY(-50%);

    display: none;

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


.search-loader.active {

    display: flex;
}


.search-loader span {

    width: 17px;
    height: 17px;

    border-radius: 50%;

    border:
        2px solid rgba(255,138,61,.18);

    border-top-color:
        #ff8a3d;

    animation:
        bibSearchSpin .65s linear infinite;
}


@keyframes bibSearchSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   DROPDOWN
========================================================= */

.search-dropdown {

    position: absolute;

    top: calc(100% + 13px);

    right: 0;

    width: 100%;

    min-width: 390px;

    max-height: 620px;

    display: flex;
    flex-direction: column;
z-index: 100000 !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(255,248,243,.86)
        );

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

    border-radius: 26px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.18),
        0 10px 35px rgba(255,138,61,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

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

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-10px)
        scale(.97);

    transform-origin: top center;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s cubic-bezier(.2,.8,.2,1);

    pointer-events: none;
}


.search-basket.search-active .search-dropdown {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* =========================================================
   DROPDOWN ORANGE LIGHT
========================================================= */

.search-dropdown::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    left: -60px;

    background:
        rgba(255,138,61,.13);

    filter: blur(50px);

    border-radius: 50%;

    pointer-events: none;
}


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

.search-dropdown-header {

    position: relative;

    display: flex;

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

    padding: 18px 20px 15px;

    border-bottom:
        1px solid rgba(0,0,0,.05);
}


.search-dropdown-title {

    display: flex;

    align-items: center;

    gap: 12px;
}


.search-title-icon {

    width: 42px;
    height: 42px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ff8a3d,
            #ffb27a
        );

    color: white;

    box-shadow:
        0 9px 25px rgba(255,138,61,.25);
}


.search-dropdown-title div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.search-dropdown-title strong {

    color: #222;

    font-size: 14px;
}


.search-dropdown-title small {

    color: #858585;

    font-size: 11px;
}


.search-close {

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 11px;

    background:
        rgba(0,0,0,.045);

    color: #777;

    cursor: pointer;

    transition: .2s ease;
}


.search-close:hover {

    background:
        rgba(255,138,61,.12);

    color: #ff8a3d;

    transform: rotate(8deg);
}


/* =========================================================
   QUICK SEARCH
========================================================= */

.quick-search {

    padding: 13px 18px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.quick-label {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #777;

    font-size: 11px;

    font-weight: 700;
}


.quick-label i {

    color: #ff8a3d;
}


.quick-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.quick-tags button {

    border: 1px solid rgba(255,138,61,.14);

    background:
        rgba(255,138,61,.07);

    color: #555;

    border-radius: 50px;

    padding: 7px 12px;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition: .2s ease;
}


.quick-tags button:hover {

    color: white;

    background: #ff8a3d;

    border-color: #ff8a3d;

    box-shadow:
        0 7px 20px rgba(255,138,61,.22);

    transform: translateY(-1px);
}


/* =========================================================
   RESULTS
========================================================= */

.search-results {

    overflow-y: auto;

    padding:
        4px 12px
        12px;

    max-height: 390px;
}


.search-results::-webkit-scrollbar {

    width: 5px;
}


.search-results::-webkit-scrollbar-track {

    background: transparent;
}


.search-results::-webkit-scrollbar-thumb {

    background:
        rgba(255,138,61,.25);

    border-radius: 20px;
}


/* =========================================================
   RESULT ITEM
========================================================= */

.search-result {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 10px;

    margin-bottom: 5px;

    border-radius: 17px;

    text-decoration: none;

    color: inherit;

    border:
        1px solid transparent;

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

    transition:
        .22s ease;
}


.search-result:hover {

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

    border-color:
        rgba(255,138,61,.16);

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

    transform:
        translateX(-3px);
}


.search-result-image {

    position: relative;

    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #f4f4f4,
            #fff
        );

    border:
        1px solid rgba(0,0,0,.05);
}


.search-result-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .3s ease;
}


.search-result:hover
.search-result-image img {

    transform: scale(1.07);
}


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

.search-result-info {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.search-result-name {

    font-size: 13px;

    font-weight: 800;

    color: #282828;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.search-result-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

    color: #888;
}


.search-result-stock {

    display: inline-flex;

    align-items: center;

    gap: 4px;
}


.search-result-stock.available {

    color: #27a66f;
}


.search-result-stock.unavailable {

    color: #d84b4b;
}


.search-result-price {

    font-size: 12px;

    font-weight: 900;

    color: #ff7130;

    white-space: nowrap;
}


.search-result-arrow {

    width: 31px;
    height: 31px;

    display: flex;

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

    flex: 0 0 31px;

    border-radius: 10px;

    background:
        rgba(255,138,61,.08);

    color: #ff8a3d;

    transition: .2s ease;
}


.search-result:hover
.search-result-arrow {

    color: white;

    background: #ff8a3d;

    transform: translateX(-2px);
}


/* =========================================================
   EMPTY
========================================================= */

.search-empty {

    padding:
        34px 20px
        30px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;
}


.search-empty-icon {

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 19px;

    background:
        rgba(255,138,61,.1);

    color: #ff8a3d;

    font-size: 20px;

    margin-bottom: 4px;
}


.search-empty strong {

    font-size: 14px;

    color: #333;
}


.search-empty span {

    max-width: 280px;

    font-size: 11px;

    color: #8a8a8a;

    line-height: 1.8;
}


/* =========================================================
   SEARCH FOOTER
========================================================= */

.search-footer {

    margin-top: auto;

    display: flex;

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

    gap: 10px;

    padding:
        12px 18px;

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

    color: #999;

    font-size: 9px;
}


.search-footer span {

    display: flex;

    align-items: center;

    gap: 5px;
}


.search-footer i {

    color: #ff8a3d;
}


/* =========================================================
   NO RESULTS / SEARCHING
========================================================= */

.search-message {

    padding: 30px;

    text-align: center;

    color: #888;

    font-size: 12px;
}


.search-message i {

    color: #ff8a3d;

    font-size: 22px;

    margin-bottom: 10px;
}


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

@media (max-width: 768px) {

    .search-basket {

        width: 100%;

        z-index: 2000;
    }


    .search-input-wrap {

        height: 50px;

        border-radius: 16px;
    }


    .search-icon {

        right: 13px;

        width: 31px;
        height: 31px;

        font-size: 14px;
    }


    #bib-search-input {

        font-size: 12px;

        padding:
            0 57px
            0 58px;
    }


    .search-clear {

        left: 10px;

        width: 29px;
        height: 29px;
    }


    .search-dropdown {

        position: fixed;

        top: 72px;

        right: 10px;
        left: 10px;

        width: auto;

        min-width: 0;

        max-height:
            calc(100vh - 88px);

        border-radius: 22px;
    }


    .search-results {

        max-height:
            calc(100vh - 330px);
    }


    .search-dropdown-header {

        padding:
            14px 15px;
    }


    .search-title-icon {

        width: 37px;
        height: 37px;

        border-radius: 12px;
    }


    .search-dropdown-title strong {

        font-size: 12px;
    }


    .search-dropdown-title small {

        font-size: 9px;
    }


    .quick-search {

        padding:
            10px 14px;
    }


    .quick-tags {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 3px;
    }


    .quick-tags::-webkit-scrollbar {

        display: none;
    }


    .quick-tags button {

        flex: 0 0 auto;
    }


    .search-footer {

        display: none;
    }

}


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

@media (max-width: 400px) {

    .search-dropdown {

        right: 7px;
        left: 7px;

        top: 68px;
    }


    .search-result-image {

        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    .search-result-name {

        font-size: 12px;
    }


    .search-result-price {

        font-size: 10px;
    }

}























































/* =========================================================
   BIBSHOP — SEARCH INPUT
========================================================= */

.search-basket {
    position: relative;
    width: min(620px, 100%);
    z-index: 1000;
}


/* =========================================================
   SEARCH INPUT WRAPPER
========================================================= */

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 54px;

    border-radius: 20px;

    overflow: hidden;
}


/* =========================================================
   SEARCH ICON
========================================================= */

.search-input-wrap .search-icon {
    position: absolute;

    right: 16px;
    top: 50%;

    width: 31px;
    height: 31px;

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

    margin: 0;
    padding: 0;

    transform: translateY(-50%);

    line-height: 1;

    z-index: 4;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;

    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

#bib-search-input {
    display: block;

    width: 100%;
    height: 54px;

    line-height: normal;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    padding-right: 58px !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;

    background: transparent !important;

    border-radius: 20px;

    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

#bib-search-input:focus,
#bib-search-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

#bib-search-input::placeholder {
    line-height: normal;
    transform: none;
}


/* =========================================================
   CLEAR BUTTON — ×
========================================================= */

#bib-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;

    width: 22px;
    height: 22px;

    margin-left: 12px;

    border-radius: 50%;

    cursor: pointer;

    background-color: rgba(255, 255, 255, 0.10);

    background-image:
        linear-gradient(
            45deg,
            transparent 44%,
            currentColor 45%,
            currentColor 55%,
            transparent 56%
        ),
        linear-gradient(
            -45deg,
            transparent 44%,
            currentColor 45%,
            currentColor 55%,
            transparent 56%
        );

    background-size: 9px 9px;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.65;

    transition:
        opacity .2s ease,
        transform .2s ease,
        background-color .2s ease;
}


/* Hover روی × */

#bib-search-input::-webkit-search-cancel-button:hover {
    opacity: 1;

    background-color: rgba(255, 138, 61, 0.18);

    transform: scale(1.08);
}


/* =========================================================
   SEARCH WRAPPER FOCUS
========================================================= */

.search-input-wrap:focus-within {
    outline: none;
}


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

@media (max-width: 768px) {

    .search-basket {
        width: 100%;
    }


    .search-input-wrap {
        width: 100%;

        min-height: 52px;

        border-radius: 18px;
    }


    .search-input-wrap .search-icon {
        right: 13px;
        top: 50%;

        width: 31px;
        height: 31px;

        transform: translateY(-50%);

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        background: transparent !important;
    }


    #bib-search-input {
        width: 100%;
        height: 52px;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        padding-right: 54px !important;

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        border-radius: 18px;
    }


    #bib-search-input:focus,
    #bib-search-input:focus-visible {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }


    #bib-search-input::-webkit-search-cancel-button {
        width: 21px;
        height: 21px;

        margin-left: 9px;

        background-size: 8px 8px;
    }

}
























#search-empty[hidden] {
    display: none !important;
}

#search-empty:not([hidden]) {
    display: flex !important;
}


















































/* =========================================================
   BIBSHOP — FAVORITES SYSTEM
   CRYSTAL PINK GLASS / LIGHT PREMIUM / RESPONSIVE
   ONLY FAVORITES DRAWER
========================================================= */


/* =========================================================
   BIBSHOP FAVORITES VARIABLES
========================================================= */

:root {

    --bib-fav-pink: #ff4f91;
    --bib-fav-pink-light: #ff8fba;
    --bib-fav-pink-soft: #ffd9e7;

    --bib-fav-orange: #ff8a3d;
    --bib-fav-orange-light: #ffb27a;

    --bib-fav-white: rgba(255,255,255,.88);
    --bib-fav-glass: rgba(255,255,255,.48);
    --bib-fav-glass-soft: rgba(255,255,255,.30);

    --bib-fav-border: rgba(255,255,255,.65);

    --bib-fav-text: #25202a;
    --bib-fav-text-light: #827681;

    --bib-fav-shadow:
        0 35px 100px rgba(244,91,145,.20),
        0 15px 45px rgba(255,138,61,.08);

    --bib-fav-blur:
        blur(40px);

}


/* =========================================================
   HEADER FAVORITE
   KEEPING HEADER SYSTEM
========================================================= */

.bib-header-favorites {
    position: relative;
}


.bib-header-fav-icon {

    position: relative;

    display: inline-flex;

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


.bib-header-fav-icon > i {

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        color .3s ease,
        filter .3s ease;
}


.bib-header-favorites:hover
.bib-header-fav-icon > i {

    transform: scale(1.18);

    filter:
        drop-shadow(
            0 4px 10px
            rgba(255,79,145,.35)
        );
}


/* =========================================================
   FAVORITES COUNT
========================================================= */

.bib-favorites-count {

    position: absolute;

    top: -10px;
    right: -12px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    display: flex;

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

    border-radius: 999px;

    color: #fff;

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

    line-height: 1;

    background:
        linear-gradient(
            135deg,
            var(--bib-fav-pink),
            var(--bib-fav-orange)
        );

    box-shadow:

        0 5px 16px
        rgba(255,79,145,.32),

        inset
        0 1px 1px
        rgba(255,255,255,.55);

    opacity: 0;

    transform: scale(.35);

    transition:

        opacity .3s ease,

        transform
        .4s cubic-bezier(.16,1,.3,1);
}


.bib-favorites-count.active {

    opacity: 1;

    transform: scale(1);
}


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

.bib-favorites-overlay {

    position: fixed;

    inset: 0;

    /*
       IMPORTANT
       باید از هدر هم بالاتر باشد
    */
    z-index: 2147483000;

    background:

        radial-gradient(
            circle at 80% 15%,
            rgba(255,120,177,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 20% 85%,
            rgba(255,138,61,.12),
            transparent 32%
        ),

        rgba(255,220,235,.20);

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

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity .45s ease,

        visibility .45s ease;
}


.bib-favorites-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   MAIN FAVORITES DRAWER
========================================================= */

.bib-favorites-panel {

    position: fixed;

    top: 12px;
    right: 12px;
    bottom: 12px;

    width:
        min(
            470px,
            calc(100vw - 24px)
        );

    /*
       فوق همه چیز
    */
    z-index: 2147483001;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    isolation: isolate;

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

    border-radius: 34px;

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.82),

            rgba(255,246,250,.68) 45%,

            rgba(255,242,247,.58)
        );

    box-shadow:

        var(--bib-fav-shadow),

        inset
        0 1px 0
        rgba(255,255,255,.95),

        inset
        0 -1px 0
        rgba(255,138,61,.05);

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

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

    transform:

        translate3d(
            calc(100% + 70px),
            0,
            0
        )

        scale(.94);

    opacity: 0;

    pointer-events: none;

    transition:

        transform
        .65s cubic-bezier(.16,1,.3,1),

        opacity .4s ease;
}


.bib-favorites-panel.active {

    transform:
        translate3d(0,0,0)
        scale(1);

    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   PREMIUM LIGHT ORBS
========================================================= */

.bib-favorites-panel::before {

    content: "";

    position: absolute;

    top: -150px;
    right: -130px;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            rgba(255,79,145,.27)
            0%,

            rgba(255,143,186,.14)
            30%,

            rgba(255,178,122,.08)
            50%,

            transparent 72%
        );

    filter: blur(15px);

    pointer-events: none;

    z-index: -1;

    animation:
        bibFavOrbOne
        8s ease-in-out infinite;
}


.bib-favorites-panel::after {

    content: "";

    position: absolute;

    bottom: -190px;
    left: -160px;

    width: 410px;
    height: 410px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

            rgba(255,138,61,.16)
            0%,

            rgba(255,178,122,.09)
            38%,

            rgba(255,79,145,.06)
            55%,

            transparent 72%
        );

    filter: blur(25px);

    pointer-events: none;

    z-index: -1;

    animation:
        bibFavOrbTwo
        10s ease-in-out infinite;
}


@keyframes bibFavOrbOne {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-18px,18px,0)
            scale(1.08);
    }
}


@keyframes bibFavOrbTwo {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(20px,-15px,0)
            scale(1.06);
    }
}


/* =========================================================
   TOP GLASS SHINE
========================================================= */

.bib-favorites-panel {

    --bib-glass-line:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            rgba(255,138,61,.12),
            rgba(255,79,145,.15),
            transparent
        );
}


.bib-favorites-panel > * {

    position: relative;

    z-index: 1;
}


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

.bib-favorites-head {

    position: relative;

    flex: 0 0 auto;

    display: flex;

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

    gap: 14px;

    padding:
        23px 21px 20px;

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

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.54),
            rgba(255,255,255,.20)
        );

    box-shadow:

        0 12px 35px
        rgba(255,79,145,.045);

    backdrop-filter:
        blur(22px);

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


/* =========================================================
   HEADER LIGHT LINE
========================================================= */

.bib-favorites-head::after {

    content: "";

    position: absolute;

    left: 22px;
    right: 22px;

    bottom: -1px;

    height: 1px;

    background:

        var(--bib-glass-line);

    opacity: .7;

    pointer-events: none;
}


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

.bib-favorites-title {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* =========================================================
   TITLE ICON — PINK CRYSTAL
========================================================= */

.bib-favorites-title-icon {

    position: relative;

    width: 51px;
    height: 51px;

    flex: 0 0 51px;

    display: flex;

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

    border-radius: 18px;

    color:
        var(--bib-fav-pink);

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.88),

            rgba(255,217,231,.55),

            rgba(255,178,122,.20)
        );

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

    box-shadow:

        0 13px 35px
        rgba(255,79,145,.14),

        0 5px 18px
        rgba(255,138,61,.06),

        inset
        0 1px 0
        rgba(255,255,255,.98);
}


.bib-favorites-title-icon::before {

    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 23px;

    border:
        1px solid
        rgba(255,79,145,.13);

    opacity: .8;
}


.bib-favorites-title-icon::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: -3px;
    right: 4px;

    border-radius: 50%;

    background:
        var(--bib-fav-orange);

    box-shadow:

        0 0 16px
        rgba(255,138,61,.65);

    animation:
        bibFavDot
        2.4s ease-in-out infinite;
}


.bib-favorites-title-icon i {

    position: relative;

    z-index: 2;

    font-size: 20px;

    filter:

        drop-shadow(
            0 6px 10px
            rgba(255,79,145,.25)
        );
}


@keyframes bibFavDot {

    0%,
    100% {

        opacity: .45;

        transform:
            scale(.7);
    }

    50% {

        opacity: 1;

        transform:
            scale(1.18);
    }
}


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

.bib-favorites-title > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.bib-favorites-title strong {

    color:
        var(--bib-fav-text);

    font-size: 17px;

    font-weight: 950;

    letter-spacing: -.35px;
}


.bib-favorites-title span {

    color:
        var(--bib-fav-text-light);

    font-size: 10px;

    font-weight: 650;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.bib-favorites-close {

    position: relative;

    width: 41px;
    height: 41px;

    flex: 0 0 41px;

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

    border-radius: 14px;

    display: flex;

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

    cursor: pointer;

    color:
        #8b7180;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.70),
            rgba(255,235,243,.35)
        );

    box-shadow:

        0 7px 20px
        rgba(255,79,145,.06),

        inset
        0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(15px);

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

    transition:

        transform
        .35s cubic-bezier(.16,1,.3,1),

        color .25s ease,

        background .25s ease,

        box-shadow .25s ease;
}


.bib-favorites-close:hover {

    transform:
        rotate(90deg)
        scale(1.07);

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--bib-fav-pink),
            var(--bib-fav-orange)
        );

    box-shadow:

        0 10px 25px
        rgba(255,79,145,.22);
}


.bib-favorites-close:active {

    transform:
        rotate(90deg)
        scale(.90);
}


/* =========================================================
   BODY
========================================================= */

.bib-favorites-body {

    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding:
        17px 15px 22px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,79,145,.25)
        transparent;
}


.bib-favorites-body::-webkit-scrollbar {

    width: 4px;
}


.bib-favorites-body::-webkit-scrollbar-track {

    background:
        transparent;
}


.bib-favorites-body::-webkit-scrollbar-thumb {

    border-radius: 20px;

    background:

        linear-gradient(
            180deg,
            rgba(255,79,145,.38),
            rgba(255,138,61,.20)
        );
}


/* =========================================================
   FAVORITE ITEM
========================================================= */

.bib-favorite-item {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 13px;

    padding: 10px;

    margin-bottom: 12px;

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

    border-radius: 23px;

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.76),

            rgba(255,248,251,.48)
        );

    box-shadow:

        0 12px 34px
        rgba(255,79,145,.055),

        0 5px 18px
        rgba(255,138,61,.025),

        inset
        0 1px 0
        rgba(255,255,255,.95),

        inset
        0 -1px 0
        rgba(255,79,145,.025);

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

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

    transition:

        transform
        .35s cubic-bezier(.16,1,.3,1),

        box-shadow .35s ease,

        border-color .35s ease,

        background .35s ease;
}


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

.bib-favorite-item::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:

        linear-gradient(
            115deg,
            rgba(255,255,255,.42),
            transparent 34%
        );

    pointer-events: none;

    opacity: .9;
}


/* =========================================================
   ITEM PINK GLOW
========================================================= */

.bib-favorite-item::after {

    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,79,145,.10),
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


.bib-favorite-item:hover {

    transform:
        translateY(-4px)
        scale(1.008);

    border-color:
        rgba(255,79,145,.24);

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.90),

            rgba(255,240,247,.62)
        );

    box-shadow:

        0 20px 45px
        rgba(255,79,145,.10),

        0 8px 22px
        rgba(255,138,61,.045),

        inset
        0 1px 0
        rgba(255,255,255,1);
}


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

.bib-favorite-image {

    position: relative;

    width: 84px;
    height: 94px;

    overflow: hidden;

    border-radius: 18px;

    background:

        linear-gradient(
            145deg,
            #fff,
            #ffeef5
        );

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

    box-shadow:

        0 9px 25px
        rgba(255,79,145,.10),

        inset
        0 1px 0
        rgba(255,255,255,.98);
}


/* =========================================================
   IMAGE LIGHT
========================================================= */

.bib-favorite-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.28),
            transparent 45%
        );
}


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

.bib-favorite-image::after {

    content: "";

    position: absolute;

    top: -110%;

    left: -75%;

    width: 55%;
    height: 320%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.60),
            transparent
        );

    transform:
        rotate(22deg);

    opacity: 0;

    transition:

        left .8s ease,

        opacity .3s ease;

    pointer-events: none;

    z-index: 3;
}


.bib-favorite-item:hover
.bib-favorite-image::after {

    left: 135%;

    opacity: 1;
}


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

.bib-favorite-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:

        transform
        .55s cubic-bezier(.16,1,.3,1),

        filter .35s ease;
}


.bib-favorite-item:hover
.bib-favorite-image img {

    transform:
        scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.02);
}


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

.bib-favorite-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.bib-favorite-name {

    color:
        var(--bib-fav-text);

    font-size: 13px;

    font-weight: 950;

    line-height: 1.65;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   PRICE
========================================================= */

.bib-favorite-price {

    display: flex;

    align-items: baseline;

    gap: 5px;

    color:
        #30232c;

    font-size: 14px;

    font-weight: 950;
}


.bib-favorite-price small {

    color:
        #a27f91;

    font-size: 9px;

    font-weight: 750;
}


/* =========================================================
   STOCK
========================================================= */

.bib-favorite-stock {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding:
        4px 8px;

    border-radius: 9px;

    font-size: 9px;

    font-weight: 850;

    border:
        1px solid transparent;
}


.bib-favorite-stock.available {

    color:
        #168456;

    background:
        rgba(22,132,86,.065);

    border-color:
        rgba(22,132,86,.10);

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.7);
}


.bib-favorite-stock.unavailable {

    color:
        #df4667;

    background:
        rgba(223,70,103,.065);

    border-color:
        rgba(223,70,103,.10);

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.7);
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.bib-favorite-remove {

    position: relative;

    width: 35px;
    height: 35px;

    align-self: flex-start;

    display: flex;

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

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

    border-radius: 12px;

    cursor: pointer;

    color:
        #b18498;

    background:

        rgba(255,255,255,.42);

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.85);

    transition:

        transform
        .3s cubic-bezier(.16,1,.3,1),

        color .25s ease,

        background .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;
}


.bib-favorite-remove:hover {

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--bib-fav-pink),
            var(--bib-fav-orange)
        );

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

    transform:
        scale(1.1)
        rotate(5deg);

    box-shadow:

        0 8px 22px
        rgba(255,79,145,.18);
}


.bib-favorite-remove:active {

    transform:
        scale(.88);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.bib-favorites-empty {

    min-height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        35px 20px;
}


/* =========================================================
   EMPTY ICON
========================================================= */

.bib-favorites-empty-icon {

    position: relative;

    width: 94px;
    height: 94px;

    margin-bottom: 25px;

    display: flex;

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

    border-radius: 32px;

    color:
        var(--bib-fav-pink);

    background:

        linear-gradient(
            145deg,

            rgba(255,255,255,.90),

            rgba(255,218,232,.54),

            rgba(255,178,122,.16)
        );

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

    box-shadow:

        0 25px 70px
        rgba(255,79,145,.14),

        0 10px 30px
        rgba(255,138,61,.05),

        inset
        0 1px 0
        rgba(255,255,255,.98);

    backdrop-filter:
        blur(22px);

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


/* =========================================================
   EMPTY RINGS
========================================================= */

.bib-favorites-empty-icon::before,
.bib-favorites-empty-icon::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,79,145,.13);

    pointer-events: none;
}


.bib-favorites-empty-icon::before {

    inset: -12px;
}


.bib-favorites-empty-icon::after {

    inset: -24px;

    opacity: .55;
}


.bib-favorites-empty-icon i {

    position: relative;

    z-index: 2;

    font-size: 33px;

    filter:

        drop-shadow(
            0 7px 14px
            rgba(255,79,145,.25)
        );

    animation:
        bibEmptyHeart
        2.5s ease-in-out infinite;
}


@keyframes bibEmptyHeart {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.12)
            translateY(-2px);
    }
}


/* =========================================================
   EMPTY TEXT
========================================================= */

.bib-favorites-empty strong {

    color:
        #30242d;

    font-size: 17px;

    font-weight: 950;

    margin-bottom: 8px;
}


.bib-favorites-empty span {

    max-width: 270px;

    color:
        #a18494;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.95;
}


/* =========================================================
   FOOTER
========================================================= */

.bib-favorites-footer {

    position: relative;

    flex: 0 0 auto;

    padding:
        14px 18px;

    border-top:
        1px solid
        rgba(255,255,255,.62);

    background:

        linear-gradient(
            180deg,

            rgba(255,255,255,.22),

            rgba(255,238,246,.42)
        );

    backdrop-filter:
        blur(24px);

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


/* =========================================================
   FOOTER LIGHT
========================================================= */

.bib-favorites-footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 15%;
    right: 15%;

    height: 1px;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(255,79,145,.20),

            rgba(255,138,61,.18),

            transparent
        );
}


.bib-favorites-footer-info {

    display: flex;

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

    gap: 7px;

    color:
        #a08393;

    font-size: 10px;

    font-weight: 650;
}


.bib-favorites-footer-info i {

    color:
        var(--bib-fav-pink);

    filter:

        drop-shadow(
            0 3px 7px
            rgba(255,79,145,.25)
        );
}


/* =========================================================
   =========================================================
   PRODUCT FAVORITE BUTTON
   DO NOT CHANGE
   =========================================================
   ========================================================= */

.bib-product-favorite {

    position: relative;

    width: 100%;

    min-height: 52px;

    margin-top: 10px;

    padding:
        0 18px;

    display: flex;

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

    gap: 10px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,79,129,.16);

    border-radius: 16px;

    cursor: pointer;

    color:
        #ff4f81;

    background:

        linear-gradient(
            135deg,
            rgba(255,79,129,.075),
            rgba(255,79,129,.025)
        );

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.75);

    transition:

        transform .25s ease,

        background .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;
}


.bib-product-favorite:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(255,79,129,.30);

    background:

        linear-gradient(
            135deg,
            rgba(255,79,129,.13),
            rgba(255,79,129,.045)
        );

    box-shadow:

        0 12px 30px
        rgba(255,79,129,.12);
}


.bib-product-favorite:active {

    transform:
        scale(.975);
}


.bib-product-favorite-icon {

    width: 31px;
    height: 31px;

    display: flex;

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

    border-radius: 10px;

    background:
        rgba(255,79,129,.09);

    transition:

        transform
        .35s cubic-bezier(.16,1,.3,1),

        background .3s ease;
}


.bib-product-favorite-icon i {

    font-size: 15px;

    transition:

        transform
        .35s cubic-bezier(.16,1,.3,1),

        color .25s ease;
}


.bib-product-favorite-text {

    font-size: 12px;

    font-weight: 900;
}


.bib-product-favorite.is-favorite {

    color: #fff;

    border-color:
        rgba(255,79,129,.7);

    background:

        linear-gradient(
            135deg,
            #ff4f81,
            #ff6b98
        );

    box-shadow:

        0 12px 35px
        rgba(255,79,129,.23);
}


.bib-product-favorite.is-favorite
.bib-product-favorite-icon {

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


.bib-product-favorite.is-favorite
.bib-product-favorite-icon i {

    transform:
        scale(1.18);

    color:
        #fff;
}


.bib-product-favorite-sparkles {

    position: absolute;

    inset: 0;

    pointer-events: none;
}


.bib-product-favorite-sparkles i {

    position: absolute;

    opacity: 0;

    font-size: 7px;

    transform:
        scale(.2);
}


.bib-product-favorite-sparkles i:nth-child(1) {

    top: 8px;
    right: 25%;
}


.bib-product-favorite-sparkles i:nth-child(2) {

    bottom: 9px;
    left: 27%;
}


.bib-product-favorite-sparkles i:nth-child(3) {

    top: 16px;
    left: 20%;
}


.bib-product-favorite.is-animating
.bib-product-favorite-sparkles i {

    animation:
        bibFavoriteSparkle
        .65s ease forwards;
}


.bib-product-favorite.is-animating
.bib-product-favorite-icon i {

    animation:
        bibFavoriteHeart
        .55s cubic-bezier(.16,1,.3,1);
}


@keyframes bibFavoriteHeart {

    0% {
        transform:
            scale(.5);
    }

    45% {
        transform:
            scale(1.5)
            rotate(-8deg);
    }

    70% {
        transform:
            scale(.9)
            rotate(5deg);
    }

    100% {
        transform:
            scale(1.18);
    }
}


@keyframes bibFavoriteSparkle {

    0% {
        opacity: 0;

        transform:
            scale(.2)
            translateY(5px);
    }

    35% {
        opacity: 1;

        transform:
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            scale(.3)
            translateY(-13px);
    }
}


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

@media (max-width: 768px) {

    .bib-favorites-panel {

        top: 9px;
        right: 9px;
        bottom: 9px;

        width:
            min(
                440px,
                calc(100vw - 18px)
            );

        border-radius: 29px;

        backdrop-filter:
            blur(35px)
            saturate(140%);

        -webkit-backdrop-filter:
            blur(35px)
            saturate(140%);
    }


    .bib-favorites-head {

        padding:
            19px 17px 16px;
    }


    .bib-favorites-body {

        padding:
            14px 12px 18px;
    }


    .bib-favorite-item {

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

        gap: 11px;

        padding: 9px;

        border-radius: 20px;
    }


    .bib-favorite-image {

        width: 74px;
        height: 84px;

        border-radius: 15px;
    }
}


/* =========================================================
   MOBILE — SPECIAL GLASS SHEET
========================================================= */

@media (max-width: 600px) {

    .bib-favorites-overlay {

        background:

            radial-gradient(
                circle at 50% 10%,
                rgba(255,125,178,.18),
                transparent 35%
            ),

            rgba(255,230,240,.25);

        backdrop-filter:
            blur(12px)
            saturate(120%);

        -webkit-backdrop-filter:
            blur(12px)
            saturate(120%);
    }


    .bib-favorites-panel {

        top: 5px;
        right: 5px;
        bottom: 5px;

        width:
            calc(100vw - 10px);

        border-radius: 26px;

        transform:

            translate3d(
                calc(100% + 35px),
                0,
                0
            )

            scale(.97);

        backdrop-filter:
            blur(31px)
            saturate(135%);

        -webkit-backdrop-filter:
            blur(31px)
            saturate(135%);

        box-shadow:

            0 30px 90px
            rgba(255,79,145,.20),

            0 10px 40px
            rgba(255,138,61,.08),

            inset
            0 1px 0
            rgba(255,255,255,.95);
    }


    .bib-favorites-panel.active {

        transform:

            translate3d(0,0,0)
            scale(1);
    }


    /* HEADER */

    .bib-favorites-head {

        gap: 9px;

        padding:
            16px 14px 14px;
    }


    .bib-favorites-title {

        gap: 10px;
    }


    .bib-favorites-title-icon {

        width: 43px;
        height: 43px;

        flex-basis: 43px;

        border-radius: 15px;
    }


    .bib-favorites-title-icon i {

        font-size: 17px;
    }


    .bib-favorites-title strong {

        font-size: 15px;
    }


    .bib-favorites-title span {

        font-size: 9px;
    }


    .bib-favorites-close {

        width: 37px;
        height: 37px;

        flex-basis: 37px;

        border-radius: 12px;
    }


    /* BODY */

    .bib-favorites-body {

        padding:
            12px 9px 16px;
    }


    /* ITEM */

    .bib-favorite-item {

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

        gap: 9px;

        padding: 8px;

        margin-bottom: 9px;

        border-radius: 18px;

        box-shadow:

            0 9px 25px
            rgba(255,79,145,.055),

            inset
            0 1px 0
            rgba(255,255,255,.95);
    }


    /* IMAGE */

    .bib-favorite-image {

        width: 67px;
        height: 77px;

        border-radius: 14px;
    }


    /* INFO */

    .bib-favorite-info {

        gap: 5px;
    }


    .bib-favorite-name {

        font-size: 11.5px;

        line-height: 1.6;
    }


    .bib-favorite-price {

        font-size: 12.5px;
    }


    .bib-favorite-price small {

        font-size: 8px;
    }


    .bib-favorite-stock {

        padding:
            3px 6px;

        border-radius: 7px;

        font-size: 8px;
    }


    /* REMOVE */

    .bib-favorite-remove {

        width: 32px;
        height: 32px;

        border-radius: 10px;
    }


    /* FOOTER */

    .bib-favorites-footer {

        padding:
            11px 12px;
    }


    .bib-favorites-footer-info {

        font-size: 9px;
    }


    /* EMPTY */

    .bib-favorites-empty {

        padding:
            30px 16px;
    }


    .bib-favorites-empty-icon {

        width: 80px;
        height: 80px;

        margin-bottom: 21px;

        border-radius: 28px;
    }


    .bib-favorites-empty-icon i {

        font-size: 28px;
    }


    .bib-favorites-empty strong {

        font-size: 14px;
    }


    .bib-favorites-empty span {

        max-width: 235px;

        font-size: 10px;
    }
}


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

@media (max-width: 390px) {

    .bib-favorites-panel {

        top: 4px;
        right: 4px;
        bottom: 4px;

        width:
            calc(100vw - 8px);

        border-radius: 22px;
    }


    .bib-favorites-head {

        padding:
            13px 11px;
    }


    .bib-favorites-title {

        gap: 9px;
    }


    .bib-favorites-title-icon {

        width: 39px;
        height: 39px;

        flex-basis: 39px;

        border-radius: 13px;
    }


    .bib-favorites-title-icon i {

        font-size: 16px;
    }


    .bib-favorites-title strong {

        font-size: 13.5px;
    }


    .bib-favorites-title span {

        display: none;
    }


    .bib-favorites-close {

        width: 35px;
        height: 35px;

        flex-basis: 35px;

        border-radius: 11px;
    }


    .bib-favorites-body {

        padding:
            10px 8px 14px;
    }


    .bib-favorite-item {

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

        gap: 8px;

        padding: 7px;

        border-radius: 16px;
    }


    .bib-favorite-image {

        width: 59px;
        height: 68px;

        border-radius: 12px;
    }


    .bib-favorite-name {

        font-size: 10.5px;

        line-height: 1.55;
    }


    .bib-favorite-price {

        font-size: 11.5px;
    }


    .bib-favorite-stock {

        font-size: 7.5px;

        padding:
            3px 5px;
    }


    .bib-favorite-remove {

        width: 29px;
        height: 29px;

        border-radius: 9px;
    }


    .bib-favorites-footer-info {

        font-size: 8.5px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .bib-favorite-item {

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

        gap: 7px;

        padding: 6px;
    }


    .bib-favorite-image {

        width: 55px;
        height: 63px;
    }


    .bib-favorite-name {

        font-size: 10px;
    }


    .bib-favorite-price {

        font-size: 11px;
    }


    .bib-favorite-remove {

        width: 27px;
        height: 27px;
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .bib-favorite-item:hover {

        transform: none;

        background:

            linear-gradient(
                145deg,
                rgba(255,255,255,.76),
                rgba(255,248,251,.48)
            );
    }


    .bib-favorite-item:hover
    .bib-favorite-image img {

        transform: none;

        filter: none;
    }


    .bib-favorite-item:hover
    .bib-favorite-image::after {

        display: none;
    }


    .bib-favorite-remove:hover {

        transform: none;

        color:
            #b18498;

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


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

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

    .bib-favorites-panel,
    .bib-favorites-overlay,
    .bib-favorite-item,
    .bib-favorite-image img,
    .bib-favorites-close,
    .bib-product-favorite,
    .bib-product-favorite-icon,
    .bib-product-favorite-icon i {

        transition:
            none !important;
    }


    .bib-favorites-title-icon::after,
    .bib-favorites-empty-icon i,
    .bib-favorites-panel::before,
    .bib-favorites-panel::after {

        animation:
            none !important;
    }
}






















/* =========================================================
   BIBSHOP — FINAL FAVORITES LAYER
   ABOVE EVERYTHING / SEARCH SAFE
========================================================= */

/* =========================================================
   HEADER + SEARCH
   همیشه زیر Favorites
========================================================= */

.head1 {
    position: relative !important;
    z-index: 1 !important;
}

#bib-search,
.search-basket {
    position: relative !important;
    z-index: 2 !important;
}

.search-dropdown {
    z-index: 3 !important;
}


/* =========================================================
   FAVORITES OVERLAY
========================================================= */

.bib-favorites-overlay {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 2147483640 !important;

    transform: none !important;
}


/* =========================================================
   FAVORITES PANEL
========================================================= */

.bib-favorites-panel {
    position: fixed !important;

    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;

    width: min(470px, calc(100vw - 24px)) !important;

    z-index: 2147483647 !important;

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

    overflow: hidden !important;

    /* مهم:
       فقط خود پنل isolation دارد،
       نه تمام بچه‌های آن
    */
    isolation: isolate !important;

    transform:
        translate3d(
            calc(100% + 70px),
            0,
            0
        )
        scale(.94) !important;

    opacity: 0 !important;

    visibility: visible !important;

    pointer-events: none;

    transition:
        transform .65s cubic-bezier(.16,1,.3,1),
        opacity .4s ease;
}


/* =========================================================
   OPEN
========================================================= */

.bib-favorites-panel.active {

    transform:
        translate3d(0,0,0)
        scale(1) !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 2147483647 !important;
}


/* =========================================================
   FAVORITES INTERNAL CONTENT
========================================================= */

.bib-favorites-panel > * {
    position: relative;

    z-index: 1;
}


/* =========================================================
   BODY — FORCE PRODUCTS TO BE VISIBLE
========================================================= */

.bib-favorites-body {

    position: relative !important;

    display: block !important;

    flex:
        1 1 auto !important;

    min-height: 0 !important;

    height: auto !important;

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

    visibility: visible !important;

    opacity: 1 !important;
}


/* =========================================================
   FAVORITE ITEMS — DESKTOP
========================================================= */

.bib-favorite-item {

    position: relative !important;

    display: grid !important;

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

    align-items: center !important;

    visibility: visible !important;

    opacity: 1 !important;

    transform: none;

    flex-shrink: 0 !important;
}


/* =========================================================
   ITEM CONTENT
========================================================= */

.bib-favorite-image,
.bib-favorite-info,
.bib-favorite-remove {

    visibility: visible !important;

    opacity: 1 !important;
}


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

.bib-favorite-image {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    overflow: hidden !important;
}


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

.bib-favorite-image img {

    display: block !important;

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

    visibility: visible !important;

    opacity: 1 !important;
}


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

.bib-favorite-info {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    min-width: 0 !important;
}


/* =========================================================
   REMOVE
========================================================= */

.bib-favorite-remove {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* =========================================================
   DESKTOP FORCE
========================================================= */

@media (min-width: 769px) {

    .bib-favorites-panel {

        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;

        width:
            min(
                470px,
                calc(100vw - 24px)
            ) !important;
    }


    .bib-favorites-body {

        display: block !important;

        flex:
            1 1 auto !important;

        min-height: 0 !important;

        overflow-y: auto !important;
    }


    .bib-favorite-item {

        display: grid !important;

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


    .bib-favorite-image {

        width: 84px !important;
        height: 94px !important;
    }
}


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

@media (max-width: 768px) {

    .bib-favorites-overlay {

        z-index: 2147483640 !important;
    }


    .bib-favorites-panel {

        top: 9px !important;
        right: 9px !important;
        bottom: 9px !important;

        width:
            min(
                440px,
                calc(100vw - 18px)
            ) !important;

        z-index: 2147483647 !important;
    }


    .bib-favorites-panel.active {

        z-index: 2147483647 !important;
    }
}


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

@media (max-width: 600px) {

    .bib-favorites-panel {

        top: 5px !important;
        right: 5px !important;
        bottom: 5px !important;

        width:
            calc(100vw - 10px) !important;

        height:
            calc(100dvh - 10px) !important;

        transform:
            translate3d(
                calc(100% + 35px),
                0,
                0
            )
            scale(.97) !important;
    }


    .bib-favorites-panel.active {

        transform:
            translate3d(0,0,0)
            scale(1) !important;
    }


    .bib-favorites-body {

        display: block !important;

        flex:
            1 1 auto !important;

        min-height: 0 !important;

        overflow-y: auto !important;
    }


    .bib-favorite-item {

        display: grid !important;

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


/* =========================================================
   SEARCH ALWAYS BELOW FAVORITES
========================================================= */

#bib-search,
.search-basket,
.search-dropdown,
.search-input-wrap,
.search-dropdown-header,
.quick-search,
.search-results,
.search-empty,
.search-footer {

    z-index: 10 !important;
}


/* =========================================================
   FAVORITES ALWAYS ABOVE SEARCH
========================================================= */

.bib-favorites-overlay {
    z-index: 2147483640 !important;
}

.bib-favorites-panel {
    z-index: 2147483647 !important;
}

.bib-favorites-panel.active {
    z-index: 2147483647 !important;
}










/* =========================================================
   DESKTOP — FAVORITES FULL HEIGHT FIX
========================================================= */

@media (min-width: 769px) {

    .bib-favorites-panel {

        top: 4px !important;
        bottom: 4px !important;

        height: calc(100vh - 8px) !important;
        height: calc(100dvh - 8px) !important;

    }


    .bib-favorites-head {

        flex: 0 0 auto !important;

    }


    .bib-favorites-footer {

        flex: 0 0 auto !important;

    }


    .bib-favorites-body {

        flex: 1 1 0 !important;

        height: 0 !important;

        min-height: 0 !important;

        overflow-y: auto !important;

    }

}








































.category {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;

    justify-content: flex-start;
    scroll-behavior: smooth;
}

.category::-webkit-scrollbar {
    display: none;
}

.category-box {
    flex: 0 0 auto;
}











































































































/* =========================================================
   BIBSHOP — FULLSCREEN IMAGE VIEWER
========================================================= */

.imageViewer {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 40px 90px;

    background: rgba(8, 8, 10, 0.94);

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;

    touch-action: pan-y;
}

.imageViewer.active {
    opacity: 1;
    visibility: visible;
}


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

.viewer_content {
    width: 100%;
    height: 100%;

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

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

    overflow: hidden;
}

#viewerImage {
    display: block;

    max-width: min(90vw, 1100px);
    max-height: 88vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 14px;

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

    cursor: grab;

    transition:
        transform .25s ease,
        opacity .2s ease;
}

#viewerImage:active {
    cursor: grabbing;
}


/* =========================================================
   CLOSE
========================================================= */

#closeViewer {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 20;

    width: 46px;
    height: 46px;

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

    font-size: 34px;
    line-height: 1;

    color: #fff;

    cursor: pointer;

    border-radius: 50%;

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

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

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

    transition:
        background .2s ease,
        transform .2s ease;
}

#closeViewer:hover {
    background: rgba(255,255,255,.18);
    transform: rotate(90deg);
}


/* =========================================================
   PREV / NEXT
========================================================= */

.viewer_nav {
    position: absolute;

    top: 50%;

    z-index: 20;

    transform: translateY(-50%);

    width: 52px;
    height: 52px;

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

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

    border-radius: 10px;

    color: #fff;

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

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

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.viewer_nav:hover {
    background: rgba(255,255,255,.18);
}

.viewer_prev {
    right: 24px;
}

.viewer_next {
    left: 24px;
}

.viewer_prev:hover {
    transform:
        translateY(-50%)
        translateX(3px);
}

.viewer_next:hover {
    transform:
        translateY(-50%)
        translateX(-3px);
}


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

@media (max-width: 700px) {

    .imageViewer {
        padding: 25px 15px;
    }

    #viewerImage {
        max-width: 94vw;
        max-height: 82vh;
        border-radius: 10px;
    }

    .viewer_nav {
        width: 42px;
        height: 42px;
    }

    .viewer_prev {
        right: 12px;
    }

    .viewer_next {
        left: 12px;
    }

    #closeViewer {
        top: 14px;
        right: 14px;

        width: 40px;
        height: 40px;

        font-size: 28px;
    }
}









































/* =========================================================
   BIBSHOP — FULLSCREEN IMAGE SLIDE
========================================================= */

#viewerImage {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   عکس قبلی هنگام خروج
========================================================= */

#viewerImage.viewer-slide-next {
    animation:
        viewerExitLeft
        .22s
        cubic-bezier(.65, 0, .35, 1)
        forwards;
}


/* =========================================================
   عکس قبلی هنگام رفتن به عقب
========================================================= */

#viewerImage.viewer-slide-prev {
    animation:
        viewerExitRight
        .22s
        cubic-bezier(.65, 0, .35, 1)
        forwards;
}


/* =========================================================
   عکس جدید
========================================================= */

#viewerImage.viewer-enter {
    animation:
        viewerEnter
        .48s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* =========================================================
   NEXT
   عکس قبلی → سمت چپ
========================================================= */

@keyframes viewerExitLeft {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform:
            translate3d(-80px, 0, 0)
            scale(.94);
        opacity: 0;
        filter: blur(7px);
    }
}


/* =========================================================
   PREVIOUS
   عکس قبلی → سمت راست
========================================================= */

@keyframes viewerExitRight {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform:
            translate3d(80px, 0, 0)
            scale(.94);
        opacity: 0;
        filter: blur(7px);
    }
}


/* =========================================================
   ورود عکس جدید
========================================================= */

@keyframes viewerEnter {

    0% {
        transform:
            translate3d(80px, 0, 0)
            scale(.94);
        opacity: 0;
        filter: blur(8px);
    }

    45% {
        transform:
            translate3d(-5px, 0, 0)
            scale(1.015);
        opacity: .85;
        filter: blur(2px);
    }

    75% {
        transform:
            translate3d(2px, 0, 0)
            scale(1.005);
        opacity: 1;
        filter: blur(.5px);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
        opacity: 1;
        filter: blur(0);
    }
}


/* =========================================================
   موبایل
========================================================= */

@media (max-width: 768px) {

    #viewerImage.viewer-slide-next,
    #viewerImage.viewer-slide-prev {
        animation-duration: .18s;
    }

    #viewerImage.viewer-enter {
        animation-duration: .4s;
    }

}


























/* دکمه منوی موبایل و تبلت */
#mobile-menu-btn {
    display: none;
}

/* تبلت و موبایل */
@media (max-width: 1024px) {
    #mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}






/* =========================================================
   BIBSHOP — LOADER ACTIVE
========================================================= */

body.loader-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* خود لودر همیشه روی همه‌چیز قرار بگیرد */
#bib-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999999999;

    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}



















@media (max-width: 1024px) {

    .products-container .products-grid2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .products-container .products-grid2 .product-item {
        margin-left: auto !important;
        margin-right: auto !important;
    }

}