/* =========================================================
   EasyStore styling (tools/isph_08c_theme.py), measured on easystore.in.th 2026-10-15.
   Loaded LAST on every page. Generated: edit the pass, not this file.
   ========================================================= */
:root{
  --es-yellow:#ffdf02; --es-yellow-dark:#e6c800; --es-black:#111111; --es-text:#222222;
  --es-muted:#666666; --es-border:#e0e0e0; --es-card:#f8f8f8;
  --gold:#ffdf02; --gold-deep:#111111; --gold-soft:#ffe94d; --ink:#111111; --ink-soft:#555555;
  --line:#e0e0e0; --cream:#f8f8f8; --cream-2:#fff9cc; --sun:#ffdf02; --accent-ink:#111111;
  --shadow:0 18px 40px -24px rgba(0,0,0,.35); --shadow-sm:0 8px 22px -14px rgba(0,0,0,.3);
}
body{font-family:"Inter",system-ui,sans-serif;color:var(--es-text)}
h1,h2,h3,h4,.topnav__name,.site-footer__logo span{font-family:"Poppins",system-ui,sans-serif}
h1{font-weight:900;letter-spacing:-1px;color:var(--es-black)}
h2{font-weight:800;color:var(--es-black);letter-spacing:-.01em}
h3,h4{font-weight:700}
::selection{background:var(--es-yellow);color:var(--es-black)}

/* ---------- header ---------- */
.topnav,body.home-hero .topnav,body.home-hero .topnav.is-scrolled{
  background:var(--es-yellow);border-bottom:0;backdrop-filter:none;box-shadow:0 2px 12px rgba(0,0,0,.12)}
body.home-hero .topnav{position:sticky}
.topnav__name{font-weight:900;text-transform:uppercase;letter-spacing:-.5px;color:var(--es-black)}
.topnav__trigger{font-family:"Inter",sans-serif;font-weight:600;font-size:.88rem;color:var(--es-black)}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{background:rgba(17,17,17,.08);color:var(--es-black)}
.topnav__drop{border:0;border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.topnav__drop a:hover{background:var(--es-yellow);color:var(--es-black)}
.topnav__cta{background:var(--es-black);color:#fff;border-radius:8px;text-transform:uppercase;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;min-height:40px}
.topnav__cta:hover{background:#000;box-shadow:none}
.topnav__cart{color:var(--es-black)}
.cart-badge{background:var(--es-black);color:var(--es-yellow)}
.topnav__burger{background:transparent;border:2px solid var(--es-black);border-radius:10px;
  flex:none;width:44px;height:44px}
@media (max-width:520px){
  .topnav__inner{gap:10px;padding:10px 16px}
  .topnav__name{font-size:.92rem;letter-spacing:-.3px}
  .langswitch a{padding:5px 8px}
}
.topnav__drawer{background:var(--es-yellow)}
.topnav__draw-links a:hover{color:var(--es-black);text-decoration:underline}

/* ---------- language switcher (EN | TL) ---------- */
.langswitch{display:inline-flex;align-items:center;border:2px solid var(--es-black);border-radius:50px;
  padding:2px;gap:2px;margin-left:6px;flex:none}
.langswitch a{font-family:"Poppins",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.04em;
  padding:5px 11px;border-radius:50px;color:var(--es-black);text-decoration:none;line-height:1}
.langswitch a:hover{background:rgba(17,17,17,.1)}
.langswitch a.is-active{background:var(--es-black);color:var(--es-yellow)}
.langswitch--bar{display:none}
.topnav__trigger,.topnav__cta{white-space:nowrap}
.topnav__inner{max-width:1280px}
/* Five groups, a CTA, the policies menu and the switcher need ~1240px; below that the
   bar collapses to the burger, keeping the switcher and the cart visible in the bar. */
@media (max-width:1279px){
  .topnav__menu{display:none}
  .topnav__burger{display:flex}
  .topnav__cart--bar{display:flex;margin-left:0}
  .langswitch--bar{display:inline-flex;margin-left:auto}
  .topnav.is-drawer-open .topnav__drawer{display:flex}
}

/* ---------- buttons ---------- */
.btn{border-radius:10px;font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:0}
.btn-primary,.btn.btn-primary,button.btn-primary,.atc-btn,.cart-checkout-btn{
  background:var(--es-yellow);color:var(--es-black);box-shadow:none}
.btn-primary:hover,.atc-btn:hover{background:var(--es-yellow-dark);color:var(--es-black);transform:none;box-shadow:none}
.btn-ghost,.btn-outline{background:transparent;color:var(--es-black);border:2px solid var(--es-black)}
.btn-ghost:hover{background:var(--es-black);color:#fff;border-color:var(--es-black)}
.btn-light{background:#fff;color:var(--es-black);border:2px solid var(--es-black);box-shadow:none}
.btn-dark{background:var(--es-black);color:#fff}

/* ---------- badges, eyebrows, labels ---------- */
.eyebrow,.section-label,.hero .badge,.scard-badge,.sale-badge,.save-badge{
  display:inline-block;background:var(--es-yellow);color:var(--es-black);border:0;border-radius:50px;
  padding:5px 16px;font-family:"Inter",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.064em;
  text-transform:uppercase;backdrop-filter:none}
.divider{background:var(--es-yellow);height:4px;border-radius:4px}

/* ---------- yellow strip ---------- */
.strip{background:var(--es-yellow);color:var(--es-black);font-family:"Poppins",sans-serif;font-weight:600}
.strip svg{color:var(--es-black)}

/* ---------- cards ---------- */
.scard,.bcard,.about-card,.buybox-also-item{border-radius:20px;border:1px solid var(--es-border);
  background:#fff;box-shadow:none}
.scard:hover,.bcard:hover{box-shadow:0 18px 40px -26px rgba(0,0,0,.35);transform:translateY(-2px)}
.scard-pic,.scard img{border-radius:20px 20px 0 0}
.scard-name,.scard h3{font-family:"Poppins",sans-serif;font-weight:800;color:var(--es-black)}
.scard-price .now,.price-now,.atc-price-now{color:var(--es-black);font-family:"Poppins",sans-serif;font-weight:800}
.scard-price .ship{color:var(--es-muted)}
.bcard .ic{background:var(--es-yellow);color:var(--es-black);border-radius:14px}

/* ---------- dark sections, like EasyStore's door-to-door cards and testimonials ---------- */
.shop{background:var(--es-black);color:#fff}
.shop h2,.shop .urgency,.shop p{color:#fff}
.shop .urgency{background:var(--es-yellow);color:var(--es-black);border-radius:50px}
.shop .btn-light{background:var(--es-yellow);border-color:var(--es-yellow)}
.summary,.faq{background:var(--es-card)}
.faq-item{border-radius:14px}

/* ---------- home hero: text left, product image right, on a dotted ground ---------- */
.hero{min-height:auto;background-color:#fff;
  background-image:radial-gradient(var(--es-border) 1.2px,transparent 1.2px);background-size:22px 22px;
  padding:clamp(40px,7vw,90px) 0}
.hero-content{padding-top:0;padding-bottom:0}
.hero h1{font-family:"Poppins",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-1px;
  font-size:clamp(2.3rem,6vw,3.6rem);line-height:1.08;color:var(--es-black);margin-bottom:20px}
.hero h1 em{font-style:normal;background:var(--es-yellow);padding:0 .15em;border-radius:8px}
.hero p{color:var(--es-text)}
.hero-col-right{display:block}
.hero-col-right img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:20px;
  box-shadow:12px 12px 0 var(--es-yellow)}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
@media (max-width:899px){.hero-col-right{order:-1;max-width:520px}}

/* ---------- the embedded "Quote Options" widget (ms-*) on the four quote pages ----------
   It ships its own <style> with a red accent and never sizes the SVG inside .ms-btn (the old
   Divi theme did), so the arrow and the external-link icon grew to ~200px. The calculator card
   is an <a>, and the prose underline ran through every line of it. */
.ms-quote-wrap{font-family:"Inter",system-ui,sans-serif}
.ms-quote-wrap h2,.ms-quote-wrap h3,.ms-quote-wrap h4{font-family:"Poppins",system-ui,sans-serif;color:var(--es-black)}
.ms-quote-wrap .ms-badge{background:var(--es-yellow) !important;color:var(--es-black) !important;border-radius:50px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.ms-quote-wrap .ms-divider{background:var(--es-yellow) !important;height:4px;border-radius:4px}
.prose-page a.ms-card,a.ms-card,a.ms-card:hover,a.ms-card *{text-decoration:none !important;color:inherit}
.ms-quote-wrap .ms-card{border-radius:20px;border-color:var(--es-border)}
.ms-quote-wrap .ms-card[aria-expanded="true"]{border-color:var(--es-black)}
.ms-quote-wrap .ms-icon-wrap{background:var(--es-yellow)}
.ms-quote-wrap .ms-icon-wrap svg{color:var(--es-black)}
.ms-quote-wrap .ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;height:auto;
  background:var(--es-yellow) !important;color:var(--es-black) !important;border:0;border-radius:10px;
  padding:14px 28px;font-family:"Poppins",sans-serif;font-weight:700;font-size:1rem;line-height:1.2}
.ms-quote-wrap .ms-btn:hover{background:var(--es-yellow-dark) !important}
.ms-quote-wrap .ms-btn svg,.ms-quote-wrap button svg{width:18px !important;height:18px !important;flex:none}

/* ---------- found by a crawl of every built page (2026-10-15) ----------
   Buttons without their own font fell back to the browser's Arial (the burger, the quantity
   +/-); the BEM .btn--primary and the review pages' .btn-review-red were still the frame's red;
   product cards embedded in prose pages inherited the prose underline ("Sale" underlined). */
button{font-family:inherit}
.btn--primary,a.btn--primary,.prose-page a.btn--primary{background:var(--es-yellow);color:var(--es-black);
  border-radius:10px;font-family:"Poppins",sans-serif;font-weight:700;text-decoration:none}
.btn--primary:hover{background:var(--es-yellow-dark);color:var(--es-black)}
a.btn-review-red,.prose-page a.btn-review-red{background:var(--es-black);color:var(--es-yellow);border-radius:10px;
  font-family:"Poppins",sans-serif}
a.btn-review-red:hover,.prose-page a.btn-review-red:hover{background:#000;color:var(--es-yellow)}
.prose-page .scard a,.prose-page a.scard-pic,.prose-page .scard .btn,.prose-page a.btn{text-decoration:none}
.prose-page a.btn-primary,.prose-page a.btn-dark,.prose-page a.btn-outline{text-decoration:none}

/* ---------- MCC forms (_form_N): the external script styles its submit red in Arial ---------- */
.mcc-form input,.mcc-form select,.mcc-form textarea{border:1px solid var(--es-border) !important;border-radius:10px !important;
  font-family:"Inter",sans-serif !important}
.mcc-form input:focus,.mcc-form select:focus,.mcc-form textarea:focus{outline:2px solid var(--es-black);outline-offset:1px}
.mcc-form button,.mcc-form [type="submit"]{background:var(--es-yellow) !important;color:var(--es-black) !important;
  border:0 !important;border-radius:10px !important;font-family:"Poppins",sans-serif !important;font-weight:700 !important;
  padding:14px 28px !important;text-transform:none !important;letter-spacing:0 !important;cursor:pointer}
.mcc-form button:hover,.mcc-form [type="submit"]:hover{background:var(--es-yellow-dark) !important}
.mcc-form label{font-family:"Inter",sans-serif;font-weight:600;color:var(--es-black)}

/* ---------- cart lines: the name gets the full width, the controls sit under it ---------- */
.cart-item{grid-template-columns:80px minmax(0,1fr) !important;align-items:start;border-radius:16px}
.cart-item-body{min-width:0}
.cart-item-body h3{overflow-wrap:break-word;word-break:normal;font-size:1rem;line-height:1.35}
.cart-item-controls{grid-column:2;justify-self:start}

/* ---------- footer ---------- */
.site-footer{background:var(--es-black);color:rgba(255,255,255,.72)}
.site-footer h2{color:var(--es-yellow);font-family:"Poppins",sans-serif;font-weight:800}
.site-footer__col h2{font-size:.8rem !important;line-height:1.3 !important;letter-spacing:.08em !important;text-transform:uppercase;margin:0 0 14px !important;overflow-wrap:anywhere}
.contact-methods a.cmethod,.contact-methods a.cmethod *,.prose-page a.cmethod{text-decoration:none !important;color:inherit}
.contact-grid,.about-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:880px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.about-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.contact-grid>*,.about-grid>*{min-width:0;overflow-wrap:anywhere}
.prose-page,.prose-page .container{overflow-wrap:break-word}
.site-footer a:hover{color:var(--es-yellow)}
.site-footer__logo span{color:#fff;text-transform:uppercase;font-weight:900}
/* Tagalog labels and product names are longer than the frame's English ones: columns may not
   grow past their share (a 1fr track's minimum is its content, which pushed the page 84px wide). */
@media(min-width:600px){.site-footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.site-footer__col{min-width:0}
.site-footer__col a{overflow-wrap:anywhere;white-space:normal}
.cookie-banner__btn--accept{background:var(--es-yellow);color:var(--es-black)}