/* ==========================================================================
   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: 16px;
}

/* ==========================================================================
   Primary button interactions (site-wide): a warm ambient glow at rest that
   blooms into a soft ring on hover, plus a tactile press on :active (below).
   Buttons with an inline arrow also nudge it to the right.
   The rest-state glow is scoped to the marketing/lead CTAs only — WooCommerce's
   own buttons keep it hover-only, because ul.products li.product a.button is
   overridden to a quiet background:none text link further down the cascade
   (woocommerce.css) and a permanent shadow around invisible-background text
   would read as a stray box, not a glow.
   ========================================================================== */
.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 .25s ease;
  will-change: transform;
}
.btn-cta,
.btn-price,
.newsletter__submit,
.cta-strip .btn-cta,
.modal__submit,
.footer-cta,
.btn-inline,
.wpcf7 input[type="submit"] {
  box-shadow: 0 6px 22px rgba(242, 122, 88, .26);
}
.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);
  /* soft blurred bloom (0 offset, real blur) — NOT a 0-blur spread ring,
     which renders as a hard-edged rectangle around the button */
  box-shadow: 0 12px 34px rgba(242, 122, 88, .42), 0 0 22px rgba(242, 122, 88, .30);
}
.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: repeat(2, minmax(0, 1fr)); }
  .page-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   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; }
.newsletter__form .wpcf7-form p:has(input[type="submit"]) { flex-basis: auto; order: 8; margin: 0; }
.newsletter__form .wpcf7-form .wpcf7-turnstile { flex-basis: auto; order: 9; margin: 0; }
/* Modal: submit and Turnstile each get their own centred row, with clear space
   between the button and the widget. (They used to share one row, which wrapped
   tight and left the button off-centre on the narrow modal.) The widget walks
   off once solved, but this keeps it tidy until then. */
.modal__form .wpcf7-form p:has(input[type="submit"]) {
  flex-basis: 100%;
  order: 8;
  margin: 8px 0 0;
  display: flex;
  justify-content: center;
}
.modal__form .wpcf7-form .wpcf7-turnstile {
  flex-basis: 100%;
  order: 9;
  margin: 24px auto 0;
  display: flex;
  justify-content: center;
}
.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; }
}