/* =========================================
   VAZIRMATN
========================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/vazirmatn/Vazirmatn-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   INTER
========================================= */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter_18pt-Light.ttf") format("ttf");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter_18pt-Regular.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter_18pt-Medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter_18pt-Bold.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --g: #0f5b54;
  --gd: #063b36;
  --gold: #c9a24a;
  --bg: #eef1ee;
  --text: #173b37;
  --muted: #71807c;
  --neu: -8px -8px 18px #fff, 9px 9px 18px rgba(60, 80, 75, 0.22);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", sans-serif !important;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}
.wrap {
  width: min(1240px, calc(100% - 70px));
  margin: auto;
}
.store-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0;
  background: rgba(238, 241, 238, 0.88);
  backdrop-filter: blur(15px);
}
.store-header__inner {
  width: min(1320px, calc(100% - 40px));
  height: 70px;
  margin: auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 21px;
  background: var(--bg);
  box-shadow: var(--neu);
}
.store-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
}
.store-logo > b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--g);
  color: #e1c574;
  font: 800 17px Inter;
  box-shadow:
    -4px -4px 8px #fff,
    5px 5px 10px rgba(50, 72, 68, 0.28);
}
.store-logo span {
  display: flex;
  flex-direction: column;
}
.store-logo strong {
  font: 800 13px Inter;
  letter-spacing: 4px;
  color: var(--g);
}
.store-logo small {
  font: 7px Inter;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 4px;
}
.store-nav {
  display: flex;
  gap: 27px;
}
.store-nav a {
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #0f4c45;
  font-weight: 500;
}
.store-nav a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(50%) scale(0);
  opacity: 0;
  transition: 0.2s;
}
.store-nav a:hover,
.store-nav a.active {
  color: var(--gold);
}
.store-nav a:hover:after,
.store-nav a.active:after {
  opacity: 1;
  transform: translateX(50%) scale(1);
}
.store-actions {
  display: flex;
  gap: 8px;
  direction: ltr;
}
.store-actions button {
  position: relative;
  width: 39px;
  height: 39px;
  border: 0;
  border-radius: 12px;
  background: var(--bg);
  color: var(--g);
  box-shadow:
    -4px -4px 8px #fff,
    5px 5px 10px rgba(65, 82, 77, 0.2);
}
.store-actions button:hover {
  color: var(--gold);
  transform: translateY(-2px);
}

.hero {
  min-height: 600px;
  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(34, 119, 108, 0.55),
      transparent 24%
    ),
    linear-gradient(135deg, #063f3a, #0b504a 50%, #073832);
  color: white;
  overflow: hidden;
  border-radius: 15px;
}
.hero__grid {
  min-height: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.hero__copy {
  padding: 55px 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e2c674;
  font-size: 10px;
  font-weight: 700;
}
.eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.hero h1 {
  font-size: 51px;
  line-height: 1.4;
  margin: 20px 0 0;
  font-weight: 800;
}
.hero h1 span {
  color: #e3c36e;
}
.hero p {
  max-width: 550px;
  color: #b7cbc6;
  font-size: 12px;
  line-height: 2.1;
  margin: 17px 0 0;
}
.hero__buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.hero__buttons .btn {
  position: relative;

  min-width: 155px;
  height: 50px;

  padding: 0 19px;

  border: 0;
  border-radius: 16px;

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

  font-family: "Vazirmatn", sans-serif;
  font-size: 14px;
  font-weight: 500;

  text-decoration: none;

  cursor: pointer;

  /* سطح برجسته */
  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.16),
    10px 10px 20px rgba(0, 20, 18, 0.35);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}
.hero__buttons .btn > * {
  position: relative;
  z-index: 2;
}
.hero__buttons .btn.gold {
  background: linear-gradient(145deg, #d8b75c 0%, #c9a24a 48%, #ad8534 100%);

  color: #ffffff;

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.14),
    11px 11px 22px rgba(0, 20, 18, 0.38),
    inset 1px 1px 2px rgba(255, 255, 255, 0.35),
    inset -2px -2px 4px rgba(101, 72, 18, 0.22);
}

.hero__buttons .btn.light {
  background: linear-gradient(145deg, #f5f7f5 0%, #e2e8e4 100%);

  color: var(--g);

  box-shadow:
    0px 0px 0px rgba(255, 255, 255, 0.95),
    10px 10px 20px rgba(0, 25, 22, 0.3),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(80, 100, 95, 0.1);
}
.hero__buttons .btn i {
  position: relative;
  z-index: 2;

  font-size: 15px;
  line-height: 1;

  transition:
    transform 0.22s ease,
    color 0.22s ease;
}

.hero__buttons .btn:hover {
  transform: translateY(-4px);
}

.hero__buttons .btn.gold:hover {
  color: #073b36;

  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 0.18),
    13px 13px 25px rgba(0, 20, 18, 0.43),
    inset 1px 1px 3px rgba(255, 255, 255, 0.4),
    inset -2px -2px 5px rgba(101, 72, 18, 0.25);
}

.hero__buttons .btn.light:hover {
  color: var(--gold);

  box-shadow:
    -1px -1px 10px rgba(255, 255, 255, 1),
    1px 1px 10px rgba(0, 25, 22, 0.35),
    inset 1px 1px 3px rgba(255, 255, 255, 1),
    inset -2px -2px 5px rgba(80, 100, 95, 0.12);
}
.hero__buttons .btn:hover i {
  transform: translateX(-4px);
}

.hero__buttons .btn.light:hover i {
  transform: rotate(8deg) scale(1.08);
}

/* ---------- Press ---------- */

.hero__buttons .btn:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(0, 25, 22, 0.28),
    inset -5px -5px 10px rgba(255, 255, 255, 0.55);
}

/* ---------- Focus ---------- */

.hero__buttons .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.hero__buttons .btn::before {
  content: "";

  position: absolute;
  inset: 3px;

  border-radius: 13px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.28),
    inset -3px -3px 6px rgba(0, 35, 31, 0.18);
}
.btn {
  min-width: 145px;
  height: 46px;
  padding: 0 17px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  box-shadow:
    -1px -1px 14px rgba(255, 255, 255, 0.7),
    9px 9px 18px rgba(45, 70, 65, 0.28);
  transition: 0.2s;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn i {
  transition: 0.2s;
}
.btn:hover i {
  transform: translateX(-4px);
}
.btn.gold {
  background: var(--gold);
  color: white;
}

.btn.gold:hover {
  color: var(--gd);
}
.btn.green {
  background: var(--g);
  color: white;
}
.btn.light {
  background: var(--bg);
  color: var(--g);
}
.btn.light:hover {
  color: var(--gold);
}
.hero__stats {
  display: flex;
  gap: 35px;
  margin-top: 38px;
  text-align: center;
  margin-right: 70px;
}
.hero__stats b {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__stats strong {
  font: 700 20px Vazirmatn;
  color: var(--gold);
}
.hero__stats small {
  font-size: 8px;
  color: #ffffff;
}
.hero__visual {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
}
.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}
.orbit.one {
  width: 470px;
  height: 260px;
  transform: rotate(-16deg);
}
.orbit.two {
  width: 520px;
  height: 300px;
  transform: rotate(28deg);
}
.hero-card {
  position: relative;
  z-index: 2;
  width: 340px;
  height: 425px;
  padding: 17px;
  border-radius: 30px;
  background: linear-gradient(145deg, #edf1ee, #bfc9c4);
  color: #4e6a65;
  transform: rotate(-7deg);
  box-shadow:
    -20px -20px 40px rgba(255, 255, 255, 0.08),
    28px 28px 50px rgba(0, 20, 18, 0.36);
}
.hero-card header,
.hero-card footer {
  display: flex;
  justify-content: space-between;
  font: 8px Inter;
  letter-spacing: 2px;
}
.hero-screen {
  height: 315px;
  margin: 17px 0;
  padding: 23px;
  border-radius: 20px;
  background: #0a4c46;
}
.hero-screen > i {
  display: block;
  width: 65%;
  height: 7px;
  border-radius: 99px;
  background: #fff8;
}
.hero-screen .short {
  width: 30%;
  background: var(--gold);
  margin-top: 10px;
}
.screen-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 25px;
}
.screen-cards b {
  height: 67px;
  border-radius: 11px;
  background: #fff1;
}
.bars {
  height: 95px;
  margin-top: 17px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: #fff0;
  border-radius: 12px;
}
.bars i {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--gold);
}
.bars i:nth-child(1) {
  height: 35%;
}
.bars i:nth-child(2) {
  height: 55%;
}
.bars i:nth-child(3) {
  height: 43%;
}
.bars i:nth-child(4) {
  height: 76%;
}
.bars i:nth-child(5) {
  height: 61%;
}
.bars i:nth-child(6) {
  height: 91%;
}
.float-star,
.float-new {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--g);
  box-shadow:
    -7px -7px 15px rgba(255, 255, 255, 0.1),
    10px 10px 22px rgba(0, 25, 22, 0.28);
  border-radius: 15px;
}
.float-star {
  width: 50px;
  height: 50px;
  right: 14%;
  top: 20%;
  color: var(--gold);
  font-size: 22px;
}
.float-new {
  width: 75px;
  height: 45px;
  left: 4%;
  bottom: 17%;
  font: 9px Inter;
  letter-spacing: 2px;
}
.section {
  padding: 50px 0;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 35px;
}
.section-head > div small,
.center-head small,
.bundle-box > div > small,
.newsletter-box small,
.spotlight-copy > small {
  font: 800 9px Inter;
  letter-spacing: 2.4px;
  color: var(--gold);
}
h2 {
  margin: 8px 0 0;
  color: var(--g);
  font-size: 30px;
}
.section-head p,
.center-head p {
  max-width: 450px;
  color: var(--muted);
  font-size: 10px;
  line-height: 2;
}
.categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.cat {
  position: relative;
  min-height: 125px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: right;
  border: 0;
  border-radius: 21px;
  background: var(--bg);
  color: var(--g);
  box-shadow: var(--neu);
  transition: 0.2s;
}
.cat:hover,
.cat.active {
  transform: translateY(-4px);
  color: var(--gold);
  background-color: var(--gd);
}

.cat.active small {
  color: var(--bg);
}
.cat > i:first-child {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--g);
  color: white;
  font-size: 21px;
}
.cat span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
    .cat span b {
        font-size: 14px;
        font-family: inherit;
        font-weight: 500;
        color: var(--gold);
    }
.cat span small {
  font-size: 10px;
  font-family: "Inter";
  font-weight: 500;
  color: #899793;
  direction: ltr;
}
.cat > i:last-child {
  position: absolute;
  left: 17px;
  top: 17px;
  font-size: 13px;
}
.center-head {
  text-align: center;
  margin-bottom: 35px;
}
.center-head p {
  margin: 8px auto 0;
}
/* .featured-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.825fr 0.825fr;
  gap: 17px;
} */
.product {
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg);
  box-shadow: var(--neu);
  transition: 0.25s;
}
.product:hover {
  transform: translateY(-6px);
}
.product.dark {
  background: #0a4b45;
  color: white;
}
.product.dark h3,
.product.dark .price {
  color: white;
}
.product.dark p {
  color: #9bb2ad;
}
.product-visual {
  height: 255px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product:first-child .product-visual {
  height: 410px;
}
.product-body {
  padding: 20px;
}
.product-body small {
  font: 800 7px Inter;
  letter-spacing: 2px;
  color: var(--gold);
}
.product-body h3 {
  color: var(--g);
  font-size: 15px;
  margin: 7px 0;
}
.product-body p {
  font-size: 9px;
  line-height: 1.9;
  color: var(--muted);
  min-height: 34px;
}
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  gap: 10px;
}
.price {
  font-size: 10px;
  font-weight: 800;
  color: var(--g);
}
.product-link {
  position: relative;
  min-width: 92px;
  height: 38px;
  padding: 0 13px;

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

  border: 0;
  border-radius: 13px;

  background: linear-gradient(145deg, #f7f9f7 0%, #e3e8e5 100%);

  color: var(--g);

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  font-weight: 800;

  cursor: pointer;

  /* برجستگی اصلی */
  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.98),
    7px 7px 14px rgba(55, 75, 70, 0.28),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(70, 90, 85, 0.1);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

/* لایه‌ی نور داخلی */
.product-link::before {
  content: "";
  position: absolute;
  inset: 2px;

  border-radius: 11px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(65, 82, 77, 0.08);
}
.product-link span,
.product-link i {
  position: relative;
  z-index: 2;
}

/* آیکون */
.product-link i {
  position: relative;
  z-index: 2;

  font-size: 14px;
  line-height: 1;

  transition:
    transform 0.22s ease,
    color 0.22s ease;
}
.product-link:hover {
  color: var(--gold);

  transform: translateY(-3px);

  box-shadow:
    -8px -8px 15px rgba(255, 255, 255, 1),
    9px 9px 17px rgba(55, 75, 70, 0.34),
    inset 1px 1px 2px rgba(255, 255, 255, 1),
    inset -2px -2px 5px rgba(65, 82, 77, 0.08);
}

.product-link:hover i {
  color: var(--gold);
  transform: translateX(-4px);
}

/* =========================================
   ACTIVE — حالت فشرده شدن دکمه
========================================= */

.product-link:active {
  transform: translateY(1px);

  box-shadow:
    inset 4px 4px 8px rgba(65, 82, 77, 0.22),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

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

.product-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* دکمه داخل کارت سبز تیره */
.product.dark .product-link {
  background: linear-gradient(145deg, #f5f7f5 0%, #dce3df 100%);

  color: var(--g);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.12),
    7px 7px 14px rgba(0, 20, 18, 0.38),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(40, 60, 55, 0.12);
}

.product.dark .product-link:hover {
  color: var(--gold) !important;

  box-shadow:
    -8px -8px 15px rgba(255, 255, 255, 0.16),
    9px 9px 18px rgba(0, 20, 18, 0.45),
    inset 1px 1px 2px rgba(255, 255, 255, 1),
    inset -2px -2px 5px rgba(40, 60, 55, 0.14);
}

.product.dark .art-box {
  background: #ffffff12;
}
.spotlight {
  padding-top: 35px;
}
.spotlight-box {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 32px;
  overflow: hidden;
  background: #06322f;
  color: white;
  box-shadow:
    -14px -14px 28px #fff,
    18px 18px 36px rgba(61, 79, 74, 0.24);
}
.spotlight-art {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #287d72aa, transparent 42%),
    linear-gradient(135deg, #0b5b54, #052c29);
}
.device {
  width: 285px;
  height: 370px;
  padding: 22px;
  border-radius: 27px;
  background: linear-gradient(145deg, #e1e8e4, #aebbb5);
  color: #536d68;
  transform: rotate(7deg);
  box-shadow: 20px 24px 38px #00141266;
}
.device strong {
  display: block;
  margin-top: 90px;
  font: 800 38px/0.9 Inter;
  color: white;
}
.device i {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid #ffffff22;
  color: var(--gold);
  font: 70px Inter;
  margin: -25px -10px 0 auto;
}
.spotlight-copy {
  padding: 70px 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotlight-copy h2 {
  color: white;
  font: 800 42px/1.15 Inter;
  margin-top: 13px;
}
.spotlight-copy h2 span {
  color: #e3c36e;
}
.spotlight-copy p {
  max-width: 470px;
  color: #a7bdb8;
  font-size: 10px;
  line-height: 2.1;
  margin-top: 18px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.chips span {
  padding: 9px;
  border-radius: 9px;
  background: #ffffff0d;
  color: #bfd0cc;
  font-size: 8px;
}
.spotlight-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}
.spotlight-bottom > b {
  font-size: 13px;
}
.toolbar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.searchbox {
  height: 52px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 15px;
  box-shadow:
    inset 4px 4px 9px #42524e12,
    inset -4px -4px 9px #fff;
  background: var(--bg);
}
.searchbox i {
  color: var(--g);
}
.searchbox input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  font-size: 10px;
  color: var(--g);
}
.searchbox button {
  border: 0;
  background: transparent;
  color: #9aa5a1;
}
/* =========================================
   CUSTOM SORT DROPDOWN
========================================= */

.custom-sort {
  position: relative;
  width: 210px;
  z-index: 50;
}

/* ---------- Trigger ---------- */

.custom-sort__trigger {
  width: 100%;
  height: 44px;

  border: 0;
  outline: 0;
  border-radius: 15px;

  background: var(--bg);
  color: var(--g);

  padding: 0 15px;

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

  font-family: "Vazirmatn", sans-serif;
  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(55, 72, 68, 0.25);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.custom-sort__trigger:hover {
  color: var(--gold);

  transform: translateY(-2px);

  box-shadow:
    -8px -8px 17px rgba(255, 255, 255, 1),
    10px 10px 20px rgba(55, 72, 68, 0.3);
}

.custom-sort__trigger i {
  font-size: 14px;

  transition:
    transform 0.3s ease,
    color 0.25s ease;
}

/* ---------- Open State ---------- */

.custom-sort.is-open .custom-sort__trigger {
  color: var(--gold);

  box-shadow:
    inset 4px 4px 8px rgba(55, 72, 68, 0.16),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

.custom-sort.is-open .custom-sort__trigger i {
  transform: rotate(180deg);
  color: var(--gold);
}

/* ---------- Dropdown Menu ---------- */

.custom-sort__menu {
  position: absolute;

  top: calc(100% + 10px);
  left: 0;
  right: 0;

  padding: 8px;

  border-radius: 17px;

  background: var(--bg);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    10px 10px 22px rgba(55, 72, 68, 0.27);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px) scale(0.97);

  transform-origin: top center;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease;
}

/* باز شدن */

.custom-sort.is-open .custom-sort__menu {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);
}

/* ---------- Options ---------- */

.custom-sort__option {
  position: relative;

  width: 100%;
  height: 40px;

  border: 0;
  border-radius: 11px;

  background: transparent;
  color: #52706b;

  padding: 0 12px;

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

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover */

.custom-sort__option:hover {
  background: rgba(15, 91, 84, 0.08);
  color: var(--gold);

  transform: translateX(-2px);
}

/* گزینه فعال */

.custom-sort__option.is-active {
  background: #0f5b54;
  color: #fff;

  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.15),
    inset -2px -2px 4px rgba(255, 255, 255, 0.12);
}

/* تیک */

.custom-sort__option i {
  font-size: 13px;

  opacity: 0;

  transform: scale(0.6);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.custom-sort__option.is-active i {
  opacity: 1;

  transform: scale(1);

  color: var(--gold);
}

/* ---------- Active ---------- */

.custom-sort__option:active {
  transform: translateY(1px);
}

.products-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.filters {
  position: sticky;
  top: 105px;
  padding: 22px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--neu);
}
.filters h3 {
  font-size: 13px;
  color: var(--g);
  margin: 0 0 18px;
}
.filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: 9px;
  color: var(--muted);
}
.filters input {
  accent-color: var(--g);
}
.filters hr {
  border: 0;
  border-top: 1px solid #0f5b5410;
  margin: 15px 0;
}
.range-label {
  display: block;
  font-size: 9px;
  color: var(--g);
  font-weight: 700;
  margin-bottom: 10px;
}
.filters input[type="range"] {
  width: 100%;
  accent-color: var(--g);
}
.filters > small {
  font-size: 8px;
  color: var(--g);
}
.reset {
  width: 100%;
  height: 36px;
  margin-top: 18px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--g);
  box-shadow:
    -4px -4px 8px #fff,
    5px 5px 10px #42524e20;
  font-size: 8px;
  font-weight: 800;
}
.results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 9px;
}
.results-head button {
  display: none;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.catalog {
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--neu);
  transition: 0.2s;
}
.catalog:hover {
  transform: translateY(-5px);
}
.catalog .product-visual {
  height: 205px;
}
.catalog .product-body h3 {
  font-size: 13px;
}
.catalog .product-body p {
  min-height: 38px;
}
.catalog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
}
.actions {
  display: flex;
  gap: 6px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--bg);
  color: var(--g);
  box-shadow:
    -3px -3px 6px #fff,
    3px 3px 6px #42524e18;
}
.add {
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: var(--g);
  color: white;
  font-size: 8px;
}
.empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 20px;
  box-shadow: var(--neu);
  padding: 30px;
}
.empty i {
  font-size: 34px;
  color: var(--gold);
}
.empty h3 {
  color: var(--g);
  font-size: 15px;
  margin: 10px;
}
.empty p {
  color: var(--muted);
  font-size: 9px;
}
.bundle {
  padding-top: 40px;
}
.bundle-box {
  min-height: 430px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  border-radius: 30px;
  background: #e0e8e3;
  box-shadow: var(--neu);
}
.bundle-box h2 {
  font-size: 40px;
}
.bundle-box p {
  max-width: 450px;
  color: var(--muted);
  font-size: 10px;
  line-height: 2;
  margin: 13px 0;
}
.bundle-box del,
.bundle-box > div > strong {
  display: block;
}
.bundle-box del {
  color: #98a29e;
  font-size: 9px;
}
.bundle-box > div > strong {
  color: var(--g);
  font-size: 19px;
  margin: 4px 0 22px;
}
.bundle-art {
  position: relative;
  min-height: 320px;
  background: linear-gradient(145deg, #0b5a53, #052f2c);
  border-radius: 24px;
  display: grid;
  place-items: center;
}
.bundle-art span,
.bundle-art > b {
  position: absolute;
  width: 190px;
  height: 250px;
  padding: 20px;
  border-radius: 20px;
  color: white;
  box-shadow: 15px 18px 30px #00141255;
  font: 9px Inter;
}
.bundle-art span:first-child {
  background: #184d47;
  transform: translate(-45px, -5px) rotate(-12deg);
}
.bundle-art span:nth-child(2) {
  background: #ad8a3e;
  transform: translate(30px, -10px) rotate(8deg);
}
.bundle-art > b {
  z-index: 2;
  background: linear-gradient(145deg, #e2c878, #9a7935);
  font-size: 31px;
  line-height: 0.85;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bundle-art b small {
  font: 8px Inter;
  letter-spacing: 2px;
}
.bundle-art b em {
  font: 8px Inter;
  font-style: normal;
  letter-spacing: 2px;
}
.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.why article {
  min-height: 180px;
  padding: 25px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--neu);
  transition: 0.2s;
}
.why article:hover {
  transform: translateY(-5px);
}
.why article > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--g);
  color: #e3c36e;
  font-size: 20px;
  box-shadow:
    -5px -5px 10px #fff,
    6px 6px 12px #42524e25;
}
.why h3 {
  font-size: 13px;
  color: var(--g);
  margin: 17px 0 6px;
}
.why p {
  font-size: 9px;
  line-height: 2;
  color: var(--muted);
}
.newsletter {
  padding-top: 45px;
}
.newsletter-box {
  min-height: 250px;
  padding: 50px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, #073f3a, #0b5b54);
  color: white;
  box-shadow:
    -12px -12px 24px #fff,
    16px 16px 32px #3d4f4a40;
}
.newsletter-box h2 {
  color: white;
  font-size: 28px;
}
.newsletter-box p {
  color: #a9c0bb;
  font-size: 10px;
  max-width: 470px;
}
.newsletter form {
  width: min(420px, 100%);
}
.newsletter form > div {
  height: 55px;
  padding: 6px 7px 6px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  background: #ffffff0d;
  box-shadow: inset 4px 4px 8px #00141222;
}
.newsletter input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: 9px;
}
.newsletter button {
  height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 11px;
  background: var(--gold);
  color: white;
  font-size: 9px;
  font-weight: 800;
}
.newsletter form > small {
  display: block;
  margin-top: 8px;
  color: #e3c36e;
  font-size: 10px;
  font-family: inherit;
}
.backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #041c1980;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  backdrop-filter: blur(4px);
}
.backdrop.open,
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.cart {
  position: fixed;
  z-index: 1600;
  left: 0;
  top: 0;
  width: min(410px, 100%);
  height: 100dvh;
  background: var(--bg);
  padding: 27px;
  transform: translateX(-105%);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  box-shadow: 20px 0 45px #00191438;
}
.cart.open {
  transform: translateX(0);
}
.cart header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #0f5b5410;
  padding-bottom: 18px;
}
.cart header small {
  font: 8px Inter;
  color: var(--gold);
  letter-spacing: 2px;
}
.cart header h2 {
  font-size: 20px;
}
.cart header button,
.modal-close {
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: 11px;
  background: var(--bg);
  color: var(--g);
  box-shadow: var(--neu);
}
#cartItems {
  flex: 1;
  overflow: auto;
}
.cart-item {
  display: grid;
  grid-template-columns: 62px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #0f5b5410;
}
.cart-thumb {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(145deg, #0b6159, #063b36);
}
.cart-item h4 {
  margin: 0;
  color: var(--g);
  font-size: 9px;
}
.cart-item small {
  color: var(--muted);
  font-size: 8px;
}
.cart-item button {
  border: 0;
  background: transparent;
  color: #9aa4a0;
}
.cart-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
}
.cart-empty i {
  font-size: 40px;
  color: var(--gold);
}
.cart-empty h3 {
  font-size: 14px;
  color: var(--g);
}
.cart footer {
  border-top: 1px solid #0f5b5410;
  padding-top: 18px;
}
.cart footer > span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 14px;
}
.cart footer b {
  color: var(--g);
  font-size: 12px;
}
.cart footer .btn {
  width: 100%;
}
.modal {
  position: fixed;
  z-index: 1700;
  top: 50%;
  left: 50%;
  width: min(900px, calc(100% - 35px));
  max-height: calc(100dvh - 35px);
  overflow: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--bg);
  border-radius: 30px;
  box-shadow:
    -15px -15px 30px #fff,
    20px 20px 45px #00191455;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.96);
  transition: 0.25s;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.modal-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
}
.modal-art {
  min-height: 480px;
  background: linear-gradient(145deg, #0b5a53, #052f2c);
  display: grid;
  place-items: center;
}
.modal-copy {
  padding: 65px 50px;
}
.modal-copy > small {
  font: 800 8px Inter;
  color: var(--gold);
  letter-spacing: 2px;
}
.modal-copy h2 {
  font-size: 29px;
}
.modal-copy p {
  color: var(--muted);
  font-size: 10px;
  line-height: 2;
  margin: 12px 0;
}
.modal-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.modal-features span {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg);
  box-shadow:
    -3px -3px 6px #fff,
    3px 3px 6px #42524e18;
  color: var(--g);
  font-size: 8px;
}
.modal-copy > strong {
  display: block;
  color: var(--g);
  font-size: 19px;
  margin: 25px 0 15px;
}
.heart {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 13px;
  background: var(--bg);
  color: var(--g);
  box-shadow: var(--neu);
  margin-right: 7px;
}
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: #041c19bb;
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  padding: 25px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}
.search-overlay.open {
  opacity: 1;
  visibility: visible;
}
.search-overlay > div {
  position: relative;
  width: min(820px, 100%);
  padding: 60px;
  border-radius: 30px;
  background: var(--bg);
  box-shadow:
    -12px -12px 25px #fff8,
    18px 18px 35px #00141266;
}
.search-overlay > div > button {
  position: absolute;
  left: 17px;
  top: 17px;
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: 11px;
  background: var(--bg);
  box-shadow: var(--neu);
  color: var(--g);
}
.search-overlay small {
  font: 800 9px Inter;
  letter-spacing: 2px;
  color: var(--gold);
}
.search-overlay h2 {
  font-size: 29px;
}
.global-search {
  height: 60px;
  margin-top: 25px;
  padding: 6px 7px 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 17px;
  box-shadow:
    inset 4px 4px 9px #42524e12,
    inset -4px -4px 9px #fff;
}
.global-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
  color: var(--g);
}
.global-search button {
  height: 46px;
  min-width: 85px;
  border: 0;
  border-radius: 12px;
  background: var(--g);
  color: white;
  font-size: 9px;
  font-weight: 800;
}
/* =========================================================
   ACTIONS
   ========================================================= */

.services-actions {
  grid-column: 3;

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 12px;

  direction: ltr;
  margin-top: 0px;
}

/* =========================================================
   NEUMORPHIC ICON BUTTON
   ========================================================= */

.services-action {
  position: relative;

  width: 45px;
  height: 45px;

  display: flex;

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

  padding: 0;

  border: none;

  border-radius: 15px;

  background: rgba(237, 240, 237, 0.88);

  color: var(--gd);

  text-decoration: none;

  cursor: pointer;

  /*
       3D NEUMORPHIC
    */

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 13px rgba(69, 86, 81, 0.27);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;

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

/* لایه داخلی */

.services-action::before {
  content: "";

  position: absolute;

  inset: 3px;

  border-radius: 12px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.65),
    inset -1px -1px 2px rgba(80, 98, 93, 0.08);

  pointer-events: none;
}

/* =========================================================
   PHOSPHOR ICON
   ========================================================= */

.services-action i {
  position: relative;

  z-index: 2;

  font-size: 20px;

  line-height: 1;

  color: currentColor;

  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

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

.services-action:hover {
  color: var(--gold);

  transform: translateY(-2px);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.98),
    8px 8px 15px rgba(69, 86, 81, 0.32);
}

.services-action:hover i {
  transform: scale(1.06);
}

/* =========================================================
   ICON ACTIVE / PRESS
   ========================================================= */

.services-action:active {
  transform: translateY(0);

  box-shadow:
    inset 4px 4px 8px rgba(69, 86, 81, 0.28),
    inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}
.services-actions em {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 20px;
  background: var(--gold);
  color: white;
  font: 400 10px Vazirmatn;
  font-style: normal;
  display: grid;
  place-items: center;
}
/* ///////////////////////////استایل جدید سه کارت محصولات منتخب////////////////////// */
/* =========================================================
   ZHIURA — FEATURED PRODUCTS
   PREMIUM 3D ARCHITECTURAL CARDS
========================================================= */

/* =========================================================
   01. GRID
========================================================= */
.border {
  border-radius: 10% !important;
}
.featured-grid {
  display: grid;

  grid-template-columns:
    1.35fr
    0.825fr
    0.825fr;

  gap: 17px;

  align-items: stretch;

  direction: rtl;
}

/* =========================================================
   02. CARD BASE
========================================================= */

.featured-grid .product {
  --gold: #c9a24a;
  --gold-light: #f0d98a;
  --gold-dark: #8f6b20;

  position: relative;

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

  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;

  isolation: isolate;

  transform-style: preserve-3d;

  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease;

  z-index: 1;
}

/* =========================================================
   03. GOLD ANIMATED OUTER FRAME
========================================================= */

/*
   این لایه خود حاشیه طلایی است.
   با conic-gradient حرکت نرم نور ایجاد می‌کند.
*/

.featured-grid .product::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  -webkit-clip-path: polygon(
    25px 0,
    calc(100% - 25px) 0,

    calc(100% - 8px) 8px,
    100% 25px,

    100% calc(100% - 25px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 25px) 100%,

    25px 100%,

    8px calc(100% - 8px),
    0 calc(100% - 25px),
    0 25px,
    8px 8px
  );
  clip-path: polygon(
    25px 0,
    calc(100% - 25px) 0,

    calc(100% - 8px) 8px,
    100% 25px,

    100% calc(100% - 25px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 25px) 100%,

    25px 100%,

    8px calc(100% - 8px),
    0 calc(100% - 25px),
    0 25px,
    8px 8px
  );

  background: conic-gradient(
    from 0deg,

    rgba(201, 162, 74, 0.35) 0deg,
    rgba(255, 235, 150, 0.95) 45deg,
    rgba(201, 162, 74, 0.35) 90deg,

    rgba(143, 107, 32, 0.55) 145deg,
    rgba(240, 217, 138, 0.95) 200deg,

    rgba(201, 162, 74, 0.35) 250deg,
    rgba(255, 235, 150, 0.85) 310deg,

    rgba(201, 162, 74, 0.35) 360deg
  );

  animation: zhiuraGoldRotate 8s linear infinite;

  filter: drop-shadow(0 0 3px rgba(201, 162, 74, 0.3));

  opacity: 0.95;
}

/* =========================================================
   04. INNER CARD SURFACE
========================================================= */

.featured-grid .product::after {
  content: "";

  position: absolute;

  inset: 2px;

  z-index: -2;

  pointer-events: none;

  -webkit-clip-path: polygon(
    24px 0,
    calc(100% - 24px) 0,

    calc(100% - 7px) 7px,
    100% 24px,

    100% calc(100% - 24px),
    calc(100% - 7px) calc(100% - 7px),
    calc(100% - 24px) 100%,

    24px 100%,

    7px calc(100% - 7px),
    0 calc(100% - 24px),
    0 24px,
    7px 7px
  );
  clip-path: polygon(
    24px 0,
    calc(100% - 24px) 0,

    calc(100% - 7px) 7px,
    100% 24px,

    100% calc(100% - 24px),
    calc(100% - 7px) calc(100% - 7px),
    calc(100% - 24px) 100%,

    24px 100%,

    7px calc(100% - 7px),
    0 calc(100% - 24px),
    0 24px,
    7px 7px
  );

  background: linear-gradient(145deg, #f8faf8, #e7ece9);

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.95),
    inset -3px -3px 7px rgba(60, 80, 75, 0.12),
    -10px -10px 20px rgba(255, 255, 255, 0.95),
    12px 15px 27px rgba(50, 70, 65, 0.2);
}

/* =========================================================
   05. FIRST CARD — DASHBOARD / GREEN
========================================================= */

.featured-grid .product--dashboard::after {
  background: linear-gradient(145deg, #0b5c54 0%, #07453f 48%, #052f2c 100%);

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.12),
    inset -3px -3px 7px rgba(0, 20, 17, 0.3),
    -10px -10px 20px rgba(255, 255, 255, 0.1),
    14px 17px 30px rgba(0, 20, 17, 0.35);
}

/* =========================================================
   06. CARD 02 + CARD 03 — WHITE
========================================================= */

/*
   عمداً هر دو کارت اینجا سفید شده‌اند.
   بنابراین هیچ CSS دیگری نباید mobile را سبز کند.
*/

.featured-grid .product--studio::after,
.featured-grid .product--mobile::after {
  background: linear-gradient(145deg, #f8faf8 0%, #eef2ef 50%, #e2e8e4 100%);

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.98),
    inset -3px -3px 7px rgba(65, 85, 80, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.96),
    12px 15px 27px rgba(55, 75, 70, 0.2);
}

/* =========================================================
   07. GOLD FRAME — ALL CARDS
========================================================= */

.featured-grid .product::before {
  border: none;

  /* animation already defined */
}

/* dashboard stronger gold */
.featured-grid .product--dashboard::before {
  filter: drop-shadow(0 0 4px rgba(201, 162, 74, 0.38));

  opacity: 1;
}

/* white cards softer gold */
.featured-grid .product--studio::before,
.featured-grid .product--mobile::before {
  filter: drop-shadow(0 0 3px rgba(201, 162, 74, 0.25));

  opacity: 0.9;
}

/* =========================================================
   08. GOLD ROTATION ANIMATION
========================================================= */

@keyframes zhiuraGoldRotate {
  0% {
    filter: drop-shadow(0 0 2px rgba(201, 162, 74, 0.2));

    opacity: 0.72;
  }

  25% {
    filter: drop-shadow(0 0 5px rgba(201, 162, 74, 0.4));

    opacity: 0.92;
  }

  50% {
    filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.3));

    opacity: 0.82;
  }

  75% {
    filter: drop-shadow(0 0 6px rgba(201, 162, 74, 0.42));

    opacity: 0.95;
  }

  100% {
    filter: drop-shadow(0 0 2px rgba(201, 162, 74, 0.2));

    opacity: 0.72;
  }
}

/* =========================================================
   09. CARD HOVER
========================================================= */

.featured-grid .product:hover {
  transform: translateY(-8px) rotateX(1deg) rotateY(-1deg);

  filter: drop-shadow(12px 20px 25px rgba(35, 55, 50, 0.18));
}

/* gold becomes brighter */
.featured-grid .product:hover::before {
  animation-duration: 4.5s;

  filter: drop-shadow(0 0 7px rgba(201, 162, 74, 0.55));

  opacity: 1;
}

/* =========================================================
   10. PRODUCT VISUAL
========================================================= */

.featured-grid .product-visual {
  position: relative;

  width: 100%;

  height: 275px;

  overflow: hidden;

  border-radius: 0;

  display: block;

  isolation: isolate;

  -webkit-clip-path: polygon(
    25px 0,
    calc(100% - 25px) 0,
    100% 25px,

    100% calc(100% - 18px),
    94% calc(100% - 8px),
    88% 100%,
    78% calc(100% - 6px),
    68% 100%,
    57% calc(100% - 10px),
    47% 100%,
    36% calc(100% - 7px),
    25% 100%,

    8px calc(100% - 10px),
    0 calc(100% - 24px),
    0 25px,
    8px 8px
  );
  clip-path: polygon(
    25px 0,
    calc(100% - 25px) 0,
    100% 25px,

    100% calc(100% - 18px),
    94% calc(100% - 8px),
    88% 100%,
    78% calc(100% - 6px),
    68% 100%,
    57% calc(100% - 10px),
    47% 100%,
    36% calc(100% - 7px),
    25% 100%,

    8px calc(100% - 10px),
    0 calc(100% - 24px),
    0 25px,
    8px 8px
  );

  transform: translateZ(8px);

  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================
   11. LARGE DASHBOARD IMAGE
========================================================= */

.featured-grid .product--dashboard .product-visual {
  height: 390px;
}

/* =========================================================
   12. IMAGE
========================================================= */

.featured-grid .product-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 1;

  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease;
}

/* image hover */
.featured-grid .product:hover .product-image {
  transform: scale(1.035);

  filter: saturate(1.03) contrast(1.02);
}

/* =========================================================
   13. BOTTOM ARCHITECTURAL CUT
========================================================= */

/* .featured-grid .product-visual::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -1px;

  height: 52px;

  z-index: 5;

  background: #eef1ee;

  -webkit-clip-path: polygon(
    0 100%,
    0 42%,

    13% 31%,
    28% 38%,
    42% 19%,
    57% 31%,
    73% 9%,
    88% 24%,
    100% 0,

    100% 100%
  );
  clip-path: polygon(
    0 100%,
    0 42%,

    13% 31%,
    28% 38%,
    42% 19%,
    57% 31%,
    73% 9%,
    88% 24%,
    100% 0,

    100% 100%
  );
} */

/* dashboard bottom cut */
.featured-grid .product--dashboard .product-visual::after {
  background: #0a4b45;
}

/* IMPORTANT:
   mobile is WHITE now
*/
.featured-grid .product--mobile .product-visual::after {
  background: #eef1ee;
}

/* studio white */
.featured-grid .product--studio .product-visual::after {
  background: #eef1ee;
}

/* =========================================================
   14. PRODUCT BODY
========================================================= */

.featured-grid .product-body {
  position: relative;

  margin-top: -1px;

  padding: 42px 42px 30px;

  background: transparent;

  border-radius: 0;

  z-index: 5;

  transform: translateZ(6px);

  transition: transform 0.4s ease;
}

/* body hover */
.featured-grid .product:hover .product-body {
  transform: translateZ(11px);
}

/* =========================================================
   15. BODY TOP GEOMETRIC CUT
========================================================= */

/* .featured-grid .product-body::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -35px;

  height: 45px;

  background: inherit;

  -webkit-clip-path: polygon(
    0 100%,
    0 68%,

    14% 52%,
    30% 63%,
    44% 39%,
    59% 55%,
    74% 29%,
    88% 45%,
    100% 20%,

    100% 100%
  );
  clip-path: polygon(
    0 100%,
    0 68%,

    14% 52%,
    30% 63%,
    44% 39%,
    59% 55%,
    74% 29%,
    88% 45%,
    100% 20%,

    100% 100%
  );

  z-index: -1;
} */

/* =========================================================
   16. TEXT COLORS
========================================================= */

/* dashboard */
.featured-grid .product--dashboard .product-body {
  color: #fff;
}

/* white cards */
.featured-grid .product--studio .product-body,
.featured-grid .product--mobile .product-body {
  color: #173b37;
}

/* =========================================================
   17. LABEL
========================================================= */

.featured-grid .product-body small {
  display: block;

  margin-bottom: 8px;

  font-family: Inter, sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2.5px;

  color: #c9a24a;
}

/* =========================================================
   18. TITLE
========================================================= */

.featured-grid .product-body h3 {
  margin: 0 0 8px;

  font-family: "Vazirmatn", sans-serif;

  font-size: 17px;

  line-height: 1.5;

  color: #0f5b54;
}

/* dashboard title */
.featured-grid .product--dashboard .product-body h3 {
  color: #fff;
}

/* =========================================================
   19. DESCRIPTION
========================================================= */

.featured-grid .product-body p {
  margin: 0;

  min-height: 42px;

  font-family: "Vazirmatn", sans-serif;

  font-size: 9px;

  line-height: 2;

  color: #71807c;
}

/* dashboard description */
.featured-grid .product--dashboard .product-body p {
  color: #9bb5af;
}

/* =========================================================
   20. PRODUCT FOOT
========================================================= */

.featured-grid .product-foot {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  margin-top: 27px;

  padding-top: 17px;

  gap: 12px;
}

/* separator */
.featured-grid .product-foot::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;
  right: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 74, 0.45),
    transparent
  );
}

/* =========================================================
   21. PRICE
========================================================= */

.featured-grid .price {
  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 800;

  color: #0f5b54;

  white-space: nowrap;
}

/* dashboard price */
.featured-grid .product--dashboard .price {
  color: #fff;
}

/* =========================================================
   22. BUTTON
========================================================= */

.featured-grid .product-link {
  position: relative;

  min-width: 108px;

  height: 42px;

  padding: 0 15px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: 1px solid rgba(15, 91, 84, 0.12);

  border-radius: 14px;

  background: linear-gradient(145deg, #f7faf8, #dfe7e3);

  color: #0f5b54;

  font-family: "Vazirmatn", sans-serif;

  font-size: 9px;

  font-weight: 800;

  cursor: pointer;

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    8px 9px 16px rgba(47, 66, 62, 0.28),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(70, 90, 85, 0.1);

  transform: translateZ(13px);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* button inner */
.featured-grid .product-link::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 12px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -2px -2px 4px rgba(70, 90, 85, 0.08);
}

/* button content */
.featured-grid .product-link span,
.featured-grid .product-link i {
  position: relative;

  z-index: 2;
}

/* icon */
.featured-grid .product-link i {
  font-size: 14px;

  line-height: 1;

  transition:
    transform 0.22s ease,
    color 0.22s ease;
}

/* =========================================================
   23. BUTTON HOVER
========================================================= */

.featured-grid .product-link:hover {
  transform: translateY(-4px) translateZ(18px);

  color: #c9a24a;

  box-shadow:
    -9px -9px 17px rgba(255, 255, 255, 1),
    11px 12px 21px rgba(47, 66, 62, 0.34),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 5px rgba(70, 90, 85, 0.12);
}

.featured-grid .product-link:hover i {
  transform: translateX(-4px);

  color: #c9a24a;
}

/* =========================================================
   24. BUTTON ACTIVE
========================================================= */

.featured-grid .product-link:active {
  transform: translateY(1px) translateZ(8px);

  box-shadow:
    inset 5px 5px 9px rgba(47, 66, 62, 0.22),
    inset -5px -5px 9px rgba(255, 255, 255, 0.85);
}

/* =========================================================
   25. TOP NUMBER
========================================================= */

.featured-grid .product-number {
  position: absolute;

  top: 17px;
  left: 20px;

  width: 39px;
  height: 39px;

  display: flex;

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

  border-radius: 13px;

  font-family: Inter, sans-serif;

  font-size: 10px;

  font-weight: 800;

  color: #fff;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.05)
  );

  box-shadow:
    -4px -4px 9px rgba(255, 255, 255, 0.12),
    6px 6px 12px rgba(0, 20, 18, 0.25),
    inset 1px 1px 2px rgba(255, 255, 255, 0.12);

  transform: translateZ(18px);

  z-index: 20;
}

/* white card numbers */
.featured-grid .product--studio .product-number,
.featured-grid .product--mobile .product-number {
  color: #31504b;

  background: linear-gradient(145deg, #f3f6f3, #d7dfdb);

  box-shadow:
    -4px -4px 8px rgba(255, 255, 255, 0.95),
    5px 5px 10px rgba(60, 80, 75, 0.16),
    inset 1px 1px 2px rgba(255, 255, 255, 0.9);
}

/* =========================================================
   26. PRODUCT TYPE
========================================================= */

.featured-grid .product-type {
  position: absolute;

  top: 24px;
  right: 24px;

  font-family: Inter, sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;

  color: rgba(255, 255, 255, 0.85);

  transform: translateZ(16px);

  z-index: 20;
}

/* white cards */
.featured-grid .product--studio .product-type,
.featured-grid .product--mobile .product-type {
  color: #45635e;
}

/* =========================================================
   27. 3D DEPTH
========================================================= */

.featured-grid .product {
  box-shadow: 0 20px 35px rgba(35, 55, 50, 0.08);
}

/* dashboard stronger */
.featured-grid .product--dashboard {
  box-shadow: 0 24px 45px rgba(0, 25, 21, 0.18);
}

/* =========================================================
   28. DASHBOARD IMAGE LIGHT
========================================================= */

.featured-grid .product--dashboard .product-visual::before {
  content: "";

  position: absolute;

  top: 0;

  left: 13%;
  right: 15%;

  height: 2px;

  background: linear-gradient(90deg, transparent, #e4c76d, transparent);

  opacity: 0.85;

  z-index: 15;
}

/* =========================================================
   29. MOBILE / WHITE CARD — NO DARK OVERRIDES
========================================================= */

/*
   این قسمت عمداً مهم است.
   تمام رنگ‌های قبلی مربوط به mobile dark حذف شده‌اند.
*/

.featured-grid .product--mobile {
  color: #173b37;

  background: transparent;
}

.featured-grid .product--mobile .product-body {
  color: #173b37;
}

.featured-grid .product--mobile .product-body h3 {
  color: #0f5b54;
}

.featured-grid .product--mobile .product-body p {
  color: #71807c;
}

.featured-grid .product--mobile .price {
  color: #0f5b54;
}

/* =========================================================
   30. CARD 02 WHITE
========================================================= */

.featured-grid .product--studio {
  color: #173b37;

  background: transparent;
}

/* =========================================================
   31. CARD HOVER DEPTH
========================================================= */

.featured-grid .product:hover {
  transform: translateY(-9px) scale(1.003);

  filter: drop-shadow(10px 20px 25px rgba(35, 55, 50, 0.16));
}

.featured-grid .product:hover .product-visual {
  transform: translateZ(13px);
}

/* =========================================================
   32. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .featured-grid .product,
  .featured-grid .product::before,
  .featured-grid .product-visual,
  .featured-grid .product-image,
  .featured-grid .product-body,
  .featured-grid .product-link {
    animation: none !important;

    transition: none !important;
  }

  .featured-grid .product:hover {
    transform: none !important;
  }
}
/* //////////////////////////////////کارتهای محصول فروشگاه///////////////////////////////// */
/* =========================================================
   ZHIURA STORE — PREMIUM PRODUCT CARDS
========================================================= */

.store-products-showcase {
  width: 100%;
  padding: 40px 0 70px;
}

.store-products-grid {
  width: min(1180px, 92%);
  margin: 0 auto;

  display: grid;

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

  gap: 28px;

  direction: rtl;
}

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

.store-product-card {
  position: relative;

  min-width: 0;

  aspect-ratio: 0.69;

  border-radius: 34px;

  overflow: hidden;

  background: #0c3430;

  box-shadow:
    0 18px 35px rgba(23, 59, 55, 0.2),
    0 4px 10px rgba(23, 59, 55, 0.1);

  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;

  isolation: isolate;
}

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

.store-product-card:hover {
  transform: translateY(-9px);

  box-shadow:
    0 28px 55px rgba(23, 59, 55, 0.28),
    0 8px 18px rgba(23, 59, 55, 0.12);
}

/* =========================================================
   MEDIA
========================================================= */

.store-product-card__media {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: inherit;

  background: #0c3430;
}

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

.store-product-card__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.store-product-card:hover .store-product-card__image {
  transform: scale(1.045);

  filter: saturate(1.04) contrast(1.02);
}

/* =========================================================
   DARK GRADIENT
========================================================= */

.store-product-card__gradient {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background: linear-gradient(
    to bottom,

    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0) 34%,

    rgba(4, 24, 22, 0.05) 43%,

    rgba(4, 27, 25, 0.6) 61%,

    rgba(4, 27, 25, 0.94) 77%,

    rgba(4, 27, 25, 1) 100%
  );
}

/* =========================================================
   PRICE PILL
========================================================= */

.store-product-card__price {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 10;

  min-width: 125px;
  height: 48px;

  padding: 0 17px;

  display: flex;

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

  gap: 7px;

  border-radius: 25px;

  background: rgba(247, 249, 247, 0.94);

  backdrop-filter: blur(12px);

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

  color: #173b37;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);

  direction: rtl;
}

.store-product-card__price strong {
  font-family: "Vazirmatn", sans-serif;

  font-size: 14px;

  font-weight: 900;
}

.store-product-card__price span {
  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  color: #65736f;
}

/* =========================================================
   FAVORITE
========================================================= */

.store-product-card__favorite {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 10;

  width: 52px;
  height: 52px;

  padding: 0;

  display: flex;

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

  border: 0;

  border-radius: 50%;

  background: rgba(247, 249, 247, 0.94);

  backdrop-filter: blur(12px);

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

  color: #173b37;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.store-product-card__favorite i {
  font-size: 23px;

  line-height: 1;

  transition: transform 0.25s ease;
}

.store-product-card__favorite:hover {
  transform: scale(1.08);

  background: #ffffff;

  color: #c9a24a;
}

.store-product-card__favorite:hover i {
  transform: scale(1.08);
}

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

.store-product-card__content {
  position: absolute;

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

  z-index: 5;

  padding: 0 24px 23px;

  color: #fff;

  direction: rtl;
}

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

.store-product-card__top {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}

.store-product-card__top h3 {
  margin: 0 0 5px;

  color: #fff;

  font-family: "Vazirmatn", sans-serif;

  font-size: 20px;

  font-weight: 800;

  line-height: 1.5;
}

.store-product-card__type {
  display: block;

  font-family: Inter, sans-serif;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #d5b65e;
}

/* =========================================================
   RATING
========================================================= */

.store-product-card__rating {
  display: flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;
}

.store-product-card__rating span {
  font-family: Inter, sans-serif;

  font-size: 11px;

  font-weight: 700;

  color: #fff;
}

.store-product-card__rating i {
  color: #d6ad48;

  font-size: 14px;
}

/* =========================================================
   META
========================================================= */

.store-product-card__meta {
  display: grid;

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

  gap: 8px;

  margin-bottom: 18px;
}

.store-product-card__meta-item {
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  color: rgba(255, 255, 255, 0.88);

  font-family: "Vazirmatn", sans-serif;

  font-size: 8px;

  white-space: nowrap;
}

.store-product-card__meta-item i {
  flex-shrink: 0;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.9);
}

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

.store-product-card__button {
  position: relative;

  width: 100%;
  height: 56px;

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

  padding: 0 22px;

  border: 0;
  border-radius: 18px;

  background: #eef1ee;

  color: #0f5b54;

  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  /* برجستگی اصلی نئومورفیک */
  box-shadow:
    0px 0px 5px rgba(255, 255, 255, 0.95),
    1px 1px 5px rgba(30, 55, 51, 0.28),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 5px rgba(80, 100, 95, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}
.store-product-card__button::before {
  content: "";

  position: absolute;

  inset: 3px;

  border-radius: 15px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(60, 85, 80, 0.08);
}
.store-product-card__button span,
.store-product-card__button i {
  position: relative;
  z-index: 2;
}
.store-product-card__button i {
  font-size: 17px;
  line-height: 1;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.store-product-card__button:hover {
  transform: translateY(-3px);

  color: #c9a24a;

  background: #f2f5f2;

  box-shadow:
    -1px -1px 20px rgba(255, 255, 255, 1),
    12px 12px 22px rgba(30, 55, 51, 0.34),
    inset 1px 1px 3px rgba(255, 255, 255, 1),
    inset -2px -2px 5px rgba(60, 85, 80, 0.1);
}

.store-product-card__button:hover i {
  transform: translateX(-5px);
  color: #c9a24a;
}

.store-product-card__button:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(55, 78, 73, 0.22),
    inset -5px -5px 10px rgba(255, 255, 255, 0.95);
}

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

.store-product-card__button:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 4px;
}

/* لینک مشاهده محصول از همان ظاهر دکمه کارت استفاده می‌کند. */
a.store-product-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.store-product-card__price del {
    display: block;
    font-size: 11px;
    opacity: .75;
}

.store-reset-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.filters input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #0f5b5420;
    border-radius: 10px;
    background: var(--bg);
    color: var(--g);
    font: inherit;
}

.store-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
}

.services-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* برای این مرحله فیلترها در موبایل هم مستقیماً قابل استفاده‌اند. */
@media (max-width: 850px) {
    #storeFilterForm .products-layout {
        grid-template-columns: 1fr;
    }

    #storeFilterForm .filters {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        transform: none;
        visibility: visible;
        opacity: 1;
    }
}

/* کارت دسته‌بندی اکنون لینک واقعی است؛ ساختار بصری حفظ می‌شود. */
.categories a.cat {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.store-section-empty {
    text-align: center;
    padding: 24px;
    color: var(--muted);
}