/* ==========================================================================
   SWABE SPREADSHEETS , brand tokens and product overrides.

   Load order, every page:
     css/styles.css      (base, never edited, byte-identical to the reference)
     css/tier-pick.css   (tier picker, never edited, byte-identical)
     css/swabe.css       (this file)

   This file does two jobs and nothing else:
     1. Re-tokenise the base sheet to the Swabe green palette (BRAND.md 6)
        and DEFINE the variables tier-pick.css consumes that styles.css
        :root never declared (--gold, --gold-bg, --success). Do not remove.
     2. Style the marketplace-native blocks that only exist on this store.

   Mobile-first. No class is prefixed ad-/ads-/promo-/banner-/sponsor-.
   Every rule that sets `display` is covered by [hidden]{display:none!important}.
   Rewritten 12 Sep 2026 for the conversion redesign (FRONT_REPORT.md).
   ========================================================================== */

:root{
  /* --- Swabe palette (BRAND.md section 6) ------------------------------- */
  --sw-primary:#1E7B45;
  --sw-accent:#34A853;
  --sw-light:#E8F5EC;
  --sw-ink:#1A1A1A;
  --sw-paper:#FAFAF7;
  --sw-gold:#F6C453;
  --sw-lugi:#C62828;
  --sw-tight:#B7791F;      /* amber, only for "Tight" */
  --sw-line:#DCE5DE;
  --sw-muted:#5A6560;

  /* --- re-point the base sheet's tokens --------------------------------- */
  --orange:#1E7B45;
  --orange-dark:#17603A;
  --orange-light:#8FCBA8;
  --navy:#1A1A1A;
  --navy-light:#3A423C;
  --ink:#1A1A1A;
  --muted:#5A6560;
  --line:#DCE5DE;
  --cream:#FAFAF7;
  --peach:#E8F5EC;
  --peach-deep:#D5EADD;
  --yellow:#F6C453;
  --yellow-deep:#E0A82E;
  --white:#FFFFFF;
  --card:#FFFFFF;
  --danger:#C62828;

  /* --- declared here because styles.css never declared them ------------- */
  --gold:#C08A1E;
  --gold-bg:#FDF6E4;
  --success:#1E7B45;

  /* --- the reference's background photography does not exist here ------- */
  --img-hero:none;
  --img-body:none;
  --img-body-2:none;
  --img-footer:none;
}

html,body{ background:var(--sw-paper); }
body{ background-image:none; color:var(--sw-ink); padding-bottom:0; }

/* `overflow-x:hidden` on html establishes a scroll container, which kills
   position:sticky on descendants. `clip` clips without creating the box. */
html,body{ overflow-x:clip; }

/* Any rule that sets `display` beats the `hidden` attribute. Restore it. */
[hidden]{ display:none !important; }

.btn-buy{ background:linear-gradient(135deg,var(--sw-accent),var(--sw-primary)); }
.btn-buy:hover{ background:linear-gradient(135deg,var(--sw-primary),var(--sw-primary)); }
.btn-buy-pulse{ animation:none; }

.scroll-progress-fill{ background:linear-gradient(90deg,var(--sw-accent),var(--sw-primary)); }

header.site{ background:rgba(250,250,247,.95); border-bottom:1px solid var(--sw-line); }
footer{ background-image:none; background:var(--sw-primary); color:#CFE6D9; }
footer .fcopy{ color:#A8CDBA; }
footer .flinks a:hover{ color:#FFFFFF; }
footer .fbadge img{ border-radius:50%; }

h2.section-title{ color:var(--sw-ink); line-height:1.25; text-wrap:balance; }
.section-tag{ color:var(--sw-primary); }
.section-lede{ max-width:620px; }
.faq-item summary{ color:var(--sw-ink); }
.faq-item summary::after{ color:var(--sw-primary); }
.faq-item p{ font-size:13.5px; color:var(--sw-ink); }
.faq-item p b{ color:var(--sw-primary); }

/* sections that carry one block and no title breathe less */
section.sw-tight{ padding:12px 0; }
.sw-note{ font-size:12.5px; line-height:1.55; color:var(--sw-muted); margin-top:14px; }

/* ==========================================================================
   STORE HEADER  (one mark, one wordmark)
   ========================================================================== */
.sw-logo{ display:flex; align-items:center; gap:10px; min-width:0; }
.sw-logo .sw-mark{ width:40px; height:40px; border-radius:50%; flex:0 0 40px; }
.sw-logo .sw-word{ height:28px; width:auto; }
.sw-logo img{ display:block; }

.sw-tagline{
  font-size:12px; color:var(--sw-muted); font-weight:600;
  padding:0 18px 12px; margin:0 auto; max-width:var(--frame);
}
@media(min-width:860px){ .sw-tagline{ font-size:13.5px; padding-bottom:14px; } }

/* ==========================================================================
   CATALOG GRID  (MARKETPLACE_NOTES section 1)
   ========================================================================== */
/* Tiles v3 (2026-10-10, CONVEYOR belt/tools/store_tiles.js): square image, equal-height tiles
   (grid-auto-rows:1fr + flex column), 1-line title, exactly 2-line sub, big price pinned to the bottom. */
.sw-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; margin-top:18px; }
/* no 3-col step: below 860px the page frame is 440px (styles.css --frame), so 3 columns gave 122px tiles */
@media(min-width:860px){ .sw-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }

.sw-tile{
  display:flex; flex-direction:column; min-width:0; height:100%;
  background:var(--white); border:1px solid var(--sw-line); border-radius:14px;
  overflow:hidden; transition:border-color .16s, box-shadow .16s, transform .16s;
}
a.sw-tile:hover{ border-color:var(--sw-accent); transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,123,69,.12); }
a.sw-tile:focus-visible{ outline:3px solid var(--sw-primary); outline-offset:3px; }
.sw-tile-img{ position:relative; aspect-ratio:1/1; background:var(--sw-light); display:block; width:100%; flex:none; overflow:hidden; }
.sw-tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sw-badge{
  position:absolute; top:8px; left:8px;
  background:var(--sw-gold); color:#4A3708;
  font-size:10.5px; font-weight:800; letter-spacing:.6px; padding:3px 9px; border-radius:20px;
}
.sw-badge.soon{ background:var(--sw-line); color:var(--sw-muted); }
.sw-tile-body{ padding:10px 11px 13px; display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 auto; }
.sw-tile-name{ font-size:16px; font-weight:800; line-height:1.2; color:var(--sw-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.2px; }
.sw-tile-sub{
  font-size:12px; font-weight:600; line-height:1.35; color:var(--sw-muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  height:calc(1.35em * 2);
}
.sw-tile-stats{ display:flex; flex-direction:column; font-size:11px; font-weight:800; color:#6B4E0B; line-height:1.3; white-space:nowrap; }
.sw-tile-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:auto; font-size:26px; font-weight:800; color:var(--sw-primary); line-height:1.1; }
.sw-tile-price s{ font-size:15px; font-weight:700; color:#B3261E; text-decoration-thickness:2px; }
.sw-tile-price .sw-tile-was{ font-size:10px; font-weight:700; color:var(--sw-muted); line-height:1.3; margin:0; }
/* engine price anchor (CONVEYOR store_tiles.js --prices-only, owner 2026-10-19): real after-promo price, labelled, hides on its date */
.sw-tile-anchor ~ .sw-tile-was{ flex-basis:100%; }
.sw-tile-anchor[hidden], .sw-tile-anchor[hidden] ~ .sw-tile-was{ display:none; }
.sw-vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sw-pill{
  align-self:flex-start; max-width:100%;
  background:var(--sw-light); color:var(--sw-primary);
  border:1px solid #CBE5D6; border-radius:20px;
  font-size:10.5px; font-weight:700; padding:4px 9px; line-height:1.3;
}
.sw-pill.quiet{ background:#F1F3F1; border-color:var(--sw-line); color:var(--sw-muted); }
.sw-tile.is-soon{ opacity:.72; }
.sw-tile.is-soon .sw-tile-price{ color:var(--sw-muted); font-size:18px; }
@media(min-width:860px){
  .sw-tile-body{ padding:14px 15px 16px; gap:8px; }
  .sw-tile-name{ font-size:22px; }
  .sw-tile-sub{ font-size:14px; }
  .sw-tile-stats{ font-size:12px; }
  .sw-tile-price{ font-size:32px; }
  .sw-tile-price s{ font-size:18px; }
  .sw-tile-price .sw-tile-was{ font-size:11px; }
  .sw-pill{ font-size:11.5px; }
}

/* ==========================================================================
   TITO BLOCK  (catalog, and compact on the product page)
   ========================================================================== */
.sw-tito{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--sw-line);
  border-radius:16px; padding:16px; margin-top:8px;
}
.sw-tito > img{ width:100%; max-width:320px; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:12px; flex:0 0 auto; }
.sw-tito h3{ font-size:17px; font-weight:800; margin-bottom:8px; color:var(--sw-ink); }
.sw-tito p{ font-size:13.5px; line-height:1.6; color:var(--sw-muted); }
.sw-tito p + p{ margin-top:8px; }
.sw-tito .sw-tito-tag{ margin-top:12px; font-weight:800; color:var(--sw-primary); font-size:14px; }
.sw-tito .sw-tito-close{ margin-top:4px; font-weight:700; color:var(--sw-ink); font-size:13px; }
@media(min-width:640px){
  .sw-tito{ flex-direction:row; padding:22px; gap:22px; align-items:center; }
  .sw-tito > img{ width:220px; flex-basis:220px; }
}
@media(min-width:860px){ .sw-tito > img{ width:260px; flex-basis:260px; } .sw-tito p{ font-size:14px; } }

/* ==========================================================================
   PRODUCT PAGE HERO
   ========================================================================== */
.sw-pdp{ padding:16px 0 8px; }

.sw-hero-top{ margin-bottom:16px; }
/* the hook sits UNDER the gallery, Tito's bubble */
.sw-hook{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--white); border:1px solid var(--sw-line);
  border-radius:4px 16px 16px 16px; padding:12px 14px; margin-top:12px;
}
.sw-hook img{ width:44px; height:44px; border-radius:50%; flex:0 0 44px; object-fit:cover; }
.sw-hook > div{ min-width:0; }
.sw-hook p{ font-size:13.5px; line-height:1.5; color:var(--sw-muted); }
.sw-hook p b{ color:var(--sw-ink); font-weight:800; }
.sw-hook .sig{ display:block; margin-top:5px; font-size:11.5px; font-weight:800; color:var(--sw-primary); letter-spacing:.3px; }

.sw-hero-top h1{
  font-size:28px; line-height:1.18; font-weight:800; color:var(--sw-ink);
  /* I14: the headline must WRAP, never shrink to one line and never clip. */
  overflow-wrap:break-word; hyphens:none; text-wrap:balance; max-width:14ch;
}
.sw-hero-top .sw-sub{ font-size:14px; line-height:1.6; color:var(--sw-muted); margin-top:8px; max-width:560px; }

/* the pill row */
.sw-pills{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 6px; list-style:none; padding:0; }
.sw-pills li{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sw-light); color:var(--sw-primary);
  border:1px solid #CBE5D6; border-radius:20px;
  font-size:11.5px; font-weight:700; line-height:1.25; padding:6px 11px 6px 8px;
}
.sw-pills svg{ width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* trust chips, brand-level, source named in the text */
.sw-trust-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sw-trust{
  display:inline-flex; align-items:center;
  background:var(--gold-bg); color:#6B4E0B; border:1px solid #F0DDA5;
  border-radius:20px; font-size:11px; font-weight:800; padding:4px 9px; line-height:1.2;
}
.sw-trust-row.mini{ margin-top:3px; gap:4px; }
.sw-trust-row.mini .sw-trust{ font-size:9.5px; padding:2px 6px; }

@media(min-width:860px){
  .sw-pdp{ padding:22px 0 8px; }
  .sw-hero-top{ margin-bottom:22px; }
  .sw-hero-top h1{ font-size:40px; max-width:24ch; }
  .sw-hero-top .sw-sub{ font-size:15px; }
  .sw-pills li{ font-size:12.5px; padding:7px 13px 7px 10px; }
}

/* minmax(0,1fr), not 1fr: a grid item's automatic minimum size is its content
   size, and the gallery holds images with an intrinsic width of 1200. */
.sw-pdp-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.sw-pdp-grid > *{ min-width:0; }
@media(min-width:860px){
  .sw-pdp-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,420px); gap:36px; align-items:start; }
  .sw-buybox{ position:sticky; top:74px; }
}

/* --- hero video slot ---------------------------------------------------- */
.sw-video{
  position:relative; aspect-ratio:16/10; width:100%;
  border-radius:16px; overflow:hidden;
  background:var(--sw-light); border:1px solid var(--sw-line);
}
.sw-video img{ width:100%; height:100%; object-fit:cover; display:block; }
.sw-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,0) 45%, rgba(26,26,26,.42));
  pointer-events:none;
}
.sw-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; display:flex; align-items:center; gap:10px;
  background:rgba(250,250,247,.94); color:var(--sw-primary);
  border:none; border-radius:40px; padding:12px 20px 12px 16px;
  font:inherit; font-size:14px; font-weight:800; cursor:pointer; width:auto;
  white-space:nowrap; box-shadow:0 10px 28px rgba(26,26,26,.28);
}
.sw-play:hover{ background:#FFFFFF; }
.sw-play:focus-visible{ outline:3px solid var(--sw-primary); outline-offset:3px; }
.sw-play span.tri{
  width:0; height:0; flex:0 0 auto;
  border-left:14px solid var(--sw-primary);
  border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:2px;
}
.sw-video-note{
  position:absolute; left:12px; bottom:10px; z-index:2;
  color:#FFFFFF; font-size:11.5px; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* --- gallery thumbs: indicators, not a second gallery ------------------- */
/* Scrolls inside its OWN row on mobile (snap, scrollbar hidden). One row
   with no scrollbar on desktop: 7 x 96 + 6 x 8 = 720px, under the column. */
.sw-thumbs{
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:2px;
}
.sw-thumbs::-webkit-scrollbar{ display:none; }
.sw-thumbs button{
  flex:0 0 96px; width:96px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit;
  border-radius:6px;
}
/* height:auto is load-bearing: the markup carries width/height attributes
   and aspect-ratio only applies while the other dimension is auto. */
.sw-thumbs img{
  width:100%; height:64px; object-fit:cover; display:block;
  border-radius:6px; border:1px solid var(--sw-line);
  box-shadow:0 0 0 2px transparent; transition:box-shadow .12s;
}
.sw-thumbs button span{ font-size:11px; font-weight:700; color:var(--sw-muted); line-height:1.2; text-align:center; }
.sw-thumbs button.is-on img{ border-color:var(--sw-primary); box-shadow:0 0 0 2px var(--sw-primary); }
.sw-thumbs button.is-on span{ color:var(--sw-primary); }
.sw-thumbs button:focus-visible img{ box-shadow:0 0 0 2px var(--sw-accent); }
/* desktop: seven thumbs share the column exactly, no scroll, no scrollbar */
@media(min-width:860px){ .sw-thumbs button{ flex:1 1 0; width:auto; min-width:0; max-width:96px; } }

/* --- buy box ------------------------------------------------------------ */
.sw-buybox{ background:var(--white); border:1px solid var(--sw-line); border-radius:18px; padding:18px 16px; }
.sw-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 4px; }
.sw-price .mula{ font-size:14px; font-weight:700; color:var(--sw-muted); }
.sw-price .amt{ font-size:40px; font-weight:800; color:var(--sw-primary); line-height:1; }
@media(min-width:860px){ .sw-price .amt{ font-size:46px; } }
.sw-price-note{ font-size:12px; color:var(--sw-muted); font-weight:600; }
/* the labelled former price (former list price, BRAND.md 1a) */
.sw-price .was{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; align-self:center; }
.sw-price .was s{ font-size:15px; font-weight:700; color:var(--sw-muted); }
.sw-price .was small{ font-size:9.5px; font-weight:700; color:var(--sw-muted); letter-spacing:.2px; }
.sw-was-note{ font-size:10.5px; color:var(--sw-muted); margin-top:8px; line-height:1.4; }
.sw-buybox .tpc-price s{ font-size:11.5px; color:var(--sw-muted); }

/* "ano ang makukuha mo": each li is ONE inline flowing line. The tick is
   absolutely positioned so the text (bold lead + rest) wraps as one block
   instead of splitting into flex items. */
.sw-getlist{ display:flex; flex-direction:column; gap:7px; margin:14px 0 4px; }
.sw-getlist li{
  position:relative; display:block; padding-left:20px;
  font-size:13px; line-height:1.5; color:var(--sw-ink);
}
.sw-getlist li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--sw-primary); font-weight:800; font-size:13px; line-height:1.5;
}
.sw-getlist li b{ font-weight:800; }
.sw-getlist-head{ font-size:11px; font-weight:800; letter-spacing:1.1px; color:var(--sw-muted); margin-top:16px; }

.sw-micro{ font-size:12px; color:var(--sw-muted); font-weight:600; text-align:center; margin-top:9px; }
.sw-need{ font-size:11.5px; line-height:1.5; color:var(--sw-muted); font-weight:600; text-align:center; margin-top:5px; }
.sw-addonline{
  margin-top:14px; padding-top:13px; border-top:1px dashed var(--sw-line);
  font-size:11.5px; line-height:1.6; color:var(--sw-muted);
}
.sw-addonline b{ color:var(--sw-ink); font-weight:700; }

/* --- tier chips: the tier-pick.css cards, tightened for a buy box -------- */
.sw-buybox .tier-pick{ gap:10px; margin:14px 0 0; }
@media(min-width:820px){ .sw-buybox .tier-pick{ grid-template-columns:1fr; } }
.sw-buybox .tier-pick-card{ padding:13px 13px; gap:9px; border-radius:14px; }
.sw-buybox .tpc-name b{ font-size:15px; }
.sw-buybox .tpc-price .now{ font-size:21px; }
.sw-buybox .tpc-pick{ padding:7px; font-size:12px; }
.tier-pick-card.gold.selected{ border-color:var(--sw-primary); box-shadow:0 0 0 4px rgba(30,123,69,.13); }
.tier-pick-card.gold.selected .tpc-price .now{ color:var(--sw-primary); }
.tier-pick-card.gold.selected .tpc-pick{ background:var(--sw-primary); border-color:var(--sw-primary); }
.tpc-flag{ background:var(--sw-primary); }
.tpc-sub{ display:block; font-size:11.5px; color:var(--sw-muted); margin-top:2px; }

/* section-level CTA under a visual */
.sw-cta-row{ max-width:360px; margin:18px auto 0; }

/* ==========================================================================
   REVIEW SCREENSHOT GALLERY  (the ROW scrolls, the page never does)
   ========================================================================== */
.sw-reviews{ padding:26px 0 10px; }
.sw-rv-wrap{ position:relative; }
.sw-rv-row{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; padding:4px 2px 10px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.sw-rv-row:focus-visible{ outline:3px solid var(--sw-primary); outline-offset:2px; }
.sw-rv-card{
  flex:0 0 300px; width:300px; margin:0; scroll-snap-align:start;
  background:var(--white); border:1px solid var(--sw-line); border-radius:14px; overflow:hidden;
}
.sw-rv-card img{ width:100%; height:auto; display:block; }
.sw-rv-btn{
  display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--sw-line);
  background:var(--white); color:var(--sw-primary); font-size:24px; line-height:1;
  cursor:pointer; box-shadow:0 6px 18px rgba(26,26,26,.12); font-family:inherit;
}
.sw-rv-btn.prev{ left:-8px; } .sw-rv-btn.next{ right:-8px; }
.sw-rv-btn:hover{ border-color:var(--sw-accent); }
.sw-rv-caption{ font-size:12px; color:var(--sw-muted); margin-top:4px; }
@media(min-width:860px){
  .sw-rv-card{ flex-basis:380px; width:380px; }
  .sw-rv-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .sw-rv-btn.prev{ left:-18px; } .sw-rv-btn.next{ right:-18px; }
}

/* ==========================================================================
   BODY BLOCKS
   ========================================================================== */
.sw-artifact{
  background:var(--sw-light); border-left:4px solid var(--sw-primary);
  border-radius:0 14px 14px 0; padding:14px 16px;
  font-size:13.5px; line-height:1.6; color:var(--sw-ink);
}
.sw-artifact b{ font-weight:800; }

/* --- status pills, the one vocabulary the whole page shares ------------- */
.sw-st{
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-size:11px; font-weight:800; letter-spacing:.3px;
  border-radius:20px; padding:3px 9px; line-height:1.2; white-space:nowrap;
}
.sw-st.ok{ background:#DDF2E4; color:#155E34; }
.sw-st.tight{ background:#FCEBC8; color:#7A4E07; }
.sw-st.lugi{ background:#F9D7D7; color:#8E1B1B; }
.sw-st.check{ background:var(--sw-gold); color:#4A3708; }
.sw-st.was{ background:#EEF1EE; color:var(--sw-muted); text-decoration:line-through; }

/* --- flowchart: 3 nodes, arrows between, stacks on mobile -------------- */
.sw-flow{ display:flex; flex-direction:column; align-items:stretch; gap:4px; list-style:none; padding:0; margin:0; }
.sw-flow-node{
  position:relative; background:var(--white); border:1px solid var(--sw-line);
  border-top:4px solid var(--sw-accent); border-radius:14px; padding:14px 16px 14px 52px; min-width:0;
}
.sw-flow-node .k{
  position:absolute; left:14px; top:14px;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--sw-primary); color:#fff; font-weight:800; font-size:13px;
}
.sw-flow-node h3{ font-size:15px; font-weight:800; color:var(--sw-ink); margin-bottom:4px; }
.sw-flow-node p{ font-size:13px; line-height:1.5; color:var(--sw-muted); }
.sw-flow-status{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.sw-flow-arrow{ display:flex; justify-content:center; color:var(--sw-primary); padding:2px 0; }
.sw-flow-arrow svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform:rotate(90deg); }
@media(min-width:760px){
  .sw-flow{ flex-direction:row; align-items:stretch; gap:6px; }
  .sw-flow-node{ flex:1 1 0; }
  .sw-flow-arrow{ flex:0 0 auto; align-items:center; padding:0 2px; }
  .sw-flow-arrow svg{ transform:none; }
}

/* --- propagation diagram ------------------------------------------------ */
.sw-prop-section{ padding-top:20px; }
.sw-prop{ background:var(--white); border:1px solid var(--sw-line); border-radius:16px; padding:16px; }
.sw-prop-src{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  background:var(--sw-light); border:1px solid #CBE5D6; border-radius:12px; padding:12px 14px;
  max-width:340px;
}
.sw-prop-src .lbl{ font-size:10px; font-weight:800; letter-spacing:1px; color:var(--sw-primary); }
.sw-prop-src b{ font-size:16px; font-weight:800; color:var(--sw-ink); }
.sw-prop-src .delta{ font-size:14px; font-weight:700; color:var(--sw-ink); font-variant-numeric:tabular-nums; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.sw-prop-src .delta i{ font-style:normal; color:var(--sw-primary); }
.sw-prop-src .delta em{ font-style:normal; font-size:11px; font-weight:800; background:var(--sw-lugi); color:#fff; border-radius:20px; padding:2px 7px; }
.sw-prop-arrow{ display:flex; justify-content:flex-start; padding:4px 0 4px 22px; color:var(--sw-primary); }
.sw-prop-arrow svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sw-prop-out{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:6px; }
.sw-prop-out li{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border:1px solid var(--sw-line); border-radius:10px; padding:8px 11px; min-width:0;
  font-size:13px;
}
.sw-prop-out .d{ font-weight:800; color:var(--sw-ink); flex:0 0 64px; }
.sw-prop-out .c{ color:var(--sw-muted); font-variant-numeric:tabular-nums; flex:1 1 auto; font-size:12.5px; }
.sw-prop-out li i{ font-style:normal; color:var(--sw-primary); font-weight:800; }
.sw-prop-out li.flip{ border-color:var(--sw-tight); background:#FFFBF2; }
.sw-prop-out .flipset{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin-left:auto; }
.sw-prop-foot{ margin-top:12px; font-size:13px; line-height:1.55; color:var(--sw-ink); font-weight:600; }
@media(min-width:640px){
  .sw-prop{ padding:20px; }
  .sw-prop-out{ grid-template-columns:1fr 1fr; gap:8px; }
  .sw-prop-out li.flip{ grid-column:1 / -1; }
}

/* status legend */
.sw-legend{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:14px; }
.sw-legend span{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--sw-muted); line-height:1.4; }
.sw-legend i{ flex:0 0 auto; min-width:58px; }
@media(min-width:640px){ .sw-legend{ grid-template-columns:1fr 1fr; } }

/* --- the moat trio, icon cards ---------------------------------------- */
.sw-moat{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:860px){ .sw-moat{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
.sw-moat-card{
  background:var(--white); border:1px solid var(--sw-line);
  border-radius:14px; padding:16px; min-width:0;
}
.sw-moat-card .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; background:var(--sw-light); color:var(--sw-primary); margin-bottom:10px;
}
.sw-moat-card .ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sw-moat-card h3{ font-size:15px; font-weight:800; margin-bottom:6px; color:var(--sw-ink); line-height:1.35; }
.sw-moat-card p{ font-size:13px; line-height:1.55; color:var(--sw-muted); }
.sw-receipt{
  display:block; margin-top:10px; padding-top:9px; border-top:1px dashed var(--sw-line);
  font-size:11.5px; line-height:1.5; color:var(--sw-muted);
}
.sw-receipt::before{ content:"RESIBO "; color:var(--sw-primary); font-weight:800; letter-spacing:.4px; }

/* --- the cost-of-being-wrong anchor: one big number ------------------- */
.sw-anchor{ background:var(--white); border:1px solid var(--sw-line); border-radius:16px; padding:18px 16px; text-align:center; }
.sw-anchor .sw-eg{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:1.1px;
  color:var(--sw-muted); background:#F1F3F1; border:1px solid var(--sw-line);
  border-radius:20px; padding:3px 10px; margin-bottom:12px;
}
.sw-big{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.sw-big b{ font-size:44px; font-weight:800; color:var(--sw-lugi); line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.sw-big span{ font-size:13px; font-weight:700; color:var(--sw-muted); }
.sw-math{ margin-top:12px; font-size:13px; color:var(--sw-ink); font-weight:600; line-height:1.5; }
.sw-math i{ font-style:normal; color:var(--sw-primary); font-weight:800; padding:0 3px; }
.sw-vs{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--sw-light); border-radius:12px; padding:12px 14px; margin:14px auto 0;
  font-size:13.5px; font-weight:700; color:var(--sw-ink); max-width:420px; text-align:left;
}
.sw-vs b{ font-size:22px; font-weight:800; color:var(--sw-primary); flex:0 0 auto; }
.sw-anchor .sw-note{ max-width:460px; margin:12px auto 0; }
@media(min-width:640px){ .sw-big b{ font-size:56px; } .sw-anchor{ padding:24px; } }

/* --- tables: files and comparison. NO scroll wrapper, ever. ----------- */
/* table-layout:fixed makes 100% mean 100%; long words break inside cells. */
table.sw-table{
  width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  background:var(--white); font-size:13px;
  border:1px solid var(--sw-line); border-radius:14px; overflow:hidden;
}
table.sw-table th, table.sw-table td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--sw-line);
  vertical-align:middle; line-height:1.45; overflow-wrap:anywhere; min-width:0;
}
table.sw-table thead th{ background:var(--sw-light); color:var(--sw-ink); font-weight:800; font-size:12px; }
table.sw-table tbody th{ font-weight:600; color:var(--sw-ink); }
table.sw-table tbody tr:last-child td, table.sw-table tbody tr:last-child th{ border-bottom:none; }
/* <col> widths: the two tier columns are fixed (4.5rem phone, 6rem desktop)
   and the feature column absorbs the rest (width:auto, wraps its text).
   Tier names and prices never break inside a word. */
table.sw-table col.col-t{ width:4.5rem; }
table.sw-table col.col-f{ width:auto; }
table.sw-table td.c, table.sw-table th.c{ text-align:center; padding-left:2px; padding-right:2px; }
table.sw-table thead th.c{
  overflow-wrap:normal; word-break:keep-all; white-space:nowrap; line-height:1.25; padding-left:0; padding-right:0;
}
table.sw-table thead th.c .tier, table.sw-table thead th.c .price{ display:block; white-space:nowrap; }
table.sw-table thead th.c .tier{ font-size:10.5px; font-weight:700; color:var(--sw-muted); letter-spacing:.2px; }
table.sw-table thead th.c .price{ font-size:13px; font-weight:800; color:var(--sw-ink); }
table.sw-table .yes{ color:var(--sw-primary); font-weight:800; font-size:16px; }
table.sw-table .no{ color:#B4BCB6; font-weight:700; }
table.sw-compare tr.buo th, table.sw-compare tr.buo td{ background:#FFFDF7; }
table.sw-table tbody th{ overflow-wrap:normal; word-break:normal; }
@media(max-width:480px){
  table.sw-table th, table.sw-table td{ padding:9px 9px; font-size:12.5px; }
}
@media(min-width:640px){
  table.sw-table col.col-t{ width:6rem; }
  table.sw-table thead th.c .tier{ font-size:11.5px; }
  table.sw-table thead th.c .price{ font-size:14px; }
}

/* the files table rows carry a chip, a name and a one-line note */
table.sw-files tbody th{ display:table-cell; }
table.sw-files .ext{
  display:inline-block; vertical-align:middle; margin-right:6px;
  font-size:9px; font-weight:800; letter-spacing:.5px; color:#fff;
  background:var(--sw-accent); border-radius:5px; padding:3px 5px; line-height:1.2;
}
table.sw-files .ext.xlsx{ background:var(--sw-primary); }
table.sw-files .ext.pdf{ background:#8C5A38; }
table.sw-files .fn{ font-weight:800; font-size:12.5px; color:var(--sw-ink); vertical-align:middle; }
table.sw-files small{ font-size:11px; color:var(--sw-muted); line-height:1.4; display:block; margin-top:2px; overflow-wrap:anywhere; }

/* --- Engine Check callout --------------------------------------------- */
.sw-engine{
  display:flex; gap:14px; align-items:center;
  background:var(--gold-bg); border-left:4px solid var(--sw-gold); border-radius:0 14px 14px 0; padding:16px;
}
.sw-engine .big{ font-size:34px; font-weight:800; color:var(--sw-primary); line-height:1; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.sw-engine .big small{ font-size:16px; color:var(--sw-muted); font-weight:700; }
.sw-engine h3{ font-size:15px; font-weight:800; margin-bottom:4px; color:var(--sw-ink); }
.sw-engine p{ font-size:13px; line-height:1.55; color:#5C5030; }

/* --- "ano ang HINDI nito ginagawa" ------------------------------------ */
.sw-not{ background:var(--white); border:1px dashed var(--sw-line); border-radius:14px; padding:16px; }
.sw-not ul{ display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:760px){ .sw-not ul{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
.sw-not li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--sw-muted); }
.sw-not li::before{ content:"\2715"; color:#B4BCB6; font-weight:800; flex:0 0 auto; }
.sw-not p.after{ margin-top:12px; font-size:13px; line-height:1.6; color:var(--sw-ink); font-weight:700; }

/* --- typed review cards (hidden until the owner has real ones) -------- */
.sw-said-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:760px){ .sw-said-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.sw-said-card{
  margin:0; background:var(--white); border:1px solid var(--sw-line); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
.sw-said-card img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.sw-said-card blockquote{ margin:0; font-size:13.5px; line-height:1.6; color:var(--sw-ink); }
.sw-said-card figcaption{ font-size:12px; color:var(--sw-muted); display:flex; flex-direction:column; gap:1px; }
.sw-said-card figcaption b{ color:var(--sw-ink); font-weight:800; }
.sw-said-slot{ min-height:120px; border:1px dashed var(--sw-line); border-radius:14px; background:transparent; }

/* --- Tatak Swabe closing ---------------------------------------------- */
.sw-close{ text-align:center; background:var(--sw-light); border-radius:18px; padding:26px 18px; }
.sw-close img{ width:112px; height:112px; margin:0 auto 12px; border-radius:50%; }
.sw-close p{ font-size:14px; line-height:1.7; color:var(--sw-ink); max-width:460px; margin:0 auto; }
.sw-close .sig{ margin-top:12px; font-weight:800; color:var(--sw-primary); font-size:14px; }
.sw-close .btn{ max-width:360px; margin:18px auto 0; }

/* the stamp wherever it appears inline */
.sw-stamp{ width:64px; height:64px; flex:0 0 64px; }
.sw-stamp-row{ display:flex; align-items:center; gap:12px; font-size:12.5px; line-height:1.5; color:var(--sw-muted); }

/* ==========================================================================
   STICKY MOBILE BUY BAR (hidden at >=860px by styles.css)
   ========================================================================== */
body.sw-has-sticky{ padding-bottom:84px; }
@media(min-width:860px){ body.sw-has-sticky{ padding-bottom:0; } }
.sticky-bar{ background:var(--white); border-top:1px solid var(--sw-line); box-shadow:0 -10px 30px rgba(26,26,26,.10); }
.sticky-bar .sinfo{ min-width:0; }
.sticky-bar .sprice{ color:var(--sw-primary); font-size:17px; display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.sticky-bar .sprice s{ font-size:12px; color:var(--sw-muted); font-weight:700; }
.sticky-bar .sprice small{ font-size:9.5px; color:var(--sw-muted); font-weight:700; }
.sticky-bar .sold{ color:var(--sw-muted); }

/* ==========================================================================
   PLAIN PAGES (privacy / terms / refund)
   ========================================================================== */
.sw-doc{ max-width:720px; margin:0 auto; padding:26px 18px 48px; }
.sw-doc h1{ font-size:25px; font-weight:800; margin-bottom:6px; color:var(--sw-ink); }
.sw-doc .updated{ font-size:12px; color:var(--sw-muted); margin-bottom:22px; }
.sw-doc h2{ font-size:16px; font-weight:800; margin:26px 0 8px; color:var(--sw-ink); }
.sw-doc p, .sw-doc li{ font-size:14px; line-height:1.7; color:#333935; }
.sw-doc p{ margin-bottom:11px; }
.sw-doc ul{ list-style:disc; padding-left:22px; margin-bottom:11px; }
.sw-doc li{ margin-bottom:6px; }
.sw-doc a{ color:var(--sw-primary); text-decoration:underline; }

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .sticky-bar, .sw-video, .sw-thumbs, .scroll-progress, header.site, .btn, .sw-rv-btn{ display:none !important; }
  html,body{ background:#fff; color:#000; padding:0; }
  .sw-buybox, .sw-tile, .sw-flow-node, .sw-moat-card, table.sw-table, .sw-prop{ border-color:#999; box-shadow:none; break-inside:avoid; }
  .sw-pdp-grid{ display:block; }
  a[href^="/"]::after{ content:" (swabespreadsheets.store" attr(href) ")"; font-size:10px; }
  section{ padding:14px 0; }
}