/* =========================================================
EasyStore skin (CEO request 2026-10-16: "give magneticflyscreen.co
the easystore.in.th look and feel").
Copied from WEB-magneticflyscreenco (the reference store) in the MIS rollout.
Loaded LAST in layouts/base.njk and in both standalone home pages, after
nav.css, style.css and the home page's inline styles, so it wins on equal
specificity. It only
restyles: no markup, copy, prices or claims change. Delete the
in base.njk to return to the previous cloudpillo look.
Source of the look: easystore.in.th inline CSS, read 2026-10-16.
#ffdf02 yellow nav, strips, primary buttons, pills
#e6c800 yellow-dark button hover
#111111 black text, secondary buttons, dark panels, footer
#666666 muted body copy
#e0e0e0 border cards and hairlines
#f8f8f8 card grey alternate section background
Fonts: Poppins (headings, buttons) + Inter (body).
Yellow is never used for text on white (it fails contrast); on white
it is a fill with black text on top, as on easystore.in.th.
========================================================= */
:root{
--es-yellow:#ffdf02;
--es-yellow-dark:#e6c800;
--es-black:#111111;
--gold:#ffdf02;
--gold-deep:#111111;
--gold-soft:#ffdf02;
--cream:#f8f8f8;
--cream-2:#f8f8f8;
--ink:#111111;
--ink-soft:#666666;
--line:#e0e0e0;
--sky:#fff6b0;
--sun:#ffdf02;
--shadow:0 16px 40px rgba(0,0,0,.10);
--shadow-sm:0 4px 20px rgba(0,0,0,.06);
--maxw:1100px;
}
/* ---------- Type ---------- */
body,.topnav,.site-footer,#cookie-banner{font-family:"Inter",system-ui,sans-serif}
body{font-size:17px;color:#222}
h1,h2,h3,h4,
.brand .name,.topnav__name,.site-footer__logo span,.site-footer__delivery h4,
.overlay a,.review-meta .big,.price-block .price,.scard-meta h3,.scard-price .now,.rcard .av,
.product-title,.price-now,.atc-price-now,.buybox-also-name,.also-card-name,.review-card-avatar,
.sticky-buy-name,.sticky-buy-now,.cart-upsell-body h3,.cart-upsell-price,.shop-cat-title,
.cart-trust-body h3,.cart-item-body h3,.cart-item-price{
font-family:"Poppins",system-ui,sans-serif;letter-spacing:-.01em
}
.product-title{font-weight:800;line-height:1.15;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.price-now,.atc-price-now,.cart-item-price,.cart-upsell-price,.sticky-buy-now{font-weight:800}
.buybox-also-name,.also-card-name,.sticky-buy-name,.cart-item-body h3,.cart-upsell-body h3{font-weight:600}
h1,h2{font-weight:800;line-height:1.15;color:var(--ink)}
h3,h4{font-weight:700;color:var(--ink)}
.topnav__name small,.brand .name small,.site-footer__logo small,
.faq-q,.faq-q h3,.guide-body h4,.footer-col h4{font-family:"Poppins",system-ui,sans-serif}
/* Section labels: EasyStore's yellow pill */
.eyebrow,.section-label{
display:inline-block;background:var(--es-yellow);color:var(--es-black);
padding:.35rem 1rem;border-radius:50px;font-size:.75rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;font-family:"Poppins",system-ui,sans-serif
}
.divider,.guide-body h2::after{background:var(--es-yellow)}
/* ---------- Buttons ---------- */
.btn{border-radius:10px;font-family:"Poppins",system-ui,sans-serif;font-weight:700;letter-spacing:0}
.btn-primary{background:var(--es-yellow);color:var(--es-black);box-shadow:none}
.btn-primary:hover{background:var(--es-yellow-dark);box-shadow:0 8px 24px rgba(255,223,2,.4)}
.btn-primary svg path{stroke:currentColor}
.guide-inner a.btn-primary,.prose-page a.btn-primary,a.btn-primary{color:var(--es-black)}
.btn-ghost,.btn-outline{background:transparent;color:var(--es-black);border:2px solid var(--es-black)}
.btn-ghost:hover,.btn-outline:hover{background:var(--es-black);color:var(--es-yellow);border-color:var(--es-black)}
.btn-dark{background:var(--es-black);color:#fff}
.btn-dark:hover{background:#333}
.nav-cta{background:var(--es-black);color:#fff;border-radius:8px}
.buybox-also-add{background:var(--es-yellow);color:var(--es-black)}
.gallery-sale-badge,.scard-badge{background:var(--es-yellow);color:var(--es-black)}
.buybox-also-name:hover,.quote-btn{color:var(--es-black)}
.quote-btn{text-decoration:underline;text-decoration-color:var(--es-yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.gallery-thumb.active,.option-card.is-selected{border-color:var(--es-black);box-shadow:0 0 0 3px rgba(255,223,2,.55)}
.option-select:focus-visible,.cart-field input:focus,.cart-field textarea:focus{border-color:var(--es-black);box-shadow:0 0 0 3px rgba(255,223,2,.55)}
.cart-shipping-opt:hover,.cart-shipping-opt:has(input:checked){border-color:var(--es-black)}
.cart-shipping-opt:has(input:checked){background:rgba(255,223,2,.12)}
.cart-shipping-opt:focus-within{outline-color:var(--es-black)}
.cart-shipping-opt input{accent-color:var(--es-black)}
/* ---------- Nav: solid yellow bar on every page ---------- */
.topnav,
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:none;
backdrop-filter:none;box-shadow:0 2px 12px rgba(0,0,0,.12)
}
body.home-hero .topnav{position:fixed}
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__name small,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__trigger,
body.home-hero .topnav:not(.is-scrolled):not(.is-drawer-open) .topnav__cart{text-shadow:none}
.topnav__inner{max-width:1180px;min-height:68px;padding-top:8px;padding-bottom:8px}
.topnav__name{font-weight:800;font-size:1.12rem;color:var(--es-black);text-transform:uppercase;letter-spacing:-.01em}
.topnav__name small{color:rgba(0,0,0,.6)}
.topnav__trigger{color:var(--es-black);font-family:"Inter",system-ui,sans-serif;font-size:.9rem;font-weight:600}
.topnav__trigger:hover,.topnav__item.is-open .topnav__trigger{background:rgba(0,0,0,.08);color:var(--es-black)}
.topnav__drop{border-color:var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.topnav__drop a:hover{background:var(--es-yellow)}
.topnav__cart,.topnav__cart:hover{color:var(--es-black)}
.cart-badge,#cart-badge{background:var(--es-black);color:var(--es-yellow)}
.topnav__cta{
background:var(--es-black);color:#fff;border-radius:8px;min-height:42px;padding:0 1.4rem;
font-family:"Poppins",system-ui,sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em
}
.topnav__cta:hover{background:#333;box-shadow:none}
.topnav__burger{background:transparent;border:2px solid var(--es-black);border-radius:10px}
.topnav__burger span{background:var(--es-black)}
.topnav__drawer{background:var(--es-yellow);border-top:1px solid rgba(0,0,0,.15)}
.topnav__draw-group{border-bottom-color:rgba(0,0,0,.12)}
.topnav__draw-head,.topnav__draw-links a{color:var(--es-black)}
.topnav__cta--drawer{width:100%}
.langswitch{border-color:rgba(0,0,0,.2);background:rgba(255,255,255,.55)}
.langswitch__opt{color:var(--es-black)}
.langswitch__opt:hover{background:rgba(0,0,0,.08);color:var(--es-black)}
.langswitch__opt--on,.langswitch__opt--on:hover{background:var(--es-black);color:var(--es-yellow)}
/* legacy inner-page nav and overlay (style.css / home-styles) */
.nav,.nav--solid{background:var(--es-yellow);border-bottom:none;backdrop-filter:none;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.nav-links a{color:var(--es-black)}
.brand .mark,.nav--solid .brand .mark{background:var(--es-black);color:var(--es-yellow)}
.burger{background:transparent;border:2px solid var(--es-black)}
.overlay{background:var(--es-yellow)}
.overlay a{color:var(--es-black);font-weight:800}
.overlay a:hover{color:#333}
/* ---------- Home hero: white, dotted, photo on the right ---------- */
.hero{min-height:auto;background:#fff;padding:24px 0 48px;flex-direction:column;align-items:stretch}
.hero::before{
content:"";position:absolute;inset:0;z-index:-3;
background-image:radial-gradient(circle,#e8e8e8 1px,transparent 1px);background-size:28px 28px
}
.hero-bg{position:relative;inset:auto;z-index:0;margin:0 16px 28px;height:260px;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.hero-bg::after{display:none}
.hero-bg img{object-position:68% center}
.hero-content{padding-top:0;padding-bottom:0}
.hero h2{
font-family:"Poppins",system-ui,sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(2.1rem,4.5vw,3.6rem);line-height:1.08;letter-spacing:-1px;color:var(--es-black)
}
.hero h2 em{font-style:normal;color:var(--es-black);background:linear-gradient(transparent 62%,var(--es-yellow) 62%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7}
.hero-trust{display:inline-flex;border:2px solid var(--line);border-radius:14px;padding:.8rem 1.2rem;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.hero-trust span{color:var(--es-black);font-weight:600;font-size:.9rem}
@media(min-width:880px){
.hero{display:flex;flex-direction:row;align-items:center;min-height:min(62vh,640px);padding:56px 0}
.hero-bg{
position:absolute;margin:0;height:auto;top:40px;bottom:40px;
right:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));
width:calc((min(100vw,var(--maxw)) - 48px) / 2 - 20px)
}
.hero-content{padding:0}
}
/* Trust strip: EasyStore's yellow service strip */
.strip{background:var(--es-yellow);color:var(--es-black);padding:.9rem 0}
.strip .item{font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.86rem}
.strip svg{color:var(--es-black)}
/* ---------- Sections and cards ---------- */
.sec-head h2,.section-title{font-weight:800}
.reviews,.faq,.gallery,.summary,.delivery{background:var(--cream)}
.bcard,.rcard,.scard,.faq-item,.company-card,.cmethod,.gallery-grid figure,.quote-card{border-radius:16px;border-color:var(--line)}
.bcard{background:#fff}
.bcard:hover,.scard:hover,.gallery-grid figure:hover,.cmethod:hover{border-color:var(--es-yellow);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.bcard .ic,.cmethod .ic,.tbadge .ic,.delivery .ic,.feature-row .fic{background:var(--es-yellow);border-color:var(--es-yellow)}
.bcard .ic svg,.cmethod .ic svg,.tbadge .ic svg,.delivery .ic svg,.feature-row .fic svg{color:var(--es-black)}
.delivery{border-color:var(--line);background:#fff}
.stars svg,.review-meta .stars svg,.rcard .stars svg,.scard-meta .stars svg,.rcard .who small svg{color:#f5b800}
.product-figure,.scard-pic,.gallery-grid .pic{background:#f8f8f8}
.price-block .price,.scard-price .now{font-weight:800}
.price-block .ship,.scard-price .ship,.price-note a,.detail-list .v a,.sum-facts .v a{color:var(--es-black)}
.detail-list .k,.sum-facts .k{color:var(--ink-soft)}
.faq-q{font-weight:600}
.faq-q:hover{background:var(--cream)}
.faq-q svg{color:var(--es-black)}
/* Final call to action: EasyStore's black testimonial panel */
.shop{background:var(--es-black)}
.shop::before{background:radial-gradient(70% 110% at 50% 0%,rgba(255,223,2,.14) 0%,rgba(255,223,2,0) 60%)}
.shop h2{text-transform:uppercase;font-weight:900}
.shop h2 em{font-style:normal;color:var(--es-yellow)}
.shop .urgency{background:var(--es-yellow);border-color:var(--es-yellow);color:var(--es-black)}
.shop .guarantees svg{color:var(--es-yellow)}
.shop .btn-ghost{color:#fff;border-color:#fff}
.shop .btn-ghost:hover{background:var(--es-yellow);color:var(--es-black);border-color:var(--es-yellow)}
/* ---------- Footer ---------- */
.site-footer,.footer{background:var(--es-black)}
.site-footer__logo span{font-weight:800;text-transform:uppercase}
.site-footer__contact a,.site-footer__delivery strong{color:var(--es-yellow)}
.site-footer__col a:hover,.site-footer__meta a:hover,.footer-col nav a:hover,.footer-links a:hover,.footer-col nav a:hover{color:var(--es-yellow)}
.site-footer__top,.site-footer__delivery{border-color:rgba(255,255,255,.1)}
/* ---------- Cookie banner and sticky CTA ---------- */
#cookie-banner{background:var(--es-black)}
.cookie-banner__text a{color:var(--es-yellow)}
.cookie-banner__btn{border-radius:8px}
.cookie-banner__btn--accept{background:var(--es-yellow);color:var(--es-black)}
.cookie-banner__btn--accept:hover{background:var(--es-yellow-dark);box-shadow:none}
.cookie-banner__btn--ghost:hover{border-color:var(--es-yellow)}
.sticky-cta{background:rgba(255,255,255,.95)}
/* =========================================================
Header "Custom Quote" button (CEO 2026-10-16). Outlined black next to the
solid black Shop Online button, EasyStore's phone-pill treatment.
========================================================= */
.topnav__cta--quote{background:transparent;color:var(--es-black);border:2px solid var(--es-black)}
.topnav__cta--quote:hover{background:var(--es-black);color:var(--es-yellow)}
.topnav__drawer .topnav__cta--quote{margin-top:10px}
.topnav__trigger,.topnav__name{white-space:nowrap}
@media(min-width:1024px) and (max-width:1360px){
.topnav__inner{gap:8px;padding-left:16px;padding-right:16px}
.topnav__name{font-size:.92rem}
.topnav__cta{padding:0 .8rem;font-size:.72rem;letter-spacing:.04em}
.topnav__trigger{padding:10px 6px;font-size:.84rem}
.langswitch__opt{padding:0 8px}
}
@media(min-width:1024px) and (max-width:1140px){
.topnav__flag{display:none}
}
/* =========================================================
Variant option dropdowns (assets/js/variant-cards.js): one select per option
(Mesh, Size, Colour). The combined select stays in the DOM as the engine and
is hidden once the per-option dropdowns are drawn.
========================================================= */
.option-group.is-replaced{display:none}
.vcards{display:grid;gap:16px;margin:20px 0 4px}
.vcards .option-group-label{font-size:.95rem;color:var(--ink-soft);margin:0 0 8px}
.vcards .option-group-label strong{color:var(--ink)}
.vcards .option-select{max-width:none;border:2px solid var(--line);border-radius:10px;font-family:"Poppins",system-ui,sans-serif;background-color:#fff}
.vcards .option-select:hover{border-color:var(--es-black)}
/* Custom-size quote link under the picker */
.custom-quote-link{display:flex;align-items:center;gap:12px;margin:18px 0 4px;padding:13px 16px;
border:2px dashed var(--es-black);border-radius:12px;background:#fffbe0;color:var(--es-black);font-size:.94rem;line-height:1.4}
.custom-quote-link svg{flex:none}
.custom-quote-link strong{text-decoration:underline;text-decoration-color:var(--es-yellow);text-decoration-thickness:3px;text-underline-offset:3px}
.custom-quote-link:hover{background:var(--es-yellow)}
/* =========================================================
Quote hub (/quote/ and /quote/devis-sur-mesure/)
========================================================= */
.quote-hub{padding:48px 0 72px}
.quote-hub h1{font-size:clamp(2rem,4vw,3rem);font-weight:900;text-transform:uppercase;letter-spacing:-1px;margin:6px 0 14px}
.quote-hub-lead{max-width:720px;font-size:1.05rem;line-height:1.7;margin-bottom:34px}
.quote-hub-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.quote-hub-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.quote-hub-grid{grid-template-columns:repeat(4,1fr)}}
.quote-hub-card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.quote-hub-card:hover{transform:translateY(-4px);border-color:var(--es-yellow);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.quote-hub-pic{display:block;aspect-ratio:1/1;background:#f8f8f8}
.quote-hub-pic img{width:100%;height:100%;object-fit:cover}
.quote-hub-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 22px;flex:1}
.quote-hub-title{font:800 1.08rem/1.25 "Poppins",system-ui,sans-serif;color:var(--es-black)}
.quote-hub-text{color:var(--ink-soft);font-size:.92rem;line-height:1.55;flex:1}
.quote-hub-body .btn{margin-top:8px;min-height:44px;width:100%}
.quote-hub-notes{max-width:760px;margin-top:48px}
.quote-hub-notes h2{font-size:1.35rem;margin:26px 0 8px}
.quote-hub-notes p{line-height:1.7}
/* Ported quote child pages: the calculator card's body copy is wrapped in a link,
which rendered as a block of underlined text. */
.prose-page a p,.prose-page a span:not(.btn){text-decoration:none}
/* =========================================================
Card-lineage product picker (this template): Mesh, Frame Colour and Size are
native dropdowns (.variant-select-input) since 2026-10-16.
========================================================= */
.variant-select{margin:18px 0 0}
.variant-select-label{display:block;font-size:.95rem;color:var(--ink-soft);margin:0 0 8px}
.variant-select-label strong{color:var(--ink)}
.variant-select-input{width:100%;padding:13px 46px 13px 16px;border:2px solid var(--line);border-radius:10px;background:#fff;
color:var(--es-black);font:600 1rem/1.3 "Poppins",system-ui,sans-serif;cursor:pointer;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;background-size:15px}
.variant-select-input:hover{border-color:var(--es-black)}
.variant-select-input:focus-visible{outline:none;border-color:var(--es-black);box-shadow:0 0 0 3px rgba(255,223,2,.55)}
.variant-option.is-active{border-color:var(--es-black);background:#fffbe0;box-shadow:0 0 0 3px rgba(255,223,2,.55)}
.delivery-banner{border-color:var(--line)}
.buybox-row-chip{background:var(--es-yellow);color:var(--es-black)}
.price-save{background:var(--es-yellow);color:var(--es-black);border-color:var(--es-yellow)}
.atc-btn,.btn-primary{color:var(--es-black)}
/* Card-lineage templates carry a separate --accent token (orange) besides --gold.
Remapping it globally would put white text on yellow and yellow text on white, so
only the rules that use it are overridden here. */
.btn-primary,.btn-primary:hover{border-color:var(--es-yellow)}
.btn-primary:hover{border-color:var(--es-yellow-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{outline-color:var(--es-black)}
.atc-delivery-note svg,.cart-discount-msg.ok,.qf-status.is-ok{color:var(--es-black)}
.quote-choice-icon--person{background:var(--es-yellow);color:var(--es-black)}
.mcc-form input:focus,.mcc-form textarea:focus,.mcc-form select:focus{outline-color:var(--es-black);border-color:var(--es-black)}
.mcc-form button{background:var(--es-yellow)!important;color:var(--es-black)!important;border-radius:10px;font-family:"Poppins",system-ui,sans-serif;font-weight:700}
.mcc-form button:hover{background:var(--es-yellow-dark)!important}
.guide-inner h2::after{background:var(--es-yellow)}
/* Home pages that pin the header over the hero (body.home-hero): clear it. */
body.home-hero .hero{padding-top:92px}
@media(min-width:880px){
body.home-hero .hero{padding-top:124px}
body.home-hero .hero-bg{top:108px}
}
/* Card-lineage page and product headlines (a styled under the keyword h1). */
.product-aspirational-headline{font-family:"Poppins",system-ui,sans-serif;font-weight:800;color:var(--es-black);letter-spacing:-.01em;line-height:1.15}
.product-h1-keywords{font-family:"Poppins",system-ui,sans-serif;color:var(--ink-soft)}
/* Quote chooser calculator button (was green) in the EasyStore black. */
.btn-quote-calc{background:var(--es-black);color:#fff;border-color:var(--es-black)}
.btn-quote-calc:hover{background:#333;color:var(--es-yellow)}