/* VOEVODA responsive hardening — 2026-10-17
   Loaded last on public pages. Keeps existing visual system and business logic,
   normalizes layout from 320px phones through 2560px wide displays. */

:root {
  --responsive-gutter: clamp(14px, 2.2vw, 36px);
}

html {
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after { min-width: 0; }

img, picture, video, canvas, svg, iframe {
  max-width: 100%;
}

img, video { height: auto; }

input, select, textarea, button { max-width: 100%; }

.container {
  width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--container));
}

main, section, article, aside, nav, header, footer,
.page-hero, .section, .product-detail, .catalog-layout, .account-layout,
.cart-layout, .contact-layout, .legal-layout, .split-section {
  min-width: 0;
}

/* Prevent long technical strings, SKUs, e-mail addresses and order numbers from breaking layouts. */
.product-card, .product-info, .account-card, .account-panel, .cart-item,
.info-card, .action-card, .contact-card, .article-card, .footer-grid {
  overflow-wrap: anywhere;
}

/* Wide screens: content remains readable instead of stretching edge-to-edge. */
@media (min-width: 1600px) {
  :root { --container: 1540px; }
  .section { padding-inline: 0; }
  .page-hero__inner, .section-head { column-gap: clamp(40px, 4vw, 76px); }
}

@media (min-width: 1920px) {
  :root { --container: 1640px; }
  .page-home .home-category-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-home .home-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-catalog .product-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 2200px) {
  :root { --container: 1760px; }
  .page-catalog .product-grid--catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Laptop / narrow desktop range. */
@media (max-width: 1280px) {
  :root { --responsive-gutter: clamp(18px, 2.2vw, 30px); }
  .section, .page-hero { overflow: clip; }
  .b2b-banner { padding: clamp(34px, 5vw, 58px); gap: clamp(28px, 4vw, 52px); }
  .footer-grid { gap: clamp(24px, 3vw, 42px); }
}

@media (max-width: 1180px) {
  .header__inner { gap: 18px; }
  .main-nav { max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
  .search-panel__inner { align-items: stretch; }
  .catalog-layout, .product-detail, .contact-layout, .split-section { min-width: 0; }
  .b2b-banner { min-height: 0; }
}

/* Tablet landscape / small laptop. */
@media (max-width: 1024px) {
  :root { --responsive-gutter: 22px; }
  .page-hero { padding-inline: 0; }
  .page-hero__inner { min-width: 0; }
  .section-head { gap: 20px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .product-card, .category-card, .action-card, .info-card { min-width: 0; }
  .catalog-toolbar > *, .catalog-advanced > * { min-width: 0; }
}

/* Tablet portrait and large phones. */
@media (max-width: 820px) {
  :root { --responsive-gutter: 17px; }

  .topbar__inner {
    gap: 8px 14px;
    font-size: 10px;
  }

  .header__inner { min-height: 72px; }
  .brand img { max-height: 68px; width: auto; }
  .header-mobile-tools { gap: 6px; }
  .icon-button, .nav-toggle { flex: 0 0 auto; }

  .search-panel__inner,
  .search-panel form { grid-template-columns: minmax(0, 1fr); }

  .page-hero__inner { padding-block: clamp(34px, 7vw, 64px); }
  .page-hero h1 { overflow-wrap: normal; word-break: normal; }

  .category-grid, .product-grid, .action-grid, .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-category-grid,
  .page-home .home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-home .home-promo-grid { grid-template-columns: 1fr; }

  .catalog-advanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail, .product-tabs__grid { grid-template-columns: 1fr; }
  .product-gallery__layout { grid-template-columns: 1fr; }
  .product-gallery__thumbs { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

  .form-grid, .inline-form__grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-cta__inner { gap: 24px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tables stay usable on touch devices rather than forcing whole-page horizontal scroll. */
  .account-table-wrap, .table-wrap, .admin-table-wrap, .compare-table-wrap,
  .order-table-wrap, .product-table-wrap {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Phones. */
@media (max-width: 620px) {
  :root { --responsive-gutter: 14px; }

  .topbar { display: none; }
  .header__inner { min-height: 66px; gap: 8px; }
  .brand img { max-height: 58px; max-width: 50px; }
  .header-mobile-tools { margin-left: auto; }
  .header-mobile-tools .icon-button,
  .header-mobile-tools .nav-toggle {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px;
  }

  .main-nav {
    top: 66px;
    padding-inline: var(--responsive-gutter);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .main-nav a, .main-nav summary { min-height: 44px; }

  .welcome-promo-strip__inner {
    display: grid; grid-template-columns: 1fr; gap: 6px; padding-block: 8px;
  }
  .welcome-promo-strip__inner a { justify-self: start; }

  .section { padding-block: clamp(38px, 10vw, 58px); }
  .section-head { margin-bottom: 26px; }
  .page-hero__inner { padding-block: 38px; }

  .category-grid, .product-grid, .action-grid, .info-grid {
    grid-template-columns: 1fr;
  }

  /* Product discovery remains two columns where cards are intentionally compact. */
  .page-home .home-category-grid,
  .page-home .home-product-grid,
  .page-catalog .product-grid--catalog,
  .page-favorites .engagement-product-grid,
  body.page-account.page-favorites .engagement-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }

  .page-catalog .product-grid--catalog .product-card__body,
  .page-home .home-product-card__body { padding: 12px; }

  .catalog-toolbar, .catalog-toolbar--category,
  .catalog-advanced, .catalog-sidebar .catalog-advanced,
  .catalog-filters--vertical {
    grid-template-columns: 1fr !important;
  }

  .product-buy-row, .page-product .product-info__actions,
  .product-assurances, .product-tabs__grid { grid-template-columns: 1fr; }
  .product-quantity { width: 108px; max-width: 100%; }

  .b2b-banner { padding: 28px 20px; }
  .steps-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 42px minmax(0, 1fr); }

  .contact-cta__inner { padding-block: 38px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }

  .button, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  input, select, textarea { font-size: 16px; }

  /* Cart cards: keep controls inside viewport. */
  .cart-item { max-width: 100%; }
  .cart-item__quantity { max-width: 100%; }

  /* Account pages: stack dense panels without changing desktop information hierarchy. */
  body.page-account .account-layout,
  body.page-account .account-profile-grid,
  body.page-account .account-address-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Compact phones. */
@media (max-width: 430px) {
  :root { --responsive-gutter: 12px; }

  .header__inner { min-height: 62px; }
  .brand img { max-height: 54px; max-width: 46px; }
  .header-mobile-tools { gap: 4px; }
  .header-mobile-tools .icon-button,
  .header-mobile-tools .nav-toggle {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  }
  .main-nav { top: 62px; }

  .page-hero h1 { font-size: clamp(30px, 10vw, 42px); }
  .page-hero p { font-size: 15px; line-height: 1.6; }

  .page-home .home-category-grid,
  .page-home .home-product-grid,
  .page-catalog .product-grid--catalog,
  .page-favorites .engagement-product-grid,
  body.page-account.page-favorites .engagement-product-grid {
    gap: 7px;
  }

  .product-card__body, .category-card__body, .action-card__body { padding-inline: 12px; }
  .product-card__title, .home-product-card__title { overflow-wrap: anywhere; }

  .cart-item { column-gap: 8px; }
  .cart-item__image { max-width: 72px; }
  .cart-item__quantity { transform-origin: left center; }

  .site-beta-notice { padding: 10px; }
  .site-beta-notice__dialog { padding-inline: 20px; }
}

/* Very narrow devices (320–360px). */
@media (max-width: 360px) {
  :root { --responsive-gutter: 10px; }
  .header-mobile-tools .theme-toggle { display: none; }
  .header-mobile-tools .icon-button,
  .header-mobile-tools .nav-toggle {
    width: 38px; height: 38px; min-width: 38px; min-height: 38px;
  }

  .page-home .home-category-grid,
  .page-home .home-product-grid,
  .page-catalog .product-grid--catalog,
  .page-favorites .engagement-product-grid,
  body.page-account.page-favorites .engagement-product-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .product-card__body, .home-product-card__body { padding: 10px !important; }
  .button { padding-inline: 14px; }
}

/* Landscape phones: keep navigation usable when viewport height is small. */
@media (max-height: 520px) and (max-width: 900px) and (orientation: landscape) {
  .main-nav { max-height: calc(100dvh - 58px); }
  .main-nav a, .main-nav summary { min-height: 40px; }
  .site-beta-notice__dialog { max-height: calc(100dvh - 20px); overflow-y: auto; }
}

/* Respect safe areas on modern phones. */
@supports (padding: max(0px)) {
  @media (max-width: 620px) {
    .container { width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--container)); }
    .site-header, .topbar, .welcome-promo-strip {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}