/*
  ═══════════════════════════════════════════════════════════════════
  I-PETS MARKETPLACE — MOBILE ADAPTIVE UI
  Range: iPhone 7 (375px) → iPad Mini (768px)
  Approach: Mobile-first within this range; 3 internal tiers
  ═══════════════════════════════════════════════════════════════════
  Tier 1: 375–479px  (compact phones — iPhone 7/8/SE/12 mini)
  Tier 2: 480–639px  (large phones — iPhone 12-15 Pro Max, Pixel)
  Tier 3: 640–768px  (phablets & small tablets — iPad Mini portrait)
  ═══════════════════════════════════════════════════════════════════
*/

/* ── ACTIVATION GATE — everything below only fires ≤768px ─────── */
@media screen and (max-width: 768px) {

/* ┌──────────────────────────────────────────────────────────────┐
   │  GLOBAL RESETS                                              │
   └──────────────────────────────────────────────────────────────┘ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  TOP SHOWCASE (HEADER)                                      │
   └──────────────────────────────────────────────────────────────┘ */
.top-showcase {
  padding-bottom: 0;
}

/* Hero chaos images — hide on phone, barely visible anyway */
.hero-chaos-layer {
  opacity: 0.12;
}

/* Nav row: logo centered, compact icons */
.top-nav-row {
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 8px 0 4px;
}

.top-left-tools {
  display: none; /* city select hidden — use bottom nav "Каталог" instead */
}

.brand-center {
  justify-self: center;
}

.top-showcase .brand-center img {
  width: 120px;
  max-width: 32vw;
}

.brand-slogan {
  display: none; /* save vertical space */
}

.top-right-tools {
  gap: 6px;
  flex-wrap: nowrap;
}

/* Hide less important header buttons on mobile */
.top-right-tools .control-group,      /* lang switch */
.top-right-tools .wiki-btn,
.top-right-tools .cabinet-top-btn {
  display: none;
}

.top-icon-btn {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  SEARCH ZONE                                                │
   └──────────────────────────────────────────────────────────────┘ */
.top-search-zone {
  padding: 16px 0 20px;
  text-align: center;
}

.top-tagline {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 12px;
  padding: 0 8px;
}

.search-wrap-hero {
  max-width: 100%;
}

.search-wrap-hero input {
  font-size: 16px; /* prevent iOS zoom */
  padding: 12px 44px 12px 16px;
  border-radius: 14px;
}

.ai-assistant-line {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 14px;
}

.ai-assistant-line img {
  width: 22px;
  height: 22px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  TOP CATEGORIES STRIP                                       │
   └──────────────────────────────────────────────────────────────┘ */
.top-categories-strip {
  overflow: visible;
}

.top-categories-strip .container {
  padding-left: 0;
  padding-right: 0;
}

.top-showcase .top-categories {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 10px 16px 14px;
}

.top-showcase .top-categories::-webkit-scrollbar {
  display: none;
}

.top-category-tile {
  flex: 0 0 auto;
  width: 76px;
  min-height: auto;
  scroll-snap-align: start;
  gap: 6px;
  padding: 4px 2px;
}

.top-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.top-category-icon.is-image {
  width: 76px;
  height: 48px;
}

.top-category-icon img {
  max-width: 32px;
  max-height: 32px;
}

.top-category-tile h3 {
  font-size: 11px;
  line-height: 1.2;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  MAIN CONTENT — STACKED LAYOUT                             │
   └──────────────────────────────────────────────────────────────┘ */
main.container {
  padding-bottom: 80px; /* room for bottom nav */
}

.market-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  SIDEBAR — COLLAPSED ACCORDION ON MOBILE                   │
   └──────────────────────────────────────────────────────────────┘ */
.sidebar {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 12px;
  order: -1; /* above content */
}

.sidebar .hint {
  display: none;
}

.sidebar-search {
  font-size: 16px; /* prevent iOS zoom */
}

.tree-view {
  max-height: 240px;
  overflow-y: auto;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  PANELS & SECTIONS                                          │
   └──────────────────────────────────────────────────────────────┘ */
.panel {
  border-radius: 14px;
  overflow: visible;
}

.section {
  padding: 14px 12px;
}

.section-head {
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: 18px;
}

.section-head p {
  font-size: 13px;
  margin-top: 4px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  BRANDS CAROUSEL                                            │
   └──────────────────────────────────────────────────────────────┘ */
.brands-carousel {
  overflow: hidden;
}

.brands-carousel-track {
  gap: 8px;
}

.brands-carousel-prev,
.brands-carousel-next {
  display: none; /* swipe on touch instead */
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  ADS CAROUSEL                                               │
   └──────────────────────────────────────────────────────────────┘ */
.sub-ads-carousel {
  min-height: 180px;
  border-radius: 14px;
}

.ads-slide {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 16px;
  gap: 12px;
}

.ads-slide-media {
  order: -1;
  height: 140px;
  border-radius: 12px;
}

.ads-slide-copy h3 {
  font-size: 18px;
}

.ads-slide-copy p {
  font-size: 13px;
}

.ads-carousel-prev,
.ads-carousel-next {
  display: none; /* swipe on mobile */
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  PRODUCT GRIDS (Popular & Special Offers)                   │
   └──────────────────────────────────────────────────────────────┘ */
.popular-products-grid,
.special-offers-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.popular-product-card {
  min-height: auto;
}

.popular-product-media {
  height: 120px;
  padding: 6px;
}

.popular-product-body {
  padding: 10px;
  gap: 6px;
}

.popular-product-body h3 {
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-product-brand {
  font-size: 11px;
}

.popular-product-price {
  font-size: 16px;
}

.popular-product-btn {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
}

/* Special offer cards */
.special-offer-card {
  min-height: 280px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  VIEWED PRODUCTS — horizontal scroll                        │
   └──────────────────────────────────────────────────────────────┘ */
.viewed-products-track {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -12px;
  padding: 0 12px;
}

.viewed-products-track::-webkit-scrollbar {
  display: none;
}

.viewed-products-grid {
  display: flex;
  gap: 10px;
  width: max-content;
}

.viewed-products-grid > * {
  flex: 0 0 140px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  SERVICES MAP                                               │
   └──────────────────────────────────────────────────────────────┘ */
.services-map-shell {
  grid-template-columns: 1fr;
}

.services-map-canvas {
  min-height: 220px;
  border-radius: 14px;
}

.services-map-info {
  width: 100%;
}

.services-map-filters {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  gap: 6px;
  padding-bottom: 6px;
}

.services-map-filters::-webkit-scrollbar {
  display: none;
}

.services-map-head {
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.services-map-list {
  grid-template-columns: 1fr;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  INTERESTING (ARTICLES)                                     │
   └──────────────────────────────────────────────────────────────┘ */
.interesting-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.interesting-card {
  grid-template-columns: 120px 1fr;
  min-height: 130px;
}

.interesting-media {
  padding: 6px;
}

.interesting-body {
  padding: 8px 10px;
}

.interesting-body h3 {
  font-size: 14px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  FOOTER                                                     │
   └──────────────────────────────────────────────────────────────┘ */
footer {
  margin-top: 24px;
  border-radius: 14px;
}

.footer-grid {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 20px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  BOTTOM NAV                                                 │
   └──────────────────────────────────────────────────────────────┘ */
.mobile-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  justify-content: space-around;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

.mobile-bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 52px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-btn.is-active {
  color: var(--primary);
}

.mobile-bottom-nav-ico {
  font-size: 20px;
  line-height: 1;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  FLOATING BUTTONS                                           │
   └──────────────────────────────────────────────────────────────┘ */
.floating-ai-btn {
  bottom: 76px; /* above bottom nav */
  right: 12px;
  width: 48px;
  height: 48px;
}

.scroll-top-btn {
  bottom: 132px;
  right: 12px;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  AUTH & AI MODALS — full screen on mobile                   │
   └──────────────────────────────────────────────────────────────┘ */
.auth-modal-panel {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  border-radius: 0;
  margin: 0;
}

.ai-modal-panel {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
}

/* ┌──────────────────────────────────────────────────────────────┐
   │  TOUCH UX ENHANCEMENTS                                     │
   └──────────────────────────────────────────────────────────────┘ */
/* Minimum touch target 44px for interactive elements */
@media (pointer: coarse) {
  button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Exclude inline/compact elements */
  .top-category-tile,
  .mobile-bottom-nav-btn,
  .popular-product-btn,
  .ads-carousel-dots button,
  .brands-carousel-dots button {
    min-height: auto;
    min-width: auto;
  }
}

} /* END @media max-width: 768px */


/* ═══════════════════════════════════════════════════════════════
   TIER 1: COMPACT PHONES (max-width: 479px)
   iPhone 7/8/SE/12 mini/13 mini
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {

.container {
  padding-left: 12px;
  padding-right: 12px;
}

.top-tagline {
  font-size: 16px;
  padding: 0 4px;
}

/* Categories strip — narrower items */
.top-category-tile {
  width: 68px;
}

.top-category-icon {
  width: 44px;
  height: 44px;
}

.top-category-icon.is-image {
  width: 68px;
  height: 44px;
}

.top-category-tile h3 {
  font-size: 10px;
  max-width: 68px;
}

/* Product cards: tighter */
.popular-products-grid,
.special-offers-grid {
  gap: 8px;
}

.popular-product-card {
  border-radius: 12px;
}

.popular-product-media {
  height: 100px;
  padding: 4px;
}

.popular-product-body {
  padding: 8px;
  gap: 4px;
}

.popular-product-body h3 {
  font-size: 12px;
}

.popular-product-price {
  font-size: 15px;
}

.popular-product-btn {
  display: none; /* card itself is tappable */
}

.popular-product-row {
  justify-content: flex-start;
}

/* Special offers */
.special-offer-card {
  min-height: 240px;
}

/* Articles — smaller thumb */
.interesting-card {
  grid-template-columns: 100px 1fr;
  min-height: 110px;
}

/* Ads */
.ads-slide-media {
  height: 120px;
}

.ads-slide-copy h3 {
  font-size: 16px;
}

/* Section headings */
.section-head h2 {
  font-size: 16px;
}

.section-head p {
  font-size: 12px;
}

/* Services map */
.services-map-canvas {
  min-height: 180px;
}

/* Viewed products — narrower cards */
.viewed-products-grid > * {
  flex: 0 0 120px;
}

/* Hero chaos — hide completely on small phones */
.hero-chaos-layer {
  display: none;
}

} /* END Tier 1 */


/* ═══════════════════════════════════════════════════════════════
   TIER 3: PHABLETS & SMALL TABLETS (640–768px)
   iPad Mini portrait, large phones landscape
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 640px) and (max-width: 768px) {

.container {
  padding-left: 20px;
  padding-right: 20px;
}

/* Show brand slogan on wider screens */
.brand-slogan {
  display: block;
  font-size: 0.85rem;
}

.top-showcase .brand-center img {
  width: 140px;
}

.top-tagline {
  font-size: 22px;
}

/* 3-column product grid for wider phones */
.popular-products-grid,
.special-offers-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 2-column articles */
.interesting-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interesting-card {
  grid-template-columns: 1fr;
  min-height: auto;
}

.interesting-media {
  border-right: none;
  border-bottom: 1px solid var(--border);
  height: 140px;
}

/* 2-column footer */
.footer-grid {
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}

/* Categories — wider tiles */
.top-category-tile {
  width: 84px;
}

.top-category-tile h3 {
  font-size: 12px;
  max-width: 84px;
}

/* Services map — side by side */
.services-map-list {
  grid-template-columns: repeat(2, 1fr);
}

/* Viewed products — wider cards */
.viewed-products-grid > * {
  flex: 0 0 160px;
}

/* Show product buy button */
.popular-product-btn {
  display: inline-flex;
}

} /* END Tier 3 */


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE FIXES (short viewport)
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {

.top-search-zone {
  padding: 8px 0 12px;
}

.top-tagline {
  font-size: 15px;
  margin-bottom: 6px;
}

.hero-chaos-layer {
  display: none;
}

.top-showcase .top-categories {
  padding-top: 4px;
  padding-bottom: 8px;
}

.top-category-icon {
  width: 36px;
  height: 36px;
}

.popular-product-media {
  height: 80px;
}

} /* END landscape */


/* ═══════════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS & PERFORMANCE
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* GPU acceleration for scrolling containers */
  .top-showcase .top-categories,
  .viewed-products-track,
  .services-map-filters,
  .brands-carousel-track {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
  }

  /* Smooth transitions on interactive cards */
  .popular-product-card,
  .interesting-card,
  .top-category-tile {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .popular-product-card:active,
  .interesting-card:active {
    transform: scale(0.98);
  }
}