/* ==========================================================================
   Responsive / mobile
   ========================================================================== */
@media (max-width: 1000px) {
  .container { padding: 0 18px; }

  .mainhead__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand search toggle"
      "nav   nav    nav";
    gap: 0 14px;             /* row gap 0: the collapsed nav row must add no height */
    align-items: center;
  }
  .brand { grid-area: brand; }
  .brand__logo,
  .woocommerce-page .brand__logo { height: 52px; }
  .mainhead .search { grid-area: search; justify-content: flex-end; }
  .mainhead .search input { width: 100%; max-width: none; font-size: 15px; padding: 12px 18px; }

  /* Burger (hidden on desktop, see base .nav-toggle rule) */
  .nav-toggle {
    grid-area: toggle;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
  }
  .nav-toggle__bar {
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav becomes a dropdown panel under the header row. visibility keeps the
     closed menu's links out of the tab order (max-height alone wouldn't). */
  .nav {
    grid-area: nav;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height .3s ease, opacity .22s ease, visibility .3s;
  }
  .nav.is-open {
    max-height: 360px;      /* > 5 rows; overflow clips the slide animation */
    opacity: 1;
    visibility: visible;
  }
  .nav a {
    font-size: 16px;
    padding: 13px 4px;
    border-bottom: 1px solid #f4f4f4;
  }
  .nav a:first-child { margin-top: 14px; border-top: 1px solid #efefef; }
  .nav a:last-child { border-bottom: 0; }

  /* Mobile hero: image banner on top, button, then text below (per mock) */
  .hero__card {
    background: none;
    min-height: 0;
    aspect-ratio: auto;   /* mobile stacks banner+text; height is content-driven */
    /* on mobile the card is a transparent flex container; kill the rounded
       corner + clip so the bottom-left radius doesn't shave the first letter
       of the last hero__body line (which sits flush at padding:0). */
    border-radius: 0;
    overflow: visible;
  }
  .hero__desktop-banner { display: none; }   /* mobile uses the stacked banner below */
  .hero__mobile-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 492 / 337;   /* viewBox of hero-banner-mobile.svg */
    border-radius: 22px;
    margin-bottom: 18px;
    object-fit: cover;
  }
  .hero__content {
    max-width: none;
    padding: 0;
    order: 3;
  }
  .hero__logomark, .hero__dash { display: none; }
  .hero__title { font-size: 26px; margin-top: 6px; }
  .hero__body { max-width: none; }
  .btn-price {
    position: static;
    width: 100%;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 20px;
    padding: 18px 20px;
  }

  /* Categories: single column, no images */
  .cats { grid-template-columns: 1fr; gap: 16px; }
  .cats__row2 { grid-template-columns: 1fr; gap: 16px; }
  .card, .card--wide { min-height: 0; aspect-ratio: auto; }
  .card__inner {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
  }
  /* flex-shrink:0 — otherwise wrapping titles squeeze the circles into ovals.
     Icon/arrow are kept compact so the longest single word («Антипаразитарная»,
     ~187px @18px) fits the text column on a 360px phone WITHOUT breaking. */
  /* The SVG already draws its own faint circle + glyph, so let it fill the box
     (the CSS background circle is redundant) — icon shows at full designed size. */
  .card__icon { width: 44px; height: 44px; margin: 0; flex: 0 0 auto; background: none; }
  .card__icon img { width: 100%; }
  /* min-width:0 lets the flex column shrink; the 18px size keeps the long word
     on one line rather than splitting it mid-word. */
  .card__title { margin: 0; flex: 1; min-width: 0; }
  .card__title .sm,
  .card__title .lg,
  .card__title .md { display: inline; font-size: 18px; }
  /* restore word spacing between the (whitespace-free) adjacent spans */
  .card__title span + span::before { content: " "; }
  .card__arrow { width: 40px; height: 40px; flex: 0 0 auto; }
  .card__arrow img { width: 26px; }
  .card__paw { width: 20px; height: 20px; }
  .card__img { display: none; }

  /* Company banner stacks: full-width mobile banner image on top, text below */
  .company,
  .company--svg { flex-direction: column; min-height: 0; background-image: none; }
  .company__mobile-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 499 / 464;   /* viewBox of company-banner-mobile.svg */
    object-fit: cover;
  }
  .company__img { display: none; }
  .company__content,
  .company--svg .company__content {
    flex: 1 1 auto;
    width: auto;
    margin-left: 0;
    padding: 24px;
  }
  .company__title { font-size: 24px; }
  .company__text { font-size: 18px; }
  .btn-inline { font-size: 18px; }

  /* TOP sales carousel -> 2 tiles per view */
  .top-sales__track { gap: 14px; }
  .ts-col { flex-basis: calc((100% - 14px) / 2); }
  .ts-tile { padding: 14px; }
  .ts-label { font-size: 14px; }
  .carousel-btn { width: 38px; height: 38px; }

  .newsletter__title { font-size: 24px; }
  .newsletter__title img { width: 24px; height: 24px; }
  .newsletter__sub { font-size: 18px; }

  .modal__header { padding: 40px 22px 0; }
  .modal__scroll { padding: 0 22px 32px; }
  /* Close button is absolute top-right; drop the title below it so the long
     heading can't run under the ✕ on narrow screens. */
  .modal__close { top: 16px; right: 16px; width: 40px; height: 40px; }
  .modal__title { font-size: 19px; padding-top: 34px; }
}