:root {
  --sand:       #ffdf02;
  --sand-light: #f8f8f8;
  --sand-dark:  #666666;
  --charcoal:   #111111;
  --charcoal-2: #222222;
  --warm-white: #f8f8f8;
  --white:      #ffffff;
  --accent:          #ffdf02;
  --accent-hover:    #e6c800;
  --accent-on-light: #111111;
  --coral:      #ffdf02;
  --coral-dark: #111111;
  --sage:       #ffdf02;
  --sage-dark:  #111111;
  --sage-light: #fff6b3;
  --text-body:  #222222;
  --text-muted: #666666;
  --border:     #e0e0e0;
  --es-yellow-soft: #fff6b3;

  --font-display: 'Poppins', 'Noto Sans Thai', system-ui, sans-serif;
  --font-body:    'Inter', 'Noto Sans Thai', system-ui, sans-serif;

  --nav-h: 68px;
  --radius: 10px;
}

                    
body { background: #fff; color: var(--text-body); }
.section-label, .hero-tagline, .review-row-title, .cdetail-block-label, .footer-col h4,
.footer-address-label, .cart-section-label, .llm-summary-label, .shop-card-category,
.price-display-label, .price-reveal-label, .faq-q h3 { font-family: var(--font-display); }
                                                                                      
                                                                                              
                                                                                                      
body :is(h1, h2, #es-x):not(.faq-q h2, .product-h1-keywords) { font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
body :is(h3, #es-x) { letter-spacing: -0.01em; }
                                                                  
.hero-h1 em, .products-intro h2 em, .shop-hero-text h1 em {
  font-style: normal; color: var(--charcoal);
  background: linear-gradient(transparent 62%, #ffdf02 62%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
                                                                                                           
.inner-page-header h1 em { font-style: normal; color: #ffdf02; }

                                                                                             
.btn, .cat-card-btn, .shop-card-btn, .cat-tab, .nav-links a, .lang-opt, .gallery-sale-badge, .fifi-title {
  font-family: var(--font-display);
}
.btn { border-radius: 10px; font-weight: 700; letter-spacing: 0.01em; }
.btn-primary { background: #ffdf02; border-color: #ffdf02; color: #111; }
.btn-primary:hover { background: #e6c800; border-color: #e6c800; color: #111; box-shadow: 0 8px 24px rgba(255,223,2,0.4); }
.btn-outline, .btn-outline-dark { background: transparent; color: #111; border: 2px solid #111; }
.btn-outline:hover, .btn-outline-dark:hover { background: #111; color: #fff; border-color: #111; }
.btn-dark { background: #111; border-color: #111; color: #fff; }
.btn-dark:hover { background: #333; border-color: #333; color: #fff; }
.cat-card-btn { border-radius: 10px; font-weight: 700; }
.shop-card-btn { border-radius: 10px; background: #111; color: #fff; }
.shop-card:hover .shop-card-btn { background: #ffdf02; color: #111; }

                                                                                          
#nav, .page-home #nav, .page-home #nav.scrolled {
  background: #ffdf02; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.nav-logo, .page-home .nav-logo, .page-home #nav.scrolled .nav-logo { color: #111; font-weight: 800; }
.nav-logo span, .page-home .nav-logo span, .page-home #nav.scrolled .nav-logo span { color: #111; }
.nav-links a, .page-home .nav-links a, .page-home #nav.scrolled .nav-links a { color: #111; font-weight: 600; }
.nav-links a:hover { opacity: 0.65; }
.nav-links a::after { background: #111; }
.cart-icon, .page-home .cart-icon { color: #111; }
#cart-badge { background: #111; color: #ffdf02; }
                                                                                                   
#nav .btn-primary.nav-cta { background: #111; border-color: #111; color: #fff; }
#nav .btn-primary.nav-cta:hover { background: #333; border-color: #333; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
#nav .btn-dark.nav-cta { background: transparent; border-color: #111; color: #111; }
#nav .btn-dark.nav-cta:hover { background: #111; color: #fff; box-shadow: none; }
#nav .lang-switcher { border-color: rgba(0,0,0,0.3); }
#nav .lang-opt { color: #111; }
#nav .lang-opt + .lang-opt { border-left-color: rgba(0,0,0,0.3); }
#nav .lang-opt:hover { background: rgba(0,0,0,0.08); color: #111; }
#nav .lang-opt--active { background: #111; color: #fff; }
                                                    
#mobile-nav { background: #ffdf02; }
#mobile-nav a, #mobile-nav .mobile-cta { color: #111; font-family: var(--font-display); }
#mobile-nav a:hover, #mobile-nav .mobile-cta:hover { color: #111; opacity: 0.65; }
#mobile-nav .btn-primary.mobile-cta, #mobile-nav .btn-primary.mobile-cta:hover {
  background: #111; color: #fff; padding: 10px 26px; border-radius: 10px; opacity: 1;
}
#mobile-nav .lang-switcher { border-color: rgba(0,0,0,0.3); align-self: center; }
#mobile-nav .lang-opt { color: #111; font-size: 0.8rem; }
#mobile-nav .lang-opt + .lang-opt { border-left-color: rgba(0,0,0,0.3); }
#mobile-nav .lang-opt--active { background: #111; color: #fff; }

                                                          
.lang-opt:hover { background: #f8f8f8; color: #111; }
.lang-opt--active { background: #ffdf02; color: #111; }
footer .lang-switcher { border-color: rgba(255,255,255,0.25); }
footer .lang-opt { color: rgba(255,255,255,0.8); }
footer .lang-opt + .lang-opt { border-left-color: rgba(255,255,255,0.25); }
footer .lang-opt:hover { background: rgba(255,255,255,0.1); color: #fff; }
footer .lang-opt--active, footer .lang-opt--active:hover { background: #ffdf02; color: #111; }

                                                               
.hero-content { background: linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.88) 60%, rgba(255,255,255,0.94) 100%); }
@media (min-width: 900px) {
  .hero-content { background: linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 40%, rgba(255,255,255,0.45) 72%, rgba(255,255,255,0) 100%) !important; }
}
.hero-trust { border-top-color: rgba(17,17,17,0.12); }
.hero-trust-item { color: #111; }
.hero-trust-item svg { color: #111; }

                                                      
.cat-card, .product-card, .why-card, .review-card, .shop-card, .highlight-card, .cdetail-block,
.cdetail-trust-card, .about-feature-card, .cart-item, .cart-summary, .cart-customer, .order-result,
.review-row, .atc-trust-item, .cat-trust-item, .pcf-form-wrap, .cdetail-form-embed, .measurements-card,
.quote-form, .cdetail-contact-link, .trust-badge { border-radius: 14px; border-color: #e0e0e0; }
.gallery-main { background: #f8f8f8; border-color: #e0e0e0; border-radius: 14px; }
.gallery-thumb { border-radius: 10px; }

                                             
.why-icon, .cat-trust-icon, .cdetail-trust-icon, .about-feature-icon, .highlight-icon,
.review-avatar, .review-row-avatar, .cart-trust-icon, .cdetail-contact-icon, .cdetail-delivery-icon {
  background: #ffdf02; border-color: #ffdf02; color: #111;
}
.about-feature-icon svg, .cdetail-trust-icon svg { color: #111; }

                                                        
.price-now { font-weight: 800; }
.price-save { background: #ffdf02; border-color: #ffdf02; color: #111; }
.gallery-sale-badge { background: #ffdf02; color: #111; }
.delivery-banner { background: #fff6b3; border-color: #ffdf02; }
.delivery-banner svg { color: #111; }
.delivery-banner span { color: #222; }
                                                                                                             
.atc-trust-item, .atc-trust-item:nth-child(n) { background: #f8f8f8; border-color: #e0e0e0; }
.atc-trust-item > svg, .atc-trust-item:nth-child(n) > svg { color: #111; }
.delivery-tile.selected { background: #fff6b3; }
.breadcrumb .sep { color: #888; }
.info-note svg { color: #111; }

                                               
.shop-card-badge, .cdetail-block-label { background: #ffdf02; color: #111; }
.legal-effective { background: #fff6b3; color: #222; }
.legal-content h2 { border-top-color: #e0e0e0; }

                     
                                             
#cta-banner { background: #ffdf02; }
#cta-banner::before { display: none; }
#cta-banner p { color: rgba(17,17,17,0.8); }
                                                                                   
#trust-bar { background: #111; border-top: 1px solid rgba(255,255,255,0.12); }
.cdetail-trust-item { color: #fff; }
.cdetail-trust-item svg { color: #ffdf02; }
                                                              
#how, #fifi, #delivery-coverage, .inner-page-header, .legal-header, #quote-price-display, .price-reveal-box { background: #111; }
.fifi-card { background: #222; }
.mat-card { background: #f8f8f8; }
.mat-card:first-child { background: #111; }
.llm-summary { background: #f8f8f8; border-top-color: #e0e0e0; }
#about-product { background: #f8f8f8; }

                                                                 
footer { background: #111; color: rgba(255,255,255,0.72); }
.footer-brand .logo { font-weight: 800; }
.footer-col h4 { font-weight: 700; }
.footer-col ul li a, .footer-legal a, .footer-address a { color: #ffdf02; }
.footer-col ul li a:hover, .footer-legal a:hover, .footer-address a:hover { color: #fff; }
.footer-address { color: rgba(255,255,255,0.72); }
.footer-address-sub { color: rgba(255,255,255,0.6); }
.footer-address strong { color: #fff; }

                             
#social-proof-popup .sp-icon { background: #ffdf02; }

                                                                                                  
.hero-h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
                                                                                                                      
@media (max-width: 899px) {
  #nav .nav-inner { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .nav-logo { font-size: 1.1rem; }
  #nav .lang-switcher { flex-shrink: 0; }
  #nav .lang-opt { padding: 7px 8px; }
}
@media (max-width: 379px) {
  #nav .nav-inner { gap: 10px; }
  .nav-logo { font-size: 0.95rem; }
  #nav .lang-opt { padding: 6px 6px; font-size: 0.72rem; }
}
                                                                                                                 
html[lang="th"] :is(.section-label, .hero-tagline, .review-row-title, .footer-col h4, .footer-address-label, .cart-section-label, .cdetail-block-label) { letter-spacing: 0.02em; }
                                                                                                                             
#error-404-page { padding: calc(var(--nav-h) + 80px) 0 80px; background: #f8f8f8; }
.order-result p a { color: #111; font-weight: 600; text-decoration: underline; text-decoration-color: #ffdf02; text-decoration-thickness: 3px; text-underline-offset: 4px; }