/* ==========================================================================
   Espart — Product page (requires main.css)
   Figma: ۰۵ · صفحه محصول — mobile 360 / desktop 1440
   ========================================================================== */

/* ---------- Mobile: app bar replaces the site header, buy box becomes a sticky bar ---------- */
@media (max-width: 1199.98px) {
  .page--buy .hdr { display: none; }
  .page--buy { padding-bottom: 77px; }
}

.js-wish.is-on { color: var(--danger); }
.js-wish.is-on .ic { fill: currentColor; }

/* ---------- Summary ---------- */
.pd { padding-inline: 0; }
.pd__grid { display: flex; flex-direction: column; }

.gallery__main {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 300px; background: var(--gray-200); color: var(--gray-600);
}
.gallery__main .ic { width: 96px; height: 96px; stroke-width: 1.2; }
.gallery__dots { position: absolute; left: calc(50% - 28px); top: 276px; display: flex; gap: 6px; }
.gallery__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-500); }
.gallery__dots i.is-active { background: var(--primary); }

.pd__info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.pd__info > .alert, .pd__info > .btn, .pd__info > .ship, .pd__info > .pd__title { align-self: stretch; }
.pd__title { font-weight: 700; font-size: 18px; line-height: 28px; color: var(--gray-900); }
.pd__meta { display: flex; align-items: center; gap: 16px; }
.pd__code { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 20px; }
.pd__code-label { font-weight: 400; color: var(--gray-600); }
.pd__code b { font-weight: 700; color: var(--gray-900); }
.pd__rating { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13px; line-height: 22px; color: var(--gray-700); }
.pd__rating .ic { width: 14px; height: 14px; color: var(--star); }

/* Alert */

/* Price block */
.price-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.price-block__sale { display: flex; align-items: center; gap: 8px; }
.price-block__old { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-600); }
.price-block__now { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.price-block__amount { font-weight: 900; font-size: 24px; line-height: 36px; color: var(--gray-900); }
.price-block__cur { font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); }

.ship { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--success-900); }
.ship .ic { width: 16px; height: 16px; }

/* Quantity stepper */

/* Buy box — mobile: sticky bottom bar */
.buybox {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--gray-300);
  box-shadow: 0 16px 40px rgba(33, 37, 41, .16);
}
.buybox__cta { display: flex; align-items: center; gap: 8px; }
.buybox__cta .btn { flex: 1 1 auto; min-width: 0; }

/* ---------- Tabs ---------- */
.pd-tabs { padding: 12px 0 0; }

.pd-tabs__panel { padding: 16px 16px 24px; }

/* Compatibility */
.compat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.compat__head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.compat__title { font-weight: 700; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.compat__tbl { align-self: stretch; }

/* mobile compat rows: model (right) ↔ status (left) */
.compat__tbl .tbl__row { justify-content: space-between; gap: 0; }
.compat__tbl .tbl__head + .tbl__row { border-top: 0; }
.compat__tbl .c-brand, .compat__tbl .c-type { display: none; }
.c-model { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.c-status { display: flex; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; line-height: 20px; white-space: nowrap; }
.status .ic { width: 14px; height: 14px; }
.status--ok { color: var(--success-900); }
.status--convert { color: var(--warning-900); }

.compat__foot { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }

/* Stock table */

/* Search field */
.field {
  display: flex; align-items: center; gap: 8px; width: 240px; height: 36px; padding: 0 12px;
  border: 1px solid var(--gray-500); border-radius: 8px; background: var(--white); color: var(--gray-600);
}
.field .ic { width: 16px; height: 16px; }
.field__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; background: none; font-size: 12px; line-height: 20px; color: var(--gray-900); }
.field__input::placeholder { color: var(--gray-600); opacity: 1; }
.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }

/* Skeleton card */


/* ==========================================================================
   ≥600 — tablets
   ========================================================================== */
@media (min-width: 600px) {
  .gallery__main { height: 400px; }
  .gallery__dots { top: auto; bottom: 16px; }
  .pd__info { padding-inline: var(--gutter); }
  .pd-tabs__panel { padding-inline: var(--gutter); }
  .buybox { padding-inline: var(--gutter); }
}

/* ==========================================================================
   ≥1200 — Desktop
   ========================================================================== */
@media (min-width: 1200px) {
  .js-wish { display: none; }
  .pd { display: flex; flex-direction: column; gap: 20px; padding: 24px var(--gutter) 40px; }
  .pd__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(300px, 1fr) 340px; gap: 32px; align-items: start; }
  .gallery { display: flex; flex-direction: column; gap: 12px; }
  .gallery__main { height: 480px; border-radius: 12px; }
  .gallery__main .ic { width: 120px; height: 120px; }
  .gallery__thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .gallery__thumb {
    display: flex; align-items: center; justify-content: center; height: 112px;
    background: var(--gray-200); border: 1px solid var(--gray-300); border-radius: 8px; color: var(--gray-600);
  }
  .gallery__thumb .ic { width: 36px; height: 36px; stroke-width: 1.5; }
  .gallery__thumb.is-active { border: 2px solid var(--primary); }
  .pd__info { gap: 12px; padding: 0; }
  .pd__title { font-size: 24px; line-height: 36px; }
  .pd__code { font-size: 13px; line-height: 22px; }
  .specs { display: block !important; margin: 0; padding-top: 4px; align-self: stretch; }
  .specs__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-300); font-size: 13px; line-height: 22px; }
  .specs dt { flex: 0 0 140px; font-weight: 400; color: var(--gray-700); }
  .specs dd { flex: 1 1 auto; margin: 0; font-weight: 700; color: var(--gray-900); }
  .pd__links { display: flex !important; align-items: center; gap: 16px; padding-top: 4px; }
  .pd__links a { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; line-height: 22px; color: var(--primary); }
  .pd__links .ic { width: 16px; height: 16px; }
  .pd__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .buybox {
    position: static; z-index: auto;
    display: flex; flex-direction: column; gap: 16px; padding: 20px;
    border: 1px solid var(--gray-300); border-radius: 12px;
    box-shadow: 0 2px 8px rgba(33, 37, 41, .1);
  }
  .tiers-locked {
    display: flex; align-items: center; gap: 8px; align-self: stretch; padding: 12px;
    background: var(--accent-50); border: 1px dashed var(--accent); border-radius: 8px;
    font-size: 13px; line-height: 22px;
  }
  .tiers-locked .ic { width: 18px; height: 18px; color: var(--accent-900); }
  .tiers-locked__text { flex: 1 1 auto; font-weight: 500; color: var(--accent-900); }
  .tiers-locked__link { font-weight: 700; color: var(--primary); }
  .ship--lg { font-size: 13px; line-height: 22px; }
  .ship--lg .ic { width: 18px; height: 18px; }
  .buybox__perks { display: flex !important; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gray-300); }
  .buybox__perks li { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); }
  .buybox__perks .ic { width: 16px; height: 16px; }
  .pd-tabs { display: flex; flex-direction: column; gap: 24px; padding: 8px var(--gutter) 40px; }
  .pd-tabs__panel { display: flex; align-items: flex-start; gap: 32px; padding: 0; }
  .compat { flex: 1 1 auto; min-width: 0; gap: 12px; }
  .compat__title { font-size: 20px; line-height: 32px; }
  .compat__tbl { background: var(--white); }
  .compat__tbl .tbl__row { justify-content: flex-start; gap: 12px; }
  .compat__tbl .tbl__head + .tbl__row { border-top: 1px solid var(--gray-300); }
  .compat__tbl .c-brand, .compat__tbl .c-type { display: block; }
  .c-brand { flex: 0 0 100px; }
  .c-model { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .c-type { flex: 0 0 140px; }
  .c-status { flex: 0 0 130px; }
  .status { font-size: 13px; line-height: 22px; }
  .status .ic { width: 16px; height: 16px; }
  .status--convert { padding: 0 6px; border-radius: 4px; background: var(--warning-50); }
  .status--convert .ic { width: 14px; height: 14px; }
  .pd-tabs__panel .stock { flex: 0 1 560px; min-width: 440px; }
  .related { display: flex !important; flex-direction: column; gap: 24px; padding-top: 8px; padding-bottom: 64px; }
  .related .sec-head { height: 32px; justify-content: flex-end; }
  .related__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: center; }
}