/* ZooMag r109.2 — Native Editorial Style
   Scope: only r109/r109.1 article content. Commerce/header/catalog are untouched. */

/* --------------------------------------------------------------------------
   1. Break the legacy narrow article column on desktop.
   -------------------------------------------------------------------------- */
body:has(.zm-r109-article) #content,
body:has(.zm-r109-article) #content > .container,
body:has(.zm-r109-article) #content .container:has(.zm-r109-article),
body:has(.zm-r109-article) .zoo-article-dark-container:has(.zm-r109-article),
body:has(.zm-r109-article) .zoo-blog-article:has(.zm-r109-article),
body:has(.zm-r109-article) .article-content:has(.zm-r109-article),
body:has(.zm-r109-article) .article-description:has(.zm-r109-article),
body:has(.zm-r109-article) .article-body:has(.zm-r109-article) {
  width: min(1480px, calc(100vw - 56px)) !important;
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(.zm-r109-article) #content .row:has(.zm-r109-article) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:has(.zm-r109-article) #content [class*="col-"]:has(.zm-r109-article) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

body .zoo-article-dark-container:has(.zm-r109-article),
body .zoo-blog-article:has(.zm-r109-article) {
  padding-left: clamp(18px, 3vw, 46px) !important;
  padding-right: clamp(18px, 3vw, 46px) !important;
}

/* --------------------------------------------------------------------------
   2. Editorial typography.
   -------------------------------------------------------------------------- */
.zm-r109-article {
  --g: #128753;
  --gd: #0b6840;
  --ink: #17352b;
  --mut: #586a63;
  --line: #dce9e2;
  --paper: #ffffff;
  --soft: #f5faf7;
  --cream: #fff9ef;

  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(20px, 1.12vw, 22px);
  line-height: 1.82;
  letter-spacing: .001em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.zm-r109-article * { box-sizing: border-box; }

.zm-r109-article > p,
.zm-r109-article > section:not(.zm-r109-products):not(.zm-r109-take):not(.zm-r109-faq),
.zm-r109-article > .zm-r109-note,
.zm-r109-shop-inline {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.zm-r109-article p {
  margin: 0 0 20px;
  color: #304c41;
}

.zm-r109-article strong { color: #163d2e; }

.zm-r109-article .zm-r109-lead {
  max-width: 1080px !important;
  margin: 6px auto 42px !important;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 40px);
  border: 1px solid #cfe7d9;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,190,111,.18), transparent 28%),
    linear-gradient(135deg, #eef9f3, #fffaf1);
  box-shadow: 0 16px 42px rgba(28, 78, 57, .07);
  color: #274a3d;
  font-size: 1.13em;
  line-height: 1.72;
  font-weight: 520;
}

.zm-r109-article > section:not(.zm-r109-products):not(.zm-r109-take):not(.zm-r109-faq) {
  margin-top: 42px;
  margin-bottom: 42px;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3.3vw, 40px);
  border: 1px solid #e1ece6;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
  box-shadow: 0 9px 28px rgba(35, 76, 59, .045);
}

.zm-r109-article h2 {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 19px;
  color: #123b2b;
  font-size: clamp(31px, 2.35vw, 43px);
  line-height: 1.16;
  letter-spacing: -.024em;
  font-weight: 820;
}

.zm-r109-article h2::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 1.12em;
  margin-top: .08em;
  border-radius: 999px;
  background: linear-gradient(180deg, #15975d, #f2a04c);
}

.zm-r109-article h3 {
  margin: 29px 0 12px;
  color: #1c4938;
  font-size: clamp(24px, 1.7vw, 30px);
  line-height: 1.26;
  letter-spacing: -.012em;
  font-weight: 780;
}

.zm-r109-article ul,
.zm-r109-article ol {
  margin: 16px 0 24px;
  padding-left: 1.35em;
}

.zm-r109-article li {
  margin: 11px 0;
  padding-left: .18em;
  color: #304c41;
}

.zm-r109-article li::marker {
  color: var(--g);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   3. Images: wider than the text column, but still a part of the story.
   -------------------------------------------------------------------------- */
.zm-r109-figure {
  width: 100%;
  max-width: 1240px;
  margin: 36px auto 50px;
}

.zm-r109-figure picture,
.zm-r109-figure img { display: block; width: 100%; }

.zm-r109-figure img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #dde7e2;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(24, 53, 42, .13);
}

.zm-r109-figure figcaption {
  margin: 11px 6px 0;
  color: #6a7972;
  font-size: 16px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Useful editorial blocks.
   -------------------------------------------------------------------------- */
.zm-r109-take {
  max-width: 1040px !important;
  margin-top: 44px !important;
  margin-bottom: 44px !important;
  padding: 27px 30px;
  border: 1px solid #cde7d8;
  border-radius: 22px;
  background: linear-gradient(135deg, #eaf8f1, #f8fcfa);
  box-shadow: 0 9px 26px rgba(29, 91, 63, .055);
}

.zm-r109-take strong {
  display: block;
  margin-bottom: 11px;
  color: #103c2b;
  font-size: 23px;
  line-height: 1.3;
}

.zm-r109-note {
  margin-top: 34px !important;
  margin-bottom: 38px !important;
  padding: 21px 24px;
  border-left: 5px solid #e28a35;
  border-radius: 0 17px 17px 0;
  background: #fff6e8;
  color: #604a36;
  font-size: .94em;
}

.zm-r109-faq {
  max-width: 1040px !important;
  margin-top: 46px !important;
  margin-bottom: 46px !important;
}

.zm-r109-faq details {
  margin: 12px 0;
  padding: 18px 21px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30, 63, 50, .035);
}

.zm-r109-faq summary {
  cursor: pointer;
  color: #1b4233;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 800;
}

.zm-r109-faq details p {
  margin: 0;
  padding-top: 13px;
  color: #435d53;
}

/* --------------------------------------------------------------------------
   5. Native mid-article shop suggestion.
   -------------------------------------------------------------------------- */
.zm-r109-shop-inline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  margin-top: 34px;
  margin-bottom: 46px;
  padding: 24px 25px 24px 29px;
  overflow: hidden;
  border: 1px solid #cde6d8;
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 10%, rgba(247,171,84,.15), transparent 34%),
    linear-gradient(135deg, #f0faf5, #fffaf2);
  box-shadow: 0 11px 30px rgba(22, 82, 57, .07);
}

.zm-r109-shop-inline::before {
  content: "🐾";
  position: absolute;
  right: 18px;
  bottom: -28px;
  font-size: 92px;
  line-height: 1;
  opacity: .045;
  transform: rotate(-12deg);
  pointer-events: none;
}

.zm-r109-shop-inline__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.zm-r109-shop-inline__eyebrow,
.zm-r109-products__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #14764b;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zm-r109-shop-inline__eyebrow::before,
.zm-r109-products__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #17a663;
  box-shadow: 0 0 0 4px rgba(23,166,99,.10);
}

.zm-r109-shop-inline strong {
  display: block;
  max-width: 760px;
  margin: 0;
  color: #173d2f;
  font-size: clamp(22px, 1.55vw, 27px);
  line-height: 1.28;
  letter-spacing: -.012em;
  font-weight: 840;
}

.zm-r109-shop-inline small {
  display: block;
  max-width: 760px;
  margin-top: 7px;
  color: #60736a;
  font-size: 16px;
  line-height: 1.55;
}

.zm-r109-shop-inline > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: 190px;
  padding: 12px 19px;
  border: 1px solid #0f7a49;
  border-radius: 14px;
  background: linear-gradient(180deg, #15945a, #0e7e4d);
  color: #fff !important;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 850;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(15, 122, 73, .18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.zm-r109-shop-inline > a:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 11px 24px rgba(15, 122, 73, .23);
}

/* --------------------------------------------------------------------------
   6. Final product block: no dark unreadable tag cloud.
   -------------------------------------------------------------------------- */
.zm-r109-products {
  position: relative;
  max-width: 1160px !important;
  margin: 54px auto 12px !important;
  padding: clamp(27px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid #cfe7da;
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0, rgba(241,159,73,.17), transparent 32%),
    linear-gradient(135deg, #eff9f3, #fff9ef);
  color: var(--ink);
  box-shadow: 0 17px 42px rgba(24, 75, 54, .09);
}

.zm-r109-products::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -72px;
  bottom: -82px;
  border-radius: 50%;
  background: rgba(19,134,82,.055);
  pointer-events: none;
}

.zm-r109-products h2 {
  max-width: 820px;
  margin: 0 0 10px !important;
  color: #153d2f !important;
  font-size: clamp(30px, 2.35vw, 42px) !important;
}

.zm-r109-products__intro {
  max-width: 820px;
  margin: 0 0 24px !important;
  color: #566d63 !important;
  font-size: 18px;
  line-height: 1.62;
}

.zm-r109-links {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px !important;
}

.zm-r109-links a {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 15px 17px !important;
  border: 1px solid #d8e8df !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.94) !important;
  color: #164a36 !important;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 820 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(25, 64, 48, .055);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.zm-r109-links a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #18a15f;
  box-shadow: 0 0 0 5px rgba(24,161,95,.10);
}

.zm-r109-links a::after {
  content: "→";
  color: #11804d;
  font-size: 22px;
  line-height: 1;
}

.zm-r109-links a:hover {
  transform: translateY(-2px);
  border-color: #aad7bf !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(25, 64, 48, .09);
}

/* --------------------------------------------------------------------------
   7. Blog cards: stronger excerpt readability.
   -------------------------------------------------------------------------- */
.zm-blog-r103-card p,
.zm-blog-card p,
.blog-card p,
.article-card p {
  color: #5c6e66 !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

.zm-blog-r103-card h2,
.zm-blog-r103-card h3,
.zm-blog-card h2,
.zm-blog-card h3,
.blog-card h2,
.blog-card h3,
.article-card h2,
.article-card h3 {
  line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   8. Responsive.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body:has(.zm-r109-article) #content,
  body:has(.zm-r109-article) #content > .container,
  body:has(.zm-r109-article) #content .container:has(.zm-r109-article),
  body .zoo-article-dark-container:has(.zm-r109-article),
  body .zoo-blog-article:has(.zm-r109-article),
  body .article-content:has(.zm-r109-article),
  body .article-description:has(.zm-r109-article),
  body .article-body:has(.zm-r109-article) {
    width: calc(100vw - 32px) !important;
  }

  .zm-r109-article {
    font-size: 19px;
    line-height: 1.76;
  }

  .zm-r109-article > p,
  .zm-r109-article > section:not(.zm-r109-products):not(.zm-r109-take):not(.zm-r109-faq),
  .zm-r109-article > .zm-r109-note,
  .zm-r109-shop-inline { max-width: 100%; }

  .zm-r109-figure { max-width: 100%; }
}

@media (max-width: 760px) {
  body:has(.zm-r109-article) #content,
  body:has(.zm-r109-article) #content > .container,
  body:has(.zm-r109-article) #content .container:has(.zm-r109-article),
  body .zoo-article-dark-container:has(.zm-r109-article),
  body .zoo-blog-article:has(.zm-r109-article),
  body .article-content:has(.zm-r109-article),
  body .article-description:has(.zm-r109-article),
  body .article-body:has(.zm-r109-article) {
    width: calc(100vw - 20px) !important;
  }

  body .zoo-article-dark-container:has(.zm-r109-article),
  body .zoo-blog-article:has(.zm-r109-article) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .zm-r109-article {
    font-size: 18px;
    line-height: 1.7;
  }

  .zm-r109-article .zm-r109-lead {
    padding: 20px 18px;
    margin-bottom: 28px !important;
    border-radius: 18px;
  }

  .zm-r109-article > section:not(.zm-r109-products):not(.zm-r109-take):not(.zm-r109-faq) {
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 21px 17px;
    border-radius: 18px;
  }

  .zm-r109-article h2 {
    gap: 10px;
    font-size: clamp(27px, 7vw, 33px);
  }

  .zm-r109-article h3 { font-size: 23px; }

  .zm-r109-figure {
    margin: 23px 0 31px;
  }

  .zm-r109-figure img { border-radius: 16px; }
  .zm-r109-figure figcaption { font-size: 14px; }

  .zm-r109-shop-inline {
    display: block;
    margin-top: 26px;
    margin-bottom: 32px;
    padding: 20px 17px;
    border-radius: 18px;
  }

  .zm-r109-shop-inline strong { font-size: 22px; }
  .zm-r109-shop-inline small { font-size: 15px; }
  .zm-r109-shop-inline > a {
    width: 100%;
    min-width: 0;
    margin-top: 17px;
  }

  .zm-r109-products {
    margin-top: 36px !important;
    padding: 22px 17px !important;
    border-radius: 19px;
  }

  .zm-r109-products__intro { font-size: 16px; }
  .zm-r109-links { grid-template-columns: 1fr !important; }
  .zm-r109-links a { min-height: 60px; font-size: 16px; }

  .zm-r109-take { padding: 22px 18px; border-radius: 18px; }
  .zm-r109-faq details { padding: 16px 17px; }
  .zm-r109-faq summary { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .zm-r109-shop-inline > a,
  .zm-r109-links a { transition: none !important; }
}