/* Mobile styling for product page, cart drawer and checkout, in the language of the new
   mobile homepage (approved 28.10.2026). Only inside @media (max-width: 720px). No markup or
   behaviour changes: the existing cart, delivery and payment logic in site.js is used as is. */
@media (max-width: 720px) {
  :root { --m-red: #e30613; --m-ink: #171717; --m-ink2: #3a3632; --m-muted: #6d675f; --m-line: #e8e3dc; --m-soft: #f7f4ef; --m-plaster: #efe9e0; }

  /* ---------- product page ---------- */
  body:has(.product-detail) .delivery-advantage { display: none !important; }
  .product-detail > .shell { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box; }
  .product-detail .back-link { margin-top: 10px !important; min-height: 40px !important; padding: 0 14px !important; border-radius: 999px !important; font-size: 13px !important; }
  .product-detail .breadcrumbs { margin: 8px 0 10px !important; font-size: 12px !important; color: var(--m-muted) !important; }
  .market-gallery__main { height: auto !important; aspect-ratio: 3 / 4; max-height: 62svh; border-radius: 10px !important; background: var(--m-plaster) !important; border: 0 !important; }
  .market-gallery__main img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  .market-title-row h1, .market-info__top h1 { font-size: 20px !important; line-height: 1.15 !important; font-weight: 850 !important; letter-spacing: -0.02em !important; }
  .market-rating { font-size: 13px !important; }

  /* grade and pack pickers: same segmented control and chips as the homepage */
  .market-lines > span, .market-variants > span { display: block; margin: 14px 0 8px !important; color: var(--m-muted) !important; font-size: 12px !important; font-weight: 750 !important; }
  .market-lines > div { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; padding: 3px !important; border-radius: 8px !important; background: var(--m-soft) !important; overflow: visible !important; }
  .market-lines > div a { min-width: 0 !important; min-height: 44px !important; display: grid !important; place-items: center !important; align-content: center; padding: 4px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--m-ink) !important; text-align: center; box-shadow: none !important; }
  .market-lines > div a strong { font-size: 14px !important; font-weight: 850 !important; color: var(--m-ink) !important; }
  .market-lines > div a small { display: none !important; }
  .market-lines > div a.is-active { background: #fff !important; box-shadow: 0 1px 0 var(--m-line), 0 2px 8px rgba(58, 39, 22, .10) !important; }
  .market-variants > div { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; margin: 0 -16px !important; padding: 0 16px 2px !important; scrollbar-width: none; }
  .market-variants > div::-webkit-scrollbar { display: none; }
  .market-variants > div a { flex: 0 0 auto !important; min-width: 56px !important; height: 40px !important; display: grid !important; place-items: center !important; padding: 0 14px !important; border: 1px solid var(--m-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--m-ink) !important; font-size: 13px !important; font-weight: 750 !important; box-shadow: none !important; }
  .market-variants > div a.is-active { background: var(--m-ink) !important; border-color: var(--m-ink) !important; color: #fff !important; }

  .market-price strong { font-size: 26px !important; font-weight: 850 !important; color: var(--m-ink) !important; }
  .market-price del, .market-price span { font-size: 13px !important; color: var(--m-muted) !important; }
  .market-buy__actions .button--red { min-height: 50px !important; border-radius: 6px !important; font-size: 15px !important; box-shadow: none !important; }
  .market-buy__actions .quantity { min-height: 50px !important; border-radius: 6px !important; }
  .market-buy-now { min-height: 46px !important; border-radius: 6px !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--m-ink) !important; color: var(--m-ink) !important; font-size: 14px !important; }
  .market-delivery { padding: 10px 12px !important; border-radius: 8px !important; background: var(--m-soft) !important; border: 0 !important; }
  .market-delivery b { font-size: 15px !important; color: var(--m-ink) !important; }
  .market-delivery span { font-size: 12px !important; color: var(--m-muted) !important; }
  .market-delivery a { color: var(--m-ink) !important; font-size: 12px !important; text-decoration: underline; }
  .market-trust li { font-size: 13px !important; }
  .mobile-buybar { border-radius: 10px !important; left: 8px !important; right: 8px !important; box-shadow: 0 10px 28px rgba(36, 28, 22, .16) !important; border: 1px solid var(--m-line) !important; }
  .mobile-buybar strong { font-size: 17px !important; color: var(--m-ink) !important; }
  .mobile-buybar .button--red { min-height: 44px !important; border-radius: 6px !important; box-shadow: none !important; }

  /* ---------- cart drawer ---------- */
  .cart-drawer__header h2 { font-size: 22px !important; font-weight: 850 !important; letter-spacing: -0.02em; }
  .cart-drawer__header span { font-size: 12px !important; color: var(--m-muted) !important; }
  .cart-line img { border-radius: 6px !important; background: var(--m-plaster) !important; object-fit: contain !important; }
  .cart-line__meta strong { font-size: 14px !important; line-height: 1.3 !important; }
  .cart-line__meta span { font-size: 12px !important; color: var(--m-muted) !important; }
  .cart-line__controls { border: 1px solid var(--m-line) !important; border-radius: 6px !important; background: #fff !important; }
  .cart-line__controls button { min-width: 36px !important; min-height: 36px !important; background: transparent !important; }
  .cart-drawer__footer .button--red { min-height: 50px !important; border-radius: 6px !important; box-shadow: none !important; font-size: 15px !important; }
  .cart-drawer__footer > div span { font-size: 14px !important; color: var(--m-muted) !important; }
  .cart-drawer__footer > div strong { font-variant-numeric: tabular-nums; }

  /* ---------- checkout ---------- */
  .checkout-step__heading strong { font-size: 18px !important; font-weight: 850 !important; letter-spacing: -0.02em; }
  .checkout-step__heading span { font-size: 12px !important; color: var(--m-muted) !important; }
  .ozon-method__option { color: var(--m-muted) !important; border-radius: 8px !important; }
  .ozon-method__option.is-active { color: var(--m-ink) !important; border-color: var(--m-ink) !important; background: #fff !important; }
  .ozon-method__option.is-recommended small { color: #2f6b3f !important; }
  .courier-address__hint, .delivery-choice-result { color: var(--m-muted) !important; font-size: 12px !important; }
  .checkout-payment__option { border-radius: 8px !important; }
  .checkout-required-consents .checkout-consent { font-size: 12px !important; line-height: 1.45 !important; }
  .checkout-step__actions .button--red { min-height: 50px !important; border-radius: 6px !important; box-shadow: none !important; font-size: 15px !important; }
  .checkout-summary { border-radius: 10px !important; }
}

/* mobile only: show grades as Г-5 / Г-16 / Г-22 and packs from light to heavy, like the homepage */
@media (max-width: 720px) {
  .market-lines > div a, .market-variants > div a { order: var(--m-order, 0); }
}