/* ============================================================================
   amazon.css — لایه‌ی طراحی «آمازون» روی app.css
   ---------------------------------------------------------------------------
   این فایل همیشه *بعد از* app.css لود می‌شود و کل زبان بصری سایت را به
   زبان بصری Amazon.com تبدیل می‌کند: پالت رنگ، هدر تیره با سرچ‌بار زرد،
   نوار ناوبری ثانویه، کارت محصول، جعبه‌ی خرید، فوتر چهارستونی و ...
   به‌جای بازنویسی app.css، توکن‌های رنگی ریشه را بازتعریف می‌کنیم تا همه‌ی
   کامپوننت‌های موجود هم بدون تغییر مارک‌آپ، آمازونی شوند.
   ============================================================================ */

:root {
  /* ---- پالت رسمی آمازون ---------------------------------------------- */
  --az-navy:          #131921;  /* نوار بالایی هدر */
  --az-navy-2:        #232F3E;  /* نوار ناوبری ثانویه و فوتر */
  --az-navy-3:        #37475A;  /* هاور هدر / نوار بازگشت به بالا */
  --az-ink:           #0F1111;  /* متن اصلی */
  --az-ink-soft:      #565959;  /* متن ثانویه */
  --az-link:          #007185;  /* لینک‌های آمازون */
  --az-link-hover:    #C7511F;  /* هاور لینک (نارنجی-آجری) */
  --az-orange:        #FF9900;  /* نارنجی برند */
  --az-orange-dark:   #E47911;
  --az-yellow:        #FFD814;  /* دکمه «افزودن به سبد» */
  --az-yellow-hover:  #F7CA00;
  --az-amber:         #FFA41C;  /* دکمه «خرید فوری» */
  --az-amber-hover:   #FA8900;
  --az-price:         #B12704;  /* قیمت */
  --az-deal:          #CC0C39;  /* بج تخفیف */
  --az-success:       #007600;  /* موجود در انبار */
  --az-prime:         #00A8E1;
  --az-bg:            #EAEDED;  /* پس‌زمینه‌ی صفحه */
  --az-surface:       #FFFFFF;
  --az-surface-2:     #F7FAFA;  /* هاور ردیف‌ها */
  --az-border:        #D5D9D9;
  --az-border-soft:   #E7E7E7;
  --az-star:          #DE7921;
  --az-focus:         #E77600;  /* رینگ فوکوس آمازون */

  /* ---- بازتعریف توکن‌های قدیمی پروژه تا کل سایت آمازونی شود ---------- */
  --color-primary:      #232F3E;
  --color-primary-dark: #131921;
  --color-hover-bg:     #37475A;
  --color-ink:          #131921;
  --color-ink-dark:     #0F1111;

  --color-gold-light:   #FFF3E0;
  --color-gold-soft:    #FFD599;
  --color-gold:         #FF9900;

  --color-text:         #0F1111;
  --color-text-body:    #0F1111;
  --color-text-muted:   #565959;
  --color-text-invert:  #FFFFFF;

  --color-cream-50:  #FFFFFF;
  --color-cream-100: #EAEDED;
  --color-cream-200: #F7FAFA;
  --color-cream-300: #D5D9D9;
  --color-cream-400: #888C8C;
  --color-cream-500: #565959;

  --color-gray-50:  #FFFFFF;
  --color-gray-100: #EAEDED;
  --color-gray-200: #E7E7E7;
  --color-gray-300: #D5D9D9;
  --color-gray-400: #ADB1B8;
  --color-gray-500: #888C8C;
  --color-gray-600: #565959;
  --color-gray-700: #3F4145;
  --color-gray-800: #232F3E;
  --color-gray-900: #0F1111;

  --color-beige-footer: #232F3E;
  --color-success: #007600;
  --color-warning: #E47911;
  --color-danger:  #B12704;

  --az-radius:    8px;
  --az-radius-sm: 4px;
  --az-shadow:    0 2px 5px rgba(15, 17, 17, .15);
  --az-shadow-lg: 0 6px 16px rgba(15, 17, 17, .18);
  --az-maxw:      1500px;
}

/* ============================================================================
   ۱) پایه
   ========================================================================= */
body {
  background-color: var(--az-bg) !important;
  color: var(--az-ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.az-link {
  color: var(--az-link);
  text-decoration: none;
  cursor: pointer;
}
.az-link:hover { color: var(--az-link-hover); text-decoration: underline; }

/* رینگ فوکوس نارنجی آمازون — دسترس‌پذیری بدون شکستن ظاهر */
.az-search__input:focus-visible,
.az-btn:focus-visible,
.az-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 121, 17, .5);
  border-radius: var(--az-radius-sm);
}

/* ============================================================================
   ۲) هدر آمازون
   ========================================================================= */
.header { background: transparent; box-shadow: none; }

.az-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--az-navy);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
}

.az-header__main {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: var(--az-maxw);
  margin-inline: auto;
  padding: 6px 10px;
  min-height: 60px;
}

/* --- سلول‌های قابل کلیک هدر (کادر شفاف که با هاور دیده می‌شود) --- */
.az-hcell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  line-height: 1.25;
}
.az-hcell:hover { border-color: #FFFFFF; color: #FFFFFF; }
.az-hcell__top {
  font-size: 12px;
  color: #CCCCCC;
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
}
.az-hcell__bottom {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.25;
}

/* --- لوگو --- */
.az-logo {
  display: flex;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  flex-shrink: 0;
}
.az-logo:hover { border-color: #FFFFFF; }
.az-logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.az-logo__text {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -.4px;
}
.az-logo__dot { color: var(--az-orange); }

/* --- انتخاب محل تحویل --- */
.az-deliver {
  display: flex;
  flex-direction: row;      /* ← .az-hcell ستونی است؛ اینجا باید ردیفی شود */
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  padding-block: 5px;
}
.az-deliver svg { width: 17px; height: 17px; margin-bottom: 3px; flex-shrink: 0; }
.az-deliver > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.az-deliver .az-hcell__bottom { line-height: 1.25; }

/* --- نوار جستجوی آمازون --- */
.az-search {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  height: 40px;
  border-radius: var(--az-radius);
  background: #FFFFFF;
  min-width: 0;
  position: relative;      /* ← دراپ‌داون نتایج داخل همین فرم رندر می‌شود */
  transition: box-shadow .15s ease;
}
.az-search:focus-within { box-shadow: 0 0 0 3px var(--az-orange); }

/* گردی گوشه‌ها روی خود فرزندان اعمال می‌شود (نه overflow:hidden)
   تا دراپ‌داون نتایج جستجو بریده نشود */
.az-search > :first-child {
  border-start-start-radius: var(--az-radius);
  border-end-start-radius: var(--az-radius);
}
.az-search > .az-search__btn {
  border-start-end-radius: var(--az-radius);
  border-end-end-radius: var(--az-radius);
}
.az-search .search-results-dropdown,
.az-search .mobile-search-results { border-radius: var(--az-radius) !important; }

.az-search__scope {
  background: #E6E6E6;
  border: none;
  border-left: 1px solid #CDCDCD;
  color: #0F1111;
  font-size: 12px;
  padding: 0 10px;
  max-width: 120px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 0;
  outline: none;
}
.az-search__scope:hover { background: #D8D8D8; }

.az-search__input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 15px;
  color: #0F1111;
  min-width: 0;
  font-family: inherit;
  background: #FFFFFF;
}
.az-search__input::placeholder { color: #767676; }

.az-search__btn {
  background: var(--az-orange);
  border: none;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0F1111;
  flex-shrink: 0;
  transition: background .15s ease;
}
.az-search__btn:hover { background: var(--az-orange-dark); }
.az-search__btn svg { width: 22px; height: 22px; }

/* --- سبد خرید هدر --- */
.az-cart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  position: relative;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  color: #FFFFFF;
}
.az-cart:hover { border-color: #FFFFFF; }
.az-cart__icon { width: 30px; height: 30px; position: relative; }
.az-cart__count {
  position: absolute;
  top: -4px;
  inset-inline-start: 50%;
  transform: translateX(-10%);
  color: var(--az-orange);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  min-width: 14px;
  text-align: center;
}
.az-cart__label { font-size: 14px; font-weight: 700; margin-bottom: 3px; }

/* --- نوار ناوبری ثانویه --- */
.az-subnav {
  background: var(--az-navy-2);
  color: #FFFFFF;
  font-size: 14px;
}
.az-subnav__inner {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: var(--az-maxw);
  margin-inline: auto;
  padding: 0 8px;
  height: 39px;
  overflow-x: auto;
  scrollbar-width: none;
}
.az-subnav__inner::-webkit-scrollbar { display: none; }

.az-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  white-space: nowrap;
  font-size: 14px;
  background: none;
  cursor: pointer;
}
.az-nav__link:hover { border-color: #FFFFFF; color: #FFFFFF; }
.az-nav__link--strong { font-weight: 700; }
.az-nav__link svg { width: 18px; height: 18px; }

.az-subnav__promo {
  margin-inline-start: auto;
  padding-inline: 10px;
  font-size: 13px;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: .95;
}

/* ============================================================================
   ۳) مگامنو (روی همان مارک‌آپ قبلی سوار می‌شود)
   ========================================================================= */
.megamenu {
  background: #FFFFFF !important;
  border: 1px solid var(--az-border) !important;
  border-radius: 0 0 var(--az-radius) var(--az-radius) !important;
  box-shadow: var(--az-shadow-lg) !important;
  color: var(--az-ink);
}
.megamenu_category { background: #F3F3F3 !important; }
.megamenu_category-item { color: var(--az-ink) !important; font-size: 14px; }
.megamenu_category-item:hover,
.megamenu_category-item.active {
  background: #FFFFFF !important;
  color: var(--az-link) !important;
  font-weight: 700;
}

/* ============================================================================
   ۳-ب) منوی کناری «همه» — کپی رفتار Amazon Hamburger Menu
   ---------------------------------------------------------------------------
   یک پنل ثابت کنار صفحه با هدر سرمه‌ای. پنل‌های فرزند از کنار روی پنل اصلی
   می‌لغزند و با دکمه‌ی «منوی اصلی» برمی‌گردند. در RTL از راست باز می‌شود.
   ========================================================================= */
.az-sidemenu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 365px;
  max-width: 88vw;
  background: #FFFFFF;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--az-ink);
  transform: translateX(-105%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
/* inset-inline-start خودش جهت‌آگاه است و در RTL یعنی «راست»، پس نباید
   بازنویسی شود — فقط translateX که جهت‌آگاه نیست باید فلیپ شود. */
html[dir="rtl"] .az-sidemenu { transform: translateX(105%); }
.az-sidemenu.active { transform: translateX(0) !important; }

/* هدر سرمه‌ای بالای پنل */
.az-sidemenu__header {
  background: var(--az-navy-2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.az-sidemenu__header svg { width: 24px; height: 24px; flex-shrink: 0; }

/* دکمه‌ی بستن — بیرون از پنل، مثل آمازون */
.az-sidemenu__close {
  position: fixed;
  top: 12px;
  inset-inline-start: calc(365px + 10px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 1201;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.az-sidemenu.active ~ .az-sidemenu__close { opacity: 1; visibility: visible; }
.az-sidemenu__close svg { width: 26px; height: 26px; }
@media (max-width: 460px) { .az-sidemenu__close { display: none; } }

/* بک‌دراپ تیره */
.az-sidemenu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 17, .55);
  z-index: 1150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.az-sidemenu__backdrop.active { opacity: 1; visibility: visible; }

/* ناحیه‌ی پنل‌ها */
.az-sidemenu__stack { position: relative; flex: 1; overflow: hidden; }

.az-sidemenu__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF;
  padding-bottom: 20px;
}
.az-sidemenu__panel::-webkit-scrollbar { width: 5px; }
.az-sidemenu__panel::-webkit-scrollbar-thumb { background: #C9CDCD; border-radius: 10px; }

/* پنل فرزند از کنار می‌لغزد */
.az-sidemenu__panel--sub {
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  z-index: 2;
}
html[dir="rtl"] .az-sidemenu__panel--sub { transform: translateX(100%); }
.az-sidemenu__panel--sub.in { transform: translateX(0) !important; }

/* گروه‌ها و تیترها */
.az-sidemenu__group {
  padding: 14px 0 12px;
  border-bottom: 1px solid #D5D9D9;
}
.az-sidemenu__group:last-child { border-bottom: none; }

.az-sidemenu__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--az-ink);
  padding: 0 20px 6px;
  margin: 0;
  line-height: 1.5;
}

/* ردیف‌های منو */
.az-sidemenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  color: var(--az-ink);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
}
.az-sidemenu__item:hover { background: #EAEDED; color: var(--az-ink); }
.az-sidemenu__item svg {
  width: 16px;
  height: 16px;
  color: #6F7373;
  flex-shrink: 0;
}
html[dir="rtl"] .az-sidemenu__item > svg { transform: scaleX(-1); }

/* دکمه‌ی بازگشت به منوی اصلی */
.az-sidemenu__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  color: var(--az-ink);
  background: none;
  border: none;
  border-bottom: 1px solid #D5D9D9;
  cursor: pointer;
  text-align: start;
}
.az-sidemenu__back:hover { background: #EAEDED; }
.az-sidemenu__back svg { width: 18px; height: 18px; flex-shrink: 0; }
html[dir="rtl"] .az-sidemenu__back svg { transform: scaleX(-1); }

.az-sidemenu__loading {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--az-ink-soft);
}

/* ============================================================================
   ۴) دکمه‌های آمازون
   ========================================================================= */
.az-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--az-border);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--az-ink);
  box-shadow: 0 2px 5px rgba(213,217,217,.5);
  text-decoration: none;
  line-height: 1.2;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.az-btn:hover { background: #F7FAFA; }

.az-btn--cart {
  background: var(--az-yellow);
  border-color: #FCD200;
  color: #0F1111;
  font-weight: 500;
}
.az-btn--cart:hover { background: var(--az-yellow-hover); }

.az-btn--buy {
  background: var(--az-amber);
  border-color: #FF8F00;
  color: #0F1111;
  font-weight: 500;
}
.az-btn--buy:hover { background: var(--az-amber-hover); }

.az-btn--block { width: 100%; }
.az-btn--lg { padding: 11px 18px; font-size: 15px; }
.az-btn[disabled], .az-btn--disabled {
  background: #F0F2F2 !important;
  border-color: #D5D9D9 !important;
  color: #A1A1A1 !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* دکمه‌های عمومی قدیمی پروژه را هم آمازونی کن */
.pcard_buy,
.add-to-cart-btn {
  background: var(--az-yellow) !important;
  color: #0F1111 !important;
  border: 1px solid #FCD200 !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 5px rgba(213,217,217,.5);
}
.pcard_buy:hover,
.add-to-cart-btn:hover { background: var(--az-yellow-hover) !important; }
.pcard_buy--disabled, .pcard_buy:disabled {
  background: #F0F2F2 !important;
  color: #A1A1A1 !important;
  border-color: #D5D9D9 !important;
}

/* ============================================================================
   ۵) کارت محصول آمازون
   ========================================================================= */
.pcard {
  background: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: var(--az-radius) !important;
  box-shadow: none !important;
  padding: 12px !important;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pcard:hover {
  border-color: var(--az-border) !important;
  box-shadow: var(--az-shadow) !important;
  transform: none !important;
}
.pcard_media {
  background: #FFFFFF !important;
  border-radius: var(--az-radius-sm) !important;
  aspect-ratio: 1 / 1;
}
.pcard_img { object-fit: contain !important; mix-blend-mode: multiply; }
.pcard_title {
  color: var(--az-ink) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: start;
}
.pcard_title:hover { color: var(--az-link-hover) !important; text-decoration: underline; }
.pcard_price,
.pcard_price-now {
  color: var(--az-price) !important;
  font-weight: 500 !important;
}
.pcard_price-now { font-size: 20px !important; }
.pcard_price del { color: var(--az-ink-soft) !important; font-size: 12px !important; }
.pcard_price-out { color: var(--az-price) !important; font-weight: 500; }
.pcard .product-card_badge,
.pcard .badge-new,
.az-badge--deal {
  background: var(--az-deal) !important;
  color: #FFFFFF !important;
  border-radius: var(--az-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
}

/* ستاره‌های امتیاز */

/* نوار قیمت آمازون (تومان کوچک) */

/* ============================================================================
   ۶) کاشی‌های صفحه اصلی آمازون
   ========================================================================= */
.az-tilegrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--az-maxw);
  margin-inline: auto;
  padding: 0 14px;
}
@media (max-width: 1000px) { .az-tilegrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .az-tilegrid { grid-template-columns: 1fr; } }

.az-tile {
  background: #FFFFFF;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
}
.az-tile__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--az-ink);
  margin-bottom: 14px;
  line-height: 1.3;
}
.az-tile__quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}
.az-tile__quad a { text-decoration: none; color: var(--az-ink); }
.az-tile__quad figure { margin: 0; }
.az-tile__quad img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 2px;
  background: #F7F7F7;
}
.az-tile__quad figcaption { font-size: 12px; margin-top: 6px; line-height: 1.35; }
.az-tile__single img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2px;
}
.az-tile__cta { margin-top: 12px; font-size: 13px; color: var(--az-link); }
.az-tile__cta:hover { color: var(--az-link-hover); text-decoration: underline; }

/* ============================================================================
   ۷) خرده‌نان (Breadcrumb)
   ========================================================================= */
.az-breadcrumb {
  max-width: var(--az-maxw);
  margin-inline: auto;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--az-ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.az-breadcrumb a { color: var(--az-link); text-decoration: none; }
.az-breadcrumb a:hover { color: var(--az-link-hover); text-decoration: underline; }
.az-breadcrumb__sep { color: #949494; font-size: 11px; }
.az-breadcrumb [aria-current="page"] { color: var(--az-ink-soft); }

.az-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--az-border-soft);
  background: #FFFFFF;
}
.az-resultbar__count { font-size: 14px; color: var(--az-ink-soft); }
.az-resultbar__count b { color: var(--az-ink); }
.az-resultbar h1 { font-size: 18px; font-weight: 700; color: var(--az-ink); }

/* ============================================================================
   ۱۰) فوتر آمازون
   ========================================================================= */
.az-footer { margin-top: 40px; font-size: 14px; }

.az-footer__totop {
  background: var(--az-navy-3);
  color: #FFFFFF;
  text-align: center;
  padding: 15px 0;
  font-size: 13px;
  cursor: pointer;
  border: none;
  width: 100%;
  display: block;
  font-family: inherit;
}
.az-footer__totop:hover { background: #485769; }

.az-footer__links { background: var(--az-navy-2); color: #FFFFFF; padding: 40px 0 34px; }
.az-footer__grid {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 760px) { .az-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } }
@media (max-width: 430px) { .az-footer__grid { grid-template-columns: 1fr; } }

.az-footer__col h3 { font-size: 16px; font-weight: 700; color: #FFFFFF; margin-bottom: 12px; }
.az-footer__col ul { list-style: none; padding: 0; margin: 0; }
.az-footer__col li { margin-bottom: 9px; }
.az-footer__col a { color: #DDDDDD; font-size: 14px; text-decoration: none; }
.az-footer__col a:hover { text-decoration: underline; color: #FFFFFF; }

.az-footer__mid {
  background: var(--az-navy-2);
  border-top: 1px solid #3A4553;
  padding: 26px 0;
  text-align: center;
}
.az-footer__logo { display: inline-block; margin-bottom: 14px; }
.az-footer__logo img { height: 34px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.az-footer__logo .az-logo__text { font-size: 22px; }

.az-footer__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.az-footer__badges img,
.az-footer__badges > a > img { height: 74px; width: auto; background: #FFFFFF; border-radius: 6px; padding: 4px; }

.az-footer__bottom {
  background: #131A22;
  color: #DDDDDD;
  padding: 24px 0 30px;
  text-align: center;
  font-size: 12px;
  line-height: 2;
}
.az-footer__bottom a { color: #DDDDDD; text-decoration: none; }
.az-footer__bottom a:hover { text-decoration: underline; }
.az-footer__legal { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }

/* ============================================================================
   ۱۲) پاپ‌آپ سبد خرید و مودال‌های موجود
   ========================================================================= */
.cart .flex-shrink-0 { color: var(--az-ink); }

.search-modal, .mobile_search-modal { border-radius: 0 0 var(--az-radius) var(--az-radius) !important; }

/* ============================================================================
   ۱۳) بلاگ آمازون‌استایل
   ========================================================================= */
.az-blog { max-width: var(--az-maxw); margin-inline: auto; padding: 0 14px 40px; }
.az-blog__layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; }
@media (max-width: 900px) { .az-blog__layout { grid-template-columns: 1fr; } }

.az-hero-post {
  background: #FFFFFF;
  border-radius: var(--az-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  margin-bottom: 20px;
}
@media (max-width: 700px) { .az-hero-post { grid-template-columns: 1fr; } }
.az-hero-post img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.az-hero-post__body { padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.az-hero-post__kicker { font-size: 12px; color: var(--az-link); font-weight: 700; }
.az-hero-post__title { font-size: 26px; font-weight: 700; line-height: 1.4; color: var(--az-ink); }
.az-hero-post__title a { text-decoration: none; color: inherit; }
.az-hero-post__title a:hover { color: var(--az-link-hover); }
.az-hero-post__excerpt { font-size: 15px; color: var(--az-ink-soft); line-height: 1.9; }

.az-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.az-postcard {
  background: #FFFFFF;
  border-radius: var(--az-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease;
  border: 1px solid transparent;
}
.az-postcard:hover { box-shadow: var(--az-shadow); border-color: var(--az-border); }
.az-postcard__media { aspect-ratio: 16/9; background: #F3F3F3; overflow: hidden; }
.az-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.az-postcard:hover .az-postcard__media img { transform: scale(1.04); }
.az-postcard__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.az-postcard__title { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--az-ink); }
.az-postcard__title a { text-decoration: none; color: inherit; }
.az-postcard__title a:hover { color: var(--az-link-hover); text-decoration: underline; }
.az-postcard__excerpt {
  font-size: 13px;
  color: var(--az-ink-soft);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.az-postcard__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--az-ink-soft);
  padding-top: 6px;
  border-top: 1px solid var(--az-border-soft);
}
.az-chip {
  display: inline-block;
  background: #F0F2F2;
  border: 1px solid var(--az-border);
  border-radius: 100px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--az-ink);
  text-decoration: none;
}
.az-chip:hover { background: #E3E6E6; color: var(--az-link-hover); }
.az-chip--active { background: var(--az-navy-2); color: #FFFFFF; border-color: var(--az-navy-2); }

/* مقاله */
.az-article { background: #FFFFFF; border-radius: var(--az-radius); padding: 28px 32px 36px; }
@media (max-width: 640px) { .az-article { padding: 20px 16px 26px; } }
.az-article__title { font-size: 30px; font-weight: 700; line-height: 1.5; color: var(--az-ink); margin-bottom: 12px; }
@media (max-width: 640px) { .az-article__title { font-size: 23px; } }
.az-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--az-ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--az-border-soft);
  margin-bottom: 20px;
}
.az-article__meta span { display: inline-flex; align-items: center; gap: 5px; }
.az-article__meta svg { width: 15px; height: 15px; }
.az-article__cover { width: 100%; border-radius: var(--az-radius); margin-bottom: 22px; object-fit: cover; }

.az-prose { font-size: 16px; line-height: 2.1; color: #1B1D1F; }
.az-prose p { margin: 0 0 18px; }
.az-prose h2 {
  font-size: 23px;
  font-weight: 700;
  color: var(--az-ink);
  margin: 34px 0 14px;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--az-orange);
  line-height: 1.6;
  scroll-margin-top: 120px;
}
.az-prose h3 { font-size: 19px; font-weight: 700; color: var(--az-ink); margin: 26px 0 12px; scroll-margin-top: 120px; }
.az-prose h4 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; scroll-margin-top: 120px; }
.az-prose ul, .az-prose ol { margin: 0 0 18px; padding-inline-start: 24px; }
.az-prose ul li { list-style: disc; margin-bottom: 8px; }
.az-prose ol li { list-style: decimal; margin-bottom: 8px; }
.az-prose a { color: var(--az-link); text-decoration: underline; }
.az-prose a:hover { color: var(--az-link-hover); }
.az-prose img { max-width: 100%; height: auto; border-radius: var(--az-radius); margin: 18px 0; }
.az-prose blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  background: #F7FAFA;
  border-inline-start: 4px solid var(--az-link);
  border-radius: 0 var(--az-radius) var(--az-radius) 0;
  color: var(--az-ink-soft);
}
.az-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.az-prose th, .az-prose td { border: 1px solid var(--az-border); padding: 9px 12px; text-align: start; }
.az-prose th { background: #F0F2F2; font-weight: 700; }
.az-prose code {
  background: #F0F2F2;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
  direction: ltr;
  display: inline-block;
}
.az-prose pre { background: #0F1111; color: #F1F1F1; padding: 16px; border-radius: var(--az-radius); overflow-x: auto; direction: ltr; }
.az-prose pre code { background: none; color: inherit; }
.az-prose figure { margin: 18px 0; }
.az-prose figcaption { font-size: 13px; color: var(--az-ink-soft); text-align: center; margin-top: 6px; }

/* فهرست مطالب */
.az-toc {
  background: #F7FAFA;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.az-toc__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--az-ink); display: flex; align-items: center; gap: 6px; }
.az-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.az-toc li { counter-increment: toc; margin-bottom: 7px; font-size: 14px; }
.az-toc li::before { content: counter(toc) ". "; color: var(--az-ink-soft); }
.az-toc li.lvl-3 { padding-inline-start: 18px; font-size: 13px; }
.az-toc a { color: var(--az-link); text-decoration: none; }
.az-toc a:hover { color: var(--az-link-hover); text-decoration: underline; }

/* نوار پیشرفت مطالعه */
.az-readbar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  background: var(--az-orange);
  z-index: 1100;
  width: 0;
  transition: width .1s linear;
}

/* جعبه‌ی نویسنده */
.az-author {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #F7FAFA;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  padding: 16px 18px;
  margin-top: 30px;
}
.az-author__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--az-navy-2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.az-author__name { font-weight: 700; font-size: 15px; color: var(--az-ink); }
.az-author__bio { font-size: 13px; color: var(--az-ink-soft); line-height: 1.9; margin-top: 4px; }

/* اشتراک‌گذاری */
.az-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.az-share__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--az-border);
  background: #FFFFFF;
  color: var(--az-ink-soft);
  cursor: pointer;
}
.az-share__btn:hover { background: var(--az-navy-2); color: #FFFFFF; border-color: var(--az-navy-2); }
.az-share__btn svg { width: 18px; height: 18px; }

/* سایدبار */
.az-side { display: flex; flex-direction: column; gap: 18px; }
.az-side__box { background: #FFFFFF; border-radius: var(--az-radius); padding: 16px 18px; }
.az-side__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--az-ink);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--az-border-soft);
}
.az-side__item { display: flex; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--az-ink); }
.az-side__item:hover .az-side__item-title { color: var(--az-link-hover); text-decoration: underline; }
.az-side__item img { width: 70px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #F3F3F3; }
.az-side__item-title { font-size: 13px; line-height: 1.7; font-weight: 500; }

/* ============================================================================
   ۱۴) بخش‌های کمکی
   ========================================================================= */
.az-section-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--az-ink);
  margin-bottom: 14px;
}
.az-panel {
  background: #FFFFFF;
  border-radius: var(--az-radius);
  padding: 20px;
  max-width: var(--az-maxw);
  margin: 20px auto 0;
}

.az-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.az-pagination a, .az-pagination span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-sm);
  background: #FFFFFF;
  color: var(--az-ink);
  text-decoration: none;
  font-size: 14px;
  padding: 0 10px;
}
.az-pagination a:hover { background: #F0F2F2; }
.az-pagination .current { background: var(--az-navy-2); color: #FFFFFF; border-color: var(--az-navy-2); font-weight: 700; }
.az-pagination .disabled { opacity: .45; pointer-events: none; }

/* اسکرول‌بار نازک آمازونی */

/* ============================================================================
   ۱۵) اصلاحات ریسپانسیو هدر
   ========================================================================= */
@media (max-width: 1023px) {
  .az-header__main { flex-wrap: wrap; padding: 8px 10px 10px; min-height: auto; gap: 6px; }
  .az-search { order: 3; flex-basis: 100%; height: 38px; }
  .az-search__scope { display: none; }
  .az-hide-sm { display: none !important; }
  .az-deliver { order: 4; padding-top: 2px; }
  .az-subnav__inner { height: 36px; }
}
@media (max-width: 480px) {
  .az-logo img { height: 28px; max-width: 110px; }
  .az-logo__text { font-size: 18px; }
  .az-cart__label { display: none; }
}

/* حالت چاپ */
@media print {
  .az-header, .az-subnav, .az-footer, .bottom-navbar, .az-share, .az-toc { display: none !important; }
  .az-article { padding: 0; }
  body { background: #FFFFFF !important; }
}

/* ============================================================================
   ۱۶) فلایات «حساب و لیست‌ها» (آمازون)
   ========================================================================= */
.az-account { position: relative; }
.az-account__flyout {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  min-width: 230px;
  background: #FFFFFF;
  border-radius: var(--az-radius-sm);
  box-shadow: var(--az-shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 1050;
}
.az-account:hover .az-account__flyout,
.az-account:focus-within .az-account__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.az-account__flyout a {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--az-ink);
  text-decoration: none;
}
.az-account__flyout a:hover { background: #F0F2F2; color: var(--az-link-hover); text-decoration: underline; }
.az-account__logout { border-top: 1px solid var(--az-border-soft); margin-top: 6px; padding-top: 10px !important; color: var(--az-price) !important; }

/* نوارهای اعلان زیر هدر — نسخه‌ی آمازونی.
   نکته: app.css روی همین کلاس flex-direction: column می‌گذارد؛ اگر اینجا
   صریحاً row نگذاریم، flex-basis روی محور عمودی می‌نشیند و هر نوار ۲۶۰px
   ارتفاع می‌گیرد. */
.announce-bar-row {
  margin-top: 0 !important;
  max-width: var(--az-maxw);
  margin-inline: auto;
  padding: 12px 14px 0;
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
.announce-bar {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--az-ink);
  text-decoration: none;
  flex: 1 1 260px;
  min-height: 0;
}
.announce-bar:hover { background: var(--az-surface-2); color: var(--az-link-hover); }
.announce-bar svg { color: var(--az-orange); flex-shrink: 0; width: 18px; height: 18px; }

/* موبایل: نوار افقی اسکرول‌شونده (مثل استریپ بالای اپ آمازون) */
@media (max-width: 767px) {
  .announce-bar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 12px 0;
  }
  .announce-bar-row::-webkit-scrollbar { display: none; }
  .announce-bar { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; }
}

/* اورلی پنل کشویی موبایل */
.az-flyout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 17, .55);
  z-index: 1150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.az-flyout-backdrop.active { opacity: 1; visibility: visible; }

/* ============================================================================
   ۱۷) سربرگ و ابزارهای مجله
   ========================================================================= */
.az-bloghead { padding: 18px 0 20px; }
.az-bloghead h1 { font-size: 28px; font-weight: 700; color: var(--az-ink); line-height: 1.5; }
@media (max-width: 640px) { .az-bloghead h1 { font-size: 22px; } }
.az-bloghead__sub { font-size: 14px; color: var(--az-ink-soft); margin-top: 6px; }

.az-blogtools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.az-blogtools__search { max-width: 420px; flex: 1 1 260px; border: 1px solid var(--az-border); }
.az-blogtools__search .az-search__input { background: #FFFFFF; }

.az-select {
  height: 40px;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  background: #F0F2F2;
  color: var(--az-ink);
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
.az-select:focus-visible { box-shadow: 0 0 0 3px rgba(228, 121, 17, .5); }

.az-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.az-postcard__kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--az-link);
  text-decoration: none;
}
.az-postcard__kicker:hover { color: var(--az-link-hover); text-decoration: underline; }

.az-postcard__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 700;
  color: #C9CDCD;
  background: linear-gradient(135deg, #F7FAFA, #E7EBEB);
}

.az-article__lead {
  font-size: 17px;
  line-height: 2;
  color: var(--az-ink-soft);
  background: #F7FAFA;
  border-inline-start: 4px solid var(--az-orange);
  border-radius: 0 var(--az-radius) var(--az-radius) 0;
  padding: 14px 18px;
  margin-bottom: 22px;
}

/* ============================================================================
   ۱۸) صفحه‌ی اصلی — سکشن‌های موجود پروژه با پوسته‌ی آمازونی
   ---------------------------------------------------------------------------
   مارک‌آپ سکشن‌ها دست‌نخورده می‌ماند؛ فقط پوسته‌شان کارت سفید آمازونی می‌شود
   و تیترها به تایپوگرافی آمازون (۲۱px بولد، بدون رنگ تزئینی) درمی‌آیند.
   ========================================================================= */
body > main > section,
body > main > div#features-container {
  max-width: var(--az-maxw);
  margin-inline: auto !important;
  margin-top: 20px !important;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 18px 20px 24px;
  width: auto;
}

body > main > section#hero-section,
body > main > section.relative.w-full.overflow-hidden {
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-top: 0 !important;
}

/* گرید کاشی‌ها خودش پس‌زمینه ندارد */
body > main > section.az-tilegrid {
  background: transparent;
  padding: 0 14px;
  border-radius: 0;
}

/* تیترهای سکشن — یک‌دست و آمازونی */
body > main > section h2,
body > main > section h3 {
  font-family: inherit !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--az-ink) !important;
  line-height: 1.4 !important;
}
body > main > section h2 span,
body > main > section h3 span {
  color: inherit !important;
}

/* دکمه‌های «مشاهده همه» → لینک آبی آمازونی */
body > main > section a[href*="ordering"],
body > main > section a[href*="sort="] {
  box-shadow: none !important;
}

/* کاشی‌های حال‌وهوا (mood) هم سفید و بدون گرادیان */
.mood-section .mood-tile {
  border-radius: var(--az-radius) !important;
  border: 1px solid var(--az-border) !important;
}

/* نوار «شگفت‌انگیز» با رنگ برند آمازون به‌جای آبی */
#amazing-section > div {
  background: var(--az-navy-2) !important;
  border-radius: var(--az-radius) !important;
}
.timer-box {
  background: var(--az-orange) !important;
  color: #0F1111 !important;
  font-weight: 700;
  border-radius: 4px;
}

/* دسته‌بندی‌های دایره‌ای صفحه‌ی اصلی */
.category-image-wrapper {
  border-radius: var(--az-radius) !important;
  background-color: #F7FAFA !important;
  border: 1px solid var(--az-border-soft);
}

/* دکمه‌های ناوبری اسلایدر */
.slider-navigate_btn {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--az-border) !important;
  border-radius: var(--az-radius-sm) !important;
  color: var(--az-ink) !important;
  box-shadow: var(--az-shadow);
}
.slider-navigate_btn:hover { background: #FFFFFF !important; }

/* ============================================================================
   ۱۹) صفحه‌ی لیست محصولات — پوسته‌ی آمازونی روی چیدمان موجود
   ========================================================================= */
body > main.container { max-width: var(--az-maxw); }

/* ریل فیلتر سمت راست: کارت سفید بدون گردی زیاد */
main .lg\:sticky.top-1 {
  border-radius: var(--az-radius) !important;
  box-shadow: none !important;
  border: 1px solid var(--az-border-soft);
  background: #FFFFFF !important;
}
main .lg\:sticky.top-1 h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--az-ink) !important;
}

/* ============================================================================
   ۲۰) صفحه‌ی محصول — پوسته‌ی آمازونی روی چیدمان موجود
   ========================================================================= */
#product-details > div {
  border-radius: var(--az-radius) !important;
  box-shadow: none !important;
  border: 1px solid var(--az-border-soft);
}
#product-details h1 {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--az-ink) !important;
}
#main-image { mix-blend-mode: multiply; }

/* قیمت‌های صفحه‌ی محصول به رنگ قرمز آمازون */
#product-details .text-blue-500,
#product-details .text-blue-600,
#product-details [class*="price"] { color: var(--az-price) !important; }

/* ============================================================================
   ۲۱) اصلاحات کلی رنگ — هرجا آبی/سبز پیش‌فرض قالب مانده بود
   ========================================================================= */
main a.text-blue-500, main a.text-blue-600,
main .text-blue-500, main .text-blue-600 { color: var(--az-link) !important; }
main a.text-blue-500:hover, main a.text-blue-600:hover { color: var(--az-link-hover) !important; }

main .bg-blue-500, main .bg-blue-600 { background-color: var(--az-navy-2) !important; }
main .bg-gray-900, main .bg-gray-950 { background-color: var(--az-navy-2) !important; }

main .rounded-xl, main .rounded-2xl { border-radius: var(--az-radius) !important; }

.toast-container .toast { border-radius: var(--az-radius) !important; }

/* ============================================================================
   ۲۲) دسترس‌پذیری — متنی که فقط صفحه‌خوان‌ها و موتورهای جستجو می‌بینند
   (برای h1 صفحه‌ی اصلی که از نظر بصری با لوگو تکراری است)
   ========================================================================= */
.az-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   ۲۳) دایرکتوری پایانی فوتر (شبکه‌ی چندستونی آمازون)
   ========================================================================= */
.az-footer__directory {
  background: #131A22;
  border-top: 1px solid #3A4553;
  padding: 26px 0 20px;
}
.az-footer__dirgrid {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 20px;
}
.az-footer__dirgrid a {
  display: block;
  text-decoration: none;
  line-height: 1.6;
}
.az-footer__dirgrid b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #DDDDDD;
}
.az-footer__dirgrid span {
  display: block;
  font-size: 11px;
  color: #999999;
}
.az-footer__dirgrid a:hover b { text-decoration: underline; color: #FFFFFF; }

/* تیتر صفحه‌ی محصول — تایپوگرافی آمازون (۲۴px، وزن معمولی) */
.az-pdp__title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--az-ink);
  margin: 0;
}
@media (max-width: 640px) { .az-pdp__title { font-size: 19px; } }

/* باکس خرید صفحه‌ی محصول — قیمت، وضعیت انبار و لینک نظرات به سبک آمازون */
#cart-box { border: 1px solid var(--az-border-soft); }
.az-pdp__reviews-link { font-size: 14px; color: var(--az-link); }
.az-pdp__reviews-link:hover { color: var(--az-link-hover); text-decoration: underline; }
.az-pdp__divider { border: none; border-top: 1px solid var(--az-border-soft); margin: 4px 0; }
.az-pdp__discount-badge {
  color: var(--az-deal);
  font-size: 21px;
  font-weight: 500;
}
.az-pdp__price {
  font-size: 28px;
  font-weight: 500;
  color: var(--az-price);
  margin: 0;
}
.az-pdp__unit-label { font-size: 13px; color: var(--az-ink-soft); }
.az-pdp__old-value {
  font-size: 13px;
  color: var(--az-ink-soft);
  text-decoration: line-through;
}
/* renderStock() در product-details.html کلاس‌های Tailwind (w-2 h-2 rounded-full
   bg-green-500 و ...) را روی این span می‌گذارد؛ چون خودِ span پیش‌فرض inline
   است، بدون display:inline-block عرض/ارتفاع اعمال نمی‌شود */
#stock-indicator { display: inline-block; }
#stock-text { font-weight: 500; }