/* Keyword landing pages (landing-faucet, landing-built-in, landing-alkaline) —
   the buying guide under the hero. Content is core blocks in the page itself:
   Group "wc-guide" with Group "wc-models" (the product grid) placed after the
   "how to choose" section; inc/landing-guide.php wraps the guide in
   .wc-guide-layout with a sticky "on this page" aside. Plain CSS: copy 1:1 to
   css/guide.css.
   One reading column: every block shares the same right edge (no ch caps — a
   72ch paragraph next to a full-width table left the right side empty). On
   wide screens the aside uses that space. Rules target block classes
   (.wp-block-heading, .wp-block-list, …) so they never reach the product
   cards inside .wc-models (those are commerce.css's). Classic theme → Group
   blocks get a .wp-block-group__inner-container, so no child combinators. */
body.wc-landing-guide{
  --ink:#202629; --ink-2:#687174; --paper:#f7f8f8; --surface:#fff;
  --mist:#e2e5e5; --mist-2:#f3f5f5; --red:#d72127; --red-deep:#ad151b;
  --r:8px; --r-lg:12px;
  --font-sans:"Prompt","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- layout: reading column + sticky aside ---------- */
body.wc-landing-guide .wc-guide-layout{margin:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px)}
body.wc-landing-guide .wc-guide-aside{display:none}
@media(min-width:1080px){
  body.wc-landing-guide .wc-guide-layout{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,19vw,256px);gap:clamp(36px,4vw,56px);align-items:start;
  }
  body.wc-landing-guide .wc-guide-aside{
    display:flex;flex-direction:column;gap:20px;position:sticky;
    top:calc(var(--s-head-height,85px) + 24px);
    max-height:calc(100vh - var(--s-head-height,85px) - 48px);overflow:auto;
    font-family:var(--font-sans);
  }
}

/* on this page */
body.wc-landing-guide .wc-guide-toc__title{margin:0 0 10px;color:var(--ink);font-size:13px;font-weight:600}
body.wc-landing-guide .wc-guide-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--mist)}
body.wc-landing-guide .wc-guide-toc li{margin:0;padding:0}
body.wc-landing-guide .wc-guide-toc a{
  display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;
  color:var(--ink-2);font-size:13px;line-height:1.55;text-decoration:none;
}
body.wc-landing-guide .wc-guide-toc a:hover{color:var(--ink)}
body.wc-landing-guide .wc-guide-toc a[aria-current="true"]{color:var(--red-deep);border-left-color:var(--red);font-weight:600}
body.wc-landing-guide .wc-guide-aside .wc-catalog-help{margin:0}

/* ---------- the guide text ---------- */
body.wc-landing-guide .wc-guide{
  margin:0;padding:0;min-width:0;
  font-family:var(--font-sans);color:var(--ink-2);font-size:16px;line-height:1.8;
}
body.wc-landing-guide .wc-guide .wp-block-group__inner-container > :first-child,
body.wc-landing-guide .wc-guide > :first-child{margin-top:0}
body.wc-landing-guide .wc-guide h2.wp-block-heading{
  margin:clamp(44px,5vw,64px) 0 16px;color:var(--ink);font-weight:700;text-align:left;
  font-size:clamp(1.32rem,1.05rem + .9vw,1.7rem);line-height:1.35;letter-spacing:-.01em;
  text-wrap:balance;scroll-margin-top:calc(var(--s-head-height,85px) + 24px);
}
body.wc-landing-guide .wc-guide h3.wp-block-heading{
  margin:36px 0 10px;color:var(--ink);font-weight:600;font-size:1.12rem;line-height:1.4;text-align:left;
  scroll-margin-top:calc(var(--s-head-height,85px) + 24px);
}
body.wc-landing-guide .wc-guide p:not(.wc-models__more){margin:0 0 1em;text-wrap:pretty}
body.wc-landing-guide .wc-guide :is(p,.wp-block-list,.wp-block-table,figcaption,.wp-block-details) a{
  color:var(--red-deep);text-decoration:underline;text-underline-offset:2px;
}
body.wc-landing-guide .wc-guide :is(p,.wp-block-list,.wp-block-table,figcaption,.wp-block-details) a:hover{color:var(--red)}
body.wc-landing-guide .wc-guide :is(p,.wp-block-list,.wp-block-table) strong{color:var(--ink);font-weight:600}
body.wc-landing-guide .wc-guide .wc-guide__lead{font-size:1.08rem;color:var(--ink)}

/* text + photo */
body.wc-landing-guide .wc-guide .wp-block-columns{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,44px);align-items:center;margin:0 0 28px;
}
body.wc-landing-guide .wc-guide .wp-block-column{flex-basis:auto !important;min-width:0}
body.wc-landing-guide .wc-guide .wp-block-column > :last-child{margin-bottom:0}
body.wc-landing-guide .wc-guide .wp-block-image{margin:0}
body.wc-landing-guide .wc-guide .wp-block-image img{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid var(--mist);background:var(--mist-2);
}

/* lists */
body.wc-landing-guide .wc-guide .wp-block-list{margin:0 0 20px;padding:0;list-style:none}
body.wc-landing-guide .wc-guide .wp-block-list li{text-wrap:pretty}

/* key figures */
body.wc-landing-guide .wc-guide .wc-guide__facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 8px;
}
body.wc-landing-guide .wc-guide .wc-guide__facts li{
  margin:0;padding:16px 18px;background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r);font-size:14px;line-height:1.55;
}
body.wc-landing-guide .wc-guide .wc-guide__facts strong{
  display:block;margin:0 0 4px;color:var(--red);font-size:1.3rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;
}

/* "which one" picks, read-more links, how-to steps */
body.wc-landing-guide .wc-guide :is(.wc-guide__picks,.wc-guide__links) li{position:relative;margin:0 0 10px;padding-left:26px}
body.wc-landing-guide .wc-guide .wc-guide__picks li::before{
  content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;
  border:2.5px solid var(--red);box-sizing:border-box;
}
body.wc-landing-guide .wc-guide .wc-guide__links li::before{content:"→";position:absolute;left:2px;top:0;color:var(--red);font-weight:600}
body.wc-landing-guide .wc-guide .wc-guide__steps{counter-reset:wcg}
body.wc-landing-guide .wc-guide .wc-guide__steps li{
  position:relative;margin:0 0 14px;padding-left:44px;min-height:30px;counter-increment:wcg;
}
body.wc-landing-guide .wc-guide .wc-guide__steps li::before{
  content:counter(wcg);position:absolute;left:0;top:.1em;width:30px;height:30px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:600;font-size:14px;line-height:30px;text-align:center;
}

/* comparison tables: natural column widths, sideways scroll on phones */
body.wc-landing-guide .wc-guide .wp-block-table{margin:6px 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.wc-landing-guide .wc-guide .wp-block-table table{
  width:100%;min-width:560px;table-layout:auto;border-collapse:collapse;margin:0;
  font-size:15px;line-height:1.55;background:var(--surface);
}
body.wc-landing-guide .wc-guide .wp-block-table :is(th,td){padding:12px 14px;border:0;border-bottom:1px solid var(--mist);text-align:left;vertical-align:top}
body.wc-landing-guide .wc-guide .wp-block-table thead{border:0}
body.wc-landing-guide .wc-guide .wp-block-table thead th{
  background:var(--paper);color:var(--ink);font-weight:600;font-size:14px;border-bottom:2px solid var(--red);white-space:nowrap;
}
body.wc-landing-guide .wc-guide .wp-block-table tbody td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
body.wc-landing-guide .wc-guide :is(.wp-element-caption,figcaption){margin:10px 0 0;font-size:13px;color:var(--ink-2);text-align:left}

/* questions (Details blocks — also the FAQPage schema) */
body.wc-landing-guide .wc-guide .wp-block-details{
  margin:0 0 10px;padding:0;background:var(--surface);border:1px solid var(--mist);border-radius:var(--r);
}
body.wc-landing-guide .wc-guide .wp-block-details summary{
  position:relative;list-style:none;cursor:pointer;padding:16px 52px 16px 20px;
  color:var(--ink);font-weight:600;font-size:16px;line-height:1.5;border-radius:var(--r);
}
body.wc-landing-guide .wc-guide .wp-block-details summary::-webkit-details-marker{display:none}
body.wc-landing-guide .wc-guide .wp-block-details summary::after{
  content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .18s ease;
}
body.wc-landing-guide .wc-guide .wp-block-details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
body.wc-landing-guide .wc-guide .wp-block-details summary:hover{color:var(--red-deep)}
body.wc-landing-guide .wc-guide .wp-block-details summary:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
body.wc-landing-guide .wc-guide .wp-block-details > :not(summary){padding:0 20px;margin:0 0 16px}

/* ---------- models: the category's products, mid-guide ---------- */
body.wc-landing-guide .wc-guide .wc-models{
  margin:clamp(44px,5vw,64px) 0 0;padding:clamp(20px,3vw,32px);
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-lg);
  scroll-margin-top:calc(var(--s-head-height,85px) + 16px);
}
body.wc-landing-guide .wc-guide .wc-models h2.wp-block-heading{margin:0 0 clamp(16px,2vw,22px)}
body.wc-landing-guide .wc-models .wc-cards,
body.wc-landing-guide .wc-models .wc-bestsellers{margin:0}
body.wc-landing-guide .wc-models .wc-shop ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:761px){
  body.wc-landing-guide .wc-models .wc-shop ul.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
body.wc-landing-guide .wc-guide .wc-models .wc-models__more{margin:20px 0 0;font-size:15px;line-height:1.6}
body.wc-landing-guide .wc-guide .wc-models .wc-models__more a{color:var(--red-deep);font-weight:600;text-decoration:none}
body.wc-landing-guide .wc-guide .wc-models .wc-models__more a::after{content:" →"}
body.wc-landing-guide .wc-guide .wc-models .wc-models__more a:hover{color:var(--red);text-decoration:underline;text-underline-offset:2px}

@media(max-width:860px){
  body.wc-landing-guide .wc-guide .wp-block-columns{grid-template-columns:1fr}
  body.wc-landing-guide .wc-guide .wc-guide__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  body.wc-landing-guide .wc-guide .wc-models{margin-left:-6px;margin-right:-6px;padding:18px 12px}
}
@media(prefers-reduced-motion:reduce){
  body.wc-landing-guide .wc-guide .wp-block-details summary::after{transition:none}
}