/* فشرده‌سازی کارت محصول و نوار خرید موبایل — shared by every shop, loaded last (2026-10-01).
 *
 * Owner: "from the image to add-to-cart you have to scroll too long". Grid cards carried
 * three feature bullets and an English name between the picture and the button, and phones
 * showed one 570px card per row. Cards now keep series, title, stars, price and the cart
 * button (the bullets stay on the product page), phones show two per row, and on a phone
 * the product page's buy bar is pinned to the bottom of the screen from the start.
 *
 * UI review (2026-10-01): the same compact card in the home-page product rows (they were
 * stretched to the tallest card and left ~450px of blank card), grid columns that may shrink
 * (narwal's desktop grid spilled 39px off the screen), a buy bar that is always solid on
 * phones, nothing under 11px, and a phone header that fits 360px screens.
 */

/* ---------------------------------------------------------- grid cards */
.product-grid .product-card__bullets,
.product-grid .product-card__en,
.product-grid .product-card > p,
.row-scroll__track .product-card__bullets,
.row-scroll__track .product-card__en,
.row-scroll__track .product-card > p { display: none; }
.product-grid .product-card__media, .row-scroll__track .product-card__media { padding: 12px; }
.product-grid .product-card__body, .row-scroll__track .product-card__body { padding: 12px 14px 14px; gap: 2px; }
.product-grid .product-card .price, .row-scroll__track .product-card .price { margin-top: 6px; }
.product-grid .product-card__actions, .row-scroll__track .product-card__actions { margin-top: 10px; flex-wrap: wrap; }
/* the button row sits at the bottom of every card, so a row of cards lines up */
.row-scroll__track .product-card { display: flex; flex-direction: column; }
.row-scroll__track .product-card__body { flex: 1; display: flex; flex-direction: column; }
.row-scroll__track .product-card__actions { margin-top: auto; padding-top: 10px; }

/* grid tracks may shrink below their content's min-width instead of pushing the page sideways */
.product-grid > *, .collection > *, .collection__main { min-width: 0; }

/* category strip counts were 10.5px */
.subnav-strip a small { font-size: 11px; }

/* "show more" on long listings (js/listing-more.js) */
.is-more-hidden { display: none !important; }
.listing-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 32px 0 8px; }
.listing-more[hidden] { display: none; }
.listing-more__count { font-size: 13px; color: #6b6b6b; }
.listing-more__btn { min-width: 220px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 1.5px solid currentColor;
                     background: transparent; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.listing-more__btn:hover { background: rgba(0, 0, 0, .05); }

/* ------------------------------------------------ phones: two per row */
@media (max-width: 640px) {
  .product-grid, .product-grid--4, .product-grid--2, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .row-scroll__track > .product-card { flex-basis: min(46vw, 210px) !important; }
  .row-scroll__track { gap: 10px; }
  .product-grid .product-card__media, .row-scroll__track .product-card__media { padding: 8px; }
  .product-grid .product-card__body, .row-scroll__track .product-card__body { padding: 8px 10px 10px; }
  .product-grid .product-card h3, .row-scroll__track .product-card h3 { font-size: 13px; line-height: 1.45; margin-top: 2px; }
  .product-grid .product-card__family, .product-grid .product-card__series,
  .row-scroll__track .product-card__family, .row-scroll__track .product-card__series { font-size: 11px; }
  .product-grid .product-card__tags, .row-scroll__track .product-card__tags { top: 6px; inset-inline-start: 6px; gap: 3px; }
  .product-grid .product-card__tags .badge, .row-scroll__track .product-card__tags .badge { font-size: 11px; padding: 2px 6px; }
  .product-grid .product-card .price, .row-scroll__track .product-card .price { font-size: 14px; gap: 2px 6px; margin-top: 4px; }
  .product-grid .product-card .price del, .product-grid .product-card .price__save,
  .row-scroll__track .product-card .price del, .row-scroll__track .product-card .price__save { font-size: 11px; }
  .product-grid .product-card__actions, .row-scroll__track .product-card__actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; }
  .product-grid .product-card__actions .btn--outline, .product-grid .product-card__more,
  .row-scroll__track .product-card__actions .btn--outline, .row-scroll__track .product-card__more { display: none; }
  .product-grid .product-card__actions .btn, .row-scroll__track .product-card__actions .btn { min-height: 38px; font-size: 13px; padding-inline: 8px; width: 100%; }
  .product-grid .product-card .stars, .row-scroll__track .product-card .stars { font-size: 11px; }
  .product-grid .product-card .stars small, .row-scroll__track .product-card .stars small { font-size: 11px; margin-inline-start: 3px; }

  /* product page: the buy bar sits at the bottom of the screen from the start, always solid */
  .buybar { position: fixed !important; top: auto !important; bottom: 0; left: 0; right: 0; transform: none !important;
            opacity: 1 !important; visibility: visible !important; background: #fff !important;
            border-block: 0; border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); z-index: 900; }
  .buybar__inner { height: 62px; gap: 10px; }
  .buybar__name, .buybar__links, .buybar__id { display: none !important; }
  .buybar__cta { width: 100%; justify-content: space-between; }
  .buybar__cta .btn { flex: 1; max-width: 60%; min-height: 44px; }
  body:has(.buybar) { padding-bottom: 72px; }
  body:has(.buybar) .wa-float { bottom: 84px; }
  body:has(.buybar) .to-top { bottom: 84px; }
}

/* small phones: burger + logo + three icons must fit in 360px */
@media (max-width: 400px) {
  .header__actions { gap: 0 !important; }
  .header__actions .icon-btn { width: 38px; height: 40px; }
}

/* last line of defence against a sideways-wobbling page on phones */
html, body { overflow-x: clip; }

/* visually hidden, still read by search engines and screen readers (home-page H1, 2026-10-01) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------- نظر خریداران (src/reviews.js, 2026-10-01) */
.rv-section { padding: 48px 0; background: #fafafa; border-top: 1px solid rgba(0,0,0,.06); }
.rv-page { padding: 40px 0 64px; }
.rv-wrap { width: min(720px, calc(100% - 32px)); margin: 0 auto; }
.rv-wrap--wide { width: min(1180px, calc(100% - 32px)); }
.rv-page h1 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.rv-lead, .rv-muted { color: #666; line-height: 1.9; }
.rv-errors { background: #fff1f0; border: 1px solid #f5c2bd; color: #a8071a; border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.rv-errors p { margin: 4px 0; }
.rv-form { display: grid; gap: 16px; margin-top: 18px; }
.rv-item { border: 1px solid rgba(0,0,0,.1); border-radius: 14px; padding: 14px 16px 16px; margin: 0; background: #fff; }
.rv-item__head { display: flex; align-items: center; gap: 12px; font-weight: 700; padding: 0 6px; }
.rv-item__head img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f5f5f5; }
.rv-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 10px 0; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label { font-size: 36px; line-height: 1; color: #d9d9d9; cursor: pointer; padding: 2px; transition: color .15s; }
.rv-stars label:hover, .rv-stars label:hover ~ label, .rv-stars input:checked ~ label { color: #f5a623; }
.rv-stars input:focus-visible + label { outline: 2px solid #1677ff; border-radius: 4px; }
.rv-item textarea, .rv-name input { width: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.18); border-radius: 10px; padding: 10px 12px; font: inherit; }
.rv-name { display: grid; gap: 6px; font-weight: 600; }
.rv-name small { color: #888; font-weight: 400; }
.rv-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: #111; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.rv-done { text-align: center; padding: 24px 0; }
.rv-done__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #e8f7ee; color: #1f9d55; font-size: 34px; display: grid; place-items: center; }
.rv-summary h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 28px); }
.rv-score { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rv-score strong { font-size: 32px; }
.rv-stars-static i { font-style: normal; color: #d9d9d9; font-size: 18px; }
.rv-stars-static i.on { color: #f5a623; }
.rv-brand { color: #777; font-size: 13px; margin-top: 8px; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 18px; }
.rv-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 14px 16px; }
.rv-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rv-badge { font-size: 12px; color: #1f9d55; background: #e8f7ee; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.rv-card__body { margin: 10px 0 8px; line-height: 1.9; white-space: pre-line; }
.rv-card__who { color: #777; font-size: 13px; margin: 0; }
.rv-card__reply { background: #f5f5f5; border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; font-size: 14px; }
.rv-cta { margin: 20px 0; padding: 16px; border-radius: 14px; background: #fffbe6; border: 1px solid #ffe58f; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }