/* =========================================================
   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: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-19 on kidsplayhouse.irish: 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(--ink);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(255,223,2,.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(--ink)}

/* 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(--ink)}
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)}

.journal-article{max-width:var(--maxw)}

/* Dropdown links: nav.css pins the old navy (#0e1a2b) */
.topnav__drop a{color:var(--ink)}

/* ---- BirdSpikes frame tokens (CEO 2026-10-20: EasyStore look on every BirdSpikes store, as birdspikes.net.au) ----
   The port frame's steel-blue accent and orange/navy brand tokens take EasyStore's yellow and black. */
:root{
  --accent:#ffdf02;--accent-deep:#111111;--accent-soft:#fff3a6;
  --paper:#f8f8f8;--paper-2:#f0f0f0;
}
h1 em,h2 em,h3 em{font-style:normal;color:inherit;background:linear-gradient(transparent 62%,var(--gold) 62%);padding:0 .08em}
/* Home page: nav.css makes the bar see-through over the hero photo; EasyStore keeps the yellow bar everywhere */
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open){background:var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.12);backdrop-filter:none}
/* migration.css hero emphasis was the old orange */
.migration-hero em{color:inherit}
/* nav.css turns the bar near-black (#0f1c24) once scrolled and with the mobile drawer open; EasyStore keeps it yellow */
.topnav.is-scrolled,.topnav.is-drawer-open,body.home-hero .topnav.is-scrolled,body.home-hero .topnav.is-drawer-open{background:var(--gold);border-bottom-color:transparent;backdrop-filter:none}
:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__brand,:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__name,
:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__trigger,:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__cart{color:var(--ink)}
:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__name small{color:var(--ink-soft)}
.topnav.is-scrolled .topnav__trigger:hover,.topnav.is-scrolled .topnav__item.is-open .topnav__trigger,:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__cart:hover{color:var(--ink);background:rgba(0,0,0,.06)}
:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__burger{background:transparent;border-color:rgba(0,0,0,.15)}
:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__burger span{background:var(--ink)}
.footer{background:var(--ink)}
/* Nav text over the home hero was the frame's navy (#14242e); black on the yellow bar */
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) :is(.topnav__brand,.topnav__name,.topnav__trigger,.topnav__cart){color:var(--ink)}
.topnav__lang,.topnav__lang span{color:var(--ink)}
.migration-hero{background:var(--cream)}

/* ---- Fleet-standard About page (CEO 2026-10-20, every BirdSpikes store to the birdspikes.net.au standard; rule 25) ---- */
.about-page{padding:50px 0 80px}
.about-hero{max-width:760px;margin-bottom:42px}
.about-hero h1{margin-bottom:8px}
.about-lede{color:var(--ink-soft);font-size:1.15rem;line-height:1.55;margin-bottom:18px}
.about-chips{display:flex;flex-wrap:wrap;gap:8px}
.about-chip{display:inline-block;background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;margin-bottom:48px}
@media(min-width:880px){.about-grid{grid-template-columns:1.4fr 1fr;gap:52px}}
.about-story h2{font-size:1.5rem;margin:0 0 12px}
.about-story h2 + p{margin-top:0}
.about-chip--faith{background:var(--gold-soft,#f4ca66);border-color:transparent}
.about-faith{margin-top:34px;padding-top:26px;border-top:1px solid var(--line,#e2e5ea)}
.about-story p{margin-bottom:15px;color:var(--ink-soft);line-height:1.65}
.about-story p + h2{margin-top:34px}
.about-story a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.about-company-card{background:var(--cream-2);border:1px solid var(--line);border-radius:20px;padding:26px 26px 20px;position:sticky;top:90px}
.about-company-card h2{font-size:1.12rem;margin-bottom:16px}
.about-range-heading{font-size:1.5rem;margin-bottom:18px}
.about-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:44px}
@media(min-width:640px){.about-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.about-cards{grid-template-columns:repeat(4,1fr)}}
.about-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.about-card h3{font-size:1.02rem;margin-bottom:8px}
.about-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.about-page .faq-wrap{margin-bottom:36px}
.about-policies{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.about-policies p{color:var(--ink-soft);margin:0}
.about-policy-links{display:flex;flex-wrap:wrap;gap:8px}
.about-policy-links a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;transition:.2s}
.about-policy-links a:hover{border-color:var(--gold);color:var(--gold-deep)}
.about-cta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:879px){.about-company-card{position:static}}
.about-page .about-faith{background:none;color:inherit;border-radius:0;padding:26px 0 0;margin:34px 0 0;border-top:1px solid var(--line)}
.about-page .about-faith h2{color:var(--ink)}
.about-page .about-faith p{color:var(--ink-soft)}
.about-page .about-faith a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.about-faith-photo{width:100%;height:auto;display:block;border-radius:14px;margin:4px 0 18px}
.about-page .about-hero .eyebrow{display:inline-block;margin-bottom:10px}
.about-page .about-card h3 a{color:inherit;text-decoration:none}
.about-page .about-card h3 a:hover{text-decoration:underline}
.about-page .about-side{min-width:0}
.about-page .about-side .company-card{margin-top:0}
.about-page section[aria-labelledby="about-faq-heading"]{margin-bottom:8px}

/* Corten Steel family: the template's accent tokens, mapped onto the EasyStore palette */
:root{--accent:#111111;--accent-soft:#fff6b3;--accent-tint:#fff6b3;--paper-2:#f8f8f8}

/* ---- 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-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}
/* About to company standard (CEO 2026-10-26): side column holds the shared company card and the Contact button */
.about-side .company-card{margin-top:0}
.about-side .btn{margin-top:16px}
.about-card-items{margin-top:8px;font-size:.88rem}
/* Home hero headline (CEO 2026-10-26): on six stores it is a <p class="hero-title"> (the h1 is the eyebrow keyword
   line) and on cortensteel.net.au an h2, and the home's inline style set it in the body font at weight 500 with an
   italic accent word. Same display style as every other heading: Poppins 800, accent word on the yellow band. */
.hero p.hero-title,.hero .hero-content h2{font-family:"Poppins",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.12}
.hero p.hero-title em,.hero .hero-content h2 em{color:var(--ink);font-style:normal;font-weight:inherit;background:linear-gradient(transparent 62%,var(--gold) 62%);padding:0 .08em}