:root{
  --white:#ffffff;
  --cream:#f8f8f8;
  --cream-2:#fffbe0;
  --line:#e0e0e0;
  --line-strong:#cfcfcf;
  --ink:#111111;
  --ink-strong:#111111;
  --ink-soft:#555555;
  --ink-faint:#9b9b9b;
  --accent:#ffdf02;
  --accent-hover:#e6c800;
  --accent-tint:#fffbe0;
  --accent-soft:#fff3a0;
  --sky:#fff3a0;
  --sun:#ffdf02;
  --gold-soft:#ffdf02;
  --radius:10px;
  --radius-lg:20px;
  --es-yellow:#ffdf02;
  --es-yellow-dark:#e6c800;
  --es-black:#111111;
  --es-text:#222222;
  --es-head:"Poppins","Prompt",system-ui,-apple-system,sans-serif;
  --es-body:"Inter","Noto Sans Thai",system-ui,-apple-system,sans-serif;
}

                    
html[lang] *{font-family:var(--es-body)}
html[lang] body{color:var(--es-text)}
html[lang] h1,html[lang] h2,html[lang] h3,html[lang] h4,
html[lang] .faq-q h3,html[lang] .faq-q,html[lang] .scard-meta h3,html[lang] .guide-body h4,
html[lang] .price-block .price,html[lang] .scard-price .now,
html[lang] .topnav__name,html[lang] .site-footer__logo span,html[lang] .btn,
html[lang] .topnav__cta,html[lang] .topnav__draw-head,html[lang] .site-footer__delivery h4{
  font-family:var(--es-head)}
h1,h2{font-weight:800;letter-spacing:-.02em;color:var(--es-black)}
h3,h4{font-weight:700;letter-spacing:-.01em;color:var(--es-black)}
p{color:var(--ink-soft)}
::selection{background:var(--es-yellow);color:var(--es-black)}

                                                      
.section-label,.eyebrow,.sec-head .eyebrow{
  display:inline-block;background:var(--es-yellow);color:var(--es-black);
  border-radius:50px;padding:6px 16px;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;line-height:1.4}
.divider{display:none}
.guide-body h2::after,.guide-inner h2::after{background:var(--es-yellow);height:4px;width:56px}

                       
.btn{border-radius:var(--radius);font-weight:700;min-height:50px;padding:0 28px}
.btn-primary,.prose-page a.btn-primary,.guide-inner a.btn-primary{
  background:var(--es-yellow);border-color:var(--es-yellow);color:var(--es-black)}
.btn-primary:hover{background:var(--es-yellow-dark);border-color:var(--es-yellow-dark);color:var(--es-black)}
.btn-primary svg path{stroke:currentColor}
.btn-ghost,.btn-outline,.btn-light{background:#fff;color:var(--es-black);border:2px solid var(--es-black)}
.btn-ghost:hover,.btn-outline:hover,.btn-light:hover{background:var(--es-black);color:#fff;border-color:var(--es-black)}
.btn-dark{background:var(--es-black);border-color:var(--es-black);color:#fff;border-radius:8px}
.btn-dark:hover{background:#000}
.mcc-form button{color:var(--es-black) !important;font-weight:700}
.nav-cta,.scard-badge,.gallery-sale-badge,.buybox-also-add{color:var(--es-black)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{outline-color:var(--es-black)}

                                      
.topnav{background:var(--es-yellow);border-bottom:none;backdrop-filter:none}
.topnav__brand,.topnav__cart{color:var(--es-black)}
.topnav__name{font-weight:800;letter-spacing:-.01em}
.topnav__name small{color:rgba(17,17,17,.7)}
.topnav__trigger{color:var(--es-black)}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{color:var(--es-black);background:rgba(17,17,17,.08)}
.cart-badge{background:var(--es-black);color:var(--es-yellow)}
.topnav__cta{background:var(--es-black);color:#fff;border-radius:8px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.topnav__cta:hover{background:#000;box-shadow:none}
.topnav__cta--quote{background:transparent;color:var(--es-black);border:2px solid var(--es-black);border-radius:50px;text-transform:none;letter-spacing:0}
.topnav__cta--quote:hover{background:var(--es-black);color:#fff}
.topnav__burger{background:transparent;border:2px solid var(--es-black)}
.topnav__burger span{background:var(--es-black)}
.topnav__drawer .topnav__cta--quote{border-color:var(--es-black)}
.topnav__trigger,.topnav__cta,.topnav__name{white-space:nowrap}
                                                                           
                                                                             
                                                              
@media(max-width:1199px){
  .topnav__menu{display:none}
  .topnav__cart--bar{display:flex}
  .topnav__burger{display:flex}
}

                             
.site-footer,.footer{background:var(--es-black);border-top:6px solid var(--es-yellow)}
.site-footer__col h4,.footer-col h4{color:var(--es-yellow)}
.site-footer__col a:hover,.site-footer__contact a:hover,.site-footer__meta a:hover,
.footer-links a:hover,.footer-col nav a:hover{color:var(--es-yellow)}

                                                                                  
                                                                                       
body.home-hero .topnav,body.home-hero .topnav.is-scrolled,body.home-hero .topnav.is-drawer-open{
  position:sticky;background:var(--es-yellow);border-bottom-color:transparent;backdrop-filter:none}
body.home-hero .topnav .topnav__name,body.home-hero .topnav .topnav__name small,
body.home-hero .topnav .topnav__trigger,body.home-hero .topnav .topnav__cart{text-shadow:none}

                                                                                       
.hero{min-height:auto;display:flex;flex-direction:column;padding:48px 0 56px;background-color:#fff;
  background-image:radial-gradient(rgba(17,17,17,.10) 1px,transparent 1px);background-size:22px 22px}
.hero-bg{order:2;position:relative;inset:auto;z-index:0;margin:32px 24px 0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.hero-bg::after{display:none}
.hero-bg img{object-position:78% center}
.hero-content{padding:0;max-width:none}
.es-badge{display:inline-flex;align-items:center;gap:8px;background:var(--es-yellow);color:var(--es-black);
  border-radius:50px;padding:6px 16px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.hero h2{font-family:var(--es-head);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(2.3rem,6.4vw,3.6rem);color:var(--es-black)}
.hero h2 em{font-style:normal;color:var(--es-black);background:linear-gradient(transparent 58%,var(--es-yellow) 58%);padding:0 .06em}
.hero p{color:#444;font-size:1.08rem}
.hero-trust span{color:var(--es-black)}
@media(min-width:980px){
  .hero{padding:72px 0 84px}
  .hero-bg{position:absolute;top:56px;bottom:56px;right:max(24px,calc((100vw - var(--maxw))/2 + 24px));left:auto;width:min(44vw,520px);margin:0;aspect-ratio:auto}
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-content{max-width:540px}
}

                                                                    
.strip{background:var(--es-yellow);color:var(--es-black);padding:16px 0}
.strip .item{font-weight:700}
.strip svg{color:var(--es-black)}

                           
.sec-head h2{font-size:clamp(1.9rem,4.4vw,2.6rem)}
.bcard{background:var(--cream);border:none;border-radius:var(--radius-lg)}
.bcard:hover{box-shadow:none;border-color:transparent;background:#f1f1f1}
.bcard .ic,.feature-row .fic,.cmethod .ic,.tbadge .ic,.delivery .ic{background:var(--es-yellow);border:none;border-radius:14px}
.bcard .ic svg,.feature-row .fic svg,.cmethod .ic svg,.tbadge .ic svg,.delivery .ic svg{color:var(--es-black)}

                                      
.reviews{background:var(--es-black)}
.reviews .sec-head h2,.reviews h2{color:#fff}
.reviews .sec-head p,.reviews p{color:rgba(255,255,255,.72)}
.reviews .rcard{background:#1c1c1c;border:none;box-shadow:none}
.reviews .rcard blockquote{color:#fff}
.reviews .rcard .who b{color:#fff}
.reviews .rcard .who small{color:rgba(255,255,255,.6)}
.reviews .rcard .av{background:var(--es-yellow);color:var(--es-black)}
.reviews .review-meta,.reviews .review-meta small{color:rgba(255,255,255,.8)}

                                            
.scard{border:1px solid var(--line);border-radius:var(--radius-lg)}
.scard:hover{border-color:var(--es-black)}
.scard-badge{background:var(--es-yellow)}
.price-block .price,.scard-price .now{font-weight:800}

                   
.faq{background:var(--cream)}
.faq-item{border:none;border-radius:14px}
.faq-q svg{color:var(--es-black)}

                                         
.shop::before,#cta-banner::before{display:none}
.shop,#cta-banner{background:var(--es-black)}
.shop h2 em{color:var(--es-yellow);font-style:normal}
.shop .urgency{background:var(--es-yellow);color:var(--es-black);border:none;border-radius:50px}
.shop .guarantees svg{color:var(--es-yellow)}
.shop .btn,#cta-banner .btn{background:var(--es-yellow);border:2px solid var(--es-yellow);color:var(--es-black)}
.shop .btn:hover,#cta-banner .btn:hover{background:var(--es-yellow-dark);border-color:var(--es-yellow-dark);color:var(--es-black)}

                       
.cmethod{background:var(--cream);border:none;border-radius:var(--radius-lg)}
.cmethod:hover{background:#f1f1f1}

                             
.review-card{border:none;background:var(--cream)}
.review-stars{color:var(--es-black)}
.trust-strip{background:var(--es-black)}
.trust-strip{border-bottom:none}
.trust-strip .trust-strip-list li,.trust-strip .trust-strip-list li strong,.trust-strip .trust-strip-list li span{color:#fff}
.trust-strip .trust-strip-list svg{color:var(--es-yellow)}
html[lang] .product-aspirational-headline{font-family:var(--es-head);font-weight:800;letter-spacing:-.02em;color:var(--es-black)}

                              
.sticky-cta{background:rgba(255,255,255,.96)}