/* =========================================================================
   Appliance Subscription — landing template
   Layout tokens marked [REF] are measured values pulled out of the saved
   reference page's CSS (bootstrap-custom.min.css / customer-main.min.css /
   vue-slick-carousel.min.css + its inline :root custom properties).
   Structure and spacing only — no copied artwork, copy, logos or badges.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Palette (fixed — themes below override ACCENT only) */
  --c-white:      #ffffff;
  --c-text:       #131313;   /* [REF] --tpc-2  19,19,19   */
  --c-text-2:     #2c2c2c;   /* [REF] --tpc-35 44,44,44   */
  --c-muted:      #6b6b6b;
  --c-line:       #dddddd;   /* [REF] --tpc-3  221,221,221 */
  --c-band:       #dddddd;   /* section bands              */
  --c-band-soft:  #f2f2f2;
  --c-gold:       #f8cf5b;
  --c-placeholder:#d9d9d9;
  --c-footer:     #131313;
  --c-footer-2:   #2c2c2c;

  /* ACCENT — the only thing a theme preset changes */
  --accent:       #ff0000;   /* [REF] --tpc-5  255,0,0   */
  --accent-deep:  #ba0505;   /* [REF] --tpc-4  186,5,5   */
  --accent-dark:  #860404;   /* [REF] --tpc-45 134,4,4   */
  --accent-soft:  #f8cf5b;
  --accent-on:    #ffffff;

  /* Type [REF] --txt-h1-fs:30px / --txt-h2-fs:36px / --txt-h3-fs:22px /
     --txt-h4-fs:16px, all bold except h4; --txt-hN-fs-max-30 clamps to 30px */
  --ff-head: "Anuphan", "Sarabun", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ff-body: "Sarabun", "Anuphan", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  --fs-h1:      30px;
  --fs-h2:      36px;   /* section heading            */
  --fs-h2-max:  30px;   /* [REF] mobile clamp         */
  --fs-h3:      22px;
  --fs-body:    16px;
  --fs-name:    16px;   /* product-card name          */
  --fs-btn:     14px;   /* [REF] .btn font-size:14px  */
  --fs-btn-lg:  20px;   /* [REF] hero button widget   */
  --fs-intro:   13px;   /* [REF] --widget-product-intro-font-size */
  --fs-xs:      12px;

  --lh-body: 1.6;
  --lh-btn:  20px;      /* [REF] .btn line-height */
  --lh-tight: 1.3;

  /* Layout [REF] bootstrap .container max-widths + --section-container-padding-x:15px */
  --container:  1140px;
  --pad-x:      15px;
  --content:    1110px;  /* 1140 - 2*15 */
  --gutter:     15px;    /* [REF] 2 x --widget-product-cell-padding 7.5px */

  /* Spacing scale [REF] .m-gd-N / .gap-gd-N = 8px steps */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px;

  /* Section rhythm [REF] .grid-wrapper --grid-wrapper-margin-top:36px (max on page) */
  --sec-py:       36px;
  --sec-py-tight: 24px;

  /* Component sizes [REF] */
  --announce-h: 46px;   /* --cell-height:46px on the top bar cell */
  --header-h:   72px;
  --badge-size: 40px;   /* --widget-product-badge-size */
  --card-pad:   16px;   /* --widget-product-card-padding */
  --radius:     4px;    /* .btn border-radius */
  --radius-pill:50px;   /* button widget --border-radius */
  --radius-img: 15px;   /* --image-border-radius */
  --dot:        20px;   /* slick dot hit area */

  /* Aspect ratios — every image slot on the reference page is 1:1
     (--widget-product-image-ratio:100%, --blog-img-ratio:100%); the banner
     ratios below are derived from its real cell heights. */
  --ar-hero:      1110 / 563;  /* --cell-height:563px at 1110 content width */
  --ar-hero-m:    360 / 350;   /* --cell-mobile-height:350px               */
  --ar-poster:    555 / 694;   /* portrait poster ~4:5, max 555 wide       */
  --ar-square:    1 / 1;
  --ar-cbanner:   1110 / 200;
  --ar-logo:      150 / 40;
  --ar-pay:       60 / 40;
  --ar-promo:     555 / 278;   /* promotions page cards (2-up)             */

  /* Fixed status / chat colours — not themeable */
  --c-ok:     #1a7f37;
  --c-error:  #c62828;
  --c-chat:   #06c755;   /* LINE green on the mobile CTA bar */
  --ctabar-h: 60px;
}

/* ---------- 2. Theme presets — accent colour only, never layout ---------- */
[data-theme="cny"]{
  --accent:      #d61313;
  --accent-deep: #a00b0b;
  --accent-dark: #6e0606;
  --accent-soft: #f8cf5b;
}
[data-theme="songkran"]{
  --accent:      #00a6c4;
  --accent-deep: #00809a;
  --accent-dark: #005a6e;
  --accent-soft: #bfe9f3;
}
[data-theme="newyear"]{
  --accent:      #c9a227;
  --accent-deep: #9c7c1a;
  --accent-dark: #6f5810;
  --accent-soft: #f8cf5b;
}

/* ---------- 3. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-text);
  font:400 var(--fs-body)/var(--lh-body) var(--ff-body);
}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:8px 16px;background:var(--accent);color:var(--accent-on);
}
.skip-link:focus{left:8px;top:8px}

/* ---------- 4. Layout primitives ---------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.section{padding-block:var(--sec-py)}
.section--tight{padding-block:var(--sec-py-tight)}
.section--band{background:var(--c-band)}

/* ---------- 5. Type ------------------------------------------------------ */
.h-sec{
  font-family:var(--ff-head);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-tight);
  color:var(--c-text);
}
.h-sec--center{text-align:center}
.h-small{
  font-family:var(--ff-head);
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:var(--lh-tight);
}
.eyebrow{
  font-family:var(--ff-body);
  font-size:var(--fs-btn);
  font-weight:500;
  color:var(--accent-deep);
  margin-bottom:var(--sp-1);
}
.eyebrow--invert{color:var(--accent-soft)}
.lede{
  font-size:var(--fs-body);
  color:var(--c-text-2);
  max-width:64ch;
}
.lede--center{margin-inline:auto;text-align:center}

/* ---------- 6. Buttons --------------------------------------------------- */
/* [REF] .btn padding:5px 12px / 14px / lh 20px / w500 / radius 4px
   [REF] button widget: --padding-x:16px --padding-y:8px --border-radius:50px
         --width-btn:251px (14px) and 151px (20px) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  font-family:var(--ff-body);
  font-size:var(--fs-btn);
  font-weight:500;
  line-height:var(--lh-btn);
  padding:8px 16px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
  text-align:center;
}
.btn--wide{min-width:251px}
.btn--lg{font-size:var(--fs-btn-lg);min-width:151px}

.btn--primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--primary:active{background:var(--accent-dark);border-color:var(--accent-dark)}

.btn--outline{background:transparent;color:var(--accent-deep);border-color:var(--accent-deep)}
.btn--outline:hover{background:var(--accent-deep);color:var(--accent-on)}

.btn--ghost{background:transparent;color:var(--c-text);border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-text);}

.btn--invert{background:var(--c-white);color:var(--c-text);border-color:var(--c-white)}
.btn--invert:hover{background:transparent;color:var(--c-white)}

/* ---------- 7. Image slots ---------------------------------------------- */
/* Grey placeholder until a real file is dropped into content.json.
   aspect-ratio + object-fit:cover means a wrong-size upload crops
   instead of pushing the layout around. */
.slot{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--c-placeholder);
  aspect-ratio:var(--ar, 1 / 1);
}
.slot > img,
.slot > picture{
  width:100%;
  height:100%;
  display:block;
}
.slot > picture > img{width:100%;height:100%;object-fit:cover;display:block}
.slot > img{object-fit:cover}

.slot__tag{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px;
  text-align:center;
  font-family:var(--ff-body);
  font-size:var(--fs-xs);
  line-height:1.4;
  color:var(--c-text-2);
  pointer-events:none;
}
.slot__tag b{font-weight:700;font-size:var(--fs-btn)}
.slot--rounded{border-radius:var(--radius-img)}
.slot--filled{background:transparent}   /* the grey is only for an empty slot */

/* narrow slots (logo, payment chips) need a smaller label */
.slot--compact .slot__tag{font-size:9px;line-height:1.25;gap:0}
.slot--compact .slot__tag b{font-size:10px}

/* ---------- 8. Announcement bar ------------------------------------------ */
.announce{
  background:var(--accent);
  color:var(--accent-on);
  min-height:var(--announce-h);
  display:flex;
  align-items:center;
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  min-height:var(--announce-h);
}
.announce__text{font-size:var(--fs-btn);font-weight:500;text-align:center}
.announce__link{
  font-size:var(--fs-btn);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}

/* ---------- 9. Header ---------------------------------------------------- */
.header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:var(--sp-1);flex:0 1 auto;min-width:0}
.brand__mark{width:110px;flex:0 0 auto;--ar:var(--ar-logo)}
.brand__name{
  font-family:var(--ff-head);
  font-size:var(--fs-h3);
  font-weight:700;
  white-space:nowrap;
}
.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:var(--sp-3)}
.nav__link{
  font-size:var(--fs-btn);
  font-weight:500;
  padding-block:4px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav__link:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.header__actions{display:flex;align-items:center;gap:var(--sp-1);flex:0 0 auto}
.burger{display:none;align-items:center;gap:var(--sp-1);padding:8px 12px;border:1px solid var(--c-line);border-radius:var(--radius)}
.burger__bars,.burger__bars::before,.burger__bars::after{
  display:block;width:18px;height:2px;background:var(--c-text);content:"";
}
.burger__bars{position:relative}
.burger__bars::before{position:absolute;top:-6px}
.burger__bars::after{position:absolute;top:6px}
.burger__label{font-size:var(--fs-btn);font-weight:500}

/* ---------- 10. Hero slider ---------------------------------------------- */
.hero{padding-block:var(--sp-2) 0}
.hero__wrap{position:relative}
.hero__viewport{overflow:hidden}
.hero__track{display:flex;transition:transform .35s ease}
@media (prefers-reduced-motion: reduce){ .hero__track{transition:none} }

.hero__slide{flex:0 0 100%;min-width:100%}
.hero__slide .slot{--ar:var(--ar-hero)}

/* [REF] slick arrows 20x20, dots 20x20 with margin 0 5px */
.hero__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--c-text);
  font-size:20px;line-height:1;
  z-index:2;
}
.hero__arrow:hover{background:rgba(255,255,255,.75)}
.hero__arrow--prev{left:calc(var(--pad-x) + 10px)}
.hero__arrow--next{right:calc(var(--pad-x) + 10px)}
.hero__arrow::before{content:"\2039";font-size:28px;margin-top:-4px}
.hero__arrow--next::before{content:"\203A"}

.hero__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;            /* [REF] li margin 0 5px */
  padding-top:var(--sp-2);
}
.hero__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--c-line);
  padding:0;
}
.hero__dot[aria-selected="true"]{background:var(--accent)}

/* ---------- 11. Poster ----------------------------------------------------- */
/* one portrait image on a dark band, centred, max 555px wide */
.poster{background:var(--c-footer)}
.poster__wrap{max-width:calc(555px + 2 * var(--pad-x))}
.poster .slot{--ar:var(--ar-poster)}

/* any slot the client linked */
.slotlink,.poster__link{display:block}

/* ---------- 12. Contact block ------------------------------------------- */
/* [REF] .ly-layout2-02 = calc(41.67% - gap) / 58.33% */
.contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  align-items:start;
}
.contact__promo{display:grid;gap:var(--sp-2);justify-items:center}
.contact__promo-media{width:100%}
.contact__promo-media .slot{--ar:var(--ar-square)}
.contact__side{display:grid;gap:var(--sp-3)}
.contact__list{
  display:grid;
  gap:var(--sp-2);
}
.contact__item{
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:var(--card-pad);
  background:var(--c-white);
}
.contact__label{font-size:var(--fs-intro);color:var(--c-muted)}
.contact__value{
  font-family:var(--ff-head);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--accent-deep);
  word-break:break-word;
}
.contact__value--plain{color:var(--c-text)}

/* ---------- 13. Trust badges -------------------------------------------- */
/* Finished badge images (2-6), one row from 768px: --n is set by app.js to
   the badge count. Text is baked into the image, so no label and no crop. */
.trust__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
  justify-items:center;
}
.trust .trust__grid{margin-top:var(--sp-3)}
.trust__item{width:100%;max-width:150px}
.trust__item .slot{--ar:var(--ar-square);border-radius:var(--radius)}

/* ---------- 15. Product list -------------------------------------------- */
/* [REF] --widget-product-cell-padding 0 7.5px + wrapper margin 0 -7.5px
         => 15px column gutter; --widget-product-cell-margin 0 0 15px => row gap */
.pgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gutter);
  margin-top:var(--sp-4);
}
.pcard{
  display:flex;
  flex-direction:column;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  height:100%;
  transition:border-color .15s ease-in-out;
}
.pcard:hover{border-color:var(--accent-deep)}
.pcard__media{position:relative}
.pcard__media .slot{--ar:var(--ar-square)}
.pcard__body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:var(--card-pad);
  flex:1 1 auto;
}
.pcard__name{
  font-family:var(--ff-head);
  font-size:var(--fs-name);
  font-weight:700;
  line-height:1.35;
}
.pcard__intro{
  font-size:var(--fs-intro);color:var(--c-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

.products__more{display:flex;justify-content:center;margin-top:var(--sp-4)}

/* ---------- 16. Contact banner ------------------------------------------- */
.cbanner{position:relative;padding-block:var(--sec-py)}
.cbanner__wrap{position:relative}
.cbanner__media{--ar:var(--ar-cbanner)}
/* ---------- 17. Disclaimer ----------------------------------------------- */
.disclaimer{border-top:1px solid var(--c-line)}
.disclaimer__list{
  counter-reset:d;
  display:grid;
  gap:6px;
  margin-top:var(--sp-2);
}
.disclaimer__list li{
  counter-increment:d;
  position:relative;
  padding-left:24px;
  font-size:var(--fs-intro);
  color:var(--c-muted);
  line-height:1.7;
}
.disclaimer__list li::before{
  content:counter(d) ".";
  position:absolute;left:0;top:0;
  font-weight:700;
  color:var(--c-text-2);
}

/* ---------- 18. Footer --------------------------------------------------- */
.footer{background:var(--c-footer);color:var(--c-line)}
.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  padding-block:var(--sp-6) var(--sp-4);
}
.footer__mark{width:110px;--ar:var(--ar-logo);background:var(--c-footer-2)}
.footer__mark .slot__tag{color:var(--c-line)}
.footer__about{margin-top:var(--sp-2);font-size:var(--fs-btn);color:#9c9c9c;max-width:40ch}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.footer__title{
  font-family:var(--ff-head);
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--c-white);
  margin-bottom:var(--sp-2);
}
.footer__links{display:grid;gap:8px}
.footer__links a,.footer__lines li{font-size:var(--fs-btn);color:#9c9c9c}
.footer__links a:hover{color:var(--c-white)}
.footer__lines{display:grid;gap:8px}

.footer__pay{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  padding-block:var(--sp-3);
  border-top:1px solid var(--c-footer-2);
}
.footer__title--pay{margin-bottom:0}
.footer__payments{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.footer__payments .slot{width:60px;--ar:var(--ar-pay);border-radius:var(--radius);background:var(--c-footer-2)}
.footer__payments .slot__tag{color:#9c9c9c;font-size:10px}

.footer__bar{background:#0b0b0b;padding-block:var(--sp-2)}
.footer__copy{font-size:var(--fs-xs);color:#7a7a7a;text-align:center}

/* ---------- 19. Load error notice ---------------------------------------- */
.loaderr{
  padding:var(--sp-3);
  margin:var(--sp-3) auto;
  max-width:640px;
  border:1px solid var(--accent-deep);
  border-radius:var(--radius);
  background:#fff5f5;
  color:var(--c-text);
  font-size:var(--fs-btn);
  line-height:1.7;
}
.loaderr code{background:var(--c-band);padding:2px 6px;border-radius:3px}

/* ---------- 19b. Inner pages (products, product, promotions, trust,
                   terms, contact) — same tokens, no new sizes ------------- */
.section--flush-top{padding-top:0}
.nav__link[aria-current="page"]{color:var(--accent-deep)}

/* page head + breadcrumb */
.pagehead .h-sec{margin-top:var(--sp-1)}
.pagehead .lede{margin-top:var(--sp-1)}
.crumbs__list{display:flex;flex-wrap:wrap;font-size:var(--fs-intro);color:var(--c-muted)}
.crumbs__item + .crumbs__item::before{content:"/";margin-inline:var(--sp-1);color:var(--c-line)}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs [aria-current]{color:var(--c-text-2)}

.empty{padding-block:var(--sp-4);text-align:center;color:var(--c-muted)}

/* product detail */
.pdetail{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:start}
.pgallery__stage .slot{--ar:var(--ar-square)}
.pinfo{display:grid;gap:var(--sp-2)}
.pinfo__desc{color:var(--c-text-2)}
.pinfo__actions{
  display:flex;flex-wrap:wrap;gap:var(--sp-1);
  padding-top:var(--sp-2);border-top:1px solid var(--c-line);
}
/* promotions */
.promos{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
.promo{
  display:flex;flex-direction:column;
  background:var(--c-white);
  border-radius:var(--radius-img);
  overflow:hidden;
}
.promo .slot{--ar:var(--ar-promo);border-radius:0}
/* trust page */
.company{margin-top:var(--sp-2);border:1px solid var(--c-line);border-radius:var(--radius)}
.company__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:12px var(--card-pad);
  border-bottom:1px solid var(--c-line);
}
.company__row:last-child{border-bottom:0}
.company dt{font-size:var(--fs-intro);color:var(--c-muted)}
.company dd{margin:0;font-weight:500}
.company__verify{margin-top:var(--sp-2)}
.company__verify:empty{display:none}
/* terms page */
.terms{display:grid;gap:var(--sp-4);max-width:760px}
.terms__list{display:grid;gap:6px;margin-top:var(--sp-1);padding-left:20px;list-style:disc;color:var(--c-text-2)}

/* contact page */
.contact__value--sm{font-size:var(--fs-body);font-weight:600}
/* ?preview=1 — draft marker, never on the live site */
.previewbar{
  padding:6px var(--pad-x);
  background:#1f2937;color:#fff;
  font-size:var(--fs-btn);font-weight:500;text-align:center;
}

/* quote form */
.qform__wrap{max-width:calc(640px + 2 * var(--pad-x))}
.qform{
  position:relative;
  display:grid;gap:var(--sp-2);
  margin-top:var(--sp-3);
  padding:var(--sp-3) var(--card-pad);
  background:var(--c-white);
  border-radius:var(--radius-img);
}
.field{display:grid;gap:4px}
.field__label{font-size:var(--fs-btn);font-weight:500}
.field__input{
  width:100%;min-height:44px;
  padding:10px 12px;
  font:inherit;color:inherit;
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
}
.field__input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.field__input[aria-invalid="true"]{border-color:var(--c-error)}
textarea.field__input{resize:vertical}
.field__err{font-size:var(--fs-intro);color:var(--c-error)}
.qform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform__submit{justify-self:center}
.qform__submit[disabled]{opacity:.6;cursor:wait}
.qform__status{text-align:center;font-size:var(--fs-btn);font-weight:500}
.qform__status:empty{display:none}
.qform__status.is-ok{color:var(--c-ok)}
.qform__status.is-err{color:var(--c-error)}

/* sticky mobile CTA bar — built by app.js, shown under 768px only */
.ctabar{display:none}

@media (min-width: 576px){
  .qform{padding-inline:var(--sp-4)}
}
@media (min-width: 768px){
  .nav__link[aria-current="page"]{border-bottom-color:var(--accent-deep)}
  .pdetail{
    --split-gap:var(--sp-5);
    grid-template-columns:calc(41.67% - var(--split-gap)) 58.33%;
    gap:var(--split-gap);
  }
  .promos{grid-template-columns:repeat(2,1fr)}
  .company__row{grid-template-columns:240px 1fr;gap:var(--sp-2)}
  .contact__list--page{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 767.98px){
  .has-ctabar{padding-bottom:calc(var(--ctabar-h) + env(safe-area-inset-bottom, 0px))}
  .ctabar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);
    padding:var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
    background:var(--c-white);
    border-top:1px solid var(--c-line);
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
  }
  .ctabar__btn{
    display:flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 8px;
    border:1px solid var(--c-text);border-radius:var(--radius-pill);
    font-size:var(--fs-btn);font-weight:700;line-height:1.2;text-align:center;
    background:var(--c-white);color:var(--c-text);
  }
  .ctabar__btn--line{background:var(--c-chat);border-color:var(--c-chat);color:var(--c-white)}
  .ctabar__btn--quote{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
}

/* =========================================================================
   20. Map mode — only ever active when app.js sets data-map (from ?map=1).
   Every rule below is scoped to [data-map], so without it this section
   changes nothing. The badge also defaults to display:none, so a stray
   badge could not show even if one were created outside map mode.
   ========================================================================= */
.slot__map{display:none}

[data-map] .slot{outline:2px dashed var(--accent);outline-offset:-2px}
[data-map] .slot__map{
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  max-width:100%;
  padding:3px 6px;
  background:var(--accent);
  color:var(--accent-on);
  font-family:var(--ff-body);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
  border-bottom-right-radius:var(--radius);
  pointer-events:none;
  overflow-wrap:anywhere;
}

/* narrow slot: badge takes the whole box, placeholder label steps aside */
[data-map] .slot--mapmin .slot__tag{display:none}
[data-map] .slot--mapmin .slot__map{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2px;
  font-size:9px;
  border-radius:inherit;
}

[data-map] .mapbox{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  width:340px;
  max-width:calc(100vw - 32px);
  max-height:min(60vh, 520px);
  display:flex;
  flex-direction:column;
  background:var(--c-white);
  border:2px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  font-family:var(--ff-body);
  color:var(--c-text);
}
[data-map] .mapbox__head{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  padding:8px 10px;
  background:var(--accent);
  color:var(--accent-on);
  font-size:var(--fs-btn);
  flex:0 0 auto;
}
[data-map] .mapbox__count{margin-left:auto;font-size:11px;opacity:.9}
[data-map] .mapbox__toggle{
  width:22px;height:22px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.7);border-radius:3px;
  color:var(--accent-on);font-size:14px;line-height:1;
}
[data-map] .mapbox__list{
  overflow-y:auto;
  flex:1 1 auto;
  padding:6px 0;
}
[data-map] .mapbox__row{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:5px 10px;
  border-bottom:1px solid var(--c-line);
  font-size:11px;
  line-height:1.45;
}
[data-map] .mapbox__row:last-child{border-bottom:0}
[data-map] .mapbox__num{
  flex:0 0 auto;min-width:38px;
  font-weight:700;color:var(--accent-deep);
}
[data-map] .mapbox__meta{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
[data-map] .mapbox__name{font-weight:700}
[data-map] .mapbox__size{color:var(--c-muted);overflow-wrap:anywhere}
[data-map] .mapbox__qty{flex:0 0 auto;color:var(--c-text-2);font-weight:700}
[data-map] .mapbox__foot{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-top:1px solid var(--c-line);
  flex:0 0 auto;
}
[data-map] .mapbox__copy{
  padding:5px 12px;
  border:1px solid var(--accent-deep);
  border-radius:var(--radius);
  background:var(--accent);
  color:var(--accent-on);
  font-size:11px;
  font-weight:700;
}
[data-map] .mapbox__copy:hover{background:var(--accent-deep)}
[data-map] .mapbox__msg{font-size:11px;color:var(--c-muted)}

[data-map] .mapbox.is-folded .mapbox__list,
[data-map] .mapbox.is-folded .mapbox__foot{display:none}

@media (max-width: 575.98px){
  [data-map] .mapbox{right:8px;bottom:8px;max-width:calc(100vw - 16px);max-height:50vh}
}

/* =========================================================================
   21. Breakpoints — [REF] bootstrap 576 / 768 / 992 / 1200
   Targets: 360 (mobile), 768 (tablet), 1200 (desktop)
   ========================================================================= */

@media (max-width: 767.98px){
  /* [REF] --txt-hN-fs-max-30: headings clamp to 30px on small screens */
  :root{ --fs-h2: var(--fs-h2-max); --sec-py: 24px; }
  .hero__slide .slot{--ar:var(--ar-hero-m)}
  .hero__arrow{width:32px;height:32px}
  .nav{
    position:absolute;
    left:0;right:0;top:100%;
    background:var(--c-white);
    border-bottom:1px solid var(--c-line);
    padding:var(--sp-2) var(--pad-x);
    display:none;
  }
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{display:block;padding:10px 0;border-bottom:1px solid var(--c-line)}
  .header__inner{justify-content:flex-start;position:relative;gap:var(--sp-1)}
  .header__actions{margin-left:auto}
  .header__actions .btn--ghost{display:none}
  .burger{display:inline-flex;flex:0 0 auto;padding:8px}
  .burger__label{display:none}
  .brand__mark{width:84px}
  .brand__name{font-size:var(--fs-body)}
  .header__cta{padding-inline:12px;white-space:nowrap}
  .btn--wide{min-width:0;width:100%}
  .header__actions .btn--wide{width:auto;min-width:0}
  .cbanner__media{--ar: 360 / 200}
}

@media (max-width: 575.98px){
  .brand__name{display:none}
  /* no logo uploaded yet: the name stands in (app.js sets .brand--text) */
  .brand--text .brand__name{display:block;overflow:hidden;text-overflow:ellipsis}
}

@media (min-width: 576px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:repeat(3,1fr)}
}

@media (min-width: 768px){
  /* [REF] .ly-layout2-02 = calc(41.67% - gap) 58.33% — the column subtracts
     exactly the gap, so the pair sums to 100% and never overflows. Keep
     --split-gap and the calc() in sync if you change the spacing. */
  .contact__grid{
    --split-gap:var(--sp-4);
    grid-template-columns:calc(41.67% - var(--split-gap)) 58.33%;
    gap:var(--split-gap);
  }
  .contact__list{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:repeat(var(--n, 5),1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1.2fr 2fr 1.2fr}
}

@media (min-width: 1200px){
  .pgrid{grid-template-columns:repeat(4,1fr)}
}

/* map panel sits above the mobile CTA bar (after the 575 rule on purpose) */
@media (max-width: 767.98px){
  [data-map] .has-ctabar .mapbox{bottom:calc(var(--ctabar-h) + 8px + env(safe-area-inset-bottom, 0px))}
}