/* =========================================================
   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       #c2507a  rose          primary CTA, nav bar, badges
     --gold-deep  #111111  black         ink on yellow, dark panels, hover
     --gold-soft  #fceaf1  pale tint     callouts, tinted borders
     --sun        #c2507a  rose          accent (WHITE text on it)
     --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 rose 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:#c2507a;
  --gold-dark:#a13e63;
  --gold-deep:#111111;
  --gold-soft:#fceaf1;
  --cream:#f8f8f8;
  --cream-2:#f8f8f8;
  --ink:#111111;
  --text:#222222;
  --ink-soft:#666666;
  --line:#e0e0e0;
  --white:#ffffff;
  --sky:#f8f8f8;
  --sun:#c2507a;
  --star:#00b67a;
  --on-gold:#ffffff;
  --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(--on-gold);box-shadow:none}
.btn-primary:hover,.topnav__cta:hover,.sticky-cta .btn:hover{background:var(--gold-dark);color:var(--on-gold);box-shadow:0 8px 24px rgba(194,80,122,.4);transform:translateY(-2px)}
.btn-primary svg path,.sticky-cta .btn svg path,.nav-cta svg path{stroke:currentColor}
.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(--on-gold)}
.hero-badge,.ss-popular-badge,.about-chip,.pill,.badge{background:var(--gold);color:var(--on-gold);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(--on-gold);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(--on-gold);border-radius:50px}
.sale-timer{background:none;color:var(--ink)}
.buybox-row-chip{background:var(--gold);color:var(--on-gold)}

/* ---- 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(--on-gold)}
.guide-inner a.btn-dark{color:#fff}

/* ---- Widths (CEO 2026-10-19: every page width = the navigation width) ----
   One frame everywhere: --maxw 1180px with 24px side padding, so content runs edge to edge with the
   logo and the last nav item. The old 820px reading column (--readw) now equals the frame. Text
   measures INSIDE the frame (hero copy, centred section headings, paragraph line lengths) stay. */
:root{--maxw:1180px;--readw:var(--maxw)}
.topnav__inner,.site-footer__inner,.cookie-banner__inner,.legal-nav .wrap,footer .wrap,.wrap,.container,.sticky-buy-inner{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,header.hero .wrap,main > .wrap{max-width:var(--maxw)}
.topnav__inner,.site-footer__inner,.wrap,.container,.sticky-buy-inner{padding-left:24px;padding-right:24px}

/* ---- Cloudpillo port lineage: selectors the factory frame does not have ---- */
.cart-badge{background:var(--ink);color:var(--gold)}
.scard-badge{background:var(--gold);color:var(--on-gold);border-radius:50px}
.topnav__trigger,.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger,.topnav__draw-head,.topnav__draw-head .topnav__caret,.topnav__draw-links a{color:var(--ink)}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{background:rgba(0,0,0,.06)}
.topnav__drawer{border-top-color:rgba(0,0,0,.12)}
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name small,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__trigger,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__cart{text-shadow:none}
.topnav__cta:hover{box-shadow:0 8px 24px rgba(0,0,0,.18)}
#cookie-banner{background:var(--ink);font-family:"Inter",system-ui,sans-serif}
.cookie-banner__btn--accept:hover{background:var(--gold-dark);box-shadow:0 8px 24px rgba(194,80,122,.4)}
/* The nav CTA sits on the yellow bar here, so it takes EasyStore's black nav button, not the yellow fill */
.topnav__cta{background:var(--ink);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;border-radius:8px}
.topnav__cta:hover{background:#333;color:#fff;transform:translateY(-1px)}
.topnav__inner{min-height:68px}
/* Headings the template pins to the old sans, and the prose-page link rule that turned the 404 button white */
.faq-q h3,.footer-col h4,.guide-body h4{font-family:"Poppins",system-ui,sans-serif}
.prose-page a.btn-primary{color:var(--ink)}
.topnav,.product-h1-keywords,.cart-field input,.cart-field textarea{font-family:"Inter",system-ui,sans-serif}
.topnav__trigger,.topnav__draw-head,.faq-q{font-family:"Poppins",system-ui,sans-serif}
/* Product highlight icons: each carried its own --accent colour (blue, green, amber, purple); EasyStore = black icon on a yellow chip */
.highlight-icon,.highlight-card .highlight-icon,.highlight-card:nth-child(n) .highlight-icon{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

/* Shop-band urgency pill (was an orange tint with pale text) and highlighted words in product copy */
.shop .urgency{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
mark{background:var(--gold-soft);color:inherit}

/* Trust strip under the nav: the theme makes it black, so its grey (#666) text could not be read */
.trust-strip{border-bottom-color:var(--ink)}
.trust-strip-list li{color:rgba(255,255,255,.88)}
.trust-strip-list li strong{color:#fff}
.trust-strip-list svg{color:var(--gold)}

/* ---- Pet Supply Company (mypetproducts.uk, CEO 2026-10-20): home page inline <style> and nav.css carry
   their own orange/navy rules; each one that would survive the token swap is set here. ---- */
body{background:#fff}
.topnav__name{font-weight:800}
.product-h1-keywords{color:var(--ink-soft)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline-color:var(--ink)}
/* The home nav turns white once the page scrolls (nav.css is-scrolled); keep the yellow bar */
body.home-hero .topnav.is-scrolled{background:var(--gold);border-bottom-color:transparent;backdrop-filter:none}
/* Hero accent word: EasyStore marks it with a yellow underline band, not italic orange */
/* Some siblings carry the hero heading as an h1 (the inline <style> only sizes .hero h2): same size and band */
.hero h1{font-size:clamp(2.4rem,7vw,4.1rem);line-height:1.12;margin-bottom:20px}
.hero h2 em,.hero h1 em{color:var(--ink);font-style:normal;background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}
/* PDP highlight cards: style.css tints each one (blue, green, amber, purple); EasyStore = one grey card */
.highlight-card,.highlight-card:nth-child(n){background:var(--cream);border-color:var(--line);border-radius:14px}

/* ---- Home layer (CEO 2026-10-22): the home layer (home-style.css on one lineage,
   us-style.css on the other) pins a green palette of its own; each rule that survives the token swap
   is set here. The hero accent word takes the same yellow band as .hero h2 em. ---- */
.home-hero,.us-hero,.home-measure,.us-measure{background:var(--cream)}
.home-hero h1,.us-hero h1,.home-measure h2,.us-measure h2{color:var(--ink)}
.home-hero h1 em,.us-hero h1 em{color:var(--ink);font-style:normal;font-weight:inherit;background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}
.home-text-link,.us-text-link,.post-list a{color:var(--ink)}
.home-note,.us-note{color:var(--ink-soft)}
.home-hero-image span,.us-hero-image span{background:var(--gold);color:var(--on-gold)}
.home-benefits,.us-benefits{background:var(--ink);color:#fff}
.home-benefits svg,.us-benefits svg{color:var(--gold)}
.home-hero .btn-primary,.home-measure .btn-primary,.us-hero .btn-primary,.us-measure .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.home-hero .btn-primary:hover,.home-measure .btn-primary:hover,.us-hero .btn-primary:hover,.us-measure .btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--on-gold)}
.post-list li{border-color:var(--line)}
.store-body mark{background:var(--gold-soft)}
.track-form input{border-color:var(--line)}
/* Footer headings are h2 on this frame while nav.css still styles h4, so the theme's h2 ink made them black on the
   black footer at page-heading size. Same look the h4s had: white, small caps for the columns. */
.site-footer h2{color:#fff;font-family:"Poppins",system-ui,sans-serif}
.site-footer__col h2{font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
.site-footer__delivery h2{font-weight:700;font-size:1.18rem;letter-spacing:0;margin:0 0 10px}
/* Category cards on this frame name the product in .scard-name (style.css pins Fraunces) */
.scard-name{font-family:"Poppins",system-ui,sans-serif;font-weight:700}
/* The standalone home pages set .hero h1/.hero h2 to weight 500, which outranks the plain h1 rule: EasyStore display weight */
.hero h1,.hero h2{font-weight:800;letter-spacing:-.02em}
/* The embedded marketing-command-centre forms (contact form 1, quote form 3) paint their submit button red: brand primary here */
.mcc-form button,.mcc-form [type=submit]{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--on-gold)!important;border-radius:10px!important;font-family:"Poppins",system-ui,sans-serif!important}
.mcc-form button:hover,.mcc-form [type=submit]:hover{background:var(--gold-dark)!important;border-color:var(--gold-dark)!important}

/* ---- RED variant (Budget Screens, CEO 2026-10-22): the EasyStore layout with #e10600 in place of the yellow.
   Text on the red is WHITE. Red text on the black footer and black badges is too faint, so those go white
   (links) or swap to white-on-red (badges). Underline bands and marks use the pale tint --gold-soft. ---- */
/* the red bar: every name, link, caret, icon and burger on it is white */
.topnav__brand,.topnav__name,.topnav__name small,.topnav__cart,.topnav__cart:hover,.topnav__links a,.topnav__links a:hover,
.topnav__caret,.topnav__trigger,.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger,.topnav__draw-head,
.topnav__draw-head .topnav__caret,.topnav__draw-links a,.brand,.brand .name,.brand .name small,.nav-links a,.nav-links a:hover,.cart-icon{color:var(--on-gold)}
.topnav__links a:hover,.nav-links a:hover{opacity:.8}
.topnav__burger span,.burger span{background:var(--on-gold)}
.topnav__burger,.burger{border-color:rgba(255,255,255,.45)}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{background:rgba(0,0,0,.14)}
.topnav__drawer{border-top-color:rgba(255,255,255,.25)}
.topnav__draw-group{border-bottom-color:rgba(255,255,255,.2)}
.topnav__drop a:hover{color:var(--ink)}
/* the dropdown panel stays white with black links */
.topnav__drop a{color:var(--ink)}
/* badges that sat black-with-yellow: white disc with red figure on the bar, red disc with white figure elsewhere */
#cart-badge,.topnav__badge,.cart-badge{background:#fff;color:var(--gold)}
.brand .mark,.nav--solid .brand .mark{background:#fff;color:var(--gold)}
.step-num{background:var(--gold);color:var(--on-gold)}
.btn-ghost:hover,.btn-outline:hover{color:#fff}
/* black footer: white links, red only as the hover underline */
.site-footer__contact a,.site-footer__faith a,.site-footer__delivery strong,.cookie-banner__text a,.site-footer__cross{color:#fff}
.site-footer__col a:hover,.site-footer__meta a:hover,.site-footer__contact a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.shop h2 em{color:#fff;background:linear-gradient(transparent 62%,var(--gold) 62%)}
/* the 404/prose primary button and the hero bands */
.prose-page a.btn-primary{color:var(--on-gold)}
.home-hero h1 em,.us-hero h1 em,.hero h2 em,.hero h1 em{background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}

/* ---- Shop pages to the company standard (CEO 2026-10-23, as assistedliving.net.au): a "Shop online" pill, jump links to each
   category, heavy category headings with a bar in the brand colour ---- */
.shop-page-head .section-label{display:inline-block;background:var(--gold);color:var(--on-gold,var(--ink));padding:6px 14px;border-radius:999px;font-family:"Poppins",system-ui,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.shop-page-head h1{margin-bottom:12px}
.shop-page-top{padding-bottom:0!important}
.shop-page-top + .shop-page,.shop-page-top ~ .shop-page{padding-top:8px!important}
.shop-cat-title{font-family:"Poppins",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,1.9rem);margin:40px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.shop-cat-title::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--gold);margin-top:10px}
.shop-jump-links{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px}
.shop-jump-links a{display:inline-block;border:2px solid var(--ink);border-radius:999px;color:var(--ink);background:#fff;font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.92rem;padding:8px 18px;text-decoration:none}
.shop-jump-links a:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold,var(--ink))}
.shop-category{scroll-margin-top:90px}
.container.shop-page-head{max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-bottom:16px}