/* EasyStore look and feel for magneticscreen.co.in (CEO 2026-10-16: "make the website
   have an easystore.in.th look and feel"). Carried from the insectscreensmalaysia.com
   layer of the same day (itself from insectscreen.asia, 2026-10-15). Hindi is
   Devanagari: Poppins draws it for headings, and Noto Sans Devanagari stands behind
   Inter (Latin only) for body text. Loaded AFTER every other stylesheet; the rules
   underneath are untouched. Written by tools/msin_22_easystore.py from
   tools/msin_22_easystore.css; do not hand-edit. */
: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","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  --es-body:"Inter","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
}

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

/* ---- Labels: EasyStore's eyebrow, as a pill ---- */
.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}

/* ---- Buttons ---- */
.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)}

/* ---- Header: the yellow bar ---- */
.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}
/* The heavier faces make the menu (Hindi labels most of all) wider than the base's 1023px burger
   breakpoint allows (labels wrapped to three lines at 1024px), so the drawer
   takes over below 1200px. Same three switches as nav.css. */
@media(max-width:1199px){
  .topnav__menu{display:none}
  .topnav__cart--bar{display:flex}
  .topnav__burger{display:flex}
}

/* ---- Footer: black ---- */
.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)}

/* ---- Home: the header is a solid yellow bar here too. The homes used to float a
   transparent header over a full-screen photo; that hero is gone, so it docks. ---- */
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}

/* ---- Home: hero (text first, photo after on a phone; photo right on desktop) ---- */
.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}
}

/* ---- Home: the yellow band (EasyStore's "We serve" strip) ---- */
.strip{background:var(--es-yellow);color:var(--es-black);padding:16px 0}
.strip .item{font-weight:700}
.strip svg{color:var(--es-black)}

/* ---- Home: cards ---- */
.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)}

/* ---- Home: reviews on 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)}

/* ---- Home and shop: product cards ---- */
.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 ---- */
.faq{background:var(--cream)}
.faq-item{border:none;border-radius:14px}
.faq-q svg{color:var(--es-black)}

/* ---- Final CTA panels on 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)}

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

/* ---- Product pages ---- */
.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 buy bar ---- */
.sticky-cta{background:rgba(255,255,255,.96)}

/* (from insectscreensmalaysia.com 2026-10-16) the brand block may not shrink. With
   flex:0 1 auto and min-width:0 it squeezed to 129px while "Magnetic Screens"
   needs its full width, so the name ran under the first menu item at every desktop width
   (measured in the browser pane at 1280px). */
.topnav__brand{flex-shrink:0}

/* ---- magneticscreen.co.in: the language link and the calculator button ---- */
.topnav__lang{background:#fff;color:var(--es-black);border:2px solid var(--es-black);border-radius:50px}
.topnav__lang:hover{background:var(--es-black);color:#fff}
.btn-quote-calc{background:var(--es-black);border-color:var(--es-black);color:#fff}
.btn-quote-calc:hover{background:#000;color:var(--es-yellow)}
.quote-choice-card{border-radius:var(--radius-lg);border:1px solid var(--line)}
.quote-choice-icon{background:var(--es-yellow);color:var(--es-black)}
.quote-route{border-radius:var(--radius-lg)}

/* magneticscreen.co.in: on a phone the full "Magnetic Screens Company" in Poppins 800
   (272px at 18.9px) pushed the burger off a 375px screen and the page scrolled sideways
   (406px, measured in the browser pane 2026-10-16). Below 521px the name scales with the
   viewport, and the brand may shrink with an ellipsis as a last resort. */
@media(max-width:520px){
  .topnav__brand{flex-shrink:1;min-width:0}
  .topnav__name{font-size:clamp(12px,3.6vw,16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}