/* =========================================================
   EasyStore theme (rule 23, CEO 2026-10-18): the easystore.in.th look and
   feel applied to the cloudpillo shop template. Loaded LAST in <head> so its
   :root tokens win over style.css, nav.css and the inline :root blocks of the
   standalone pages. Token NAMES are the template's; VALUES are EasyStore's.

     --gold       #ffdf02  yellow        primary CTA, nav bar, badges
     --gold-deep  #111111  black         ink on yellow, dark panels, hover
     --gold-soft  #fff6b3  pale yellow   callouts, tinted borders
     --sun        #ffdf02  yellow        accent (ink text on it, never white)
     --sky        #f8f8f8  card grey     feature + risk panels
     --cream      #f8f8f8  card grey     page sections
     --cream-2    #f8f8f8  card grey     image backgrounds
     --ink        #111111  black         headings, icons
     --text       #222222  body text (EasyStore --text)
     --ink-soft   #666666  muted text
     --line       #e0e0e0  hairline borders
     --star       #00b67a  Trustpilot green (unchanged)

   Fonts: Poppins (headings, buttons, labels) + Inter (body), as on easystore.in.th.
   Shapes: buttons 10px radius; pills 50px; cards 14px; nav 68px yellow bar.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root{
  --gold:#ffdf02;
  --gold-dark:#e6c800;
  --gold-deep:#111111;
  --gold-soft:#fff6b3;
  --cream:#f8f8f8;
  --cream-2:#f8f8f8;
  --ink:#111111;
  --text:#222222;
  --ink-soft:#666666;
  --line:#e0e0e0;
  --white:#ffffff;
  --sky:#f8f8f8;
  --sun:#ffdf02;
  --star:#00b67a;
  --shadow:0 4px 20px rgba(0,0,0,.06);
  --shadow-sm:0 2px 12px rgba(0,0,0,.08);
}

/* ---- Type ---- */
body{font-family:"Inter",system-ui,sans-serif;color:var(--text)}
h1,h2,h3,h4,.brand .name,.topnav__name,.site-footer__delivery h4,.hero h2{font-family:"Poppins",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
h1,.hero h2{font-weight:800;letter-spacing:-.02em}
h2{font-weight:800}
p{color:var(--ink-soft)}
.section-label,.eyebrow{font-family:"Poppins",sans-serif;color:var(--ink)}
.brand .name small,.topnav__name small{font-family:"Inter",sans-serif;color:var(--ink-soft)}

/* ---- Buttons: 10px radius, yellow primary with BLACK text, black outline secondary ---- */
.btn,.nav-cta,.topnav__cta,.cookie-banner__btn{font-family:"Poppins",sans-serif;border-radius:10px}
.btn-primary,.topnav__cta,.sticky-cta .btn,.cookie-banner__btn--accept{background:var(--gold);color:var(--ink);box-shadow:none}
.btn-primary:hover,.topnav__cta:hover,.sticky-cta .btn:hover{background:var(--gold-dark);color:var(--ink);box-shadow:0 8px 24px rgba(255,223,2,.4);transform:translateY(-2px)}
.btn-primary svg path,.sticky-cta .btn svg path,.nav-cta svg path{stroke:var(--ink)}
.btn-ghost,.btn-outline{border:2px solid var(--ink);color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#333}
.btn-light{background:#fff;color:var(--ink);border:2px solid var(--line)}
.nav-cta{background:var(--ink);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;border-radius:8px}
.nav-cta:hover{background:#333;color:#fff}
#cart-badge,.topnav__badge{background:var(--ink);color:var(--gold)}

/* ---- Nav: the yellow bar ---- */
.topnav,.nav--solid,body.home-hero .topnav,body.home-hero .topnav.is-drawer-open{background:var(--gold);border-bottom:0;box-shadow:0 2px 12px rgba(0,0,0,.12);backdrop-filter:none}
.topnav__brand,.topnav__cart,.topnav__cart:hover,.topnav__links a,.topnav__caret,.brand,.nav-links a,.cart-icon{color:var(--ink)}
.topnav__links a:hover,.nav-links a:hover{opacity:.6;color:var(--ink)}
.topnav__burger span,.burger span{background:var(--ink)}
.topnav__burger,.burger{border-color:rgba(0,0,0,.15);background:transparent}
.topnav__drop a:hover{background:var(--gold-soft);color:var(--ink)}
.brand .mark,.nav--solid .brand .mark{background:var(--ink);color:var(--gold)}
.topnav__drawer,.nav-mobile{background:var(--gold)}
.topnav__draw-group{border-bottom-color:rgba(0,0,0,.12)}

/* ---- Surfaces ---- */
.strip,.trust-strip{background:var(--ink);color:#fff}
.strip .item,.trust-strip .item{color:#fff}
.strip .item svg,.trust-strip .item svg{color:var(--gold)}
.bcard,.scard,.tbadge,.company-card,.faq-item,.about-company-card,.buybox,.feature-block,.risk-inner{border-color:var(--line);border-radius:14px;background:#fff}
.bcard .ic,.tbadge .ic,.delivery .ic{background:var(--gold);color:var(--ink)}
.hero-badge,.ss-popular-badge,.about-chip,.pill,.badge{background:var(--gold);color:var(--ink);border-radius:50px}
.step-num{background:var(--ink);color:var(--gold)}
.divider,.divider.left{background:var(--gold)}
.shop{background:var(--ink)}
.shop h2,.shop p,.shop .urgency,.shop .g{color:#fff}
.shop h2 em{color:var(--gold);font-style:normal}
.shop .btn-light{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---- Footer: black with yellow accents ---- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);font-family:"Inter",system-ui,sans-serif}
.site-footer__contact a,.site-footer__col a:hover,.site-footer__cross,.site-footer__faith a,.site-footer__meta a:hover,.site-footer__delivery strong,.cookie-banner__text a{color:var(--gold)}
.site-footer__col h4,.site-footer__delivery h4{color:#fff;font-family:"Poppins",sans-serif}
.cookie-banner__btn--ghost:hover{border-color:var(--gold);color:#fff}

/* ---- PDP buy box + price ---- */
.price-block .now,.atc-price .now,.scard-price .now{font-family:"Poppins",sans-serif;font-weight:800;color:var(--ink)}
.price-block .save,.save-badge{background:var(--gold);color:var(--ink);border-radius:50px}
.sale-timer{background:var(--gold-soft);color:var(--ink);border-radius:10px}
.buybox-row-chip{background:var(--gold);color:var(--ink)}

/* ---- Every selector that hard-codes the old serif in style.css / nav.css / inline blocks ---- */
.overlay a,.product-title,.price-now,.atc-price-now,.buybox-also-name,.also-card-name,.review-card-avatar,
.sticky-buy-name,.sticky-buy-now,.cart-upsell-body h3,.cart-upsell-price,.shop-cat-title,.scard-meta h3,
.scard-price .now,.cart-trust-body h3,.cart-item-body h3,.cart-item-price,.fifi-order-name,
.site-footer__logo span,.review-meta .big,.rcard .av,.price-block .price{font-family:"Poppins",system-ui,sans-serif}
.product-title{font-weight:800;letter-spacing:-.02em}
.price-now,.atc-price-now,.sticky-buy-now,.price-block .price{font-weight:800}

/* ---- Every white-on-primary rule: black on yellow instead ---- */
.buybox-also-add,.gallery-sale-badge,.guide-inner a.btn-primary{background:var(--gold);color:var(--ink)}
.guide-inner a.btn-dark{color:#fff}

/* ---- Widths (CEO 2026-10-18: all page widths consistent) ----
   Outer frame everywhere = --maxw 1180px (nav, footer, cookie bar, sections).
   Reading columns everywhere = --readw 820px (the template mixed 720 / 760 / 780 / 820). */
:root{--maxw:1180px;--readw:820px}
.topnav__inner,.site-footer__inner,.cookie-banner__inner,.legal-nav .wrap,footer .wrap,.wrap,.container{max-width:var(--maxw)}
.pitch-inner,.feature-para,.spec-table,.reviews-inner,.guide-inner,#cta-banner .container,.prose-page .container,.about-hero,.shop .wrap,.faq-list,.faq-wrap,.guide-body{max-width:var(--readw)}
/* Standalone legal pages (privacy, terms): the title band and the prose share the reading width;
   their legal-nav and footer wraps keep the outer frame. */
header.hero .wrap,main > .wrap{max-width:var(--readw)}
.legal-nav .wrap,footer .wrap{max-width:var(--maxw)}