/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 40px 0 20px;
}
.hero__card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background-color: #f3efe9;
  /* Height follows the photo's native aspect — the photo is shown in full
     (never cropped) at every width; once .container hits its max width the
     banner height stays constant. */
  aspect-ratio: 1672 / 941;
}
/* Real <img> with object-fit:cover — reliably fills the card (Chrome won't
   scale an SVG background with background-size:cover, leaving a cream gap). */
.hero__desktop-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;   /* anchor animals to the floor; crops studio-cream off the top */
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 60px 0 60px 64px;
}
.hero__logomark { width: 190px; margin-bottom: 23px; }
.hero__dash {
  font-size: 38px;
  color: var(--text);
  font-weight: 600;
  line-height: 1;
}
.hero__title {
  font-size: 32px;          /* SemiBold 32 */
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin: 8px 0 22px;
  max-width: 440px;         /* same column as the body, so title + text align */
  text-wrap: balance;       /* browser evens the line lengths — replaces the old hand-placed <br>s */
}
.hero__body {
  font-size: 18px;          /* Medium 18 */
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  max-width: 440px;
  text-wrap: pretty;        /* keeps a lone word from orphaning on the last line */
}
/* Two sentences = two paragraphs; give the second one air instead of a hard <br>. */
.hero__body + .hero__body { margin-top: 14px; }
.hero__body strong { font-weight: 700; }  /* Bold 18 */

.btn-price {
  position: absolute;
  z-index: 3;
  right: 64px;                 /* aligns with .hero__content padding-left; sits under the text, clear of the animals on the right */
  bottom: 60px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--orange);
  color: #fff;
  font-size: 24px;          /* Medium 24 */
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 20px 34px;
  border-radius: 18px;
  /* rest-state glow now comes from the shared .btn-price rule in content.css,
     which loads after this file and wins the cascade tie */
}
.btn-price .arrow { font-size: 26px; line-height: 1; }

/* ==========================================================================
   Section heading (categories)
   ========================================================================== */
.section { padding: 46px 0; }

.sec-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.sec-head__icon {
  width: 84px; height: 84px; flex: 0 0 auto;
  background: #eef3e6;
  border-radius: 50%;
  display: grid; place-items: center;
}
.sec-head__icon img { width: 60px; }
.top-sales .sec-head__icon img,
.promos-home .sec-head__icon img { width: 48px; }  /* the star rides at 48 */

/* --- First-view reveal (main.js): sections start armed-hidden and fade-up
       the first time they enter the viewport. JS adds the armed class, so
       without JS (or with reduced motion) nothing is ever hidden. The final
       translate is `none`, NOT 0px — any non-none transform would turn the
       section into a containing block for position:fixed descendants and
       hijack the Turnstile dog-walk inside the newsletter form. --- */
.gk-reveal--armed {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .55s ease, translate .55s ease;
}
.gk-reveal--armed.is-inview {
  opacity: 1;
  translate: none;
}

/* One-shot flourish: the categories paw-print icon waves hello right after
   its section reveals (same origin as the modal paw wag). */
.section--cats.is-inview .sec-head__icon img {
  transform-origin: 60% 85%;
  animation: gk-icon-wave .9s ease .45s;
}
@keyframes gk-icon-wave {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-16deg); }
  45%      { transform: rotate(11deg); }
  70%      { transform: rotate(-7deg); }
  85%      { transform: rotate(3deg); }
}
/* Every sec-head that carries the star icon (ТОП продаж, «Акции и
   спецпредложения» — same newsletter-star-icon.svg asset) twinkles on
   reveal. Selector list, not a shared class, so a future sec-head with this
   icon inherits the flourish automatically instead of needing an extra
   markup class wired in by hand. */
.top-sales.is-inview .sec-head__icon img,
.promos-home.is-inview .sec-head__icon img {
  animation: gk-star-twinkle 1s ease .45s;
}
@keyframes gk-star-twinkle {
  0%, 100% { transform: scale(1) rotate(0);        filter: none; }
  25%      { transform: scale(1.3) rotate(14deg);  filter: drop-shadow(0 0 8px rgba(242, 122, 88, .75)); }
  45%      { transform: scale(.92) rotate(-8deg); }
  65%      { transform: scale(1.16) rotate(6deg);  filter: drop-shadow(0 0 6px rgba(242, 122, 88, .55)); }
}
@media (prefers-reduced-motion: reduce) {
  .gk-reveal--armed { transition: none; opacity: 1; translate: none; }
  .section--cats.is-inview .sec-head__icon img,
  .top-sales.is-inview .sec-head__icon img,
  .promos-home.is-inview .sec-head__icon img { animation: none; }
}
.sec-head__title {
  font-size: 18px;          /* Bold 18 */
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 4px;
}
.sec-head__sub {
  font-size: 16px;          /* Regular 16 */
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}

/* ==========================================================================
   Category cards
   ========================================================================== */
.cats {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 26px;
}
.cats__row2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 92 / 70;   /* scale height WITH width — cards keep their shape */
  display: block;
  color: #fff;
}
.card--wide { aspect-ratio: 168 / 100; }
/* Гигиена sits in the narrower (1fr) column, «Антипаразитарная» in the wider
   (1.12fr) one; a proportionally taller ratio keeps both the SAME height at
   every width (their widths are always in a fixed 1.12 : 1 ratio). */
.card--hyg { aspect-ratio: 3 / 2; }
/* Inner content scales with the viewport (clamped) so it stays proportional to
   the card as the card's aspect-ratio scales its height — otherwise fixed-size
   text/icons would overflow the shorter card at narrow widths. */
.card__inner {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2.5vw, 34px) clamp(20px, 2.5vw, 34px) clamp(18px, 2.2vw, 30px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card__icon {
  width: clamp(56px, 6.2vw, 84px); height: clamp(56px, 6.2vw, 84px);
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: auto;
}
.card__icon img { width: clamp(40px, 4.4vw, 60px); }
.card__title {
  font-weight: 500;
  line-height: 1.05;
  margin: clamp(12px, 1.3vw, 18px) 0 clamp(10px, 1.2vw, 16px);
  text-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.card__title .sm { display: block; font-size: clamp(18px, 1.9vw, 26px); }
.card__title .lg { display: block; font-size: clamp(26px, 2.8vw, 38px); }
.card__title .md { display: block; font-size: clamp(16px, 1.76vw, 24px); }
.card__arrow {
  width: clamp(44px, 4.3vw, 58px); height: clamp(44px, 4.3vw, 58px);
  background: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
}
.card__arrow img { width: clamp(30px, 3.1vw, 42px); }
.card__img {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
.card--anti  { background: linear-gradient(90deg,#fc6859,#eb5e5a 50%,#fc6859); }
/* The anti-parasitic art (cat + leaves) is wider than the other card images,
   so the 62% cap shrank it below full height and left the leaves floating.
   Uncap it so the cat fills the card height; overflow:hidden clips the far
   edge and the faded leaves settle into place behind the title. */
.card--anti .card__img { max-width: none; }
.card--hyg   { background: linear-gradient(90deg,#8c6bd4,#936fd8 50%,#9571d9); }
/* Let the poodle fill the full card height too (uncap its width); >100% height
   pushes the cutout's transparent top above the card edge so the dog reaches
   the top instead of leaving a purple band. */
.card--hyg .card__img { max-width: none; }
.card--food  { background: linear-gradient(135deg,#b7cc88,#80c884); }
.card--care  { background: linear-gradient(135deg,#5ec0fc,#69c2fb); }
.card--spray { background: linear-gradient(135deg,#fd855b,#fd875d); }

/* --------------------------------------------------------------------------
   Category card hover: lift + photo zoom + arrow-to-paw morph
   -------------------------------------------------------------------------- */
/* Card + photo share the EXACT same transform timing so they move — and
   return — as one piece (no snap, no transient gap on mouse-out). */
.card {
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
  will-change: transform;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(9, 48, 70, .18);
}
.card__img {
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  transform-origin: right bottom;
}
.card:hover .card__img,
.card:focus-visible .card__img { transform: scale(1.05); }

/* Stack arrow + paw in the same grid cell of the white circle */
.card__arrow { overflow: hidden; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.card__arrow > * { grid-area: 1 / 1; }
.card:hover .card__arrow,
.card:focus-visible .card__arrow { transform: scale(1.08); }

/* Arrow flies off to the right, spinning away… */
.card__arrow img {
  transition: transform .3s cubic-bezier(.55,.06,.68,.19), opacity .25s ease;
}
.card:hover .card__arrow img,
.card:focus-visible .card__arrow img {
  transform: translateX(120%) rotate(45deg) scale(.4);
  opacity: 0;
}
/* …and the paw springs in with a playful overshoot, tinted per card. */
.card__paw {
  width: 26px; height: 26px;
  fill: currentColor;
  opacity: 0;
  transform: scale(0) rotate(-60deg);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1) .08s, opacity .2s ease .08s;
}
.card:hover .card__paw,
.card:focus-visible .card__paw {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.card--anti  .card__paw { color: #eb5e5a; }
.card--hyg   .card__paw { color: #8c6bd4; }
.card--food  .card__paw { color: #80c884; }
.card--care  .card__paw { color: #5ec0fc; }
.card--spray .card__paw { color: #fd855b; }

@media (prefers-reduced-motion: reduce) {
  .card, .card__img, .card__arrow, .card__arrow img, .card__paw {
    transition: none !important;
  }
  .card:hover, .card:focus-visible { transform: none; }
  .card:hover .card__img { transform: none; }
}

/* ==========================================================================
   Company banner
   ========================================================================== */
.company {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #f3efe6;
  min-height: 460px;
  display: flex;
}
.company__img {
  width: 52%;
  object-fit: cover;
  object-position: left center;
}
.company__content {
  flex: 1;
  padding: 60px 60px 60px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.company__title {
  font-size: 36px;          /* SemiBold 36 */
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 22px;
}
.company__text {
  font-size: 26px;          /* Medium 26 */
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 34px;
}
.btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  background: var(--orange);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  border: none; cursor: pointer;
  font-family: inherit;
  padding: 18px 30px;
  border-radius: 18px;
}
.btn-inline .arrow { font-size: 24px; }

/* full-bleed company banner image variant (svg already composed:
   animals sit on the LEFT, so text is placed in the right half). */
.company--svg {
  background-image: url(../home/company-banner-image.svg);
  background-size: cover;
  background-position: left center;
}
.company--svg .company__img { display: none; }
.company--svg .company__content {
  flex: 0 0 48%;
  margin-left: auto;
  width: 48%;
  padding: 60px 56px 60px 20px;
}

/* ==========================================================================
   TOP sales
   ========================================================================== */
/* Same visual language as the Каталог product cards: warm tile, blended
   photo, lift on hover, dark title that warms to orange. Horizontal carousel:
   4 tiles per view on desktop, steps one product at a time (buttons or
   autoplay), wraps around, native touch/trackpad swipe still works. */
.top-sales__carousel {
  position: relative;
}
.top-sales__viewport {
  overflow: hidden;
}
.top-sales__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* old Edge */
  padding-bottom: 4px;                 /* room for hover lift */
}
.top-sales__track::-webkit-scrollbar { display: none; }
.ts-col {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex: 0 0 calc((100% - 3 * 22px) / 4);   /* 4 per view */
  scroll-snap-align: start;
}

/* Carousel nav buttons (top-right of the section head). */
.carousel-nav { display: flex; gap: 10px; margin-left: auto; }
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #eadfd3;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.ts-tile {
  position: relative;   /* anchors the audience badge so it moves with the tile */
  z-index: 2;           /* keep the variant arrows clickable above the card link */
  display: block;
  background: #faf8f6;
  border: 1px solid #f1ede9;
  border-radius: 18px;
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ts-tile img {
  width: 100%;
  height: auto;               /* beat the width/height attrs — same as catalog */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;   /* melts baked-in white photo boxes into the tile */
}
.ts-col:hover .ts-tile {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(56, 56, 55, .10);
}
.ts-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 3px 10px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 6px;
}
/* ==========================================================================
   Variant viewer — "n/N" counter + photo arrows on variable-product tiles.
   Shared by catalog cards (.loop-tile) and the home carousel (.ts-tile);
   both are position:relative, so these anchor to the tile and ride its hover.
   ========================================================================== */
.var-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-width: 40px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;               /* circle-ish pill */
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  justify-content: center;
}
.var-count i { opacity: .55; font-style: normal; margin: 0 1px; }
.var-count__total { opacity: .7; }
.var-count__cur { font-weight: 700; }

.var-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(9, 48, 70, .16);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.var-nav svg { width: 16px; height: 16px; }
.var-nav--prev { left: 8px; }
.var-nav--next { right: 8px; }
.var-nav:hover { background: var(--teal); color: #fff; }
.var-nav:active { transform: translateY(-50%) scale(.9); }
/* brand (left) + volume (right) on one row */
.ts-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px 0;
}
.ts-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--placeholder);
}
.ts-vol {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.ts-label {
  padding: 6px 4px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  transition: color .12s ease;
}
.ts-col:hover .ts-label { color: var(--orange); }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter {
  text-align: center;
  padding: 60px 0 80px;
}
.newsletter__title {
  font-size: 40px;          /* SemiBold 40 */
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.newsletter__title img { width: 34px; height: 34px; }
.newsletter__sub {
  font-size: 26px;          /* Medium 26 */
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 30px;
}
.newsletter__form {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 16px;          /* Medium 16 */
  font-weight: 500;
  color: var(--muted);
}
.check-row { cursor: pointer; }
.check-row input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.check-box {
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 2px solid var(--orange);
  border-radius: 6px;
  display: grid; place-items: center;
  transition: background .12s ease;
}
.check-box img { width: 20px; opacity: 0; transition: opacity .12s ease; }
.check-row input:checked + .check-box img { opacity: 1; }
.check-row input:focus-visible + .check-box { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Inline link inside checkbox label copy (e.g. "Политикой Конфиденциальности") —
   coloured + underlined so it visibly reads as clickable against the plain text. */
.link-accent {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color .12s ease;
}
.link-accent:hover { color: var(--ink); }
.field-label {
  display: block;
  margin: 16px 0 8px;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}
.email-input {
  width: 100%;
  border: 2px solid var(--orange);
  background: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
}
.email-input::placeholder { color: var(--placeholder); }
.newsletter__submit {
  display: block;
  margin: 26px auto 0;
  background: var(--orange);
  color: #fff;
  font-size: 20px;          /* Bold 20 */
  font-weight: 700;
  border: none; cursor: pointer;
  font-family: inherit;
  padding: 15px 46px;
  border-radius: 12px;
}