/* Shared styling for every current and future "tool page" (pages with the
   wwa_vertical postmeta set). Every calculator widget's outer container
   should carry the .wwa-tool-calc-card class to inherit this automatically. */
.wwa-tool-calc-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -8px rgba(15, 23, 42, .14);
}

/* Reusable process-flow diagram, e.g. [Well Pump] -> [Filter Unit] -> [Home].
   Same classes across every tool page - only the step icons/labels change. */
.wwa-flowchart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 2rem 0;
  padding: 1.5rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.wwa-flowchart__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
  padding: 0 .5rem;
}
.wwa-flowchart__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}
.wwa-flowchart__icon svg {
  width: 26px;
  height: 26px;
  stroke: #2563eb;
}
.wwa-flowchart__label {
  font-weight: 600;
  font-size: .82rem;
  color: #0F172A;
  line-height: 1.3;
}
.wwa-flowchart__arrow {
  font-size: 1.4rem;
  color: #94a3b8;
  margin: 0 .5rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .wwa-flowchart { flex-direction: column; }
  .wwa-flowchart__arrow { transform: rotate(90deg); margin: .35rem 0; }
}

/* Geo-Hub county calculator: pre-checked local contaminants + household size,
   shared across every county page in the Water Problems directory. */
.wwa-geo-calc { position: relative; overflow: visible; max-width: 720px; margin: 1.5rem auto; background: #f8fafc; color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  border-radius: 16px; padding: 1.75rem; border: 1px solid #e2e8f0; }
.wwa-geo-calc h3 { margin: 0 0 1rem; font-size: 1.05rem; color: #0F172A; }
.wwa-geo-calc__symptoms { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.wwa-geo-calc__symptoms label { display: flex; align-items: center; gap: .6rem; font-weight: 600;
  font-size: .92rem; padding: .7rem .9rem; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; cursor: pointer; }
.wwa-geo-calc__symptoms input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: #0052CC; position: static; }
.wwa-geo-calc label[for="wwaGeoBath"] { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.wwa-geo-calc select { position: static; width: 100%; padding: .6rem .75rem; border-radius: 8px; border: 1px solid #e2e8f0;
  font-size: 1rem; background: #fff; margin-bottom: 1rem; box-sizing: border-box; }
.wwa-geo-calc button { background: #0052CC; color: #fff; border: none; border-radius: 8px;
  padding: .8rem 1.5rem; font-weight: 700; font-size: 1rem; cursor: pointer; width: 100%; }
.wwa-geo-calc button:hover { background: #003D99; }
.wwa-geo-calc__result { margin-top: 1.25rem; padding: 1rem 1.25rem; background: #F0F6FF;
  border: 1px solid #cfe0ff; border-radius: 10px; display: none; }
.wwa-geo-calc__result.is-visible { display: block; }
.wwa-geo-calc__result ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.wwa-geo-calc__result li { margin: .3rem 0; font-size: .92rem; }
.wwa-geo-calc__result li a { color: #0052CC; font-weight: 600; }
/* Unified meta/caption typography: source lists, map attributions, fine
   print, and other secondary notices all read at the same subdued size. */
.wwa-meta-caption,
.wwa-geo-calc__fine,
.wwa-imc__fine,
.wwa-trust-badge,
.wwa-usmap__caption,
.wwa-usmap__attribution {
  font-size: 11px !important;
  color: #64748b !important;
}
.wwa-trust-badge { line-height: 1.4; }

/* Trust badge: government-source citations, shown as a compact footnote card. */
.wwa-trust-badge { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; padding: 1rem 1.25rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.wwa-trust-badge strong { color: #0F172A; }
.wwa-trust-badge a { color: #0052CC; text-decoration: underline; }

/* Geo-Hub directory grid: state/county cards. Compact layout - card height
   is deliberately kept low (name + inline % badge, no subtitle row) so the
   grid stays dense as it scales to dozens of states. */
.wwa-geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem; margin: 1.5rem 0; }
.wwa-geo-grid__card { display: block; padding: 12px 16px; background: #fff; border: 1px solid #e2e8f0;
  border-left: 3px solid #e2e8f0; border-radius: 10px; text-decoration: none; color: #0F172A;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wwa-geo-grid__card:hover { border-color: #0052CC; border-left-color: #0052CC;
  box-shadow: 0 8px 20px -6px rgba(0, 82, 204, .25); transform: translateY(-2px); }
.wwa-geo-grid__card h3 { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.25; }
.wwa-geo-grid__pct { display: inline-block; font-size: .72rem; font-weight: 700;
  color: #0052CC; background: #F0F6FF; padding: .15rem .45rem; border-radius: 6px; }
@media (min-width: 1024px) {
  .wwa-geo-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .wwa-geo-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .wwa-geo-grid__card { padding: 10px 12px; }
}

/* Disclosure placed near the byline instead of the hero body, per Geo-Hub spec. */
.wwa-inline-disclosure.wwa-disclosure--byline { display: block; margin-top: .5rem; }

/* Interactive US vector map (real state boundaries, not a stylized grid).
   Inactive states are dimmed placeholders for future batches; only states
   with a published guide are colored/clickable. */
.wwa-usmap-wrap { margin: 1.5rem auto 1rem; max-width: 800px; }
.wwa-usmap-svg { width: 100%; height: auto; display: block; }
.wwa-usmap-svg { background: transparent; }
.wwa-usmap-svg .wwa-state { fill: #f1f5f9; stroke: #cbd5e1; stroke-width: 1; transition: fill .15s ease; }
.wwa-usmap-svg #FL { fill: #2563eb; cursor: pointer; transition: fill .15s ease; }
.wwa-usmap-svg #FL:hover { fill: #1d4ed8; }
.wwa-usmap__caption { text-align: center; margin-top: .5rem; }
.wwa-usmap__attribution { text-align: center; margin-top: 6px; margin-bottom: 24px; }
.wwa-usmap__attribution a { color: #64748b; text-decoration: underline; }

/* Section-header pulse highlight, triggered briefly via JS on scroll-to. */
@keyframes wwaPulseHighlight {
  0% { background-color: #F0F6FF; }
  100% { background-color: transparent; }
}
.wwa-pulse-highlight { animation: wwaPulseHighlight 1.6s ease-out; border-radius: 8px; }

/* Problem/solution grid: visual cards replacing a dense explanatory
   paragraph. Same icon language as the flowchart (soft blue circle,
   #2563eb stroke icon). */
.wwa-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin: 1.5rem 0; }
.wwa-problem-card { padding: 1.25rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.wwa-problem-card__icon { width: 44px; height: 44px; border-radius: 50%; background: #eff6ff;
  display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.wwa-problem-card__icon svg { width: 24px; height: 24px; stroke: #2563eb; }
.wwa-problem-card h3 { margin: 0 0 .5rem; font-size: 1rem; color: #0F172A; }
.wwa-problem-card p { margin: 0 0 .75rem; font-size: .88rem; color: #475569; line-height: 1.5; }
.wwa-card-link { font-size: .85rem; font-weight: 600; color: #0052CC; text-decoration: none; }
.wwa-card-link:hover { text-decoration: underline; }

/* Visual Recommended Solution Card: calculator output, replacing a plain
   bullet list with a product-style card (icon, spec, price, Amazon CTA). */
#wwaGeoResultList { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-top: .6rem; }
.wwa-product-card { display: flex; flex-direction: column; gap: .9rem; padding: 1rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
/* Product shot thumbnail: white box, centered image, sits above the step badge / title. */
.wwa-product-card__media { height: 160px; padding: 12px; box-sizing: border-box; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.entry-content .wwa-product-card__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.wwa-product-card__info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.wwa-product-card__info .wwa-product-card__cta { align-self: stretch; justify-content: center; text-align: center; }
#wwaGeoResultList > .wwa-geo-calc__fine { grid-column: 1 / -1; margin: 0; }
.wwa-product-card__spec { margin: .15rem 0; font-size: .85rem; color: #475569; }
.wwa-product-card__price { font-weight: 700; color: #0052CC; font-size: .95rem; }
/* Amazon CTA: same slim Amazon-yellow pill as article buttons (see wwa-amazon-cta.css). */
.wwa-product-card__cta{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; box-sizing:border-box; padding:.6rem 1.15rem; border-radius:999px; background:#FFD814; color:#0F1111; border:1px solid #FCD200; font-weight:600; font-size:.9rem; line-height:1.25; text-decoration:none; box-shadow:0 1px 2px rgba(15,17,17,.12); transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease; margin-top:.6rem;}
.wwa-product-card__cta::before{content:""; width:16px; height:16px; flex-shrink:0; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;}
.wwa-product-card__cta:hover{background:#F7CA00; border-color:#F2C200; color:#0F1111; box-shadow:0 4px 12px -2px rgba(15,17,17,.22); transform:translateY(-1px);}
.wwa-product-card__cta:focus-visible{outline:2px solid #0F1111; outline-offset:2px;}
.wwa-product-card__guide-link { display: block; margin-top: .5rem; font-size: .8rem; color: #64748b; text-decoration: underline; }

/* Nearby Counties: subtle map-pin prefix, CSS-only (no content edits needed).
   Lucide "map-pin" drawn as a mask so it takes the muted text color. */
h2#nearby-counties ~ ul.wp-block-list li a::before { content: ""; display: inline-block; width: 1em; height: 1em;
  margin-right: .4em; vertical-align: -.125em; background-color: #64748b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Water safety callout above the county calculator (Lucide "info" icon). */
.wwa-safety-note { display: flex; gap: .75rem; align-items: flex-start; max-width: 720px; margin: 1.5rem auto 0;
  padding: .9rem 1.1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #93c5fd;
  border-radius: 10px; font-size: .9rem; line-height: 1.6; color: #475569; }
.wwa-safety-note__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: .15rem; color: #3b82f6; }
.wwa-safety-note__icon svg { width: 20px; height: 20px; display: block; }
.wwa-safety-note strong { color: #334155; }
.wwa-safety-note a { color: #0052CC; text-decoration: underline; }

/* County calculator result: step labels and 44px tap targets. */
.wwa-geo-calc select { min-height: 44px; }
.wwa-geo-calc button { min-height: 44px; white-space: normal; max-width: 100%; line-height: 1.3; overflow-wrap: anywhere; }
.wwa-geo-calc__symptoms label { min-height: 44px; box-sizing: border-box; }
/* Symptom-first card hierarchy: problem as the bold title, then the
   technical solution + stage as a quieter subtitle directly beneath it. */
.wwa-product-card__info h4 { margin: 0 0 .2rem; font-size: 1.08rem; line-height: 1.3; color: #0F172A; }
.entry-content .wwa-product-card__solution { margin: 0 0 .6rem !important; font-size: .8rem !important; line-height: 1.4 !important;
  font-weight: 600; color: #475569; }
.wwa-product-card__stage { font-weight: 700; letter-spacing: .04em; color: #0052CC; white-space: nowrap; }
.wwa-product-card__note { font-style: italic; }
/* Card spec lines are dense data, not body copy: opt out of the sitewide
   .entry-content p spacing (1.7 line-height / 1.5rem margin, !important). */
.entry-content .wwa-product-card__spec { margin: .15rem 0 !important; line-height: 1.45 !important; font-size: .88rem !important; }
.entry-content .wwa-product-card__price { font-size: .95rem !important; }
.entry-content .wwa-product-card__price { margin-top: .4rem !important; }
.wwa-product-card__guide-link { min-height: 44px; display: flex; align-items: center; margin-top: 0; }

/* FAQ accordion: smooth open/close where the browser supports animating
   <details> content; elsewhere it simply opens instantly. */
@supports (interpolate-size: allow-keywords) {
  .wwa-faq-accordion { interpolate-size: allow-keywords; }
  .wwa-faq-accordion .wwa-faq-item::details-content { block-size: 0; overflow: hidden;
    transition: block-size .25s ease, content-visibility .25s allow-discrete; }
  .wwa-faq-accordion .wwa-faq-item[open]::details-content { block-size: auto; }
}
.wwa-faq-accordion .wwa-faq-question { min-height: 44px; box-sizing: border-box; }

/* "Last Updated" freshness line under the H1 on county pages. Pulls the
   title's large bottom padding in so the date reads as part of the header. */
.hostinger-ai-page-title:has(+ .wwa-last-updated) { padding-bottom: .5rem !important; }
.wwa-last-updated { text-align: center; margin: 0 auto .9rem;
  font-size: 12px !important; color: #64748b !important; }

/* E-E-A-T trust strip under the header: subtle grey pills linking the
   government sources the page cites. */
.wwa-trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 720px;
  margin: 0 auto var(--wp--preset--spacing--50, 2rem); padding: 0 16px; box-sizing: border-box; }
.wwa-trust-strip__item { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .35rem .8rem;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #475569; text-decoration: none; }
.wwa-trust-strip__item:hover { background: #e2e8f0; color: #334155; }
.wwa-trust-strip__item svg { width: 15px; height: 15px; color: #64748b; flex-shrink: 0; }

/* Hard-water tip under the filter card (shown when hardness wasn't checked). */
#wwaGeoResultList > .wwa-geo-calc__tip { grid-column: 1 / -1; margin: 0 !important; font-size: .85rem !important;
  line-height: 1.5 !important; color: #475569; }
#wwaGeoResultList .wwa-product-card__price span { font-weight: 600; color: #475569; }



/* Product card quick take: green-check pros, one neutral note. Icons are
   Lucide "check" / "info" drawn as masks so they take the text color. */
.entry-content ul.wwa-product-card__pros { list-style: none; margin: .55rem 0 .3rem !important; padding: 0 !important; }
.entry-content ul.wwa-product-card__pros li { position: relative; margin: .2rem 0 !important; padding-left: 1.35rem;
  font-size: .85rem; line-height: 1.45; color: #334155; }
.wwa-product-card__pros li::before, .wwa-product-card__con::before { content: ""; position: absolute; left: 0; top: .2em;
  width: .95rem; height: .95rem; -webkit-mask: var(--wwa-icon) center / contain no-repeat; mask: var(--wwa-icon) center / contain no-repeat; }
.wwa-product-card__pros li::before { background-color: #16a34a;
  --wwa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.entry-content .wwa-product-card__con { position: relative; margin: 0 0 .5rem !important; padding-left: 1.35rem;
  font-size: .82rem !important; line-height: 1.45 !important; color: #64748b; }
.wwa-product-card__con::before { background-color: #d97706;
  --wwa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }

/* Reactive treatment path (county calculator result): active stages light up,
   stages that aren't needed dim to a dashed outline; values fade on change. */
.wwa-flow-panel { margin: .6rem 0 1rem; padding: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.entry-content .wwa-flow-panel__title { margin: 0 0 .75rem !important; font-size: 11px !important; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.wwa-flow { display: flex; align-items: stretch; }
.wwa-flow__node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .4rem; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; text-align: center;
  transition: opacity .35s ease, filter .35s ease, border-color .35s ease, background-color .35s ease, transform .35s ease; }
.wwa-flow__icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.wwa-flow__icon svg { width: 19px; height: 19px; }
.wwa-flow__label { font-size: .78rem; font-weight: 700; line-height: 1.25; color: #0F172A; }
.wwa-flow__status { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8;
  transition: color .35s ease; }
.wwa-flow__node.is-active { border-color: #93c5fd; background: #F0F6FF; }
.wwa-flow__node.is-active .wwa-flow__icon { background: #0052CC; color: #fff; box-shadow: 0 0 0 4px rgba(0, 82, 204, .12); }
.wwa-flow__node.is-active .wwa-flow__status { color: #0052CC; }
.wwa-flow__node.is-off { opacity: .45; filter: grayscale(1); border-style: dashed; transform: scale(.96); }
/* Pipes between nodes: a moving "water" gradient shows the flow direction. */
.wwa-flow__pipe { flex: 0 0 18px; align-self: center; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #bfdbfe 0 40%, #0052CC 50%, #bfdbfe 60% 100%); background-size: 200% 100%;
  animation: wwaFlowPipe 1.6s linear infinite; }
@keyframes wwaFlowPipe { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Spec mini-dashboard under the path. */
.wwa-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .75rem; }
.wwa-spec { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px; transition: opacity .35s ease; }
.wwa-spec__label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.wwa-spec__value { font-size: 1.05rem; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; }
.wwa-spec__note { font-size: 11.5px; line-height: 1.35; color: #64748b; }
.wwa-spec.is-off { opacity: .55; }
.wwa-spec.is-off .wwa-spec__value { color: #94a3b8; }
.wwa-spec.is-changed .wwa-spec__value { animation: wwaSpecIn .45s ease; }
/* Starts at .35 (not 0) so a value stays readable even where animations are frozen. */
@keyframes wwaSpecIn { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .wwa-flow { flex-direction: column; }
  .wwa-flow__node { flex-direction: row; text-align: left; gap: .6rem; padding: .55rem .7rem; }
  .wwa-flow__label { flex: 1; }
  .wwa-flow__pipe { flex-basis: 14px; width: 3px; height: auto; align-self: auto; margin-left: calc(.7rem + 17px);
    background: linear-gradient(180deg, #bfdbfe 0 40%, #0052CC 50%, #bfdbfe 60% 100%); background-size: 100% 200%;
    animation-name: wwaFlowPipeV; }
  @keyframes wwaFlowPipeV { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
  .wwa-specs { grid-template-columns: 1fr; }
  .wwa-spec { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
  .wwa-spec__label { flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wwa-flow__pipe { animation: none; background: #93c5fd; }
  .wwa-flow__node, .wwa-flow__icon, .wwa-spec { transition: none; }
  .wwa-spec.is-changed .wwa-spec__value { animation: none; }
}

/* Icon thumbnail variant of the product media box (used until true-to-product
   photos are available). */
.wwa-product-card__media--icon { background: #eff6ff; border-color: #dbeafe; color: #2563eb; }
.wwa-product-card__media--icon svg { width: 64px; height: 64px; stroke-width: 1.5; }

/* Phones: calculator runs to an 8px screen gutter (cancels the 20px content
   padding) and drops the nested result-box layer so the treatment path, spec
   tiles and product cards get the full width. */
@media (max-width: 640px) {
  /* !important: the block layout forces margin-left/right:auto !important on content children. */
  .wwa-geo-calc { margin-left: -12px !important; margin-right: -12px !important; max-width: none; padding: 1rem .75rem; border-radius: 12px; }
  .wwa-geo-calc__result { padding: .75rem 0 0; background: transparent; border: 0; border-radius: 0; }
  .wwa-flow-panel { padding: .75rem; }
  .wwa-product-card { padding: .875rem; }
}

/* Phones: Amazon CTA in county cards, same full-width centred treatment as articles. */
@media (max-width: 640px) {
  .wwa-product-card__cta { display:flex; align-items:center; justify-content:center; text-align:center; gap:8px; width:100%; box-sizing:border-box; padding:12px 16px; }
}