/* =========================================================
   EasyStore theme for seniorliving.irish (rolled out from assistedliving.net.au 5a03f35) (CEO request 2026-10-21:
   "update this website with the new look and style of easystore.in.th").
   Copied from clearancewarehouse.irish (fcffbd1, same cloudpillo frame
   lineage), with that store's footer Shop-column flow and long-name logo
   rules dropped. Countdown has no shaded box (CEO 2026-10-19).
   Tokens measured from easystore.in.th on 2026-10-16: yellow #ffdf02 /
   #e6c800, ink #111, text #222, muted #666, border #e0e0e0, card #f8f8f8;
   Poppins 800/900 headings, Inter body; 10px buttons, 999px pills,
   20px cards, fixed yellow nav, black footer.
   Loaded LAST on every page so it wins over the clone-base styles.
   ========================================================= */
:root{
  --es-yellow:#ffdf02;
  --es-yellow-dark:#e6c800;
  --es-black:#111111;
  --es-text:#222222;
  --es-muted:#666666;
  --es-border:#e0e0e0;
  --es-card:#f8f8f8;
  --es-head:"Poppins",system-ui,sans-serif;
  --es-body:"Inter",system-ui,sans-serif;

  /* remap the clone-base tokens so every older rule picks up the new palette */
  --gold:#111111;
  --gold-deep:#111111;
  --gold-soft:#ffdf02;
  --accent:#111111;
  --accent-deep:#111111;
  --accent-soft:#fff6b3;
  --ink:#111111;
  --ink-soft:#666666;
  --line:#e0e0e0;
  --paper:#ffffff;
  --cream:#f8f8f8;
  --sun:#ffdf02;
  --shadow:0 18px 40px -24px rgba(0,0,0,.28);
  --shadow-sm:0 8px 20px -14px rgba(0,0,0,.25);
}

/* ---------- type ---------- */
body{font-family:var(--es-body);color:var(--es-text);background:#fff}
h1,h2,h3,h4,
.hero h1,.product-title,.product-aspirational-headline,.shop-cat-title,.guide-title,
.topnav__name,.site-footer__logo span,.site-footer__delivery h4,
.price-now,.atc-price-now,.price-block .price,.scard-price .now,.scard-meta h3,.product .scard h3,
.also-card-name,.buybox-also-name,.sticky-buy-name,.sticky-buy-now,
.cart-item-body h3,.cart-item-price,.cart-trust-body h3,.cart-upsell-body h3,.cart-upsell-price,
.review-meta .big,.rcard .av,.review-card-avatar,.review-row-avatar,.brand .name,.overlay a{
  font-family:var(--es-head)}
h1,.hero h1,.product-title{font-weight:900;letter-spacing:-1px;line-height:1.08;color:var(--es-black)}
h2{font-weight:800;letter-spacing:-1px;line-height:1.12;color:var(--es-black)}
h3,h4{font-weight:700;letter-spacing:-.3px;color:var(--es-black)}
h1 em,h2 em,.hero h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--es-yellow) 58%);padding:0 .08em}
a{color:var(--es-black)}

/* ---------- labels ---------- */
.eyebrow,.section-label,.cart-upsell-eyebrow{
  display:inline-block;background:var(--es-yellow);color:var(--es-black)!important;
  font-family:var(--es-body);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px}
.divider{background:var(--es-yellow)!important}
.product-h1-keywords,p.eyebrow{padding:0!important;color:var(--es-muted)!important;background:none!important;font-family:var(--es-body)!important;font-size:.78rem!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{font-family:var(--es-body);border-radius:10px;font-weight:700;padding:14px 32px;letter-spacing:0}
.btn-primary,.atc-btn,.sticky-buy-btn,.scard .btn-primary{
  background:var(--es-yellow)!important;color:var(--es-black)!important;border:2px solid var(--es-yellow)!important;box-shadow:none!important}
.btn-primary:hover,.atc-btn:hover,.sticky-buy-btn:hover{background:var(--es-yellow-dark)!important;border-color:var(--es-yellow-dark)!important;transform:translateY(-2px)}
.btn-dark{background:var(--es-black)!important;color:#fff!important;border:2px solid var(--es-black)!important}
.btn-ghost,.btn-outline{background:transparent!important;color:var(--es-black)!important;border:2px solid var(--es-black)!important}
.btn-ghost:hover,.btn-outline:hover{background:var(--es-black)!important;color:#fff!important}
.btn-light{background:#fff!important;color:var(--es-black)!important;border:2px solid var(--es-black)!important}

/* ---------- header: solid yellow bar on every page ---------- */
.topnav,
body.home-hero .topnav,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open),
.topnav.is-scrolled,.topnav.is-drawer-open,
body.home-hero .topnav.is-scrolled,body.home-hero .topnav.is-drawer-open{
  background:var(--es-yellow)!important;border-bottom:1px solid var(--es-yellow-dark)!important;backdrop-filter:none!important;font-family:var(--es-body)}
.topnav .topnav__brand,.topnav .topnav__name,.topnav .topnav__trigger,.topnav .topnav__cart,
:is(.topnav.is-scrolled,.topnav.is-drawer-open) :is(.topnav__brand,.topnav__name,.topnav__trigger,.topnav__cart),
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) :is(.topnav__brand,.topnav__name,.topnav__trigger,.topnav__cart){
  color:var(--es-black)!important;text-shadow:none!important}
.topnav__name{font-weight:900;letter-spacing:-.5px;font-size:1.2rem}
.topnav__trigger{font-weight:600}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger,
.topnav.is-scrolled .topnav__trigger:hover,.topnav.is-scrolled .topnav__item.is-open .topnav__trigger{
  color:var(--es-black)!important;background:rgba(0,0,0,.08)!important}
.topnav__drop{border-color:var(--es-border);border-radius:14px}
.topnav__drop a:hover{background:#fff8c2;color:var(--es-black)}
.topnav__cta,.topnav__cta--drawer{
  background:var(--es-black)!important;color:#fff!important;border:2px solid var(--es-black)!important;
  border-radius:10px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em;box-shadow:none!important}
.topnav__cta:hover{background:#333!important}
.topnav__lang,.topnav .topnav__lang{
  border:2px solid var(--es-black)!important;border-radius:999px!important;color:var(--es-black)!important;
  background:transparent!important;font-weight:600;padding:5px 14px!important;text-decoration:none}
.topnav__lang:hover{background:var(--es-black)!important;color:#fff!important}
.cart-badge{background:var(--es-black)!important;color:var(--es-yellow)!important}
.topnav__burger,:is(.topnav.is-scrolled,.topnav.is-drawer-open) .topnav__burger{background:transparent!important;border-color:var(--es-black)!important}
.topnav__burger span{background:var(--es-black)!important}
.topnav__drawer{background:var(--es-yellow)}
.topnav__draw-head,.topnav__draw-links a{color:var(--es-black)!important}
/* the yellow bar is not transparent, so the home hero starts below it */
body.home-hero .hero{padding-top:72px}

/* ---------- home sections ---------- */
.hero{background:#fff}
.hero-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,0) 72%)!important}
.hero-content{color:var(--es-black)}
.hero-content p{color:var(--es-text)}
.hero-trust{color:var(--es-text)}
.benefits,.faq,.contact{background:var(--es-card)}
.product,.guide,.shop,.summary{background:#fff}
.bcard,.cmethod,.faq-item,.highlight-card,.buybox-disc,.option-card,.scard,.metre-pack,.sum-facts{
  border-radius:20px!important;border:1px solid var(--es-border)!important;box-shadow:none!important;background:#fff}
.bcard:hover,.scard:hover{border-color:var(--es-black)!important;transform:translateY(-3px)}
.bcard .ic,.ic{background:var(--es-yellow)!important;color:var(--es-black)!important;border-radius:14px}
.shop-jump-links a{border:2px solid var(--es-black);border-radius:999px;color:var(--es-black);background:#fff;font-weight:600}
.shop-jump-links a:hover{background:var(--es-yellow);border-color:var(--es-yellow)}
.strip{background:var(--es-yellow)!important;color:var(--es-black)!important}
.strip *{color:var(--es-black)!important}
.urgency,.badge,.scard-badge{background:var(--es-black)!important;color:var(--es-yellow)!important;border-radius:999px}

/* ---------- product page ---------- */
.breadcrumb a{color:var(--es-muted)}
.price-now,.atc-price-now{color:var(--es-black);font-weight:800}
.price-save{background:var(--es-yellow);color:var(--es-black);border-radius:999px;padding:3px 10px;font-weight:700}
.option-card.is-selected,.metre-pack.is-selected{border:2px solid var(--es-black)!important;background:#fffbe0!important}
.metre-pack-main em{background:var(--es-black);color:var(--es-yellow);font-style:normal;border-radius:999px;padding:2px 10px}
.buybox-row-chip{background:var(--es-yellow);color:var(--es-black);border-radius:999px}
.faq-icon{color:var(--es-black)}
.sale-timer{background:none!important;color:var(--ink)}
.sale-timer .countdown{--timer-color:var(--es-black);color:var(--es-black)!important;font-family:var(--es-head);font-weight:800;margin-bottom:4px!important}
.sale-timer .sale-title{color:var(--es-black);font-family:var(--es-head);font-size:1rem!important;margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--es-black)!important;color:rgba(255,255,255,.75);font-family:var(--es-body);border-top:6px solid var(--es-yellow)}
.site-footer__contact a,.site-footer__col a:hover,.site-footer__faith a{color:var(--es-yellow)!important}
.site-footer__col h4{color:var(--es-yellow)}
.site-footer__cross{color:var(--es-yellow)}
.product-title{font-size:clamp(1.5rem,2.6vw,2.1rem)!important;letter-spacing:-.5px;line-height:1.15}
.product-aspirational-headline{font-weight:900!important;letter-spacing:-1px}
/* keep the yellow bar on one line */
.topnav__name,.topnav__trigger,.topnav__cta,.topnav__lang{white-space:nowrap}
.topnav__lang{font-style:normal!important;line-height:1.2}
.topnav__menu{gap:2px}
.topnav__trigger{padding:10px 9px}
/* the footer delivery band: the yellow strip from the EasyStore footer */
.site-footer__delivery{background:var(--es-yellow);color:var(--es-black)!important;border-radius:20px;padding:22px 26px;margin:26px 0}
.site-footer__delivery *{color:var(--es-black)!important}


/* ---------- store extras (classes this store has; first written for gardenedge.in.th) ---------- */
/* clone-base font stacks hard-coded in nav.css / home.njk */
.topnav,.topnav__drop,.topnav__drawer,.site-footer,.btn,.overlay .btn,input,select,textarea,button{font-family:var(--es-body)}
.topnav__name small,.site-footer__logo small{font-family:var(--es-body)}
.site-footer__logo span,.site-footer__delivery h4,.topnav__name{font-family:var(--es-head)}
/* the old orange accent, wherever a rule still names it */
:root{--gold:#111111;--orange:#111111}
/* full-width trust strip under the nav on product pages: black with white writing (CEO 2026-10-21),
   so it reads as its own band under the yellow bar; the ticks and stars stay yellow */
.trust-strip{background:var(--es-black)!important;color:#fff!important;border:0!important}
.trust-strip *{color:#fff!important}
.trust-strip svg,.trust-strip-list svg,.trust-strip-stars svg{color:var(--es-yellow)!important}
/* cards and blocks */
.highlight-card,.feature-block,.cart-trust-item,.cart-delivery-option,.company-card,.spec-table{border-radius:20px!important}
.highlight-icon,.cart-trust-icon{background:var(--es-yellow)!important;color:var(--es-black)!important;border-radius:14px}
.scard-price .now{color:var(--es-black);font-family:var(--es-head);font-weight:800}
.scard-price .was{color:var(--es-muted)}
.tbadge{background:var(--es-yellow);color:var(--es-black);border-radius:999px;font-weight:700}
.shop-cat-title{font-weight:800;letter-spacing:-.5px}
.shop-cat-title::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--es-yellow);margin-top:10px}
/* delivery choice in the cart */
.cart-delivery-option{border:1px solid var(--es-border)!important}
.cart-delivery-option:has(input:checked){border:2px solid var(--es-black)!important;background:#fffbe0!important}
.cart-section-label{font-family:var(--es-head);font-weight:800;color:var(--es-black)}
/* reading pages */
.prose-page h1{font-weight:900;letter-spacing:-1px;line-height:1.1}
.prose-page a{text-decoration-color:var(--es-yellow-dark);text-decoration-thickness:2px;text-underline-offset:3px}
/* sticky bars */
.sticky-cta,.sticky-buy{border-top:3px solid var(--es-yellow)!important}
/* focus stays visible on yellow */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--es-black);outline-offset:2px}
/* cart line and upsell titles are h2s: item-title size, not section-heading size */
.cart-item-body h2,.cart-upsell-body h2{font-size:1.12rem!important;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.cart-item-body h2 a,.cart-upsell-body h2 a{font-size:inherit!important;font-weight:inherit;text-decoration:none}

/* ---------- frame extras (first written for clearancewarehouse.irish) ---------- */
/* the standalone home's own inline type rules name the house faces; the overlay's stack wins */
body.home-hero,body.home-hero .btn,body.home-hero .faq-q h3{font-family:var(--es-body)!important}
body.home-hero h1,body.home-hero h2,body.home-hero h3,body.home-hero h4{font-family:var(--es-head)!important}
.about-chip{background:var(--es-card);border:1px solid var(--es-border);color:var(--es-black);font-weight:600}
.about-chip--faith{background:var(--es-yellow)!important;border-color:var(--es-yellow)!important}
.about-company-card{background:#fffbe0!important;border:1px solid var(--es-border)!important;border-radius:20px!important}
.about-card{border-radius:20px!important;border:1px solid var(--es-border)!important}
.about-card:hover{border-color:var(--es-black)!important}
.about-policy-links a{border:2px solid var(--es-black)!important;color:var(--es-black)!important;border-radius:999px}
.about-policy-links a:hover{background:var(--es-yellow)!important;border-color:var(--es-yellow)!important}
.shop-other-lang a{font-weight:700}
/* rule 25 CEO photo inside "Who is behind" */
.about-faith-photo{width:100%;height:auto;display:block;border-radius:14px;margin:4px 0 18px}
.about-story a{text-decoration-color:var(--es-yellow-dark);text-decoration-thickness:2px}
/* the standalone home's display line is an h2 at weight 500 with an italic gold word,
   and the shop band's em is pale gold on what is now a white section */
.hero h2{font-weight:900;letter-spacing:-1.5px;line-height:1.05;color:var(--es-black)}
.hero h2 em,.shop h2 em{font-style:normal;color:var(--es-black);background:linear-gradient(transparent 58%,var(--es-yellow) 58%);padding:0 .08em}
/* ---------- logo on one line, contact page standard, fleet form 1 ---------- */
.topnav__name{white-space:nowrap!important;max-width:none!important;line-height:1.1}
@media(max-width:1180px){.topnav__name{font-size:.98rem!important}}
@media(max-width:420px){.topnav__name{font-size:.9rem!important;letter-spacing:-.3px}}
/* the fleet ticket form ships a red accent; EasyStore buttons are yellow with black ink */
.mcc-form button{background:var(--es-yellow)!important;color:var(--es-black)!important;border:2px solid var(--es-yellow)!important;border-radius:10px!important;font-weight:700!important;font-family:var(--es-body)!important;padding:13px 28px!important}
.mcc-form button:hover{background:var(--es-yellow-dark)!important;border-color:var(--es-yellow-dark)!important}
.mcc-form-wrap .mcc-heading{font-family:var(--es-head);font-weight:800;letter-spacing:-.4px;color:var(--es-black)}
.mcc-form input:focus,.mcc-form textarea:focus{outline:3px solid var(--es-yellow);border-color:var(--es-black)!important}
.contact-form{background:var(--es-card)!important;border:1px solid var(--es-border)!important;border-radius:20px!important}
.cmethod{background:#fff!important;border:1px solid var(--es-border)!important;border-radius:20px!important}
.cmethod:hover{border-color:var(--es-black)!important}
.cmethod .ic{background:var(--es-yellow)!important;border-color:var(--es-yellow)!important}
.cmethod .ic svg{color:var(--es-black)!important}
.company-card{background:#fffbe0!important;border:1px solid var(--es-border)!important;border-radius:20px!important}
.contact-delivery{margin:30px 0 8px;color:var(--es-muted);font-size:.98rem}
.contact-faq-heading{margin-top:40px}
.contact-page .faq-wrap,.wholesale-faq .faq-wrap{max-width:860px;margin:0 auto 10px}
.wholesale-faq{padding:20px 0 60px}
.wholesale-faq h2{text-align:center;margin-bottom:6px}
/* one FAQ look on every page: card, bold question, muted answer, no browser triangle */
.faq-item{background:#fff;border:1px solid var(--es-border)!important;border-radius:16px!important}
details.faq-item{margin-top:12px}
details.faq-item>summary:has(.faq-icon)::after{content:none}
details.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
details.faq-item>summary::-webkit-details-marker{display:none}
details.faq-item>summary::after{content:"+";font:700 1.4rem/1 var(--es-body);color:var(--es-black);flex:none;transition:transform .2s}
details.faq-item[open]>summary::after{transform:rotate(45deg)}
details.faq-item>summary h3{font-family:var(--es-head)!important;font-size:1.02rem!important;font-weight:600!important;letter-spacing:0;line-height:1.4;margin:0;color:var(--es-black)}
details.faq-item .faq-a{padding:0 22px 20px;color:var(--es-muted)}
details.faq-item .faq-a p{margin:0;color:var(--es-muted);line-height:1.6}

/* long emails and addresses wrap inside the contact grid instead of widening the page on phones */
.contact-grid{grid-template-columns:minmax(0,1fr)!important}
@media(min-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
.contact-intro,.contact-form,.company-card,.cmethod,.cmethod>span{min-width:0}
.cmethod b,.detail-list .v,.contact-intro a{overflow-wrap:anywhere}
/* one-line name on small phones: scale with the viewport so it clears the cart and menu buttons */
@media(max-width:420px){.topnav__name{font-size:clamp(10.5px,3.05vw,14px)!important;letter-spacing:-.3px}}

/* ---------- Assisted Living family extras (first written for assistedliving.net.au) ---------- */
/* the frame's pale-blue image wells (--cream-2) and sky "risk" panel (--sky) are cloudpillo colours */
:root{--cream-2:#f8f8f8;--sky:#fffbe0}
.risk-inner{border:1px solid var(--es-border)!important;border-radius:20px!important}
.risk-inner a:not(.btn){color:var(--es-black);text-decoration-color:var(--es-yellow-dark);text-decoration-thickness:2px}
/* product page highlight cards: four pastel tints (blue, green, sand, lilac) -> one white EasyStore card */
.highlight-card:nth-child(n){background:#fff!important;border:1px solid var(--es-border)!important}
.highlight-card:nth-child(n) .highlight-icon{color:var(--es-black)!important;background:var(--es-yellow)!important}
/* the Shop column lists every product (~40 links) and stacked the footer to 3,200px:
   keep every link, but flow that column across the full width (same fix as clearancewarehouse.irish) */
.site-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.site-footer__col:first-child{grid-column:1/-1;order:9;columns:2;column-gap:22px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.site-footer__col:first-child h2,.site-footer__col:first-child h4{column-span:all}
.site-footer__col:first-child a{break-inside:avoid;font-size:.84rem;padding:3px 0}
@media(min-width:700px){.site-footer__col:first-child{columns:3}}
@media(min-width:1000px){.site-footer__col:first-child{columns:5}}
@media(max-width:599px){.site-footer__cols{grid-template-columns:1fr 1fr}}
/* the product page's closing CTA band was ink-on-ink right above the black footer: make it the yellow strip */
#cta-banner{background:var(--es-yellow)!important;color:var(--es-black)}
#cta-banner::before{content:none!important}
#cta-banner h2{color:var(--es-black)!important}
#cta-banner p{color:var(--es-text)!important}
#cta-banner .btn-dark{background:var(--es-black)!important;color:#fff!important;border:2px solid var(--es-black)!important}
#cta-banner .btn-dark:hover{background:#333!important;border-color:#333!important;color:#fff!important}
/* the standalone home's own block carries a green accent (#2f7d5d) and green-grey text */
.btn-sm{border:2px solid var(--es-black)!important;color:var(--es-black)!important;border-radius:10px!important;font-weight:700;background:#fff}
.btn-sm:hover{background:var(--es-yellow)!important;border-color:var(--es-yellow)!important;color:var(--es-black)!important}
.hero-trust li::before{color:var(--es-black)!important}
.hero-trust,.about-card p{color:var(--es-muted)!important}
.about-card:hover{border-color:var(--es-black)!important}
.home-strip{background:var(--es-card)!important}
.home-strip .container>p,.home-hero--type .hero-lede{color:var(--es-text)!important}
.scard-media{background:var(--es-card)!important}
/* blog index cards and the wholesale form wrapper (this port's own classes) */
.pcard{border:1px solid var(--es-border)!important;border-radius:20px!important}
.pcard:hover{border-color:var(--es-black)!important}
.pcard p{color:var(--es-muted)!important}
.wholesale-form{background:var(--es-card)!important;border:1px solid var(--es-border)!important;border-radius:20px!important}
/* phones: the left-to-right wash leaves the right half of the hero copy on bare photo; wash it evenly */
@media(max-width:759px){.hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.86) 70%,rgba(255,255,255,.72) 100%)!important}}
/* the home page's own points band (us-* home layer): black with white writing, like the product strip (CEO 2026-10-21) */
.us-trust{background:var(--es-black)!important;color:#fff!important}
.us-trust *{color:#fff!important}
.us-photo-note{font-family:var(--es-head)!important;background:var(--es-yellow)!important;color:var(--es-black)!important}