/* فشرده‌سازی کارت محصول و نوار خرید موبایل — 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; }