/* =========================================================
   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,.sticky-cta .btn,.cookie-banner__btn--accept{background:var(--gold);color:var(--ink);box-shadow:none}
.btn-primary: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:none;color:var(--ink)}
.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,.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. */
/* One page width everywhere (CEO 2026-10-22, buyfactorydirect.com.au: "make sure all pages width are
   consistent"): every page column is the outer frame, so headings start at the logo's left edge on
   home, shop, product, cart, policy and contact pages alike. Long text still wraps at the reading
   width, left-aligned inside the frame rather than centred in a narrower column. */
.prose-page .container,header.hero .wrap,main > .wrap{max-width:var(--maxw)}
.prose-page .container > :not(.contact-grid):not(.company-layout):not(table),header.hero .wrap > *,main > .wrap > :not(table){max-width:var(--readw)}
.legal-nav .wrap,footer .wrap{max-width:var(--maxw)}
/* Grid items default to min-width:auto, so one long word, email or form row widens a one-column
   grid past the screen (contact and cart scrolled sideways on a phone, 2026-10-22). */
[class*="-grid"] > *,[class*="-layout"] > *{min-width:0}
/* Imported product guides embed YouTube iframes with fixed widths (one was 1280px): keep them in the column. */
main iframe,main video{max-width:100%}
main iframe[src*="youtube"]{width:100%;height:auto;aspect-ratio:16/9}
/* Nav "Shop Online" = the company standard button (rule 23 "black uppercase CTA pill"; same rule as the
   assisted family theme, CEO 2026-10-21): black with white uppercase text on the yellow bar. It was
   yellow on yellow here and did not read as a button (CEO 2026-10-22). */
.topnav__cta,.topnav__cta--drawer{background:var(--ink)!important;color:#fff!important;border:2px solid var(--ink)!important;
  border-radius:10px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em;box-shadow:none!important}
.topnav__cta:hover,.topnav__cta--drawer:hover{background:#333!important;border-color:#333!important;color:#fff!important}
/* MCC forms (contact = form 1, wholesale = form 3) inject a red submit button: fleet EasyStore standard
   (clearancewarehouse.irish, assistedliving.net.au) is yellow with black text. */
.mcc-form button{background:var(--gold)!important;color:var(--ink)!important;border:2px solid var(--gold)!important;border-radius:10px!important;font-weight:700!important;font-family:"Inter",sans-serif!important;padding:13px 28px!important}
.mcc-form button:hover{background:var(--gold-dark)!important;border-color:var(--gold-dark)!important}
.mcc-form input:focus,.mcc-form textarea:focus{outline:3px solid var(--gold);border-color:var(--ink)!important}
/* Product-page trust strip under the nav: black band with WHITE writing and yellow ticks (CEO 2026-10-22;
   the assisted family standard, CEO 2026-10-21). The text was grey on black. */
.trust-strip{background:var(--ink)!important;color:#fff!important;border:0!important}
.trust-strip,.trust-strip *,.trust-strip-list li,.trust-strip-list li strong{color:#fff!important}
.trust-strip svg,.trust-strip-list svg,.trust-strip-stars svg{color:var(--gold)!important}