/* ============================================================
   imkids.ru — Responsive CSS for Webasyst Shop-Script
   ============================================================ */

/* ---- Large tablet ---- */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid--category { grid-template-columns: repeat(2, 1fr); }
  .advantages__grid { grid-template-columns: repeat(3, 1fr); }
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 44px; }
  .section__title { font-size: 34px; }
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .nav { display: none; }
  .header__burger { display: flex; }
  .header__phone span { display: none; }

  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__title { font-size: 38px; }
  .hero__image { height: 360px; }
  .hero__float-badge { display: none; }
  .hero__actions { flex-direction: row; }

  .cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .cta__title { font-size: 30px; }

  .product__grid { grid-template-columns: 1fr; }
  .product__gallery { position: static; }

  .cart__grid { grid-template-columns: 1fr; }
  .cart__summary { position: static; }

  .checkout__form-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .container { padding: 0 12px; }

  .topbar { font-size: 12px; }
  .topbar__region { display: none; }
  .topbar__inner { justify-content: center; }

  .header__inner { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .header__icons { gap: 8px; }
  .header__icons .header__icon:nth-child(1),
  .header__icons .header__icon:nth-child(2) { display: none; }
  .logo__main, .logo__accent { font-size: 22px; }

  .hero { padding: 32px 0 48px; }
  .hero__title { font-size: 30px; }
  .hero__subtitle { font-size: 16px; }
  .hero__features { gap: 6px; }
  .hero__feature { font-size: 12px; padding: 5px 10px; }
  .hero__actions { flex-direction: column; }
  .hero__image { height: 280px; }

  .section { padding: 48px 0; }
  .section__head { margin-bottom: 36px; }
  .section__title { font-size: 28px; }
  .section__desc { font-size: 16px; }

  .products-grid,
  .products-grid--category { grid-template-columns: 1fr; }
  .advantages__grid { grid-template-columns: 1fr; }
  .categories__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }

  .cta { padding: 48px 0; }
  .cta__title { font-size: 26px; }
  .cta__text { font-size: 16px; }
  .cta__phone { font-size: 20px; }
  .cta__form-wrap { padding: 24px; }

  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom-inner { flex-direction: column; gap: 8px; }

  .search-page__title { font-size: 28px; }
  .search-page__form { flex-direction: column; }

  .category__title { font-size: 28px; }
  .category__toolbar { flex-direction: column; gap: 12px; align-items: flex-start; }
  .subcategories { gap: 12px; }
  .subcategory-card { min-width: 140px; }

  .product__title { font-size: 24px; }
  .product__price { font-size: 26px; }
  .product__main-image img { height: 300px; }
  .product__buy-row { flex-direction: column; align-items: stretch; }
  .product__buy-row .btn { width: 100%; }

  .cart__title { font-size: 28px; }
  .cart-item { grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; gap: 8px; }
  .cart-item__image { width: 64px; height: 64px; }
  .cart-item__qty, .cart-item__total, .cart-item__remove { grid-column: 2; }
  .cart-item__total { font-size: 16px; }

  .checkout__title { font-size: 28px; }
  .checkout__steps { gap: 8px; }
  .checkout__step { font-size: 12px; }
  .checkout__actions { flex-direction: column-reverse; }
  .checkout__actions .btn { width: 100%; }

  .error-page__code { font-size: 80px; }
  .error-page__title { font-size: 22px; }
}


/* Responsive production safeguards */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__content { min-width: 0; }
  .hero__image-wrap { width: 100%; }
  .hero__image { width: 100%; height: auto; object-fit: contain; }
}
@media (max-width: 560px) {
  .hero__title { overflow-wrap: anywhere; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .cart__grid { gap: 16px; }
}

/* ===== Final mobile product/gallery and full-screen image viewer ===== */
.product__grid { min-width: 0; }
.product__gallery, .product__info { min-width: 0; }
.product__main-image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; cursor: zoom-in; }
.product__main-image img { display: block; width: 100%; max-width: 100%; height: clamp(280px, 42vw, 560px); object-fit: contain; object-position: center; }
.product__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.product__thumb { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; background: #fff; }
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product__benefits { display: flex; flex-wrap: wrap; gap: 10px 16px; max-width: 100%; }
.product__benefit { min-width: 0; }
.product-lightbox { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: 28px; background: rgba(15, 18, 20, .94); }
.product-lightbox.is-open { display: flex; }
.product-lightbox__image { display: block; max-width: min(96vw, 1600px); max-height: 92dvh; width: auto; height: auto; object-fit: contain; image-rendering: auto; }
.product-lightbox__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 34px; line-height: 1; }
body.product-lightbox-open { overflow: hidden; }
.product__main-image img:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
@media (max-width: 900px) {
  .container { width: 100%; max-width: 100%; }
  .product__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product__gallery { width: 100%; }
  .product__main-image { min-height: 0; aspect-ratio: 1 / 1; }
  .product__main-image img { height: 100%; max-height: 72vw; }
  .product__thumbs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .product__thumb { flex: 0 0 64px; scroll-snap-align: start; }
  .product__info { width: 100%; }
  .product__buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .product__buy-row .btn { width: 100%; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .product__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product__description { overflow-wrap: anywhere; }
  .product__description img { max-width: 100%; height: auto; }
}
@media (max-width: 560px) {
  .breadcrumbs { font-size: 12px; flex-wrap: wrap; }
  .product__title { font-size: clamp(22px, 6vw, 28px); overflow-wrap: anywhere; }
  .product__summary { font-size: 15px; }
  .product__main-image { border-radius: 16px; aspect-ratio: 1 / 1; }
  .product__main-image img { max-height: 88vw; }
  .product__thumb { flex-basis: 58px; width: 58px; height: 58px; }
  .product__buy-row { grid-template-columns: minmax(94px, auto) minmax(0, 1fr) 42px; gap: 7px; }
  .product__qty { min-width: 0; }
  .product__qty-btn { width: 28px; }
  .product__qty-input { width: 30px; }
  .product__buy-row .btn { font-size: 13px; gap: 5px; min-height: 46px; white-space: normal; }
  .product__buy-row .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .product__fav-btn { width: 42px; height: 46px; }
  .product__benefits { grid-template-columns: minmax(0, 1fr); }
  .product__benefit { white-space: normal; }
  .product__description { margin-top: 28px; padding-top: 24px; }
  .product-lightbox { padding: 12px; }
  .product-lightbox__image { max-width: 100%; max-height: 88dvh; }
  .product-lightbox__close { width: 44px; height: 44px; }
}