/*
Theme Name: GOOD — GK Favorite
Theme URI: http://localhost:8080/
Author: Redesign (Luiza / dev)
Description: Full custom site theme for gkfavorite.ru on a free/custom stack (no premium plugins). New GOOD design site-wide: home landing + header/footer, WooCommerce shop/category/product, standard pages/posts/search/404, "Get current price" modal, and lead forms wired to email. Desktop + mobile.
Version: 1.31.6
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: gkfavorite-good
*/

/* ==========================================================================
   Montserrat — self-hosted (no external font dependency)
   ========================================================================== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --orange: #f27a58;
  --teal: #0f766e;   /* coral's split-complement — variant-count chip, echoes --ink */
  --ink: #093046;
  --text: #383837;
  --muted: #606060;
  --search-bg: #e6e6e6;
  --placeholder: #b3b3b3;
  --newsletter-bg: #fdf4ee;
  --max: 1360px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.mainhead {
  padding: 22px 0;
  border-bottom: 1px solid #f2f2f2;
}
.mainhead__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand { flex: 0 0 auto; }
/* Extra .woocommerce-page selector: WooCommerce's `.woocommerce-page img
   { height:auto }` otherwise outweighs this and collapses the SVG to 0px. */
.brand__logo,
.woocommerce-page .brand__logo { height: 64px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  flex: 1 1 auto;
}
.nav a {
  color: var(--ink);
  font-weight: 500;     /* Medium */
  font-size: 18px;
  white-space: nowrap;
}
.nav a:hover { color: var(--orange); }

/* Scoped to the header — WordPress adds a `search` class to <body> on results
   pages, so a bare `.search` rule would turn the whole page into a flex row. */
.mainhead .search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.mainhead .search input {
  width: 340px;
  max-width: 40vw;
  border: none;
  outline: none;
  background: var(--search-bg);
  color: var(--muted);
  font-family: inherit;
  font-size: 18px;
  padding: 16px 26px;
  border-radius: 999px;
}
.mainhead .search input::placeholder { color: var(--muted); }

/* ==========================================================================
   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: 6px; }
.hero__dash {
  font-size: 38px;
  color: var(--text);
  font-weight: 600;
  line-height: 1;
}
.hero__title {
  font-size: 32px;          /* SemiBold 32 — sized down from 38 to fit the longer copy in 4 lines */
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  margin: 8px 0 18px;
}
.hero__body {
  font-size: 18px;          /* Medium 18 */
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  max-width: 400px;
}
.hero__body strong { font-weight: 700; }  /* Bold 18 */

.btn-price {
  position: absolute;
  z-index: 3;
  right: 40px;
  bottom: 70px;
  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: 14px;
  box-shadow: 0 10px 30px rgba(242,122,88,.35);
}
.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 { width: 48px; }
.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: 14px;
}
.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(assets/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;
}

/* ==========================================================================
   Generic page / archive / single content
   ========================================================================== */
.page-hero {
  background: #fff;              /* same colour as the page — subtle, not a banner */
  padding: 26px 0 0;
}
.page-hero__inner { display: flex; align-items: center; gap: 16px; }
.page-hero__crumbs {
  font-size: 13px;
  font-weight: 500;
  color: var(--placeholder);
  margin: 0 0 6px;
}
.page-hero__crumbs a { color: var(--orange); }
.page-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}

.content-wrap { padding: 26px 0 70px; }
.entry {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}
.entry h1, .entry h2, .entry h3, .entry h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  margin: 1.4em 0 .5em;
}
.entry h2 { font-size: 28px; }
.entry h3 { font-size: 22px; }
.entry p { margin: 0 0 1em; }
.entry a { color: var(--orange); text-decoration: underline; }
.entry img { height: auto; border-radius: 12px; margin: 12px 0; }
.entry ul, .entry ol { margin: 0 0 1em 1.2em; }
.entry li { margin-bottom: .4em; }
.entry blockquote {
  border-left: 4px solid var(--orange);
  margin: 1em 0; padding: 6px 0 6px 20px;
  color: var(--muted);
}
.entry table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.entry td, .entry th { border: 1px solid #e6e6e6; padding: 10px 14px; }
.entry iframe { max-width: 100%; border-radius: 12px; }

/* posts listing / archive */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.post-card {
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease;
}
.post-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.post-card__thumb {
  width: 100%;
  height: auto;            /* let aspect-ratio win over the img height attr */
  aspect-ratio: 1 / 1;
  object-fit: contain;     /* whole product visible (photos are tall) */
  background: #faf8f6;
  padding: 20px;
}
.post-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.post-card__excerpt { font-size: 15px; color: var(--muted); margin: 0 0 14px; flex: 1; }
.post-card__more {
  align-self: flex-start;
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
}
.pagination { margin-top: 40px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid #e6e6e6; border-radius: 10px;
  color: var(--text); font-weight: 500;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

.notfound { text-align: center; padding: 90px 0; }
.notfound__code { font-size: 96px; font-weight: 800; color: var(--orange); margin: 0; line-height: 1; }
.notfound__msg { font-size: 22px; color: var(--muted); margin: 14px 0 26px; }

.btn-cta,
.entry .btn-cta,
.entry a.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--orange); color: #fff;
  text-decoration: none;
  font-weight: 600; font-size: 18px;
  padding: 14px 28px; border-radius: 12px;
}

/* ==========================================================================
   Primary button interactions (site-wide): a gentle spring lift + coloured
   shadow on hover and a tactile press on :active. Buttons with an inline
   arrow also nudge it to the right.
   ========================================================================== */
.btn-cta,
.wpcf7 input[type="submit"],
.btn-price,
.newsletter__submit,
.cta-strip .btn-cta,
.modal__submit,
.footer-cta,
.btn-inline,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  transition: transform .16s cubic-bezier(.34, 1.4, .5, 1),
              box-shadow .16s ease,
              filter .16s ease;
  will-change: transform;
}
.btn-cta:hover,
.wpcf7 input[type="submit"]:hover,
.btn-price:hover,
.newsletter__submit:hover,
.cta-strip .btn-cta:hover,
.modal__submit:hover,
.footer-cta:hover,
.btn-inline:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(242, 122, 88, .38);
  filter: brightness(1.02);
}
.btn-cta:active,
.wpcf7 input[type="submit"]:active,
.btn-price:active,
.newsletter__submit:active,
.cta-strip .btn-cta:active,
.modal__submit:active,
.footer-cta:active,
.btn-inline:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 3px 10px rgba(242, 122, 88, .30);
  transition-duration: .06s;
}
.btn-price .arrow,
.btn-inline .arrow { transition: transform .16s ease; }
.btn-price:hover .arrow,
.btn-inline:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .wpcf7 input[type="submit"], .btn-price, .newsletter__submit,
  .cta-strip .btn-cta, .modal__submit, .footer-cta, .btn-inline,
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #respond input#submit,
  .btn-price .arrow, .btn-inline .arrow { transition: none; }
  .btn-cta:hover, .wpcf7 input[type="submit"]:hover, .btn-price:hover,
  .newsletter__submit:hover, .cta-strip .btn-cta:hover,
  .modal__submit:hover, .footer-cta:hover, .btn-inline:hover,
  .woocommerce a.button:hover, .woocommerce button.button:hover,
  .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { transform: none; }
}

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 26px; }
}

/* ==========================================================================
   Content building blocks (used inside page content)
   ========================================================================== */
.quote-banner {
  background: var(--newsletter-bg);
  border: 2px solid var(--orange);
  border-radius: 22px;
  padding: 36px 44px;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 8px 0 36px;
  text-align: center;
}
.quote-banner .star { color: var(--orange); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 24px 0 36px;
}
.info-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.info-card__label {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 8px 20px;
  margin: 0 0 16px;
}
.info-card h3 { margin: 0 0 12px !important; }
.info-card p { color: var(--text); }

.check-list { list-style: none; margin: 14px 0 0 !important; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px !important;
  font-weight: 500;
}
.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0; top: 0;
  color: var(--orange);
  font-weight: 700;
}

/* Опт: category feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 26px 0 40px;
}
.feature-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.feature-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
.feature-card__body { display: block; padding: 20px 24px 26px; flex: 1; }
.feature-card__body h3 { margin: 0 0 10px !important; font-size: 20px !important; }
.feature-card__body p { font-size: 15px; color: var(--muted); margin: 0; }
/* Category-driven tiles on Опт: contained product photo, white bg blended away */
.feature-card .feature-tile {
  display: block;
  background: #faf8f6;
  border-bottom: 1px solid #f1ede9;
  padding: 20px;
}
.feature-card .feature-tile img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin: 0 !important;
  border-radius: 0 !important;
}
.feature-card__count {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--placeholder);
  background: #f3f1ee;
  border-radius: 999px;
  padding: 4px 12px;
}

/* Clickable feature cards (Опт): defeat .entry link styling, add hover lift */
.entry a.feature-card,
a.feature-card {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.entry a.feature-card h3 { color: var(--text); transition: color .12s ease; }
a.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(56,56,55,.12);
}
a.feature-card:hover h3 { color: var(--orange) !important; }

/* CTA strip */
.cta-strip {
  background: var(--newsletter-bg);
  border-radius: 22px;
  text-align: center;
  padding: 44px 30px;
  margin: 40px 0 10px;
}
.cta-strip h3 { margin: 0 0 8px !important; font-size: 26px !important; }
.cta-strip p { color: var(--muted); margin: 0 0 22px; }
.cta-strip .btn-cta { border: none; cursor: pointer; font-family: inherit; font-size: 18px; }

/* Contacts */
/* Contacts: info cards left, form right */
.contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 28px;
  align-items: start;
  margin: 12px 0 20px;
}
.contacts-side { display: flex; flex-direction: column; gap: 22px; }
.contact-card--accent {
  background: var(--newsletter-bg);
  border-color: #f3e4d9;
}
.contact-card--accent p { color: var(--muted); font-size: 15px; }
.contact-card--accent .btn-cta { border: none; cursor: pointer; font-family: inherit; font-size: 15px; padding: 12px 22px; }
.contact-card .btn-cta { text-decoration: none !important; color: #fff !important; }
/* The Contacts form's Turnstile widget is moved here (below the price-list
   card) via main.js, still submitting with its original form via the
   `form` attribute — see the JS for details. */
.contacts-turnstile { display: flex; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 24px 0 40px;
  max-width: 760px;   /* align with .form-card below */
}
.contact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.contact-card h3 { margin: 0 0 14px !important; }
.contact-card a { font-weight: 600; }
.contact-card .tel {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
}
.form-card {
  background: #fff;
  border: 2px solid var(--orange);
  border-radius: 22px;
  padding: 36px 40px;
  max-width: 760px;
}
.contacts-layout .form-card { max-width: none; }
.form-card h2 { margin-top: 0 !important; }

/* Contact cards feel alive on hover (same lift language as the catalog cards). */
.contact-card { transition: transform .2s ease, box-shadow .2s ease; }
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .08); }

/* The Cloudflare Turnstile widget renders first in the CF7 form markup. Lay the
   form out as a wrapping flex row: every field is its own full-width line, and
   the submit button (left) + Turnstile (right) share the final line. */
.form-card .wpcf7-form,
.modal__form .wpcf7-form,
.newsletter__form .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
}
/* Slightly smaller submit so it + the 300px Turnstile fit one row. */
.modal__form .wpcf7-form input[type="submit"],
.newsletter__form .wpcf7-form input[type="submit"] { padding: 13px 30px; }
.form-card .wpcf7-form > *,
.modal__form .wpcf7-form > *,
.newsletter__form .wpcf7-form > * { flex-basis: 100%; }
/* CF7 wraps the submit in a <p>; order the paragraph (not the input). The
   Contacts form's Turnstile widget is relocated out of this form entirely
   (see main.js) to sit under the price-list card, so its submit gets its
   own centred row instead of sharing one with Turnstile. */
.form-card .wpcf7-form p:has(input[type="submit"]) { flex-basis: 100%; margin: 0; text-align: center; }
.modal__form .wpcf7-form p:has(input[type="submit"]),
.newsletter__form .wpcf7-form p:has(input[type="submit"]) { flex-basis: auto; order: 8; margin: 0; }
.modal__form .wpcf7-form .wpcf7-turnstile,
.newsletter__form .wpcf7-form .wpcf7-turnstile { flex-basis: auto; order: 9; margin: 0; }
.form-card .wpcf7-form input[type="submit"],
.modal__form .wpcf7-form input[type="submit"],
.newsletter__form .wpcf7-form input[type="submit"] { margin-top: 0; }
/* CF7's invisible spinner adds ~70px to the submit <p>, which pushes the 300px
   Turnstile onto its own line. Drop it — the paw pill already confirms submit —
   so the button collapses to its text width and the widget fits to its right. */
.form-card .wpcf7-form .wpcf7-spinner,
.modal__form .wpcf7-form .wpcf7-spinner { display: none; }
/* Result pill wraps onto its own line below and stays centred. */
.form-card .wpcf7-form .wpcf7-response-output,
.modal__form .wpcf7-form .wpcf7-response-output,
.newsletter__form .wpcf7-form .wpcf7-response-output { flex-basis: auto; order: 10; }

/* Newsletter is a centred banner form (per design), not a left card — override
   the row layout: full-width fields, Turnstile + submit centred and stacked. */
.newsletter__form .wpcf7-form {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0;
}
.newsletter__form .wpcf7-form > * { flex-basis: auto; width: 100%; }
.newsletter__form .wpcf7-form .wpcf7-turnstile { order: 8; width: auto; margin: 8px 0 4px; }
.newsletter__form .wpcf7-form p:has(input[type="submit"]) { order: 9; text-align: center; }
.newsletter__form .wpcf7-form input[type="submit"] { padding: 14px 44px; }
/* CF7's inline spinner sits after the button and skews the centring — drop it
   (the paw-pill already confirms the submit). */
.newsletter__form .wpcf7-form .wpcf7-spinner { display: none; }
.newsletter__form .wpcf7-form .wpcf7-response-output { order: 10; }

/* Privacy link inside a CF7 acceptance checkbox — same accent as elsewhere. */
.wpcf7-acceptance a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.wpcf7-acceptance a:hover { color: var(--ink); }

@media (max-width: 1000px) {
  .info-grid, .feature-grid, .contact-grid, .contacts-layout { grid-template-columns: 1fr; }
  .quote-banner { font-size: 20px; padding: 26px 22px; }
  .form-card { padding: 26px 20px; }
}

/* ==========================================================================
   WooCommerce (shop / category / product) — themed to the GOOD design
   ========================================================================== */
/* NOTE: `woocommerce-page` is a BODY class — an `inherit` here would pull the
   UA default (Times) from <html>. State the font stack explicitly instead. */
.woocommerce, .woocommerce-page {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Shop layout: category sidebar + main grid ---- */
.shop-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.shop-widget { margin-bottom: 30px; }
.shop-widget h3 {
  margin: 0 0 14px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--placeholder);
}
/* Collapsible widgets (Категории / Бренд): plain headings on desktop; the
   chevron and accordion behaviour only kick in on mobile (media query below). */
.shop-widget__toggle { display: flex; align-items: center; justify-content: space-between; }
.shop-widget__chevron {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.shop-search { padding: 0 12px; }
.shop-search input {
  width: 100%;
  border: 1.5px solid #e8e4e0;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition: border-color .15s ease;
}
.shop-search input:focus { outline: none; border-color: var(--orange); }
.shop-cats, .shop-cats ul { list-style: none; margin: 0; padding: 0; }
.shop-cats > li { margin: 0 0 2px; }
.shop-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
.shop-cats a:hover { background: var(--newsletter-bg); color: var(--orange); }
.shop-cats .cnt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--placeholder);
  background: #f3f1ee;
  border-radius: 999px;
  padding: 3px 9px;
  transition: background .12s ease, color .12s ease;
}
.shop-cats li.is-current > a {
  background: var(--newsletter-bg);
  color: var(--orange);
  font-weight: 700;
}
.shop-cats li.is-current > a .cnt { background: var(--orange); color: #fff; }
.shop-cats ul {
  margin: 2px 0 8px 14px;
  padding-left: 8px;
  border-left: 2px solid #f3ede8;
}
.shop-cats ul a { font-size: 13px; padding: 7px 10px; }

/* ---- Sidebar attribute filters (Бренд, …) — checkbox-style toggle list ---- */
.shop-filter { list-style: none; margin: 0; padding: 0; }
.shop-filter > li { margin: 0 0 2px; }
.shop-filter a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
.shop-filter a:hover { background: var(--newsletter-bg); color: var(--orange); }
.shop-filter__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8cfc4;
  border-radius: 5px;
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.shop-filter a:hover .shop-filter__check { border-color: var(--orange); }
.shop-filter__name { flex: 1 1 auto; }
.shop-filter .cnt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--placeholder);
  background: #f3f1ee;
  border-radius: 999px;
  padding: 3px 9px;
}
.shop-filter li.is-active a { color: var(--text); font-weight: 600; }
.shop-filter li.is-active .shop-filter__check {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--orange);
}
.shop-filter__reset {
  display: inline-block;
  margin: 8px 0 0 12px;
  font-size: 13px;
  color: var(--placeholder);
  text-decoration: none;
}
.shop-filter__reset:hover { color: var(--orange); }

/* ---- Uniform product card grid (replaces Woo float layout) ---- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  margin: 0 0 8px !important;
}
/* Woo's clearfix pseudo-elements would become grid items (empty first cell) */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; }
.shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;               /* anchor for the full-card click overlay */
  background: transparent;
  border: none;
  text-align: left;
}
/* Whole card is clickable (stretched product link) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  z-index: 1;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: static;
}
/* Image tile: the wrapper carries the background; the image blends into it
   with multiply, so photos with baked-in white backgrounds lose the white box. */
.loop-tile {
  position: relative;   /* anchors the audience badge so it moves with the tile */
  z-index: 2;           /* above the stretched card-link ::before (z1) so the
                           variant arrows inside stay clickable — the :hover
                           transform makes this tile its own stacking context */
  display: block;
  background: #faf8f6;
  border: 1px solid #f1ede9;
  border-radius: 18px;
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover .loop-tile {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(56,56,55,.10);
}
.woocommerce ul.products li.product .loop-tile img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 !important;
  mix-blend-mode: multiply;
}
/* Audience badge (pulled from the «Для кого» attribute) — overlaid inside the
   tile so cards without an audience (e.g. bowls) still align, and it lifts as
   one element with the tile on hover (no separate transition to desync). */
.woocommerce ul.products li.product .loop-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;
}
/* Brand (left) + volume (right) on one row, above the title. */
.woocommerce ul.products li.product .loop-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px 0;
}
.woocommerce ul.products li.product .loop-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--placeholder);
}
.woocommerce ul.products li.product .loop-vol {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text);
  padding: 6px 4px 2px;
  flex: 1;
  transition: color .12s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--orange); }
.woocommerce ul.products li.product .price {
  color: var(--text); font-weight: 700; font-size: 16px; padding: 0 4px;
}
.woocommerce ul.products li.product .price del { color: var(--placeholder); font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* Quiet text link instead of a pill button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  margin: 6px 4px 2px;
  padding: 0;
  align-self: flex-start;
  background: none;
  border-radius: 0;
  color: var(--orange);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 2;                        /* stays clickable above the overlay */
}
.woocommerce ul.products li.product .button::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform .15s ease;
}
.woocommerce ul.products li.product:hover .button::after { transform: translateX(4px); }
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: none; color: var(--orange); filter: none;
}

/* ---- Toolbar: result count + ordering ---- */
.woocommerce .woocommerce-result-count {
  font-size: 14px;
  color: var(--placeholder);
  margin: 8px 0 20px;
}
.woocommerce .woocommerce-ordering { margin: 0 0 20px; }
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #e2e2e2;
  border-radius: 10px;
  padding: 10px 38px 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23606060' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus { outline: none; border-color: var(--orange); }

/* buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce .widget_price_filter .price_slider_amount .button {
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 15px;
}

/* ---- Pagination (WooCommerce) ---- */
.woocommerce nav.woocommerce-pagination {
  margin: 52px 0 12px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  overflow: visible;
  float: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid #e8e4e0;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff;
}

/* single product */
.woocommerce div.product .product_title { font-size: 30px; font-weight: 700; color: var(--text); }
/* gallery on a soft tile; multiply removes baked-in white photo backgrounds.
   The image is capped and centered so tall product photos (e.g. 757×2560
   bottles) don't blow the gallery out to full page height. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  background: #faf8f6;
  border: 1px solid #f1ede9;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  width: auto !important;
  max-width: 100%;
  margin: 0 auto;
}
.woocommerce div.product div.images img {
  mix-blend-mode: multiply;
  width: auto !important;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  display: block;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--orange); font-weight: 700; font-size: 26px; }
.woocommerce .woocommerce-tabs ul.tabs li.active { border-bottom-color: #fff; }
.woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--orange); }
.woocommerce span.onsale {
  background: var(--orange);
  border-radius: 999px;
  min-height: auto; min-width: auto;
  padding: 6px 14px; line-height: 1;
}

/* Variation picker (e.g. bowl colour). Rows stack (label above options) like
   a modern shop. JS replaces the <select> with one-click swatch buttons
   (.gk-swatches); the styled select below is the no-JS fallback. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  display: block; width: auto; border: 0; padding: 0;
}
.woocommerce div.product form.cart table.variations tr { margin-bottom: 18px; }
.woocommerce div.product form.cart table.variations th.label label {
  margin: 0 0 10px; font-weight: 600; color: var(--text);
}
.woocommerce div.product form.cart table.variations td.value { position: relative; }
.woocommerce div.product form.cart .variations select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 260px;
  max-width: 100%;
  padding: 13px 44px 13px 16px;
  border: 1px solid #eadfd3;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce div.product form.cart .variations select:hover { border-color: #d8c7b3; }
.woocommerce div.product form.cart .variations select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 122, 88, .15);
}
/* A colour is always pre-selected (default variation), so the reset link is
   redundant — hide it. */
.woocommerce div.product form.cart .reset_variations { display: none !important; }

/* One-click swatches (JS-built) */
.gk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.gk-swatch {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  padding: 10px 18px;
  border: 1.5px solid #eadfd3;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gk-swatch:hover { border-color: #d8c7b3; }
.gk-swatch.is-active {
  border-color: var(--orange);
  background: #fff5f1;
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.gk-swatch--img {
  width: 60px;
  height: 84px;               /* portrait box — fits tall bottle photos without cropping */
  padding: 6px 4px;
  border-radius: 12px;
  overflow: hidden;
}
.gk-swatch--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* whole product visible — no crop */
  mix-blend-mode: multiply;
  display: block;
}
.gk-swatch--img.is-active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--orange);
}
/* Native select hidden once swatches are built (kept for WooCommerce JS). */
.gk-swatched-select {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  opacity: 0; pointer-events: none;
}

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--orange);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--orange); }

/* result count / ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--muted); }

/* breadcrumb (hide — we render our own hero crumbs) */
.woocommerce .woocommerce-breadcrumb { display: none; }

@media (max-width: 1000px) {
  .woocommerce div.product .product_title { font-size: 24px; }
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 22px; }
  .shop-layout { grid-template-columns: 1fr; gap: 18px; }
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Collapse Категории / Бренд into tap-to-open accordions to save space.
     Gated on .js-accordion (added by main.js) so without JS the widgets stay
     fully expanded and reachable instead of being stuck closed. */
  .shop-widget--collapsible.js-accordion { margin-bottom: 12px; }
  .shop-widget--collapsible.js-accordion .shop-widget__toggle {
    margin: 0;
    padding: 13px 16px;
    background: #faf8f6;
    border: 1px solid #f1ede9;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: border-radius .05s ease;
  }
  .shop-widget--collapsible.js-accordion.is-open .shop-widget__toggle { border-radius: 12px 12px 0 0; }
  .shop-widget--collapsible.js-accordion .shop-widget__chevron { display: block; }
  .shop-widget--collapsible.js-accordion.is-open .shop-widget__chevron { transform: translateY(1px) rotate(225deg); }
  .shop-widget--collapsible.js-accordion .shop-widget__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border: 1px solid #f1ede9;
    border-top: 0;
    border-radius: 0 0 12px 12px;
  }
  .shop-widget--collapsible.js-accordion:not(.is-open) .shop-widget__body { border-color: transparent; }
  .shop-widget--collapsible.js-accordion .shop-widget__inner { padding: 12px 6px 6px; }
}

/* ==========================================================================
   Contact Form 7 — themed inputs/buttons
   ========================================================================== */
.wpcf7 { margin-top: 8px; }
/* CF7 wraps each field in a <p> (wpautop); control the gap between fields here
   so forms aren't sprawling. */
.wpcf7-form p { margin: 0 0 10px; }
.wpcf7 label { display: block; font-weight: 500; color: var(--muted); margin-bottom: 0; font-size: 16px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  margin-top: 6px;
}
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--placeholder); }
.wpcf7 input[type="submit"] {
  width: auto;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  padding: 14px 40px;
  cursor: pointer;
  margin-top: 8px;
}
/* Every CF7 checkbox (consent «acceptance» + «checkbox» tags) — custom box with
   the brand check icon. The «acceptance» tag wraps input+text in a <label>, the
   «checkbox» tag doesn't — so the flex row targets whichever element directly
   holds the box + text. */
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7-acceptance .wpcf7-list-item > label,
.wpcf7-checkbox .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}
.wpcf7 input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid var(--orange);
  border-radius: 6px;
  background: #fff no-repeat center / 18px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.wpcf7 input[type="checkbox"]:checked {
  background-image: url(assets/home/newsletter-check-icon.svg);
}
.wpcf7 .wpcf7-list-item-label { cursor: pointer; }
/* Contact Form 7 result message — same on-brand paw pill as the modal toast
   (reuses the gk-note-pop / gk-paw-wag keyframes below). */
.wpcf7 .wpcf7-response-output {
  margin: 20px auto 0;
}
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
  display: flex;
  align-items: center;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;   /* auto centres it (beats CF7's `form .output` margin) */
  padding: 11px 22px 11px 16px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  animation: gk-note-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.wpcf7-form .wpcf7-response-output::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.wpcf7-form.sent .wpcf7-response-output {
  color: var(--orange);
  background: var(--newsletter-bg);
  box-shadow: 0 10px 26px rgba(242, 122, 88, .22);
}
.wpcf7-form.sent .wpcf7-response-output::before {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f27a58'><ellipse cx='8.4' cy='6.6' rx='2.3' ry='3' transform='rotate(-14 8.4 6.6)'/><ellipse cx='15.6' cy='6.6' rx='2.3' ry='3' transform='rotate(14 15.6 6.6)'/><ellipse cx='3.9' cy='11.6' rx='2' ry='2.6' transform='rotate(-32 3.9 11.6)'/><ellipse cx='20.1' cy='11.6' rx='2' ry='2.6' transform='rotate(32 20.1 11.6)'/><path d='M12 10.6c-2.7 0-5.1 1.8-6.2 4.3-.6 1.4-.4 2.9.6 4 .9 1.1 2.4 1.6 3.8 1.3.6-.1 1.2-.2 1.8-.2s1.2.1 1.8.2c1.4.3 2.9-.2 3.8-1.3 1-1.1 1.2-2.6.6-4-1.1-2.5-3.5-4.3-6.2-4.3z'/></svg>") no-repeat center / contain;
  transform-origin: 60% 85%;
  animation: gk-paw-wag .55s ease .3s 2;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  color: #c1543b;
  background: #fdece7;
  box-shadow: 0 10px 26px rgba(193, 84, 59, .18);
}
.wpcf7-form.invalid .wpcf7-response-output::before,
.wpcf7-form.unaccepted .wpcf7-response-output::before,
.wpcf7-form.spam .wpcf7-response-output::before,
.wpcf7-form.failed .wpcf7-response-output::before,
.wpcf7-form.aborted .wpcf7-response-output::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c1543b;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}
.wpcf7-not-valid-tip { color: #c1543b; font-size: 14px; }
span.wpcf7-form-control-wrap { display: block; }

/* ==========================================================================
   Footer — warm palette, link columns, feedback CTA
   ========================================================================== */
.site-footer {
  background: var(--newsletter-bg);
  border-top: 1px solid #f3e4d9;
  color: var(--text);
  padding: 54px 0 0;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-bottom: 42px;
}
/* .woocommerce-page guard: WooCommerce's `.woocommerce-page img { height:auto }`
   otherwise outweighs this and blows the SVG up to container width. */
.footer-logo,
.woocommerce-page .footer-logo { height: 56px; width: auto; margin-bottom: 16px; }
.footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 340px;
}
.footer-col h4 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--placeholder);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: var(--muted);
  font-weight: 500;
  transition: color .12s ease;
}
.footer-links a:hover { color: var(--orange); }
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 12px;
}
.footer-bottom {
  border-top: 1px solid #f3e4d9;
  padding: 18px 0;
  text-align: center;
}
.footer-bottom p { margin: 0; color: var(--placeholder); font-size: 13px; }
.footer-bottom a { color: var(--placeholder); font-weight: 400; text-decoration: none; }
.footer-bottom a:hover { color: var(--orange); }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
  /* Centre the whole footer on mobile. */
  .footer-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   Price modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20,20,20,.45);
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__box {
  position: relative;
  background: #fff;
  border-radius: 28px;
  width: 100%;
  max-width: 660px;
  padding: 44px 56px 40px;
  overflow: hidden;
}
.modal__close {
  position: absolute;
  top: 22px; right: 22px;
  width: 46px; height: 46px;
  background: none; border: none; cursor: pointer;
  z-index: 3;
}
.modal__title {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 24px;          /* Bold 24 */
  font-weight: 700;
  color: var(--orange);
  line-height: 1.25;
  margin: 0 0 26px;
}
.modal__title .stars { display: inline-flex; align-items: center; gap: 12px; }
.modal__title img { width: 26px; height: 26px; vertical-align: middle; }
.modal__form { position: relative; z-index: 2; }
.modal__form label {
  display: block;
  font-size: 16px;          /* Medium 16 */
  font-weight: 500;
  color: var(--muted);
  margin: 14px 0 8px;
}
.modal__form input,
.modal__form textarea {
  width: 100%;
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  resize: vertical;
}
.modal__form input::placeholder,
.modal__form textarea::placeholder { color: rgba(96,96,96,.4); } /* 60% of #606060 */
.modal__submit {
  display: block;
  margin: 26px auto 0;
  background: var(--orange);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border: none; cursor: pointer;
  font-family: inherit;
  padding: 15px 46px;
  border-radius: 12px;
}
/* Submit result message (built by main.js): an on-brand peach pill with the
   GOOD paw that springs in and wags — no out-of-place green, no boredom. */
.form-note {
  position: relative;
  z-index: 3;
  display: flex;                    /* block-level so margin:auto can centre it */
  align-items: center;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 11px 22px 11px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  transform-origin: center bottom;
  animation: gk-note-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.form-note.is-success {
  color: var(--orange);
  background: var(--newsletter-bg);
  box-shadow: 0 10px 26px rgba(242, 122, 88, .22);
}
.form-note.is-error {
  color: #c1543b;
  background: #fdece7;
  box-shadow: 0 10px 26px rgba(193, 84, 59, .18);
}
.form-note__paw {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: currentColor;
  transform-origin: 60% 85%;
  animation: gk-paw-wag .55s ease .3s 2;
}
.form-note__paw--warn {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #c1543b;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  animation: none;
}

@keyframes gk-note-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.6); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes gk-paw-wag {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-18deg); }
  65%      { transform: rotate(12deg); }
  85%      { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .form-note, .form-note__paw { animation: none; }
}

/* ==========================================================================
   Turnstile dog-walk — a solved VISIBLE Cloudflare challenge grows legs and
   trots off the right edge of the screen (main.js gkTurnstileDone). The
   widget div itself is the dog's body: it stays in the form (its hidden
   input carries the token) and exits via translate only. `rotate` is used
   for the waddle because it animates independently of the translate walk
   (individual transform properties don't clobber each other).
   ========================================================================== */
.gk-ts-dog {
  will-change: translate;
  background: #fff;                 /* body panel — survives even if Cloudflare
                                       collapses its iframe mid-walk */
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(9, 48, 70, .16);
}
.gk-ts-walking { animation: gk-dog-waddle .34s ease-in-out infinite; }
@keyframes gk-dog-waddle {
  0%, 100% { rotate: -1.2deg; }
  50%      { rotate: 1.2deg; }
}
.gk-ts-legs i {
  position: absolute;
  bottom: -13px;
  width: 9px;
  height: 16px;
  background: var(--orange);
  border-radius: 0 0 5px 5px;
  transform-origin: top center;
  animation: gk-leg-pop .25s cubic-bezier(.34, 1.56, .64, 1) both;
}
.gk-ts-legs i:nth-child(1) { left: 12%; }
.gk-ts-legs i:nth-child(2) { left: 30%; }
.gk-ts-legs i:nth-child(3) { left: 62%; }
.gk-ts-legs i:nth-child(4) { left: 80%; }
.gk-ts-walking .gk-ts-legs i { animation: gk-leg-swing .22s ease-in-out infinite; }
.gk-ts-walking .gk-ts-legs i:nth-child(2n) { animation-delay: -.11s; }
@keyframes gk-leg-pop {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes gk-leg-swing {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(20deg); }
}
/* Walks rightward, so the tail trails off the left edge and wags. */
.gk-ts-tail {
  position: absolute;
  left: -13px;
  top: 42%;
  width: 15px;
  height: 6px;
  background: var(--orange);
  border-radius: 4px;
  transform-origin: right center;
  animation: gk-tail-wag .2s ease-in-out infinite;
}
@keyframes gk-tail-wag {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-10deg); }
}
.gk-ts-print {
  position: fixed;
  z-index: 1199;                    /* just under the dog */
  width: 15px;
  height: 15px;
  color: var(--orange);
  pointer-events: none;
  animation: gk-print-fade 1.1s ease-out forwards;
}
.gk-ts-print svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes gk-print-fade {
  0%   { opacity: 0; }
  15%  { opacity: .5; }
  100% { opacity: 0; }
}
.gk-ts-placeholder {
  display: block;
  overflow: hidden;
  transition: height .35s ease, margin .35s ease;
}
.gk-ts-placeholder.is-collapsed { height: 0 !important; margin: 0 !important; }
.gk-ts-return { animation: gk-note-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
/* JS already skips the walk under reduced motion; this is the belt to that
   suspender in case the classes ever land anyway. */
@media (prefers-reduced-motion: reduce) {
  .gk-ts-dog, .gk-ts-walking, .gk-ts-legs i, .gk-ts-tail, .gk-ts-print,
  .gk-ts-return { animation: none !important; transition: none !important; }
}

/* Mobile-only banner elements — hidden by default (desktop).
   Declared BEFORE the media query so the @media display:block wins on mobile. */
.hero__mobile-banner,
.company__mobile-banner { display: none; }

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

  .mainhead__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand search"
      "nav   nav";
    gap: 16px 18px;
  }
  .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; }
  .nav { grid-area: nav; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .nav a { font-size: 16px; }

  /* 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__box { padding: 40px 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; }
}