/* Guide-only editorial layout. Native storefront chrome, cards and rails keep their own styles. */
.guide-article {
  --guide-navy: var(--gb-navy, #182334);
  --guide-green: var(--v3-green-ink, #245c3f);
  --guide-border: #dce3e8;
  padding: 22px 0 56px;
  background: var(--v3-bg, #f3f5f7);
  color: var(--gb-ink, #20362d);
}
.guide-article__sheet {
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid #e6ebee;
  border-radius: var(--v3-r-lg, 20px);
  background: #fff;
  box-shadow: 0 8px 28px rgb(24 35 52 / 5%);
}
.guide-article__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.guide-article__back { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guide-article__back > .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--guide-green); }
.guide-article__back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--guide-green); font-size: 14px; font-weight: 600; text-decoration: none; }
.guide-article__share { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 10px 14px; border: 1px solid var(--guide-border); border-radius: 999px; background: #fff; color: var(--guide-navy); font: inherit; font-size: 14px; cursor: pointer; }
.guide-article__share .ico { width: 18px; height: 18px; }
.guide-article__share:hover { background: #f2f6f3; border-color: #9bb7a6; }
.guide-article__head { max-width: 970px; margin: 0 0 24px; }
.guide-article .guide-article__head h1 { width: fit-content; max-width: 100%; margin: 0; padding-bottom: .08em; border-bottom: 3px solid var(--guide-green); color: var(--guide-navy); font-family: var(--v4-head-font, var(--gb-font, sans-serif)); font-style: normal; font-weight: var(--v4-head-weight, 600); font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; letter-spacing: var(--v4-head-ls, 0); text-wrap: balance; }
.guide-article__perex { max-width: 82ch; margin-top: 18px; font-size: 18px; line-height: 1.65; }
.guide-article__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy'; gap: 32px; }
.guide-article__layout--intro { grid-template-areas: 'intro' 'copy'; }
.guide-article__layout--toc { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: 'copy aside'; column-gap: clamp(28px, 4vw, 56px); }
.guide-article__layout--intro.guide-article__layout--toc { grid-template-areas: 'intro intro' 'copy aside'; }
.guide-article__editorial { display: contents; }
.guide-article__intro { grid-area: intro; min-width: 0; }
.guide-article__lead { max-width: 85ch; }
.guide-article .guide-article__lead .lead { margin: 0; color: #42534b; font-size: clamp(17px, 1.6vw, 19px); font-weight: 400; line-height: 1.7; }
.guide-article__hero { margin-top: 28px; }
.guide-article__hero .gbsc-article-image { margin: 0; }
.guide-article__hero .gbsc-article-image img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; border-radius: 12px; }
.guide-article__hero .gbsc-article-image--product img { height: clamp(240px, 32vw, 400px); object-fit: contain; background: #fff; }
.guide-article .gbsc-article-image figcaption { margin-top: 10px; color: #5e6c65; font-size: 13px; line-height: 1.5; }
.guide-article__copy { grid-area: copy; min-width: 0; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.guide-article .guide-article__copy > :first-child { margin-top: 0; }
.guide-article .guide-article__copy > :is(p, ul, ol) { max-width: 85ch; }
.guide-article .guide-article__copy > p { margin: 0 0 20px; }
.guide-article .guide-article__copy > :is(h2, h3) { color: var(--guide-navy); scroll-margin-top: 120px; }
.guide-article .guide-article__copy > h2 { margin: 38px 0 16px; font-size: clamp(27px, 2.5vw, 34px); line-height: 1.15; }
.guide-article .guide-article__copy > h3 { margin: 28px 0 12px; font-size: 24px; line-height: 1.2; }
.guide-article .guide-article__copy > :is(ul, ol) { padding-left: 24px; margin-block: 18px 24px; }
.guide-article .guide-article__copy > :is(ul, ol) > li { margin-bottom: 9px; padding-left: 3px; }
.guide-article .guide-article__copy > blockquote { margin: 24px 0; padding: 20px 24px; border-left: 4px solid var(--guide-green); background: #f1f6f2; border-radius: 0 10px 10px 0; }
.guide-article .guide-article__copy .table-responsive { max-width: 100%; margin: 24px 0; overflow-x: auto; }
.guide-article .guide-article__copy > table { display: block; max-width: 100%; overflow-x: auto; margin: 24px 0; }
.guide-article .guide-article__copy :is(td, th) { padding: 14px 16px; }
.guide-article .guide-article__copy th { background: #eef4f0; color: var(--guide-navy); }
.guide-article__copy .gbsc-article-image { margin: 28px 0; }
.guide-article__copy .gbsc-article-image img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.guide-article__copy .gbsc-article-image--product img { max-height: 360px; object-fit: contain; background: #fff; }
.guide-article .guide-article__copy .gbsc-products { margin-block: 32px; overflow-wrap: normal; }
.guide-article__aside { grid-area: aside; min-width: 0; align-self: start; position: sticky; top: 110px; }
.guide-article__toc { border: 1px solid var(--guide-border); border-radius: 12px; background: #f5f7f6; }
.guide-article__toc summary { padding: 18px 20px; color: var(--guide-navy); font-size: 16px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.guide-article__toc nav { max-height: calc(100vh - 220px); overflow-y: auto; padding: 0 20px 12px; }
.guide-article__toc ol { padding: 0; margin: 0; list-style: none; }
.guide-article__toc li + li { border-top: 1px solid #dce5df; }
.guide-article__toc a { display: flex; align-items: center; min-height: 44px; padding: 11px 0; color: #334a3e; font-size: 14px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.guide-article__toc a:hover, .guide-article__back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-article :is(.guide-article__back a, .guide-article__share, .guide-article__toc a, .guide-article__toc summary, .table-responsive):focus-visible { outline: 3px solid #d9a52b; outline-offset: 3px; }
/* Reuse every original hub link and description once; no parallel catalogue or duplicate copy. */
.guide-article--hub .guide-article__copy > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: none; padding: 0; list-style: none; }
.guide-article--hub .guide-article__copy > ul > li { margin: 0; padding: 18px; border: 1px solid var(--guide-border); border-radius: 10px; background: #f9fbfa; font-size: 14px; line-height: 1.65; }
.guide-article--hub .guide-article__copy > ul > li > a { display: flex; align-items: center; min-height: 44px; margin-bottom: 5px; color: var(--guide-green); font-size: 17px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.guide-article--hub .guide-article__copy > ul > li > a:hover { text-decoration: underline; }
.guide-article--hub .guide-article__copy > ul > li > a:focus-visible { outline: 3px solid #d9a52b; outline-offset: 3px; }
@media (max-width: 980px) {
  .guide-article__layout--toc { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'aside' 'copy'; }
  .guide-article__layout--intro.guide-article__layout--toc { grid-template-areas: 'intro' 'aside' 'copy'; }
  .guide-article__aside { position: static; }
  .guide-article__toc nav { max-height: 300px; }
}
@media (max-width: 600px) {
  .guide-article { padding: 16px 0 34px; }
  .guide-article__sheet { padding: 20px 16px 26px; border-radius: 14px; }
  .guide-article__tools { align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .guide-article__back { gap: 7px; }
  .guide-article__back a, .guide-article__share { font-size: 13px; }
  .guide-article__share { padding-inline: 10px; }
  .guide-article .guide-article__head h1 { font-size: 34px; overflow-wrap: anywhere; }
  .guide-article__layout { gap: 24px; }
  .guide-article__hero { margin-top: 22px; }
  .guide-article__hero .gbsc-article-image img { max-height: 290px; border-radius: 9px; }
  .guide-article__toc summary { padding: 16px; }
  .guide-article__toc nav { padding-inline: 16px; }
  .guide-article .guide-article__copy :is(td, th) { padding: 11px 12px; min-width: 100px; }
  .guide-article--hub .guide-article__copy > ul { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .guide-article { padding: 0; background: #fff; }
  .guide-article__sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .guide-article__tools, .guide-article__aside { display: none; }
  .guide-article .guide-article__layout { display: block; }
  .guide-article__intro { margin-bottom: 24px; }
  .guide-article__hero { break-inside: avoid; }
}