.elementor-kit-8{--e-global-color-primary:#201F1D;--e-global-color-secondary:#1F6F5C;--e-global-color-text:#444141;--e-global-color-accent:#13483B;--e-global-color-bg:#F3F2F2;--e-global-color-surface:#EAE9E9;--e-global-color-divider:#D7D3D3;--e-global-color-n700:#605D5D;--e-global-color-n900:#2D2B2B;--e-global-color-a100:#E6F2EE;--e-global-color-a300:#A9CEC2;--e-global-typography-primary-font-family:"Noto Serif Thai";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Noto Serif Thai";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Sarabun";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Sarabun";--e-global-typography-accent-font-weight:500;font-family:"Sarabun", Sans-serif;font-size:15.5px;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* PP Sticker — Classical, เขียวมรกต. Structural layer only.
 *
 * Colour, typography, buttons, padding and image geometry live in Elementor WIDGET SETTINGS,
 * not here — Elementor emits global widget rules into the page CSS file, which loads after
 * this one, so equal-specificity rules here would lose on source order.
 *
 * Everything below is prefixed with `body` to reach (0,2,1) and clear those (0,2,0) globals.
 * Keep it that way. Only the :root token block is unprefixed.
 */

:root{
--color-bg:#f3f2f2;--color-surface:#eae9e9;--color-text:#201f1d;
--color-divider:rgba(32,31,29,0.16);
--color-neutral-100:#f8f4f4;--color-neutral-200:#eae7e7;--color-neutral-300:#d7d3d3;
--color-neutral-400:#bab6b6;--color-neutral-500:#9b9797;--color-neutral-600:#7d7979;
--color-neutral-700:#605d5d;--color-neutral-800:#444141;--color-neutral-900:#2d2b2b;
--color-accent:#1f6f5c;--color-accent-100:#e6f2ee;--color-accent-300:#a9cec2;
--color-accent-400:#5da391;--color-accent-500:#1f6f5c;--color-accent-600:#195c4c;
--color-accent-700:#13483b;--color-accent-900:#0b2a22;
--hero-ink:#0f1614;
--space-1:4.6px;--space-2:9.2px;--space-3:13.8px;--space-4:18.4px;--space-6:27.6px;--space-8:36.8px;
--font-head:'Noto Serif Thai',serif;--font-body:'Sarabun',sans-serif;
}

body{background:var(--color-bg);font-family:var(--font-body);}
body .pp-hidden{display:none !important;}

/* ---- section heads ---- */
body .pp-secthead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);}
body .pp-morelink .elementor-heading-title a{color:var(--color-accent-700);border-bottom:1px solid var(--color-accent-300);}
body .pp-lede p{margin:0;}

/* ---- hero ---- */
body .pp-hero-kicker p{margin:0;letter-spacing:0.16em;text-transform:uppercase;}
body .pp-hero-h1 .elementor-heading-title{max-width:22ch;}
body .pp-hero-lede p{margin:0;max-width:58ch;}
body .pp-hero-btns{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;}

/* ---- trust strip ---- */
body .pp-trust-item .elementor-icon-box-wrapper{display:grid;grid-template-columns:34px 1fr;gap:var(--space-3);align-items:start;text-align:left;}
body .pp-trust-item .elementor-icon-box-icon{margin:2px 0 0 0;}
body .pp-trust-item .elementor-icon-box-title{margin:0 0 5px;}
body .pp-trust-item .elementor-icon-box-title,
body .pp-trust-item .elementor-icon-box-title a{font-feature-settings:'tnum';}
body .pp-trust-item .elementor-icon-box-description{margin:0;}

/* ---- brands ---- */
body .pp-brandlede p{margin:var(--space-3) auto 0;max-width:62ch;}
body .pp-logos .swiper-slide{display:flex;align-items:center;justify-content:center;}
body .pp-logos .swiper-slide-image{width:100% !important;height:96px !important;object-fit:contain !important;padding:16px;box-sizing:border-box;background:#fff;border:1px solid var(--color-divider);border-radius:12px;mix-blend-mode:multiply;display:block;}
body .pp-logos .elementor-swiper-button{display:none;}

body .pp-brandstat{display:flex;justify-content:center;align-items:stretch;}
body .pp-brandstat .pp-stat{width:190px;flex:0 0 190px;text-align:center;}
body .pp-brandstat .pp-stat-rule{width:1px;flex:0 0 1px;background:var(--color-divider);padding:0;}
body .pp-stat-n .elementor-heading-title{font-feature-settings:'tnum';}
body .pp-stat-l p{margin:3px 0 0;}

/* ---- tab rows ---- */
body .pp-tabrow{display:flex;gap:10px;flex-wrap:wrap;}
body .pp-tab .elementor-button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,color 140ms ease;}

/* ---- service cards ---- */
body .pp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
body .pp-card{border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;background:var(--color-neutral-100);display:flex;flex-direction:column;min-width:0;transition:border-color 160ms ease,box-shadow 160ms ease;}
body .pp-card:hover{border-color:var(--color-accent-300);box-shadow:0 6px 20px rgba(32,31,29,0.08);}
body .pp-card-media{position:relative;flex:0 0 152px;height:152px;overflow:hidden;}
body .pp-card-media .elementor-widget-image,
body .pp-card-media .elementor-widget-image .elementor-widget-container,
body .pp-card-media figure,
body .pp-card-media figure > a{height:100%;display:block;margin:0;}
body .pp-card-icon{position:absolute;z-index:2;top:10px;left:10px;width:32px;height:32px;border-radius:999px;background:rgba(20,19,15,0.62);display:grid;place-items:center;}
body .pp-card-over{position:absolute;z-index:1;inset:0;display:grid;place-items:center;background:rgba(20,19,15,0.58);opacity:0;transition:opacity 160ms ease;}
body .pp-card:hover .pp-card-over,
body .pp-card:focus-within .pp-card-over{opacity:1;}
body .pp-card-body{display:flex;flex-direction:column;flex:1 1 auto;border-top:1px solid var(--color-divider);}
/* audit fix #29 — stable card baselines so long copy cannot shear the row */
body .pp-card-title .elementor-heading-title{min-height:50px;}
body .pp-card-desc{height:64px;overflow:hidden;}
body .pp-card-desc p{margin:0;}
body .pp-card-count{min-height:34px;padding-top:2px;border-top:1px solid var(--color-divider);}
body .pp-card-count p{margin:0;}
body .pp-card-sold .elementor-icon-list-text{font-feature-settings:'tnum';}
body .pp-card-price{min-height:22px;font-feature-settings:'tnum';}
body .pp-card-price p{margin:0;}
body .pp-card-cta{margin-top:auto;}
body .pp-card-cta .elementor-button{width:100%;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}

/* ---- portfolio ---- */
body .pp-folio{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);}
body .pp-folio-item{min-width:0;}
body .pp-folio-item img{border-radius:16px;}
body .pp-folio-cap p{margin:0;}

/* ---- machines gallery: 1 large plate + 3 thumbs, caption travels with the image ---- */
body .pp-gallery{display:grid;grid-template-columns:1fr 150px;gap:var(--space-3);align-items:start;}
body .pp-gal-main{min-width:0;}
body .pp-gal-stage,body .pp-gal-caps,body .pp-gal-thumbs{min-width:0;}
body .pp-gal-slide{display:none;}
body .pp-gal-slide.pp-gal-on{display:block;}
body .pp-gal-slide img,body .pp-gal-thumb img{border-radius:16px;display:block;}
body .pp-gal-cap{display:none;}
body .pp-gal-cap.pp-gal-on{display:flex;}
body .pp-gal-name p,body .pp-gal-sub p{margin:0;}
body .pp-gal-thumbs{display:grid;gap:var(--space-3);align-content:start;}
body .pp-gal-thumb{cursor:pointer;border-radius:16px;overflow:hidden;transition:opacity 140ms ease;}
body .pp-gal-thumb:hover{opacity:0.82;}
body .pp-gal-thumb:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
/* the selected machine is showing in the plate, so it drops out of the strip — always 3 thumbs */
body .pp-gal-thumb.pp-gal-on{display:none;}

/* ---- steps ---- */
body .pp-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);}
body .pp-2col > *{min-width:0;}
body .pp-step{display:grid;grid-template-columns:44px 1fr;gap:var(--space-3);align-items:baseline;}
body .pp-step-n .elementor-heading-title{font-feature-settings:'tnum';}
body .pp-step-t p,body .pp-step-s p{margin:0;}

/* ---- blog ---- */
body .pp-posts .elementor-post__thumbnail{border-radius:16px;overflow:hidden;}
body .pp-posts article.elementor-post{border:0;background:transparent;padding:0;}
body .pp-posts .elementor-post__text{padding:0;margin:0;}
body .pp-posts .elementor-post__title{margin:0;}
body .pp-posts .elementor-post__meta-data{border:0;padding:0;margin:0 0 7px;}
/* excerpt on: the six posts carry curated ledes in post_excerpt, so this is written
   copy rather than a machine trim. Read-more stays off — the whole card is the link. */
body .pp-posts .elementor-post__excerpt p{margin:0;}
body .pp-posts .elementor-post__read-more{display:none !important;}

/* ---- quote CTA ---- */
body .pp-quote{display:flex;gap:var(--space-8);align-items:stretch;}
body .pp-quote > *{min-width:0;}
body .pp-quote-copy{align-self:center;}
body .pp-quote-lede p{margin:0;max-width:40ch;}
body .pp-quote-body p{margin:0;max-width:44ch;}
body .pp-quote-btns{display:flex;gap:var(--space-3);flex-wrap:wrap;}
body .pp-quote-btns .elementor-button{display:inline-flex;align-items:center;gap:9px;}
body .pp-quote-btns .elementor-button svg{width:16px;height:16px;}

/* ---- map ---- */
body .pp-map{display:flex;gap:var(--space-6);align-items:stretch;}
body .pp-map > *{min-width:0;}
body .pp-maprow{display:grid;grid-template-columns:86px 1fr;gap:var(--space-3);align-items:start;}
body .pp-maprow-k p,body .pp-maprow-v p{margin:0;}
/* tel:/mailto: links inherit the row colour so they stay legible on the neutral band,
   rather than taking Elementor's global link colour */
body .pp-maprow-v a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--color-accent-300);}
body .pp-maprow-v a:hover,body .pp-maprow-v a:focus-visible{color:var(--color-accent-700);
  border-bottom-color:var(--color-accent-700);}
body .pp-maprow-v{font-feature-settings:'tnum';}
body .pp-mapsub p{margin:4px 0 0;}
body .pp-map iframe{border-radius:16px;height:100%;min-height:420px;width:100%;border:0;display:block;}
body .pp-map-btns{display:flex;gap:var(--space-3);flex-wrap:wrap;}


/* ================= /services/ ================= */
body .pp-crumb p{margin:0;display:flex;gap:8px;align-items:center;}
body .pp-crumb a{color:var(--color-neutral-400);text-decoration:none;}
body .pp-crumb a:hover{color:var(--color-accent-400);}
body .pp-crumb .pp-crumb-cur{color:var(--color-accent-400);}
body .pp-svc-h1 .elementor-heading-title{max-width:26ch;}
body .pp-svc-lede p{margin:0;max-width:60ch;}

body .pp-svc-top{display:flex;gap:var(--space-8);align-items:start;}
body .pp-svc-top > *{min-width:0;}
body .pp-svc-intro p{margin:0;text-align:justify;text-wrap:pretty;}
body .pp-facts{border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;}
body .pp-fact{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:baseline;}
body .pp-fact:last-child{border-bottom:0 !important;}
body .pp-fact-k p,body .pp-fact-v p{margin:0;}
body .pp-fact-v{font-feature-settings:'tnum';}

/* sticky under the sticky header */
body .pp-anchornav{position:sticky;top:64px;z-index:18;}
body .pp-anchorrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
body .pp-anchor-label p{margin:0 6px 0 0;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;}
body .pp-anchor .elementor-button{white-space:nowrap;}

body .pp-cats{display:flex;flex-direction:column;gap:var(--space-6);}
body .pp-cat{display:flex;gap:var(--space-6);align-items:stretch;scroll-margin-top:120px;}
body .pp-cat > *{min-width:0;}
body .pp-cat-media{position:relative;height:320px;overflow:hidden;border-radius:16px;flex:0 0 384px;}
body .pp-cat-media .elementor-widget-image,
body .pp-cat-media .elementor-widget-image .elementor-widget-container,
body .pp-cat-media figure,body .pp-cat-media figure > a{height:100%;display:block;margin:0;}
body .pp-cat-media img{border-radius:16px;}
body .pp-cat-icon{position:absolute;z-index:2;top:12px;left:12px;width:34px;height:34px;border-radius:999px;background:rgba(20,19,15,0.62);display:grid;place-items:center;}
body .pp-cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);}
body .pp-cat-sold p{margin:0;font-feature-settings:'tnum';white-space:nowrap;}
body .pp-cat-desc p{margin:0;max-width:66ch;text-wrap:pretty;}
body .pp-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
body .pp-sub .elementor-button{width:100%;justify-content:flex-start;text-align:left;line-height:1.4;}
body .pp-cat-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
body .pp-cat-pricelabel p{margin:0;letter-spacing:0.12em;text-transform:uppercase;}
body .pp-cat-price p{margin:3px 0 0;font-feature-settings:'tnum';}
body .pp-cat-btns{display:flex;gap:10px;flex-wrap:wrap;}

/* price table — containers carrying role=table/row/cell, not an HTML blob */
body .pp-rate-card{overflow:hidden;}
body .pp-rate-row{display:grid;grid-template-columns:2fr 1.4fr 1.6fr 1.2fr;gap:var(--space-4);align-items:baseline;}
body .pp-rate-row:last-child{border-bottom:0 !important;}
body .pp-rate-head .pp-rate-col p{margin:0;letter-spacing:0.1em;text-transform:uppercase;}
body .pp-rate-row p{margin:0;}
body .pp-rate-c2,body .pp-rate-c4{font-feature-settings:'tnum';}
body .pp-rate-terms p{margin:0;}
body .pp-note-body p{margin:0;}
body .pp-note-body strong{font-weight:600;}

body .pp-svc-cta{display:flex;gap:var(--space-6);align-items:stretch;}
body .pp-svc-cta > *{min-width:0;}
body .pp-svc-aside iframe{border-radius:16px;min-height:244px;width:100%;border:0;display:block;}
body .pp-mapaddr p{margin:0;}

/* ================= tablet ================= */
@media (max-width:1024px){
  body .pp-cards{grid-template-columns:repeat(2,1fr);}
  body .pp-folio{grid-template-columns:repeat(3,1fr);}
  body .pp-logos .swiper-slide-image{height:84px !important;}
  body .pp-gallery{grid-template-columns:1fr 120px;}
  body .pp-subs{grid-template-columns:repeat(2,1fr);}
  body .pp-cat-media{flex:0 0 300px;height:260px;}
}

/* ================= mobile — matches 1.2 Homepage - Mobile ================= */
@media (max-width:767px){
  body .pp-secthead{flex-direction:column;align-items:flex-start;gap:var(--space-3);}
  body .pp-secthead > *{width:100% !important;}
  body .pp-hero-h1 .elementor-heading-title{font-size:33px !important;}

  body .pp-cards{grid-template-columns:1fr;}
  body .pp-folio{grid-template-columns:repeat(2,1fr);}
  body .pp-2col{grid-template-columns:1fr;gap:var(--space-6);}
  body .pp-quote,body .pp-map{flex-direction:column;gap:var(--space-6);}
  body .pp-quote > *,body .pp-map > *{width:100% !important;}
  body .pp-map iframe{min-height:300px;}

  /* release the desktop card baselines so 1-up cards don't carry dead space */
  body .pp-card-title .elementor-heading-title{min-height:0;}
  body .pp-card-desc{height:auto;}
  body .pp-card-count,body .pp-card-price{min-height:0;}

  /* tab rows become horizontally scrolling snap strips (comp .hscroll) */
  body .pp-tabrow{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding:0 16px 4px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  body .pp-tabrow::-webkit-scrollbar{display:none;}
  body .pp-tabrow > *{scroll-snap-align:start;flex:0 0 auto;}

  body .pp-gallery{grid-template-columns:1fr;}
  body .pp-gal-thumbs{grid-template-columns:repeat(3,1fr);}
  body .pp-brandstat .pp-stat{width:auto;flex:1 1 0;}
  body .pp-logos .swiper-slide-image{height:74px !important;}
  body .pp-maprow{grid-template-columns:68px 1fr;}

  body .pp-svc-top,body .pp-cat,body .pp-svc-cta{flex-direction:column;gap:var(--space-6);}
  body .pp-svc-top > *,body .pp-cat > *,body .pp-svc-cta > *{width:100% !important;flex:1 1 auto;}
  body .pp-cat-media{flex:0 0 auto;height:220px;}
  body .pp-subs{grid-template-columns:1fr;}
  body .pp-cat-foot{align-items:flex-start;}
  body .pp-svc-intro p{text-align:left;}
  /* the 4-column rate table cannot survive a phone; stack each row as label/value pairs */
  body .pp-rate-row{grid-template-columns:1fr;gap:4px;}
  body .pp-rate-head{display:none;}
  body .pp-rate-c1{font-weight:600;}
  body .pp-anchornav{position:static;}
}

/* ===== product template widgets (pp-specs, pp-faq) =====================================
   Every rule is prefixed `body ` to reach (0,2,1). Elementor emits its own global widget
   rules into the PAGE stylesheet, which loads after this kit CSS at equal specificity, so
   an unprefixed rule here loses on source order. See project CLAUDE.md. */
body .pp-spec-table{border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;}
body .pp-spec-row{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--space-4);padding:13px var(--space-4);border-bottom:1px solid var(--color-divider);align-items:center;}
body .pp-spec-row:last-child{border-bottom:0;}
body .pp-spec-k{font-size:13.5px;color:var(--color-neutral-700);}
body .pp-spec-v{font-size:14px;font-feature-settings:'tnum';color:var(--color-text);line-height:1.6;}

body .pp-faq-item{border-top:1px solid var(--color-divider);padding:var(--space-4) 0;display:grid;gap:7px;}
body .pp-faq-q{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:19px;line-height:1.4;margin:0;}
body .pp-faq-a{font-size:14.5px;line-height:1.85;color:var(--color-neutral-700);margin:0;max-width:76ch;text-align:justify;}
body .pp-faq-a a{color:var(--color-accent-700);text-decoration:underline;text-underline-offset:3px;}
body .pp-faq-a a:hover{color:var(--color-accent-500);}

/* editor-only placeholder for a product whose field is still empty */
body .pp-widget-empty{border:1px dashed var(--color-accent-600);border-radius:12px;padding:var(--space-3) var(--space-4);font-size:13px;color:var(--color-neutral-700);}

@media (max-width:767px){
  /* two columns of Thai in a 1fr/1.25fr grid wrap badly on a phone; stack label over value */
  body .pp-spec-row{grid-template-columns:1fr;gap:4px;}
  body .pp-faq-a{text-align:left;}
}

/* ===== product widgets: glance, checks, steps, folio, related, types, price, size ========
   `body ` prefix throughout to reach (0,2,1) and beat Elementor's global widget rules, which
   load after this in the page stylesheet. Spacing uses the Classical scale only —
   --space-5 DOES NOT EXIST and silently collapses to zero. */

/* empty photo slot: 239 across the corpus stay briefed rather than blank */
body .pp-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;padding:var(--space-3);border:1px dashed var(--color-accent-600);border-radius:10px;background:var(--color-neutral-100);text-align:center;}
body .pp-slot-tag{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-700);}
body .pp-slot-brief{font-size:12px;line-height:1.6;color:var(--color-neutral-700);}

/* glance */
/* ---- product intro: fact card (design B) beside the copy ---- */
body .pp-intro-grid{align-items:flex-start;}
body .pp-intro-grid > .pp-intro-body{flex:1 1 0;min-width:0;}
body .pp-intro-grid > .pp-glance-col{flex:0 0 380px;width:380px;max-width:100%;position:sticky;top:84px;}
body .pp-kv-kicker-w{display:none;}
body .pp-gcard{background:#FFFFFF;border:1px solid var(--color-divider);border-radius:16px;padding:22px 24px 20px;}
body .pp-gcard-eyebrow{display:block;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-neutral-700);}
body .pp-gcard-price{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px;}
body .pp-gcard-price b{font:500 34px/1.1 'Noto Serif Thai',serif;color:var(--color-accent-700);font-feature-settings:'tnum';}
body .pp-gcard-price small{font-size:14px;color:var(--color-neutral-700);}
body .pp-gcard-sub{margin:0 0 14px;font-size:13px;color:var(--color-neutral-700);}
body .pp-gcard-rows{margin:0;border-top:1px solid var(--color-divider);}
body .pp-gcard-row{display:grid;grid-template-columns:22px 118px minmax(0,1fr);gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--color-divider);}
body .pp-gcard-icon{width:16px;height:16px;margin-top:3px;color:var(--color-accent-700);display:block;}
body .pp-gcard-k{margin:0;font-size:12.5px;color:var(--color-neutral-700);padding-top:2px;}
body .pp-gcard-v{margin:0;font-size:14px;line-height:1.55;color:var(--color-text);}
body .pp-gcard-row.is-warranty{background:var(--color-accent-100);margin:0 -12px;padding:11px 12px;border-radius:10px;border-bottom:0;}
body .pp-gcard-row.is-warranty .pp-gcard-k,body .pp-gcard-row.is-warranty .pp-gcard-v{color:var(--color-accent-700);}
body .pp-gcard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
body .pp-gcard-btn{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--color-accent-700);font:500 14px 'Sarabun',sans-serif;color:var(--color-accent-700);text-decoration:none;transition:background 140ms ease,color 140ms ease;}
body .pp-gcard-btn:hover{background:var(--color-accent-100);color:var(--color-accent-700);}
body .pp-gcard-btn.is-solid{background:var(--color-accent-700);color:#F3F2F2;}
body .pp-gcard-btn.is-solid:hover{background:var(--color-accent-600);color:#F3F2F2;}
body .pp-gcard-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-300);}

/* checks + steps share markup and differ only here */
body .pp-checks{display:grid;gap:0;border-top:1px solid var(--color-text);}
body .pp-checks .pp-num-item{min-width:0;padding:var(--space-4) 0;border-bottom:1px solid var(--color-divider);display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;}
body .pp-checks .pp-num-no{font-size:13px;padding-top:3px;}
body .pp-checks .pp-num-t{font-size:18px;}
body .pp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
body .pp-steps .pp-num-item{min-width:0;display:grid;gap:9px;align-content:start;border-top:1px solid var(--color-text);padding-top:var(--space-3);}
body .pp-steps .pp-num-no{font-size:12px;letter-spacing:0.1em;}
body .pp-steps .pp-num-t{font-size:19px;}
body .pp-num-no{font-feature-settings:'tnum';color:var(--color-accent-700);}
body .pp-num-body{display:grid;gap:5px;min-width:0;}
body .pp-num-t{font-family:'Noto Serif Thai',serif;font-weight:500;line-height:1.34;margin:0;}
body .pp-num-b{font-size:13.5px;line-height:1.8;color:var(--color-neutral-700);margin:0;}

/* folio */
body .pp-folio{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);}
body .pp-folio-item{min-width:0;display:grid;gap:var(--space-2);}
body .pp-folio-plate{display:block;height:172px;border-radius:10px;overflow:hidden;background:var(--color-neutral-100);}
body .pp-folio-img{width:100%;height:100%;object-fit:cover;display:block;}
body .pp-folio-cap{font-size:13px;color:var(--color-neutral-700);}

/* related */
body .pp-related{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
body .pp-rel-card{min-width:0;border:1px solid var(--color-divider);border-radius:12px;padding:var(--space-4);display:grid;gap:6px;align-content:start;}
body .pp-rel-card:hover{border-color:var(--color-accent-400);}
body .pp-rel-th{font-family:'Noto Serif Thai',serif;font-size:18px;line-height:1.35;}
body .pp-rel-desc{font-size:13px;line-height:1.7;color:var(--color-neutral-700);}
body .pp-rel-price{font-size:13.5px;font-feature-settings:'tnum';color:var(--color-accent-700);margin-top:3px;}

/* types */
body .pp-types{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);}
body .pp-type-card{min-width:0;border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;background:var(--color-neutral-100);display:grid;align-content:start;}
body .pp-type-plate{display:block;height:190px;overflow:hidden;}
body .pp-type-img{width:100%;height:100%;object-fit:cover;display:block;}
body .pp-type-body{padding:var(--space-4);border-top:1px solid var(--color-divider);display:grid;gap:9px;}
body .pp-type-en{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-700);}
body .pp-type-th{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:22px;line-height:1.3;margin:0;}
body .pp-type-desc{font-size:13.5px;line-height:1.8;color:var(--color-neutral-700);margin:0;}
body .pp-type-rows{display:grid;gap:5px;border-top:1px solid var(--color-divider);padding-top:10px;font-size:13px;color:var(--color-neutral-700);}
body .pp-type-row{display:flex;justify-content:space-between;gap:var(--space-3);}
body .pp-type-rowv{font-feature-settings:'tnum';color:var(--color-text);text-align:right;}

/* price table — column count comes from the widget as --pp-cols */
body .pp-price-box{border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;}
body .pp-price-row{display:grid;grid-template-columns:1.6fr repeat(var(--pp-cols,3),1fr);gap:var(--space-4);padding:15px var(--space-6);border-bottom:1px solid var(--color-divider);align-items:center;}
body .pp-price-head{padding:13px var(--space-6);background:var(--color-neutral-200);font-size:12.5px;letter-spacing:0.06em;color:var(--color-neutral-800);}
body .pp-price-table>.pp-price-row:last-child{border-bottom:0;}
body .pp-price-row>span{font-size:15px;font-feature-settings:'tnum';}
body .pp-price-head>span{font-size:12.5px;}
body .pp-num{text-align:right;}
body .pp-price-lead{color:var(--color-accent-700);}
body .pp-price-hl{background:var(--color-accent-100);}
/* sibling of role=table, inside the bordered box */
body .pp-price-terms{padding:13px var(--space-6);font-size:12.5px;color:var(--color-neutral-700);line-height:1.7;background:var(--color-neutral-100);}
/* outside the bordered box — the placeholder-price disclaimer */
body .pp-price-note{margin-top:var(--space-4);border:1px dashed var(--color-accent-600);border-radius:12px;padding:var(--space-3) var(--space-4);font-size:13px;line-height:1.75;color:var(--color-neutral-800);}

/* size diagram — the fixed-width bars need min-width:0 on the track or they blow it out */
body .pp-size{display:grid;gap:var(--space-4);min-width:0;}
body .pp-size-plot{display:flex;align-items:flex-end;gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-2);min-width:0;}
body .pp-size-col{display:grid;justify-items:center;gap:6px;flex:none;}
body .pp-size-bar{display:block;border:1px solid var(--color-accent-600);border-radius:4px;background:var(--color-accent-100);}
body .pp-size-lab{font-size:12.5px;font-feature-settings:'tnum';color:var(--color-text);}
body .pp-size-area{font-size:11.5px;color:var(--color-neutral-700);}
body .pp-size-notes{display:grid;gap:10px;border-top:1px solid var(--color-text);padding-top:var(--space-3);}
body .pp-size-note{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.75;color:var(--color-neutral-700);}
body .pp-size-dim{font-feature-settings:'tnum';color:var(--color-accent-700);white-space:nowrap;}

@media (max-width:1024px){
  body .pp-folio{grid-template-columns:repeat(3,1fr);}
  body .pp-related{grid-template-columns:repeat(2,1fr);}
  body .pp-steps{grid-template-columns:repeat(2,1fr);}
  body .pp-types{grid-template-columns:1fr;}
}
@media (max-width:767px){
  body .pp-intro-grid > .pp-glance-col{flex:0 0 auto;width:100%;position:static;order:-1;}
  body .pp-gcard{padding:18px 18px 16px;}
  body .pp-gcard-row{grid-template-columns:22px 104px minmax(0,1fr);}
  body .pp-folio{grid-template-columns:repeat(2,1fr);}
  body .pp-related,body .pp-steps{grid-template-columns:1fr;}
  /* a 4-column rate table cannot survive a phone; stack each row as label then values */
  body .pp-price-row{grid-template-columns:1fr;gap:4px;padding:var(--space-3) var(--space-4);}
  body .pp-price-head{display:none;}
  body .pp-num{text-align:left;}
}

/* Empty photo slots carry a mockup image so the client can see where a photo goes.
   The URL is root-relative: it must survive the clone to the production domain. */
body .pp-slot{background-image:url('/wp-content/uploads/pp-assets/pp-photo-slot.svg');background-repeat:no-repeat;background-position:center 34%;background-size:auto 44%;min-height:150px;justify-content:flex-end;padding-bottom:var(--space-4);}
body .pp-slot-tag{opacity:.85;}

/* --- hub intro + child-product cards, to the comp box model --------------- */
body .pp-introgrid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:start;}
body .pp-intro p{margin:0;text-align:justify;text-wrap:pretty;}
body .pp-bands{display:grid;gap:var(--space-8);}
body .pp-band{display:grid;gap:var(--space-4);}
body .pp-band-bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);}
body .pp-band-note p{margin:0;max-width:52ch;text-align:right;text-wrap:pretty;}
body .pp-kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:start;}
body .pp-kid{overflow:hidden;align-content:start;}
body .pp-kid-body{align-content:start;}
body .pp-kid-th,body .pp-kid-th a{min-height:55px;}
body .pp-kid-desc p{margin:0;min-height:68px;text-wrap:pretty;}
body .pp-kid-metarow{width:100%;}
body .pp-kid-img img{display:block;width:100%;height:178px;object-fit:cover;}
/* the card clips to radius 14, so a photo and an empty slot read as one shape */
body .pp-kid .pp-slot{min-height:178px;border-radius:14px 14px 0 0;}
@media (max-width:900px){
  body .pp-introgrid{grid-template-columns:1fr;}
  body .pp-kids{grid-template-columns:repeat(2,minmax(0,1fr));}
  body .pp-band-bar{flex-direction:column;align-items:flex-start;gap:var(--space-2);}
  body .pp-band-note p{text-align:left;}
}
@media (max-width:600px){
  body .pp-kids{grid-template-columns:1fr;}
}
/* --- hub fixes v2 --- */
/* the grid tracks size these columns; a percent width on the item shrank it inside
   its own track and left the dead space the client flagged. */
body .pp-introgrid > .e-con{width:auto;max-width:none;}
body .pp-introgrid > .e-con:last-child{justify-self:stretch;}
/* media corners: all four, per client direction (the comp rounds only the top) */
body .pp-kid-img img{border-radius:14px;}
body .pp-kid .pp-slot{border-radius:14px;}

/* ---- mobile, from 3.2 Signage Hub - Mobile ------------------------------- */
@media (max-width:767px){
  body .pp-introgrid{grid-template-columns:1fr;gap:18px;}
  body .pp-hero-h1{font-size:30px !important;line-height:1.26 !important;}
  body .pp-hero-lede{font-size:14px !important;line-height:1.85 !important;}
  body .pp-h2,body .pp-h2-sm{font-size:26px !important;line-height:1.3 !important;}
  body .pp-lede{font-size:14px !important;line-height:1.75 !important;}
  /* 16px page gutter, not 36 */
  body .elementor .e-con > .e-con-inner,body .elementor > .e-con{padding-left:16px;padding-right:16px;}
  /* facts become a 2x2 grid with a centre rule, as the mobile comp draws them */
  body .pp-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-4);border:0;border-top:1px solid var(--color-text);border-radius:0;overflow:visible;}
  body .pp-fact{display:grid;grid-template-columns:1fr;gap:6px;padding:12px 0 13px !important;align-content:start;}
  body .pp-fact-k{font-size:10px;letter-spacing:0.11em;text-transform:uppercase;}
  body .pp-fact-v{font-size:14px;line-height:1.6;}
  /* bands stack; the note sits under its head instead of opposite it */
  body .pp-bands{gap:24px;}
  body .pp-band{gap:12px;}
  body .pp-band-bar{flex-direction:column;align-items:flex-start;gap:4px;padding-top:10px;}
  body .pp-band-head{font-size:19px !important;line-height:1.35 !important;}
  body .pp-band-note p{font-size:12.5px;line-height:1.7;text-align:left;max-width:none;}
  /* cards: one across, tighter type and a shorter media block */
  body .pp-kids{grid-template-columns:minmax(0,1fr);gap:14px;}
  body .pp-kid-img img{height:158px;}
  body .pp-kid .pp-slot{min-height:158px;}
  body .pp-kid-body{padding:12px 14px 14px !important;gap:6px;}
  body .pp-kid-th,body .pp-kid-th a{min-height:0;font-size:18px !important;line-height:1.3 !important;}
  body .pp-kid-desc p{min-height:0;font-size:12.5px;line-height:1.7;}
  body .pp-secthead{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:18px;}
  body .pp-secthead > .e-con{width:auto;}
  body .pp-cta-grid{flex-direction:column;}
  body .pp-cta-grid > .e-con{width:auto;}
  body .pp-numbered{flex-direction:column;}
  body .pp-numbered > .e-con{width:auto;}
  body .pp-kvps,body .pp-bundles,body .pp-procs,body .pp-folio{grid-template-columns:minmax(0,1fr);}
}
/* --- mobile v3 (from the PDF comps) --- */
@media (max-width:767px){
  /* the comps swipe the card rows sideways rather than stacking them */
  body .pp-kids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding-bottom:4px;scrollbar-width:none;}
  body .pp-kids::-webkit-scrollbar{display:none;}
  body .pp-kids > .e-con{flex:0 0 78%;scroll-snap-align:start;width:auto;}
  body .pp-folio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;}
  body .pp-folio::-webkit-scrollbar{display:none;}
  body .pp-folio > *{flex:0 0 46%;scroll-snap-align:start;min-width:0;}
  body .pp-bundles,body .pp-procs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;}
  body .pp-bundles > .e-con,body .pp-procs > .e-con{flex:0 0 78%;scroll-snap-align:start;width:auto;}
  /* the section head keeps its 'see all' link on the same line, as drawn */
  body .pp-secthead{flex-direction:row;align-items:baseline;gap:12px;}
  body .pp-secthead > .e-con:first-child{width:auto;flex:1 1 auto;}
  body .pp-secthead > .e-con:last-child{width:auto;flex:0 0 auto;align-items:flex-end;}
  /* price rows read as two lines: name/price, then basis/lead */
  body .pp-rate-row{grid-template-columns:1fr auto;gap:2px 12px;padding:12px 16px !important;}
  body .pp-rate-head{display:none;}
  body .pp-rate-c1{grid-column:1;font-size:15px;}
  body .pp-rate-c2{grid-column:2;text-align:right;}
  body .pp-rate-c3{grid-column:1;font-size:12.5px;}
  body .pp-rate-c4{grid-column:2;text-align:right;font-size:12.5px;}
  /* hero actions stack full width */
  body .e-con.e-flex.pp-hero-actions{flex-direction:column;align-items:stretch;}
  body .pp-hero-actions .elementor-button{width:100%;justify-content:center;}
  body .e-con.e-flex.pp-quote-btns{flex-direction:column;align-items:stretch;}
  body .pp-quote-btns .elementor-button{width:100%;justify-content:center;}
  body .pp-kid-cta .elementor-button{width:100%;justify-content:center;}
}
/* --- mobile v4: overflow containment (found with the local render harness) --- */
@media (max-width:767px){
  /* a flex item will not shrink below its content unless told to, so the card
     strip was pushing the document sideways instead of scrolling inside itself */
  body .pp-kids,body .pp-folio,body .pp-bundles,body .pp-procs{min-width:0;max-width:100%;}
  /* a single-column grid track defaults to max-content, which was letting the
     strip size to all of its cards instead of to the viewport */
  body .pp-bands,body .pp-band{grid-template-columns:minmax(0,1fr);}
  body .e-con > .e-con{min-width:0;}
  /* the section heading and its 'see all' link share a row, but wrap when the
     pair cannot fit rather than overhanging the edge */
  body .pp-secthead{flex-wrap:wrap;}
  body .pp-secthead > .e-con:first-child{min-width:0;}
  body .pp-morelink{white-space:normal;}
}

/* ===== five-column rate tables =========================================================
   `.pp-rate-row` is a fixed four-column grid, so the quantity ladder (labels, print) and
   POSM's compare grid wrapped their fifth cell onto a second row. Matched on cell count
   rather than a modifier class, so no tree redeploy is needed to pick it up. */
body .pp-rate-row:has(> :nth-child(5)){grid-template-columns:1.8fr repeat(4,1fr);}

@media (max-width:767px){
  /* A five-column table cannot fold into label/value pairs without losing the column
     headings that give its numbers meaning, so it keeps its head and scrolls instead. */
  body .pp-rate-table:has(.pp-rate-row > :nth-child(5)){overflow-x:auto;}
  body .pp-rate-table:has(.pp-rate-row > :nth-child(5)) .pp-rate-head{display:grid;}
  body .pp-rate-table:has(.pp-rate-row > :nth-child(5)) .pp-rate-row{
    grid-template-columns:minmax(140px,1.6fr) repeat(4,minmax(74px,1fr));
    min-width:496px;gap:12px;padding:12px 16px !important;}
  body .pp-rate-table:has(.pp-rate-row > :nth-child(5)) .pp-rate-row > *{
    grid-column:auto;text-align:left;font-size:13px;}
}

/* Folio tiles are captioned underneath, so a two-line photo brief must not make one slot
   taller than its neighbours and break the caption baseline. */
body .pp-folio .pp-slot{height:172px;}

/* ===== mobile: hero, breadcrumb, fact grid ============================================
   The hub comps carry a hero photo, a gradient and a breadcrumb on every breakpoint; the
   facts box additionally becomes a 2x2 icon grid on phones. Icon paths are the design's
   own (lifted from the mobile comps), inlined as data URIs so they need no uploads and
   travel with the kit CSS to a cloned domain. */
body .pp-crumb{align-items:center;}
body .pp-crumb .elementor-widget-container p{margin:0;}
body .pp-fact-ic{flex:none;width:15px;height:15px;background:no-repeat center/contain;display:none;}
body .pp-fact-ic-box{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207l9-4%209%204v10l-9%204-9-4z%20M3%207l9%204%209-4%20M12%2011v10%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-calendar{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%20M16%202v4%20M3%2010h18%20M5%206h14a2%202%200%200%201%202%202v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-clock{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20%20M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-cut{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v6%20M12%209l-3%2010h6z%20M5%206l2%202%20M19%206l-2%202%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-factory{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%20M5%2020V9l5%203V9l5%203V9l4%202v9%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-lamp{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%201%207%207c0%203-2%204.5-2.5%206h-9C7%2013.5%205%2012%205%209a7%207%200%200%201%207-7%20M9%2019h6%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-list{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%20M3%2012h18%20M3%2018h12%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-pen{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l6-2%209-9a2.8%202.8%200%200%200-4-4l-9%209z%20M6%2018l-2%202%20M14%205l4%204%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-ruler{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%20M7.5%207.5h.01%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-shield{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%20M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-truck{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v3%20M18.5%2013h-13L2%209.5%205.5%206h13L22%209.5z%20M12%2013v8%22%2F%3E%3C%2Fsvg%3E");}
body .pp-fact-ic-wrench{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2313483b%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E");}

@media (max-width:767px){
  /* hero: the gradient turns vertical (Elementor emits the mobile angle itself) and the
     two actions go full width, stacked, as drawn. */
  body .e-con.e-flex.pp-hero-actions{flex-direction:column;align-items:stretch;}
  body .pp-hero-actions .elementor-button{width:100%;justify-content:center;}
  body .pp-hero-h1{font-size:30px !important;line-height:1.26 !important;}
  /* facts: 2x2 with an icon over each label, on a hairline rule */
  body .pp-fact-ic{display:block;}
  body .pp-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:16px;border:0 !important;border-radius:0 !important;border-top:1px solid var(--color-text) !important;}
  body .pp-fact{display:grid !important;gap:6px;align-content:start;padding:12px 0 13px !important;
    border-bottom:1px solid var(--color-divider) !important;border-right:0 !important;}
  body .pp-fact-key{align-items:center;}
  body .pp-fact-k p{font-size:10px !important;letter-spacing:0.11em;text-transform:uppercase;}
  body .pp-fact-v p{font-size:14px !important;font-feature-settings:'tnum';}
  /* the second column needs the divider on its left, not a border on every cell */
  body .pp-fact:nth-child(odd){padding-right:16px !important;border-right:1px solid var(--color-divider) !important;}
  body .pp-fact:nth-child(even){padding-left:16px !important;}
}

/* ===== mobile carousel controls =======================================================
   The strips above already scroll; these are the prev/next, per-page progress bar and
   "n / N" label the comp draws under each one. Injected by pp-site.js over the existing
   markup, so no page tree carries carousel controls. */
body .pp-car{display:none;}
@media (max-width:767px){
  body .pp-intro p{text-align:left;}
  body .pp-car{display:flex;align-items:center;gap:10px;padding:12px 16px 0;}
  body .pp-car-btn{width:40px;height:40px;flex:none;border-radius:999px;
    border:1px solid var(--color-accent-300);background:transparent;
    color:var(--color-accent-700);font-size:18px;line-height:1;cursor:pointer;}
  body .pp-car-btn[disabled]{opacity:0.35;cursor:default;}
  body .pp-car-dots{flex:1;display:flex;gap:5px;}
  body .pp-car-dot{flex:1;height:24px;padding:0;border:0;background:transparent;
    cursor:pointer;display:grid;align-items:center;}
  body .pp-car-dot > span{display:block;height:2px;background:var(--color-divider);}
  body .pp-car-dot[aria-current="true"] > span{background:var(--color-accent-700);}
  body .pp-car-label{font-size:11.5px;color:var(--color-neutral-700);
    font-feature-settings:'tnum';white-space:nowrap;}
}

/* ===== per-table column proportions ==================================================
   Each comp table has its own grid, not one shared four-column template. Class names are
   derived from the proportions themselves, so a new table brings its own rule with it.
   Desktop only: the phone layouts fold these tables to two columns, or scroll them. */
@media (min-width:768px){
  body .pp-rate-row.pp-rt-1-2fr-2fr-1-1fr-1-2fr{grid-template-columns:1.2fr 2fr 1.1fr 1.2fr;}
  body .pp-rate-row.pp-rt-1-2fr-2fr-1fr-1-4fr{grid-template-columns:1.2fr 2fr 1fr 1.4fr;}
  body .pp-rate-row.pp-rt-1-3fr-1-3fr-0-9fr-1fr-1-1fr{grid-template-columns:1.3fr 1.3fr 0.9fr 1fr 1.1fr;}
  body .pp-rate-row.pp-rt-1-6fr-repeat-4-1fr{grid-template-columns:1.6fr repeat(4, 1fr);}
  body .pp-rate-row.pp-rt-1-7fr-repeat-4-1fr{grid-template-columns:1.7fr repeat(4, 1fr);}
  body .pp-rate-row.pp-rt-2fr-1-4fr-1-6fr-1-2fr{grid-template-columns:2fr 1.4fr 1.6fr 1.2fr;}
  body .pp-rate-row.pp-rt-2fr-1-5fr-1-6fr-1-2fr{grid-template-columns:2fr 1.5fr 1.6fr 1.2fr;}
}

/* ===== mobile header, footer and action bar ===========================================
   The mobile comp reshapes both Theme Builder parts: the header drops its utility strip
   for an icon call button and a burger over a two-column menu, the footer folds its
   five-column sitemap to two and runs the contact block together, and a fixed three-button
   action bar sits over the bottom of the viewport. Desktop is untouched. */
body .pp-actionbar{display:none;}

/* The header changes at 1024, not 767: that is where Elementor collapses the nav into a
   burger. Keeping these at 767 left tablets showing a burger AND the utility strip AND
   the quote button at the same time. */
@media (max-width:1024px){
  /* --- header --- */
  body .pp-topbar{display:none;}
  body .pp-hdr-logo{width:auto;flex:1 1 auto;min-width:0;}
  body .pp-hdr-cta{display:none;}
  /* icon-only call button; the label stays in the DOM for screen readers */
  body .pp-hdr-tel .elementor-button{width:44px;height:44px;padding:0;display:grid;place-items:center;}
  body .pp-hdr-tel .elementor-button-content-wrapper{gap:0;}
  body .pp-hdr-tel .elementor-button-icon{margin:0;}
  body .pp-hdr-tel .elementor-button-text{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  /* burger sized to match the call button */
  body .pp-hdr-nav .elementor-menu-toggle{width:44px;height:44px;justify-content:center;
    border:1px solid var(--color-divider);border-radius:999px;}
  /* the open menu spans the header and is a two-column list, as drawn. Position is
     pinned here rather than left to Elementor's default, which depends on which
     ancestor happens to be positioned. */
  body .pp-hdr{position:relative;}
  body .pp-hdr-nav{position:static;}
  body .pp-hdr-nav .elementor-nav-menu--dropdown{position:absolute;left:0;right:0;
    top:100%;width:auto;max-width:none;margin-top:0;z-index:25;}
  body .pp-hdr-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu{display:grid;
    grid-template-columns:1fr 1fr;gap:0 16px;padding:8px 16px 16px;
    background:var(--color-neutral-100);}
  body .pp-hdr-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu a.elementor-item{
    padding:12px 0;border-bottom:1px solid var(--color-divider);font-size:15px;}

}

@media (max-width:767px){
  /* --- footer --- */
  body .pp-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;}
  body .pp-foot-cols > .e-con{width:auto;min-width:0;}
  body .pp-foot-info{display:grid;grid-template-columns:1fr;gap:12px;}
  body .pp-foot-info > .e-con{width:auto;min-width:0;}
  body .pp-foot-h{display:none;}
  body .pp-foot-legal{flex-direction:column;align-items:flex-start;gap:8px;}
}

@media (min-width:768px) and (max-width:1024px){
  body .pp-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;}
  body .pp-foot-cols > .e-con{width:auto;min-width:0;}
}

@media (max-width:767px){

  /* --- fixed action bar --- */
  body .pp-actionbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  body .pp-actionbar > .elementor-widget{flex:1 1 0;min-width:0;}
  body .pp-actionbar > .elementor-widget:last-child{flex:1.2 1 0;}
  body .pp-actionbar .elementor-button{width:100%;justify-content:center;white-space:nowrap;}
  /* clear the bar so it never covers the end of the page */
  body{padding-bottom:76px;}
}

/* A four-column COMPARISON table cannot fold into label/value pairs either: its second
   column is prose ("เหมาะกับ"), which squeezes the first column to a few characters. Same
   treatment as the five-column tables — keep the headings and scroll. The rate tables are
   left folding, because their first two columns are short. */
@media (max-width:767px){
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1fr-1-4fr),
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1-1fr-1-2fr){overflow-x:auto;}
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1fr-1-4fr) .pp-rate-head,
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1-1fr-1-2fr) .pp-rate-head{display:grid;}
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1fr-1-4fr) .pp-rate-row,
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1-1fr-1-2fr) .pp-rate-row{
    grid-template-columns:minmax(96px,1.2fr) minmax(190px,2fr) minmax(84px,1fr) minmax(84px,1.2fr);
    min-width:480px;gap:12px;padding:12px 16px;}
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1fr-1-4fr) .pp-rate-row > *,
  body .pp-rate-table:has(.pp-rt-1-2fr-2fr-1-1fr-1-2fr) .pp-rate-row > *{
    grid-column:auto;text-align:left;}
}

/* ===== blog card pager (#33) =============================================================
   Injected by pp-pager.php under the บทความ grid (#pp-posts). Reuses the carousel's control
   vocabulary (.pp-car-btn prev/next, one .pp-car-dot per page, "n / N" label) but is styled
   here in full: the carousel rules above live inside the phone media query, and Hello's
   theme button styles (pink #c36 border and hover fill) leak through everywhere else.
   Desktop: numbered pills. Phone: the carousel's progress bars + label. Hidden on one-page tabs. */
body .pp-pg-off{display:none !important;}
body .pp-car.pp-pager{display:flex;justify-content:center;align-items:center;gap:10px;
  padding:32px 0 0;}
body .pp-pager .pp-car-btn{width:40px;height:40px;flex:none;padding:0;border-radius:999px;
  border:1px solid var(--color-accent-300);background:transparent;color:var(--color-accent-700);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background 140ms ease,border-color 140ms ease,color 140ms ease;}
body .pp-pager .pp-car-btn:hover,body .pp-pager .pp-car-btn:focus-visible{
  background:var(--color-accent-100);border-color:var(--color-accent-500);color:var(--color-accent-900);}
body .pp-pager .pp-car-btn[disabled],body .pp-pager .pp-car-btn[disabled]:hover{opacity:0.35;
  cursor:default;background:transparent;border-color:var(--color-accent-300);color:var(--color-accent-700);}
body .pp-pager .pp-car-dots{display:flex;flex:0 0 auto;gap:6px;}
body .pp-pager .pp-car-dot{flex:none;width:40px;height:40px;padding:0;border-radius:999px;
  border:1px solid transparent;background:transparent;display:grid;place-items:center;
  color:var(--color-text);font-family:'Sarabun',sans-serif;font-size:14px;font-weight:500;
  line-height:1;font-feature-settings:'tnum';cursor:pointer;
  transition:background 140ms ease,border-color 140ms ease,color 140ms ease;}
body .pp-pager .pp-car-dot:hover,body .pp-pager .pp-car-dot:focus-visible{
  background:rgba(32,31,29,0.07);color:var(--color-text);}
body .pp-pager .pp-car-dot[aria-current="page"],body .pp-pager .pp-car-dot[aria-current="page"]:hover{
  border-color:var(--color-accent-500);background:var(--color-accent-100);color:var(--color-accent-700);}
body .pp-pager .pp-car-dot > span{display:none;}
body .pp-pager .pp-car-dot > b{display:block;font-weight:500;}
body .pp-pager .pp-car-label{display:none;}
@media (max-width:767px){
  body .pp-car.pp-pager{justify-content:stretch;padding:20px 0 0;}
  body .pp-pager .pp-car-dots{flex:1;gap:5px;}
  body .pp-pager .pp-car-dot,body .pp-pager .pp-car-dot:hover,
  body .pp-pager .pp-car-dot[aria-current="page"],body .pp-pager .pp-car-dot[aria-current="page"]:hover{
    flex:1;width:auto;height:24px;border:0;border-radius:0;background:transparent;
    display:grid;align-items:center;justify-items:stretch;}
  body .pp-pager .pp-car-dot > span{display:block;width:100%;height:2px;background:var(--color-divider);}
  body .pp-pager .pp-car-dot[aria-current="page"] > span{background:var(--color-accent-700);}
  body .pp-pager .pp-car-dot > b{display:none;}
  body .pp-pager .pp-car-label{display:inline;font-size:11.5px;color:var(--color-neutral-700);
    font-feature-settings:'tnum';white-space:nowrap;}
}

/* ===== ผลงานที่ผ่านมา phone carousel (#pp-folio), ≤767px only ==================================
   Desktop keeps its 6-across grid untouched. On phones the kit already intended a 46% snap
   strip with pp-carousel.php controls, but it never rendered: Elementor's
   .e-con.e-flex{flex:var(--flex-grow) …} at (0,2,0) beat the kit's `body .pp-folio > *`
   (0,1,2) and --flex-wrap-mobile:wrap re-wrapped the row, so the strip stacked as a list and
   the controls never built. Out-ranked here at (0,3,1); bars given a real width. */
@media (max-width:767px){
  body .pp-folio{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;}
  body .pp-folio::-webkit-scrollbar{display:none;}
  body .pp-folio > .e-con.pp-folio-item{flex:0 0 46%;width:auto;scroll-snap-align:start;min-width:0;}
  /* the linked image sits in an inline-block <a> that shrinks to the image's natural width,
     so the widget's width:100% never reached the tile edge */
  body .pp-folio .elementor-widget-image a{display:block;width:100%;}
  /* controls: the .pp-car nav pp-carousel.php inserts right after the strip */
  body .pp-folio + .pp-car{padding:12px 0 0;}
  body .pp-folio + .pp-car .pp-car-btn{padding:0;display:grid;place-items:center;}
  body .pp-folio + .pp-car .pp-car-btn:hover,body .pp-folio + .pp-car .pp-car-btn:focus-visible{
    background:var(--color-accent-100);border-color:var(--color-accent-500);color:var(--color-accent-900);}
  body .pp-folio + .pp-car .pp-car-btn[disabled],body .pp-folio + .pp-car .pp-car-btn[disabled]:hover{
    opacity:0.35;cursor:default;background:transparent;border-color:var(--color-accent-300);color:var(--color-accent-700);}
  body .pp-folio + .pp-car .pp-car-dot,body .pp-folio + .pp-car .pp-car-dot:hover,
  body .pp-folio + .pp-car .pp-car-dot:focus{background:transparent;border:0;border-radius:0;padding:0;
    display:grid;align-items:center;justify-items:stretch;}
  body .pp-folio + .pp-car .pp-car-dot > span{width:100%;}
}

/* ===== hub product-card rows (.pp-kids) as phone carousels, ≤767px only =======================
   The kit already meant these rows to swipe sideways at 78% a card (see "the comps swipe the
   card rows sideways" above) and pp-carousel.php already watches .pp-kids, but Elementor's
   --flex-wrap-mobile:wrap re-wrapped the row, so the cards stacked at 78% width with a dead
   gutter and the controls never built. Same repair as .pp-folio. */
@media (max-width:767px){
  body .pp-kids{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;}
  body .pp-kids::-webkit-scrollbar{display:none;}
  body .pp-kids > .e-con.pp-kid{flex:0 0 78%;width:auto;scroll-snap-align:start;min-width:0;}
  /* carousel controls, every strip: Hello's button padding and the 0-width bars */
  body .pp-car .pp-car-btn{padding:0;display:grid;place-items:center;}
  body .pp-car .pp-car-btn:hover,body .pp-car .pp-car-btn:focus-visible{
    background:var(--color-accent-100);border-color:var(--color-accent-500);color:var(--color-accent-900);}
  body .pp-car .pp-car-btn[disabled],body .pp-car .pp-car-btn[disabled]:hover{
    opacity:0.35;cursor:default;background:transparent;border-color:var(--color-accent-300);color:var(--color-accent-700);}
  body .pp-car .pp-car-dot,body .pp-car .pp-car-dot:hover,body .pp-car .pp-car-dot:focus{
    background:transparent;border:0;border-radius:0;padding:0;display:grid;align-items:center;justify-items:stretch;}
  body .pp-car .pp-car-dot > span{width:100%;}
}
/* Hello's button:focus paints #c36 on a control after it is clicked; keep the resting look when
   focused by pointer and show the accent state only for keyboard focus. Covers the pager too. */
body .pp-car .pp-car-btn:focus:not(:hover){background:transparent;border-color:var(--color-accent-300);color:var(--color-accent-700);}
body .pp-car .pp-car-btn:focus-visible{background:var(--color-accent-100);border-color:var(--color-accent-500);color:var(--color-accent-900);}
body .pp-car .pp-car-dot:focus{background:transparent;color:inherit;}

/* ===== folio strips aligned to the comps, phones only ==========================================
   3.2 hub ตัวอย่างงานป้าย: 60% tiles, one tile per page (pp-carousel.php now steps per card).
   1.2 homepage ผลงานที่ผ่านมา: one 306px tile per view, edge to edge, the caption set on the
   photo over a bottom gradient, and the arrows riding on the tile (.pp-car-over, positioned by
   pp-carousel.php via --pp-car-top). The comp has no bars or label there. */
@media (max-width:767px){
  body .pp-folio > .e-con.pp-folio-item{flex-basis:60%;}
  /* full bleed from whatever gutter the page has (the homepage runs 32px on phones today, the
     hubs 16px): the strip takes the viewport width and pads back to the content edge, so the
     first tile lines up with the heading and the last one runs to the screen edge */
  body #pp-folio{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);}
  body #pp-folio > .e-con.pp-folio-item{flex-basis:min(78vw,306px);position:relative;height:400px;
    display:block;border-radius:16px;overflow:hidden;background:var(--color-neutral-200);}
  body #pp-folio .elementor-widget-image{position:absolute;inset:0;margin:0;}
  body #pp-folio .elementor-widget-image .elementor-widget-container,
  body #pp-folio .elementor-widget-image a{display:block;height:100%;}
  body #pp-folio .elementor-widget-image img{width:100%;height:100%;object-fit:cover;border-radius:0;}
  body #pp-folio .elementor-widget-image::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(14,13,10,0.12) 25%,rgba(14,13,10,0.86) 100%);}
  body #pp-folio .pp-folio-cap{position:absolute;left:16px;right:16px;bottom:18px;margin:0;
    pointer-events:none;color:#f3f2f2;font-family:'Noto Serif Thai',serif;font-size:32px;line-height:1.15;}
  body #pp-folio .pp-folio-cap p{margin:0;font:inherit;color:inherit;}
  body #pp-folio .pp-folio-cap::before{content:"ประเภทธุรกิจ";display:block;margin-bottom:8px;
    font-family:'Sarabun',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--color-accent-400);}
  body #pp-folio .pp-folio-cap::after{content:"ดูโครงการ  \2192";display:block;margin-top:8px;
    font-family:'Sarabun',sans-serif;font-size:13.5px;line-height:1.5;color:var(--color-accent-400);}
  /* overlay arrows */
  body .pp-car.pp-car-over{display:block;height:0;padding:0;overflow:visible;}
  body .pp-car-over .pp-car-dots,body .pp-car-over .pp-car-label{display:none;}
  body .pp-car-over .pp-car-btn,body .pp-car-over .pp-car-btn:hover,body .pp-car-over .pp-car-btn:focus{
    position:absolute;z-index:2;top:var(--pp-car-top,50%);transform:translateY(-50%);width:44px;height:44px;
    border:1px solid rgba(243,242,242,0.55);background:rgba(20,19,15,0.55);color:#f3f2f2;padding:0;}
  /* the nav's positioned parent is the boxed inner container, 16px in from the screen edge */
  body .pp-car-over .pp-car-btn:first-child{left:-8px;}
  body .pp-car-over .pp-car-btn:last-child{right:-8px;}
  body .pp-car-over .pp-car-btn[disabled]{opacity:0.35;}
}

/* ===== homepage บริการของเรา cards as the 1.2 compact two-column card, phones only =============
   Photo left (58%), text right behind a hairline; the long description is dropped on phones
   (the comp shows title, the count line, sold, price and the CTA). Same markup, kit CSS only. */
@media (max-width:767px){
  body .pp-cards{gap:12px;}
  body .pp-cards > .e-con.pp-card{display:grid;grid-template-columns:58% minmax(0,1fr);align-items:stretch;}
  body .pp-card > .e-con.pp-card-media{flex:none;height:auto;min-height:186px;}
  body .pp-card .pp-card-media .elementor-widget-image,
  body .pp-card .pp-card-media .elementor-widget-image a{display:block;height:100%;}
  body .pp-card .pp-card-media img{width:100%;height:100%;min-height:186px;object-fit:cover;display:block;}
  body .pp-card .pp-card-icon{width:30px;height:30px;top:8px;left:8px;}
  body .pp-card > .e-con.pp-card-body{border-top:0;border-left:1px solid var(--color-divider);
    padding:12px 13px 13px;gap:6px;min-width:0;align-content:start;}
  body .pp-card .pp-card-title .elementor-heading-title{font-size:17px;line-height:1.3;min-height:0;}
  body .pp-card .pp-card-desc{display:none;}
  body .pp-card .pp-card-count{min-height:0;border:0;padding:0;font-size:11.5px;line-height:1.5;}
  body .pp-card .pp-card-count p,body .pp-card .pp-card-price p{margin:0;}
  body .pp-card .pp-card-sold .elementor-icon-list-item > .elementor-icon-list-text{font-size:11.5px;line-height:1.5;}
  body .pp-card .pp-card-sold .elementor-icon-list-icon svg{width:12px;height:12px;}
  body .pp-card .pp-card-price{min-height:0;font-size:13px;line-height:1.5;padding-top:2px;}
  body .pp-card .pp-card-cta{margin-top:4px;padding-top:10px;border-top:1px solid var(--color-divider);}
  body .pp-card .pp-card-cta .elementor-button{min-height:44px;font-size:13px;padding:0 12px;}
}

/* ===== /portfolio/ (9.1 Portfolio) ======================================================
   Structural layer only, `body ` prefixed throughout to reach (0,2,1). Colour, type, borders
   and padding are in the widget/container settings; this file carries the grids, the pill's
   position, hover and the phone/tablet breakpoints. Reuses pp-hero, pp-crumb, pp-secthead,
   pp-tabrow/pp-tab, pp-trust-item (kv_strip), pp-svc-cta/pp-svc-aside, pp-quote-panel. */

/* works grid: 3 across, cards clip to their radius, hover lifts the border to accent */
body .pp-pf-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
body .pp-pf-works > .e-con{width:auto;min-width:0;overflow:hidden;align-content:start;
  transition:border-color 160ms ease;}
body .pp-pf-works > .e-con:hover,body .pp-pf-works > .e-con:focus-within{border-color:var(--color-accent-300);}
body .pp-pf-media{position:relative;}
body .pp-pf-media .elementor-widget-image,body .pp-pf-media .elementor-widget-image a{display:block;margin:0;}
body .pp-pf-media img{display:block;width:100%;}
/* an empty slot fills the same 214px the photo would */
body .pp-pf-media .pp-slot{min-height:214px;border-radius:0;border-width:0 0 1px;}
/* the sector pill rides the photo's top-left corner */
body .pp-pf-media > .pp-pf-sector{position:absolute;top:12px;left:12px;width:auto;z-index:2;}
body .pp-pf-sector-t p{margin:0;letter-spacing:0.06em;white-space:nowrap;}
body .pp-pf-body{flex:1 1 auto;}
body .pp-pf-title .elementor-heading-title{text-wrap:pretty;}
body .pp-pf-desc p{margin:0;text-wrap:pretty;}
body .pp-pf-foot{margin-top:3px;}
body .pp-pf-foot > *{width:auto;}
body .pp-pf-service .elementor-heading-title a{color:var(--color-accent-700);border-bottom:1px solid var(--color-accent-300);}
body .pp-pf-meta p{margin:0;font-feature-settings:'tnum';white-space:nowrap;}

/* brands: copy 4fr / logo wall 8fr; the wall is a 7-across grid of squares on a 1px divider mesh */
body .pp-pf-brands{display:flex;gap:var(--space-8);align-items:start;}
body .pp-pf-brands > *{min-width:0;}
body .pp-pf-logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden;}
body .pp-pf-logos > .e-con{width:auto;min-width:0;aspect-ratio:1/1;}
body .pp-pf-logo-img img{filter:grayscale(1);opacity:0.72;transition:filter 160ms ease,opacity 160ms ease;}
body .pp-pf-logo:hover .pp-pf-logo-img img{filter:none;opacity:1;}

/* stats: the kv_strip's row has no class of its own, so it is reached through the section */
body .pp-pf-stats .e-con-inner > .e-con > .e-con{min-width:0;}

@media (max-width:1024px){
  body .pp-pf-works{grid-template-columns:repeat(2,minmax(0,1fr));}
  body .pp-pf-logos{grid-template-columns:repeat(5,minmax(0,1fr));}
}

@media (max-width:767px){
  /* cards one across, a little shorter */
  body .pp-pf-works{grid-template-columns:minmax(0,1fr);gap:14px;}
  body .pp-pf-media img{height:186px;}
  body .pp-pf-media .pp-slot{min-height:186px;}
  body .pp-pf-body{padding:14px !important;}
  body .pp-pf-title .elementor-heading-title{font-size:18px !important;}
  /* the filter row keeps its hairline but drops the top gap the rule needs on desktop */
  body .pp-tabrow.pp-tabrow{padding-top:14px;padding-bottom:14px;}
  /* brands stack; the logo wall becomes a swipe row of 96px squares */
  body .pp-pf-brands{flex-direction:column;gap:var(--space-4);}
  body .pp-pf-brands > .e-con{width:100% !important;}
  body .pp-pf-logos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;}
  body .pp-pf-logos::-webkit-scrollbar{display:none;}
  body .pp-pf-logos > .e-con{flex:0 0 96px;scroll-snap-align:start;}
  body .pp-pf-logo-img img{height:60px;}
  /* stats 2x2 */
  body .pp-pf-stats .e-con-inner > .e-con{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;}
  body .pp-pf-stats .e-con-inner > .e-con > .e-con{width:auto;}
  body .pp-pf-stats .pp-trust-item .elementor-icon-box-wrapper{grid-template-columns:1fr;gap:8px;}
  body .pp-pf-stats .pp-trust-item .elementor-icon-box-title{font-size:19px !important;}
}

/* ===== /about-us/ (1.about-us) ==========================================================
   Structural layer only, `body ` prefixed throughout to reach (0,2,1). Colour, type, borders
   and padding are in the widget/container settings; this file carries the grids, hover and
   the phone/tablet breakpoints. Reuses pp-hero, pp-crumb, pp-hero-btns, pp-svc-top,
   pp-svc-intro, pp-facts/pp-fact, pp-secthead, pp-folio, pp-svc-cta/pp-svc-aside. */

/* story: four stages on a 2px accent rule */
body .pp-ab-kicker p{margin:0;letter-spacing:0.12em;text-transform:uppercase;}
body .pp-ab-story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:start;}
body .pp-ab-story > .e-con{width:auto;min-width:0;align-content:start;}
body .pp-ab-stage-no p{margin:0;letter-spacing:0.08em;font-feature-settings:'tnum';}
body .pp-ab-stage-b p{margin:0;text-wrap:pretty;}

/* why us: four bordered cards, hover lifts the border to accent */
body .pp-ab-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:stretch;}
body .pp-ab-why > .e-con{width:auto;min-width:0;align-content:start;transition:border-color 160ms ease;}
body .pp-ab-why > .e-con:hover{border-color:var(--color-accent-300);}
body .pp-ab-card-ic{align-self:flex-start;}
body .pp-ab-card-ic .elementor-icon{display:inline-flex;}
body .pp-ab-card-b p{margin:0;text-wrap:pretty;}

/* machines: 3 across, media 196px, card clips to its radius */
body .pp-ab-machines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:stretch;}
body .pp-ab-machines > .e-con{width:auto;min-width:0;overflow:hidden;align-content:start;}
body .pp-ab-mach-media .elementor-widget-image{margin:0;}
body .pp-ab-mach-media img{display:block;width:100%;}
body .pp-ab-mach-media .pp-slot{min-height:196px;border-radius:0;border-width:0;}
body .pp-ab-mach-body{flex:1 1 auto;}
body .pp-ab-tag p{margin:0;letter-spacing:0.1em;text-transform:uppercase;}
body .pp-ab-mach-b p{margin:0;text-wrap:pretty;}

/* materials: copy + photo 4fr, two-column list 8fr on hairlines */
body .pp-ab-materials{display:flex;gap:var(--space-8);align-items:start;}
body .pp-ab-materials > *{min-width:0;}
body .pp-ab-matphoto img{border-radius:16px;}
body .pp-ab-matgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6);align-items:start;}
body .pp-ab-matgrid > .e-con{width:auto;min-width:0;align-content:start;}
body .pp-ab-mat-v p{margin:0;text-wrap:pretty;}

/* service areas: copy 5fr, chip cloud 7fr */
body .pp-ab-areas{display:flex;gap:var(--space-8);align-items:start;}
body .pp-ab-areas > *{min-width:0;}
body .pp-ab-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-content:start;}
body .pp-ab-chips > .e-con{width:auto;}
body .pp-ab-chip-t p{margin:0;white-space:nowrap;}

/* CTA aside: the premises photo where the other pages carry the map */
body .pp-ab-aside img{border-radius:16px;}

@media (max-width:1024px){
  body .pp-ab-story,body .pp-ab-why,body .pp-ab-machines{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  /* story, why-us and machines swipe sideways as 78% tiles, like the hub card rows */
  body .pp-ab-story,body .pp-ab-why,body .pp-ab-machines{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding-bottom:4px;
    scrollbar-width:none;min-width:0;max-width:100%;}
  body .pp-ab-story::-webkit-scrollbar,body .pp-ab-why::-webkit-scrollbar,
  body .pp-ab-machines::-webkit-scrollbar{display:none;}
  body .pp-ab-story > .e-con,body .pp-ab-why > .e-con,body .pp-ab-machines > .e-con{
    flex:0 0 78%;width:auto;min-width:0;scroll-snap-align:start;}
  body .pp-ab-mach-media img{height:170px;}
  body .pp-ab-mach-media .pp-slot{min-height:170px;}
  body .pp-ab-mach-body,body .pp-ab-card{padding:14px !important;}
  /* the two-column blocks stack */
  body .pp-ab-materials,body .pp-ab-areas{flex-direction:column;gap:var(--space-6);}
  body .pp-ab-materials > .e-con,body .pp-ab-areas > .e-con{width:100% !important;}
  body .pp-ab-matgrid{grid-template-columns:minmax(0,1fr);gap:14px;}
  body .pp-ab-matphoto img{height:180px;}
  /* facts box has five rows here; the kit's 2x2 grid leaves the last row full width */
  body .pp-facts > .pp-fact:last-child:nth-child(odd){grid-column:1 / -1;border-right:0 !important;padding-right:0 !important;}
}

/* ===== /contact/ — structural layer only ==============================================
   Colour, typography, padding, borders and image geometry are widget settings in
   generators/gen_contact.py. Here: the comp's grids, the last-child rules the settings
   cannot express, hover, and the phone layout. Every rule `body `-prefixed to reach
   (0,2,1) over Elementor's global widget rules. Class names pp-ct-* are unique to the
   page; pp-hero-*, pp-crumb, pp-h2, pp-lede, pp-note, pp-quote-* and the map card come
   from the kit. */

body .pp-ct p{margin:0;}
body .pp-ct-kicker p{letter-spacing:0.12em;text-transform:uppercase;}
body .pp-ct-h2 .elementor-heading-title{text-wrap:balance;}
body .pp-ct-dir-p p,body .pp-ct-ch-p p{text-wrap:pretty;}

/* ---- head office: 5fr / 7fr ---- */
body .pp-ct-office{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:start;}
body .pp-ct-office > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ct-row{display:grid;grid-template-columns:108px 1fr;gap:var(--space-3);align-items:start;}
body .pp-ct-row > .elementor-widget{min-width:0;}
body .pp-ct-row-k{padding-top:2px;}
body .pp-ct-row-v{font-feature-settings:'tnum';}
body .pp-ct-row-v a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-accent-300);}
body .pp-ct-row-v a:hover,body .pp-ct-row-v a:focus-visible{color:var(--color-accent-700);border-bottom-color:var(--color-accent-700);}
body .pp-ct-rows > .e-con:last-child,
body .pp-ct-tels > .e-con:last-child{border-bottom:0 !important;}
body .pp-ct-btns{display:flex;gap:var(--space-3);flex-wrap:wrap;}
/* the shared map card at the comp's 396px plate */
body .pp-ct-mapcard iframe{border-radius:16px;min-height:396px;width:100%;border:0;display:block;}
body .pp-ct-media{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-4);align-items:stretch;}
body .pp-ct-media > *{min-width:0;}
body .pp-ct-front,body .pp-ct-front .elementor-widget-container{height:100%;}
body .pp-ct-front img{border-radius:16px;height:100%;min-height:232px;}
/* LINE QR: the briefed slot is a 118px square inside the card */
body .pp-ct-qr .pp-slot{width:118px;height:118px;min-height:0;padding:8px;border-radius:10px;
  background-position:center 22%;background-size:auto 30%;}
body .pp-ct-qr .pp-slot-brief p{font-size:10px;line-height:1.4;}
body .pp-ct-qr-t span{color:var(--color-text);}

/* ---- directions: three columns on a 2px accent rule ---- */
body .pp-ct-sechead .pp-lede p{max-width:70ch;}
body .pp-ct-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
body .pp-ct-dirs > .e-con{width:auto;min-width:0;}

/* ---- channels: 4fr / 8fr, items 2 x 2 ---- */
body .pp-ct-channels{display:grid;grid-template-columns:4fr 8fr;gap:var(--space-8);align-items:start;}
body .pp-ct-channels > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ct-chgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6);}
body .pp-ct-chgrid > .e-con{width:auto;min-width:0;}
body .pp-ct-ch{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;}
body .pp-ct-ch > .e-con{width:auto;min-width:0;}
body .pp-ct-ch-no{font-feature-settings:'tnum';padding-top:2px;}

/* ---- CTA: 6fr / 5fr, phone list beside the shared panel ---- */
body .pp-ct-cta{display:grid;grid-template-columns:6fr 5fr;gap:var(--space-6);align-items:stretch;}
body .pp-ct-cta > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ct-tels{align-content:start;}
body .pp-ct-tel{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:baseline;
  transition:background 140ms ease;}
body .pp-ct-tel > .elementor-widget{min-width:0;}
body .pp-ct-tel-no .elementor-heading-title{font-feature-settings:'tnum';}
body .pp-ct-tel-no .elementor-heading-title a{color:inherit;text-decoration:none;}
body .pp-ct-tel:hover{background:var(--color-neutral-100);}
body .pp-ct-tel:hover .pp-ct-tel-no .elementor-heading-title a{color:var(--color-accent-700);}

/* ---- phone, 16px gutters (padding_mobile in the tree), stacks and tightens ---- */
@media (max-width:767px){
  body .pp-ct-office,body .pp-ct-channels,body .pp-ct-cta,body .pp-ct-media,
  body .pp-ct-dirs,body .pp-ct-chgrid{grid-template-columns:minmax(0,1fr);}
  body .pp-ct-office,body .pp-ct-channels{gap:var(--space-6);}
  body .pp-ct-h2 .elementor-heading-title{font-size:26px !important;line-height:1.3 !important;}
  body .pp-ct-row{grid-template-columns:92px 1fr;padding:12px 16px !important;}
  body .pp-ct-btns{flex-direction:column;align-items:stretch;}
  body .pp-ct-btns .elementor-button{width:100%;justify-content:center;}
  body .pp-ct-mapcard iframe{min-height:300px;}
  body .pp-ct-front img{min-height:0;height:200px;}
  body .pp-ct-tel{padding:14px 16px !important;}
}

/* ===== /how-to-order/ — structural layer only =========================================
   Colour, typography, padding, borders and image geometry are widget settings in
   generators/gen_howto.py. Here: the comp's grids, last-child rules, the lead-time table's
   column proportions, and the phone layout. Every rule `body `-prefixed to reach (0,2,1).
   Class names pp-ho-* are unique to the page; pp-hero-*, pp-h2, pp-lede, pp-note,
   pp-rate-*, pp-faq-*, pp-quote-*, pp-procs and the map card come from the kit. */

body .pp-ho p{margin:0;}
body .pp-ho-kicker p{letter-spacing:0.12em;text-transform:uppercase;}
body .pp-ho-h2 .elementor-heading-title{text-wrap:balance;}
body .pp-ho-qp p,body .pp-ho-stage-p p,body .pp-ho-prep-p p,body .pp-ho-rule-p p,body .pp-ho-p p{text-wrap:pretty;}

/* ---- three quick steps: big numeral beside the copy ---- */
body .pp-ho-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);}
body .pp-ho-quick > .e-con{width:auto;min-width:0;}
body .pp-ho-q{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start;}
body .pp-ho-q > .e-con,body .pp-ho-q > .elementor-widget{width:auto;min-width:0;}
body .pp-ho-qn .elementor-heading-title{font-feature-settings:'tnum';}

/* ---- process: four photo cards ---- */
body .pp-ho-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:stretch;}
body .pp-ho-stages > .e-con{width:auto;min-width:0;}
body .pp-ho-stage-img img{border-radius:0;}
body .pp-ho-stage .pp-slot{min-height:168px;border:0;border-radius:0;}
body .pp-ho-stage-no{letter-spacing:0.1em;font-feature-settings:'tnum';}
body .pp-ho-stage-h .elementor-heading-title{min-height:50px;}

/* ---- what to prepare: 5fr / 7fr, items 2 x 3 on hairlines ---- */
body .pp-ho-prep,body .pp-ho-files{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8);align-items:start;}
body .pp-ho-prep > .e-con,body .pp-ho-files > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ho-prepgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6);}
body .pp-ho-prepgrid > .e-con{width:auto;min-width:0;}

/* ---- file preparation ---- */
body .pp-ho-spec{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-3);align-items:baseline;}
body .pp-ho-spec > .elementor-widget{min-width:0;}
body .pp-ho-spec-v{font-feature-settings:'tnum';}
body .pp-ho-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
body .pp-ho-rules > .e-con{width:auto;min-width:0;}
body .pp-ho-bad{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--space-4);align-items:baseline;}
body .pp-ho-bad > .elementor-widget{min-width:0;}
body .pp-ho-specs > .e-con:last-child,
body .pp-ho-pays > .e-con:last-child{border-bottom:0 !important;}

/* ---- lead time (shared price_table, three columns) + payment box: 7fr / 5fr ---- */
body .pp-ho-lead{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-6);align-items:start;}
body .pp-ho-lead > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ho-lead .pp-rate-row > :nth-child(2),
body .pp-ho-lead .pp-rate-row > :nth-child(3){text-align:right;}
body .pp-ho-lead .pp-rate-c3{font-feature-settings:'tnum';}
body .pp-ho-pay-head p{letter-spacing:0.1em;text-transform:uppercase;}
@media (min-width:768px){
  body .pp-rate-row.pp-rt-1-6fr-1fr-1fr{grid-template-columns:1.6fr 1fr 1fr;}
}

/* ---- warranty: 4fr / 8fr, two rule-topped columns ---- */
body .pp-ho-warranty{display:grid;grid-template-columns:4fr 8fr;gap:var(--space-8);align-items:start;}
body .pp-ho-warranty > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ho-big .elementor-heading-title{font-feature-settings:'tnum';}
body .pp-ho-wcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
body .pp-ho-wcols > .e-con{width:auto;min-width:0;}
body .pp-ho-wlist{min-height:1px;}

/* ---- CTA: 6fr / 5fr with the shared map card ---- */
body .pp-ho-cta{display:grid;grid-template-columns:6fr 5fr;gap:var(--space-6);align-items:stretch;}
body .pp-ho-cta > .e-con{width:auto;max-width:none;min-width:0;}
body .pp-ho-aside iframe{border-radius:16px;min-height:244px;width:100%;border:0;display:block;}

/* ---- phone ---- */
@media (max-width:767px){
  body .pp-ho-quick,body .pp-ho-prep,body .pp-ho-files,body .pp-ho-prepgrid,body .pp-ho-rules,
  body .pp-ho-lead,body .pp-ho-warranty,body .pp-ho-wcols,body .pp-ho-cta{grid-template-columns:minmax(0,1fr);}
  body .pp-ho-prep,body .pp-ho-files,body .pp-ho-warranty{gap:var(--space-6);}
  body .pp-ho-h2 .elementor-heading-title{font-size:26px !important;line-height:1.3 !important;}
  body .pp-ho-qn .elementor-heading-title{font-size:36px !important;}
  /* the four stage cards swipe; pp-procs (kit) gives the strip + controls, this sizes the card */
  body .pp-ho-stages{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;}
  body .pp-ho-stages::-webkit-scrollbar{display:none;}
  body .pp-ho-stages > .e-con{flex:0 0 78%;width:auto;scroll-snap-align:start;min-width:0;}
  body .pp-ho-stage-h .elementor-heading-title{min-height:0;}
  /* three short columns fit a phone, so the lead-time table keeps its head instead of folding */
  body .pp-ho-lead .pp-rate-head{display:grid;}
  body .pp-ho-lead .pp-rate-row{grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:12px 16px !important;}
  body .pp-ho-lead .pp-rate-row > *{grid-column:auto;}
  body .pp-ho-lead .pp-rate-c1{font-weight:400;}
  body .pp-ho-lead .pp-rate-c3{font-size:15px;}
  body .pp-ho-spec,body .pp-ho-bad{grid-template-columns:1fr;gap:3px;}
  body .pp-ho-spec{padding:12px 16px !important;}
  body .pp-ho-faq .pp-faq{flex-direction:column;gap:var(--space-4);}
  body .pp-ho-faq .pp-faq > .e-con{width:100%;}
  body .pp-ho-aside iframe{min-height:240px;}
}

/* ===== /blog/ (1.blog) + single post (BlogPost) ==================================================
   Structural layer only, `body ` prefixed throughout to reach (0,2,1). Colour, type, borders and
   padding are widget settings in generators/gen_blog.py. This file carries the grids, the
   category pill, the post body typography (post_content is plain HTML with pp-post-* classes,
   so it has no widget settings of its own) and the phone breakpoints. */

/* ---- archive hero: copy beside the two stats, aligned to the baseline ---- */
body .pp-blog-hero{display:flex;align-items:flex-end;}
body .pp-blog-hero > .e-con{min-width:0;}
body .pp-blog-h1 .elementor-heading-title{max-width:24ch;}
body .pp-blog-lede p{margin:0;max-width:60ch;text-wrap:pretty;}
body .pp-blog-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
body .pp-blog-stats > .e-con{width:auto;min-width:0;}
body .pp-blog-stat-n .elementor-heading-title{font-feature-settings:'tnum';}
body .pp-blog-stat-l p{margin:0;letter-spacing:0.1em;text-transform:uppercase;}

/* ---- cards: the category pill rides the photo; read-more is the card's footer link ---- */
body .pp-posts .pp-post-cat{display:inline-block;}
body .pp-posts-blog article.elementor-post{position:relative;}
body .pp-posts-blog .elementor-post__thumbnail__link{margin-bottom:14px;}
body .pp-posts-blog .elementor-post__meta-data{position:absolute;top:12px;left:12px;margin:0;z-index:2;line-height:1;}
body .pp-posts-blog .pp-post-cat{background:#F3F2F2;border:1px solid #A9CEC2;border-radius:999px;padding:5px 12px 4px;
  font-family:'Sarabun',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none;color:#13483B;}
body .pp-posts.pp-posts-blog .elementor-post__read-more{display:block !important;margin:12px 0 0;padding-top:10px;
  border-top:1px solid rgba(32,31,29,0.16);}
body .pp-posts-rel .elementor-post__thumbnail__link{margin-bottom:14px;}
body .pp-posts-rel .elementor-post__meta-data{margin:0 0 9px;}

/* ---- why these six: 4fr / 8fr, items 2 x 2 on a 1px text-colour rule ---- */
body .pp-blog-why-row{display:flex;align-items:flex-start;}
body .pp-blog-why-row > .e-con{min-width:0;}
body .pp-blog-why-lede p{margin:0;text-wrap:pretty;}
body .pp-blog-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;}
body .pp-blog-why > .e-con{width:auto;min-width:0;align-content:start;}
body .pp-blog-why-v p{margin:0;text-wrap:pretty;}

/* ---- CTA: panel 6fr / brand wall 5fr ---- */
body .pp-blog-cta{display:flex;align-items:stretch;}
body .pp-blog-cta > .e-con{min-width:0;}
body .pp-blog-wall img{border-radius:16px;}

/* ---- post hero ---- */
body .pp-post-h1 .elementor-heading-title{max-width:30ch;text-wrap:pretty;}
body .pp-post-lede{max-width:66ch;}
body .pp-post-lede p{margin:0;text-wrap:pretty;}
body .pp-post-meta{display:flex;flex-wrap:wrap;align-items:center;}
body .pp-post-meta-item p{margin:0;font-feature-settings:'tnum';}
body .pp-post-meta > .elementor-widget + .elementor-widget{position:relative;padding-left:19px;}
body .pp-post-meta > .elementor-widget + .elementor-widget::before{content:'';position:absolute;left:0;top:50%;
  width:1px;height:12px;margin-top:-6px;background:#BAB6B6;}
body .pp-post-hero-img img{border-radius:16px;}

/* ---- post body: TOC 3fr beside the article 9fr. The widget's optional inner container is
   flattened so the grid always sees <nav> and <div> as its two children. ---- */
body .pp-post-content{display:grid;grid-template-columns:3fr 9fr;gap:37px;align-items:start;}
body .pp-post-content > .elementor-widget-container{display:contents;}
body .pp-post-toc{position:sticky;top:130px;min-width:0;display:grid;gap:10px;font-size:13.5px;line-height:1.6;}
body .pp-post-toc-h{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:#7A7676;
  border-bottom:1px solid #201F1D;padding-bottom:9px;margin-bottom:4px;}
body .pp-post-toc a{display:flex;gap:10px;color:#605D5D;text-decoration:none;}
body .pp-post-toc a:hover{color:#13483B;}
body .pp-post-toc a > span:first-child{color:#13483B;font-feature-settings:'tnum';flex:none;}
body .pp-post-toc a.pp-post-toc-line{display:inline-flex;justify-content:center;justify-self:start;margin-top:9px;
  padding:9px 18px;border:1px solid rgba(32,31,29,0.16);border-radius:999px;color:#201F1D;font-size:13.5px;
  transition:background 140ms ease;}
body .pp-post-toc a.pp-post-toc-line:hover{background:rgba(32,31,29,0.07);color:#201F1D;}
body .pp-post-body{min-width:0;display:grid;gap:14px;}
body .pp-post-body h2{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:30px;line-height:1.32;
  max-width:34ch;margin:24px 0 0;color:#201F1D;text-wrap:pretty;}
body .pp-post-body h2:first-child{margin-top:0;}
body .pp-post-body p{margin:0;max-width:70ch;text-align:justify;text-wrap:pretty;}
body .pp-post-body a{color:#13483B;}
body .pp-post-kv{display:grid;gap:14px;margin-top:9px;}
body .pp-post-kv-row{display:grid;grid-template-columns:4fr 8fr;gap:18px;border-top:1px solid rgba(32,31,29,0.16);padding-top:14px;}
body .pp-post-kv-k{font-family:'Noto Serif Thai',serif;font-size:17px;line-height:1.45;min-width:0;color:#201F1D;}
body .pp-post-kv-v{font-size:14.5px;line-height:1.85;color:#605D5D;min-width:0;text-wrap:pretty;}
body .pp-post-table{border:1px solid rgba(32,31,29,0.16);border-radius:12px;overflow:hidden;margin-top:9px;}
body .pp-post-table table{width:100%;border-collapse:collapse;font-family:'Sarabun',sans-serif;margin:0;}
body .pp-post-table caption{text-align:left;padding:14px 18px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:#7A7676;border-bottom:1px solid rgba(32,31,29,0.16);}
body .pp-post-table th,body .pp-post-table td{text-align:left;vertical-align:top;padding:14px 18px;
  border:0;border-bottom:1px solid rgba(32,31,29,0.16);background:transparent;}
body .pp-post-table thead th{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:14px;border-bottom:1px solid #201F1D;}
body .pp-post-table tbody th{font-weight:400;font-size:14.5px;color:#201F1D;}
body .pp-post-table td{font-size:14px;color:#605D5D;line-height:1.7;}
body .pp-post-table td.pp-post-td-b{font-size:14.5px;color:#13483B;font-feature-settings:'tnum';}
body .pp-post-table tbody tr:last-child th,body .pp-post-table tbody tr:last-child td{border-bottom:0;}
body .pp-post-table-note{padding:14px 18px;font-size:13px;line-height:1.75;color:#605D5D;background:#F8F4F4;
  border-top:1px solid rgba(32,31,29,0.16);}
body .pp-post-note{border:1px dashed #5DA391;border-radius:12px;padding:14px 18px;font-size:13px;line-height:1.75;
  color:#0B2A22;background:#E6F2EE;}
body .pp-post-takeaway{border-left:2px solid #1F6F5C;padding:9px 0 9px 18px;display:grid;gap:9px;margin-top:9px;}
body .pp-post-kicker{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:#13483B;}
body .pp-post-takeaway p{font-family:'Noto Serif Thai',serif;font-size:21px;line-height:1.6;max-width:54ch;
  text-align:left;color:#201F1D;}
body .pp-post-rel{display:grid;gap:14px;margin-top:9px;}
body .pp-post-rel h2{font-size:24px;line-height:1.35;margin-top:0;}
body .pp-post-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
body .pp-post-rel-card{min-width:0;display:grid;gap:7px;align-content:start;padding:18px;border:1px solid rgba(32,31,29,0.16);
  border-radius:12px;background:#F3F2F2;color:#201F1D;text-decoration:none;transition:border-color 160ms ease;}
body .pp-post-rel-card:hover{border-color:#A9CEC2;}
body .pp-post-rel-th{font-family:'Noto Serif Thai',serif;font-size:18px;line-height:1.4;}
body .pp-post-rel-note{font-size:13px;line-height:1.75;color:#605D5D;text-wrap:pretty;}
body .pp-post-rel-more{font-size:13px;color:#13483B;margin-top:3px;}
body .pp-post-rel-head{display:flex;justify-content:space-between;align-items:flex-end;}

@media (max-width:1024px){
  body .pp-post-content{grid-template-columns:4fr 8fr;gap:28px;}
  body .pp-post-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  /* archive: hero and the two-column blocks stack; stats stay 2 x 1 */
  body .pp-blog-hero,body .pp-blog-why-row,body .pp-blog-cta{flex-direction:column;gap:var(--space-6);}
  body .pp-blog-hero > .e-con,body .pp-blog-why-row > .e-con,body .pp-blog-cta > .e-con{width:100% !important;}
  body .pp-blog-h1 .elementor-heading-title{font-size:34px !important;}
  body .pp-blog-stat-n .elementor-heading-title{font-size:32px !important;}
  body .pp-blog-why{grid-template-columns:minmax(0,1fr);gap:14px;}
  body .pp-blog-wall img{height:200px;}
  /* post: TOC above the article, no longer sticky; rows and cards stack; table scrolls */
  body .pp-post-h1 .elementor-heading-title{font-size:32px !important;line-height:1.28 !important;}
  body .pp-post-lede .elementor-widget-container,body .pp-post-lede{font-size:16px !important;}
  body .pp-post-content{grid-template-columns:minmax(0,1fr);gap:28px;}
  body .pp-post-toc{position:static;}
  body .pp-post-body h2{font-size:24px;margin-top:14px;}
  body .pp-post-body p{text-align:left;}
  body .pp-post-kv-row{grid-template-columns:minmax(0,1fr);gap:4px;}
  body .pp-post-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  body .pp-post-table table{min-width:520px;}
  body .pp-post-table th,body .pp-post-table td{padding:12px 14px;}
  body .pp-post-rel-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  body .pp-post-takeaway p{font-size:18px;}
  body .pp-post-rel-head{flex-direction:column;align-items:flex-start;gap:6px;}
  /* the meta row wraps to two lines here, so the hairline separators go */
  body .pp-post-meta{gap:6px 14px;}
  body .pp-post-meta > .elementor-widget + .elementor-widget{padding-left:0;}
  body .pp-post-meta > .elementor-widget + .elementor-widget::before{display:none;}
}

/* ===== theme templates: category archive, search results, 404 ==================================
   Structural layer only, `body ` prefixed. They reuse pp-blog-* / pp-posts-blog from blog.css;
   this adds the hub-link grid, the search form's pill shape, the archive grid's pagination and
   the phone breakpoints. */
body .pp-arch-h1 .elementor-heading-title,body .pp-404-h1 .elementor-heading-title{max-width:24ch;text-wrap:pretty;}
body .pp-search-copy,body .pp-404-copy{max-width:720px;}
body .pp-search-hint p{margin:0;}
body .pp-404-kicker p{margin:0;letter-spacing:0.16em;text-transform:uppercase;}
body .pp-search .elementor-search-form{border-radius:999px;overflow:hidden;}
body .pp-search .elementor-search-form__container{border-radius:999px;}
body .pp-search .elementor-search-form__input{padding-left:20px;}
body .pp-search .elementor-search-form__submit{border-radius:0 999px 999px 0;}
body .pp-hub-grid{display:flex;flex-wrap:wrap;gap:10px;}
body .pp-hub-grid > .elementor-widget{width:auto;}
body .pp-hub-btn .elementor-button{min-height:42px;display:inline-flex;align-items:center;white-space:nowrap;
  transition:background 140ms ease,border-color 140ms ease;}
body .pp-hub-btn .elementor-button:hover{border-color:#A9CEC2;background:#E6F2EE;color:#0B2A22;}
/* archive grid: no category pill (the archive is the category), pagination as text links */
body .pp-posts-archive .elementor-post__meta-data{display:none;}
body .pp-posts-archive .elementor-pagination{margin-top:28px;font-family:'Sarabun',sans-serif;}
body .pp-posts-archive .elementor-pagination .page-numbers{padding:6px 10px;border-radius:999px;text-decoration:none;}
body .pp-posts-archive .elementor-pagination .page-numbers.current{background:#E6F2EE;color:#13483B;}
body .pp-posts-archive .elementor-posts-nothing-found{padding:28px 0;text-align:left;}

@media (max-width:767px){
  body .pp-arch-h1 .elementor-heading-title,body .pp-404-h1 .elementor-heading-title{font-size:34px !important;}
  body .pp-hub-grid > .elementor-widget{width:auto;}
  body .pp-hub-btn .elementor-button{min-height:40px;}
  body .pp-search .elementor-search-form__submit{min-width:84px;}
}

/* search form: self-contained so it never depends on Elementor Pro's widget stylesheet being enqueued */
body .pp-search .elementor-search-form__container{display:flex;align-items:stretch;min-height:50px;border:1px solid rgba(32,31,29,0.16);
  border-radius:999px;overflow:hidden;background:#F3F2F2;}
body .pp-search .elementor-search-form__input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:0 20px;
  font:15px 'Sarabun',sans-serif;color:#201F1D;outline:none;box-shadow:none;}
body .pp-search .elementor-search-form__input:focus{background:#FFFFFF;}
body .pp-search .elementor-search-form__submit{flex:0 0 auto;min-width:110px;border:0;border-radius:0;background:#13483B;color:#F3F2F2;
  font:15px 'Sarabun',sans-serif;padding:0 22px;cursor:pointer;transition:background 140ms ease;}
body .pp-search .elementor-search-form__submit:hover{background:#0B2A22;}

/* ===== product hero (template 283, comp 4.1) — scoped to body.single-pp_product ===================
   The hubs reuse pp-hero-grid / pp-hero-actions as a column container, so these must not leak there.
   The row container gave the pricebox a 100% basis, squeezing both buttons into 3-line circles,
   and the native image-carousel had no box: 7fr/5fr grid, pricebox at its own width, slider as a
   356px rounded frame with cover-fit slides (the CLS source: slides had no size until Swiper ran). */
body.single-pp_product .pp-hero-grid{align-items:center;flex-wrap:nowrap;}
body.single-pp_product .pp-hero-grid > .pp-hero-copy{flex:7 1 0;min-width:0;width:auto;}
body.single-pp_product .pp-hero-grid > .pp-hero-slider{flex:5 1 0;min-width:0;width:auto;}
body.single-pp_product .pp-hero-actions{align-items:center;}
body.single-pp_product .pp-hero-actions > .pp-hero-pricebox{width:auto;flex:0 0 auto;}
body.single-pp_product .pp-hero-actions .elementor-button{white-space:nowrap;}
body.single-pp_product .pp-hero-slider .elementor-image-carousel-wrapper{border-radius:16px;overflow:hidden;border:1px solid #605D5D;background:#0b0b0b;}
body.single-pp_product .pp-hero-slider .swiper-slide{height:356px;}
body.single-pp_product .pp-hero-slider .swiper-slide-inner{display:block;height:100%;}
body.single-pp_product .pp-hero-slider .swiper-slide-image{width:100%;height:100%;object-fit:cover;display:block;}
body.single-pp_product .pp-hero-slider .swiper-pagination-bullet{background:#BAB6B6;opacity:0.6;}
body.single-pp_product .pp-hero-slider .swiper-pagination-bullet-active{background:#5DA391;opacity:1;}
@media (max-width:767px){
  body.single-pp_product .pp-hero-grid{flex-wrap:wrap;}
  body.single-pp_product .pp-hero-grid > .pp-hero-copy,body.single-pp_product .pp-hero-grid > .pp-hero-slider{flex:0 0 auto;width:100%;}
  /* Elementor's .e-con.e-flex (0,2,0) outranks the kit's stacking rule, so the row only stacked
     because every child was 100% wide; the pricebox must stay full width once it is width:auto. */
  body.single-pp_product .e-con.e-flex.pp-hero-actions{flex-direction:column;align-items:stretch;}
  body.single-pp_product .pp-hero-actions > .pp-hero-pricebox{width:100%;flex:0 0 auto;}
  body.single-pp_product .pp-hero-slider .swiper-slide{height:220px;}
}
/* price section head row: the CTA got a 100% basis and shrank into a 2-line pill next to the 1140px
   heading column (all 32 products). Heading column flexes, button keeps its own width. */
body.single-pp_product .pp-price-headrow{align-items:flex-start;}
body.single-pp_product .pp-price-headrow > .pp-price-head-col{flex:1 1 auto;min-width:0;width:auto;}
body.single-pp_product .pp-price-headrow > .pp-price-cta{flex:0 0 auto;width:auto;}
body.single-pp_product .pp-price-cta .elementor-button{white-space:nowrap;}
@media (max-width:767px){
  body.single-pp_product .pp-price-headrow > .pp-price-head-col,body.single-pp_product .pp-price-headrow > .pp-price-cta{flex:0 0 auto;width:100%;}
  body.single-pp_product .pp-price-cta .elementor-button{width:100%;justify-content:center;}
}
/* price table on phones: the head row is hidden, so each numeric cell carries its column header as
   data-label (pp-widgets.php) and shows it as a label/value pair; the band label leads the group. */
@media (max-width:767px){
  body .pp-price-row > span[role="cell"]:first-child{font-weight:600;padding-bottom:4px;}
  body .pp-price-row > span.pp-num[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
  body .pp-price-row > span.pp-num[data-label]::before{content:attr(data-label);font-size:12.5px;font-weight:400;
    color:var(--color-neutral-700);font-feature-settings:normal;}
  body .pp-price-row > span.pp-num[data-label=""]::before{content:none;}
}

/* ===== services anchor nav on phones (comp 2.2 .anchornav) ==========================================
   The 8 hub chips wrapped into a 142px block; the mobile comp pins them under the header as one
   scrolling line. Header is static on phones, so the nav sticks at the top of the viewport. */
@media (max-width:767px){
  body .pp-anchornav{position:sticky;top:0;z-index:18;background:var(--color-neutral-100);
    border-bottom:1px solid var(--color-divider);padding-top:0 !important;padding-bottom:0 !important;}
  body .pp-anchornav .e-con,body .pp-anchornav .e-con-inner{padding-top:0 !important;padding-bottom:0 !important;}
  /* the row sits 50px in (16 gutter + 18 + 16 nested padding); pull it to the viewport edge and
     pad it back to the 16px gutter so the strip scrolls edge to edge */
  body .pp-anchornav .pp-anchorrow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    width:calc(100% + 100px);max-width:none;margin:0 -50px;padding:9px 16px !important;scroll-padding:0 16px;}
  body .pp-anchorrow::-webkit-scrollbar{display:none;}
  body .pp-anchorrow > .elementor-widget{width:auto;flex:0 0 auto;}
  body .pp-anchor-label{display:none;}
  body .pp-anchor .elementor-button{font-size:13px;min-height:40px;padding:0 15px;display:inline-flex;align-items:center;}
}

/* ===== legal pages (/privacy-policy/) ===========================================================
   Blog hero + post-body type; the body column is capped so 70ch paragraphs and the lists read as one
   measure. Lists are the only new element (posts use kv rows instead). */
body .pp-legal-meta p{margin:0;letter-spacing:0.02em;}
body .pp-legal-col{max-width:820px;}
body .pp-legal-body ul{margin:0;padding-left:1.25em;max-width:70ch;display:grid;gap:8px;}
body .pp-legal-body li{line-height:1.8;text-wrap:pretty;}
body .pp-legal-body li strong{font-weight:600;color:#201F1D;}
body .pp-legal-body h2{font-size:24px;line-height:1.35;margin-top:22px;}
body .pp-legal-body p{text-align:left;}
@media (max-width:767px){
  body .pp-legal-h1 .elementor-heading-title{font-size:34px !important;}
  body .pp-legal-body h2{font-size:21px;margin-top:14px;}
}

/* ===== price configurator (pp-configurator widget, /sticker/car-wrap/) =============================
   Two columns on desktop: the vehicle (tabs, side + top drawings, quick presets, zone chips) and a
   sticky summary panel. Zones are SVG shapes coloured by state; chips mirror them for touch and for
   screen readers. The band hides itself on products that have no configurator entry. */
body .pp-config-sec:not(:has(.pp-config)){display:none;}
body .pp-config{display:grid;gap:26px;}
body .pp-cfg-h{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:34px;line-height:1.25;margin:0 0 8px;color:var(--color-text);}
body .pp-cfg-lede{margin:0;max-width:70ch;font-size:15px;line-height:1.8;color:var(--color-neutral-700);}
body .pp-cfg-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start;}
body .pp-cfg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
body .pp-cfg-tab{font:14px 'Sarabun',sans-serif;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--color-divider);
  background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:background 140ms ease,border-color 140ms ease;}
body .pp-cfg-tab:hover{border-color:var(--color-accent-300);background:var(--color-accent-100);}
body .pp-cfg-tab[aria-selected="true"]{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#F3F2F2;}
body .pp-cfg-figure{display:grid;gap:10px;}
body .pp-cfg-figure[hidden]{display:none;}
body .pp-cfg-view{position:relative;border:1px solid var(--color-divider);border-radius:14px;background:#FFFFFF;padding:22px 14px 10px;}
body .pp-cfg-viewlabel{position:absolute;top:8px;left:14px;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-neutral-700);}
body .pp-cfg-svg{display:block;width:100%;height:auto;overflow:visible;}
body .pp-cfg-body{fill:#CFCACA;stroke:#8A8484;stroke-width:1;}
body .pp-cfg-glass{fill:#DCE6E3;stroke:#8A8484;stroke-width:1;}
body .pp-cfg-bed{fill:#EAE7E7;stroke:#8A8484;stroke-width:1;stroke-dasharray:4 3;}
body .pp-cfg-wheel{fill:#3A3736;}
body .pp-cfg-hub{fill:#8A8484;}
body .pp-cfg-ground{stroke:var(--color-divider);stroke-width:1;}
body .pp-cfg-zone{fill:#E3DFDF;stroke:#8A8484;stroke-width:1;cursor:pointer;transition:fill 120ms ease,stroke 120ms ease;}
body .pp-cfg-zone:hover,body .pp-cfg-zone:focus-visible{fill:var(--color-accent-100);stroke:var(--color-accent-500);outline:none;}
body .pp-cfg-zone.is-on{fill:var(--color-accent-400);stroke:var(--color-accent-700);}
body .pp-cfg-zone.is-on:hover{fill:var(--color-accent-500);}
body .pp-cfg-figure-iso{grid-template-columns:1fr 1fr;}
body .pp-cfg-figure-iso .pp-cfg-view{padding:26px 10px 8px;}
body .pp-cfg-svg-iso{max-height:300px;margin:0 auto;}
body .pp-cfg-svg-iso path{stroke:#8A8484;stroke-width:0.8;stroke-linejoin:round;}
body .pp-cfg-pillar{fill:#9A9494;}
body .pp-cfg-under{fill:#4A4646;stroke:none !important;}
body .pp-cfg-bedfloor{fill:#BDB7B7;}
body .pp-cfg-svg-iso .pp-cfg-wheel,body .pp-cfg-svg-iso .pp-cfg-hub{stroke:none !important;}
body .pp-cfg-svg-iso .pp-cfg-zone{outline:none;}
body .pp-cfg-zone .f-top{fill:#E8E4E4;}
body .pp-cfg-zone .f-side{fill:#D7D2D2;}
body .pp-cfg-zone .f-end{fill:#C6C0C0;}
body .pp-cfg-zone:hover .f-top,body .pp-cfg-zone:focus-visible .f-top{fill:var(--color-accent-100);}
body .pp-cfg-zone:hover .f-side,body .pp-cfg-zone:focus-visible .f-side{fill:var(--color-accent-200,#CFE3DC);}
body .pp-cfg-zone:hover .f-end,body .pp-cfg-zone:focus-visible .f-end{fill:var(--color-accent-300);}
body .pp-cfg-zone:hover path,body .pp-cfg-zone:focus-visible path{stroke:var(--color-accent-500);}
body .pp-cfg-zone.is-on .f-top{fill:var(--color-accent-300);}
body .pp-cfg-zone.is-on .f-side{fill:var(--color-accent-400);}
body .pp-cfg-zone.is-on .f-end{fill:var(--color-accent-500);}
body .pp-cfg-zone.is-on path{stroke:var(--color-accent-700);}
body .pp-cfg-zone.is-on:hover .f-side{fill:var(--color-accent-500);}
body .pp-cfg-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 8px;}
body .pp-cfg-presetlabel{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-neutral-700);margin-right:4px;}
body .pp-cfg-preset{font:13.5px 'Sarabun',sans-serif;min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--color-accent-300);
  background:var(--color-accent-100);color:var(--color-accent-900);cursor:pointer;}
body .pp-cfg-preset:hover{background:var(--color-accent-300);}
body .pp-cfg-preset[data-preset="none"]{background:transparent;border-color:var(--color-divider);color:var(--color-neutral-700);}
body .pp-cfg-preset:focus,body .pp-cfg-tab:focus,body .pp-cfg-copy:focus{outline:none;box-shadow:0 0 0 2px var(--color-accent-300);}
body .pp-cfg-mini{display:none;}
body .pp-cfg-zones{display:grid;gap:12px;}
body .pp-cfg-grouplabel{display:block;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-neutral-700);margin-bottom:6px;}
body .pp-cfg-chips{display:flex;flex-wrap:wrap;gap:8px;}
body .pp-cfg-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--color-divider);
  background:var(--color-bg);cursor:pointer;font-family:'Sarabun',sans-serif;transition:background 140ms ease,border-color 140ms ease;}
body .pp-cfg-chip input{margin:0;accent-color:var(--color-accent-700);width:16px;height:16px;}
body .pp-cfg-chipname{font-size:14px;color:var(--color-text);}
body .pp-cfg-chiparea{font-size:12px;color:var(--color-neutral-700);font-feature-settings:'tnum';}
body .pp-cfg-chip:hover{border-color:var(--color-accent-300);}
body .pp-cfg-chip.is-on{background:var(--color-accent-100);border-color:var(--color-accent-400);}
body .pp-cfg-panel{position:sticky;top:84px;display:grid;gap:16px;border:1px solid var(--color-divider);border-radius:14px;padding:20px;background:var(--color-neutral-100);}
body .pp-cfg-optlabel{display:block;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-neutral-700);margin-bottom:8px;}
body .pp-cfg-mats{display:grid;gap:6px;}
body .pp-cfg-mat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 12px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;background:#FFFFFF;}
body .pp-cfg-mat input{grid-row:1 / span 2;margin:0;accent-color:var(--color-accent-700);}
body .pp-cfg-matname{font-size:14.5px;color:var(--color-text);}
body .pp-cfg-mathint{font-size:12px;color:var(--color-neutral-700);}
body .pp-cfg-mat:has(input:checked){border-color:var(--color-accent-400);background:var(--color-accent-100);}
body .pp-cfg-both{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--color-text);cursor:pointer;}
body .pp-cfg-both input{margin:0;accent-color:var(--color-accent-700);}
body .pp-cfg-sum{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--color-divider);}
body .pp-cfg-sumrow{display:flex;justify-content:space-between;font-size:14px;color:var(--color-neutral-700);}
body .pp-cfg-sumrow strong{font-weight:500;color:var(--color-text);font-feature-settings:'tnum';}
body .pp-cfg-total{display:grid;gap:2px;padding:12px 0 4px;}
body .pp-cfg-totallabel{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-neutral-700);}
body .pp-cfg-price{font-family:'Noto Serif Thai',serif;font-weight:500;font-size:30px;line-height:1.2;color:var(--color-accent-700);font-feature-settings:'tnum';}
body .pp-cfg-tier{font-size:12.5px;color:var(--color-neutral-700);}
body .pp-cfg-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
body .pp-cfg-list li{font-size:12.5px;padding:3px 9px;border-radius:999px;background:#FFFFFF;border:1px solid var(--color-divider);color:var(--color-text);}
body .pp-cfg-actions{display:grid;gap:8px;}
body .pp-cfg-line{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;background:var(--color-accent-700);color:#F3F2F2 !important;
  font:15px 'Sarabun',sans-serif;text-decoration:none;transition:background 140ms ease;}
body .pp-cfg-line:hover{background:var(--color-accent-900);}
body .pp-cfg-copy{min-height:40px;border-radius:999px;border:1px solid var(--color-divider);background:transparent;font:14px 'Sarabun',sans-serif;color:var(--color-text);cursor:pointer;}
body .pp-cfg-terms{margin:0;font-size:12px;line-height:1.7;color:var(--color-neutral-700);}
body .pp-cfg-note{margin-top:0;}
@media (max-width:1024px){
  body .pp-cfg-grid{grid-template-columns:1fr;}
  body .pp-cfg-panel{position:static;}
}
@media (max-width:767px){
  body .pp-cfg-mini{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin:4px 0 14px;
    padding:10px 14px;border-radius:12px;background:var(--color-accent-100);border:1px solid var(--color-accent-300);}
  body .pp-cfg-minilabel{grid-row:1;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent-900);}
  body .pp-cfg-miniprice{grid-column:1;grid-row:2;font-family:'Noto Serif Thai',serif;font-weight:500;font-size:20px;color:var(--color-accent-700);font-feature-settings:'tnum';}
  body .pp-cfg-miniarea{grid-column:2;grid-row:2;font-size:12.5px;color:var(--color-neutral-700);text-align:right;}
  body .pp-cfg-h{font-size:26px;}
  body .pp-cfg-view{padding:22px 8px 8px;}
  body .pp-cfg-figure-iso{grid-template-columns:1fr;}
  body .pp-cfg-svg-iso{max-height:240px;}
  body .pp-cfg-tab{min-height:36px;padding:0 13px;font-size:13.5px;}
  body .pp-cfg-panel{padding:16px;}
  body .pp-cfg-price{font-size:26px;}
}
/* ---- shared price calculator (pp-calculator.php); reuses the configurator's .pp-cfg-* panel styles ---- */
body .pp-calc-sizerow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin-bottom:14px;}
body .pp-calc-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
body .pp-calc-fieldlabel{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-neutral-700);}
body .pp-calc-inputwrap{display:flex;align-items:center;gap:6px;}
body .pp-calc-field input[type=number],body .pp-calc-field input[type=text]{font:16px 'Sarabun',sans-serif;height:44px;padding:0 12px;border:1px solid var(--color-divider);border-radius:10px;
  background:#FFFFFF;color:var(--color-text);width:120px;max-width:100%;}
body .pp-calc-field input[type=text]{width:100%;}
body .pp-calc-textfield{width:100%;margin-bottom:14px;}
body .pp-calc-field input:focus{outline:none;border-color:var(--color-accent-400);box-shadow:0 0 0 2px var(--color-accent-100);}
body .pp-calc-unit{font-size:13px;color:var(--color-neutral-700);}
body .pp-calc-times{font-size:20px;color:var(--color-neutral-700);padding-bottom:10px;}
body .pp-calc-preview{margin:0 0 4px;}
body .pp-calc-rect{max-height:260px;}
body .pp-calc-rectbox{fill:var(--color-accent-100);stroke:var(--color-accent-500);stroke-width:1.2;transition:all 160ms ease;}
body .pp-calc-rect text{font:12px 'Sarabun',sans-serif;fill:var(--color-neutral-700);}
body .pp-calc-rect .pp-calc-area{font-size:15px;font-weight:600;fill:var(--color-accent-700);}
body .pp-calc-store{max-height:340px;margin:0 auto;}
body .pp-calc-wall{fill:#EFECEC;}
body .pp-calc-pane rect{fill:#DCE6E3;stroke:#8A8484;stroke-width:1;cursor:pointer;transition:fill 120ms ease,stroke 120ms ease;}
body .pp-calc-pane text{font:14px 'Sarabun',sans-serif;fill:#5D5757;pointer-events:none;}
body .pp-calc-pane:hover rect,body .pp-calc-pane:focus-visible rect{fill:var(--color-accent-100);stroke:var(--color-accent-500);}
body .pp-calc-pane.is-on rect{fill:var(--color-accent-400);stroke:var(--color-accent-700);}
body .pp-calc-pane.is-on text{fill:#F3F2F2;}
body .pp-calc-pane:focus{outline:none;}
body .pp-calc-handle{fill:#5D5757;}
body .pp-calc-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
body .pp-calc-chiplabel{display:flex;align-items:center;gap:8px;cursor:pointer;}
body .pp-calc-panesize{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-neutral-700);}
body .pp-calc-panesize input{font:13px 'Sarabun',sans-serif;width:56px;height:30px;padding:0 6px;border:1px solid var(--color-divider);border-radius:8px;background:#FFFFFF;}
body .pp-calc-letterview{text-align:center;padding:34px 14px 14px;}
body .pp-calc-letters{font-family:'Noto Serif Thai',serif;font-weight:600;line-height:1.2;color:var(--color-accent-700);letter-spacing:0.04em;word-break:break-word;transition:font-size 160ms ease;}
body .pp-calc-lettermeta{font-size:12.5px;color:var(--color-neutral-700);margin-top:10px;}
body .pp-calc-ladder{display:grid;gap:4px;padding-top:4px;}
body .pp-calc-ladrow{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--color-neutral-700);}
body .pp-calc-ladrow strong{font-weight:500;color:var(--color-text);font-feature-settings:'tnum';}
body .pp-calc-ladrow.is-on{background:var(--color-accent-100);color:var(--color-accent-900);}
body .pp-calc-ladrow.is-on strong{color:var(--color-accent-700);}
body .pp-calc-rows .pp-calc-quote{opacity:0.7;}
body .pp-calc.is-quote .pp-cfg-price{font-size:22px;}
body .pp-calc.is-empty .pp-cfg-price{font-size:20px;color:var(--color-neutral-700);}
@media (max-width:767px){
  body .pp-calc-field input[type=number]{width:104px;}
  body .pp-calc-store{max-height:240px;}
  body .pp-calc-letterview{padding:30px 10px 12px;}
}
/* ---- header navigation (pp-nav.php / pp-nav.js): sticky bar, mega panels, phone drawer ---- */
body header.elementor-location-header{position:sticky;top:calc(-1 * var(--pp-topbar-h,34px));z-index:90;}
body.admin-bar header.elementor-location-header{top:calc(32px - var(--pp-topbar-h,34px));}
body header.elementor-location-header .pp-hdr{position:relative;transition:box-shadow 200ms ease;}
body header.elementor-location-header.is-stuck .pp-hdr{box-shadow:0 10px 30px -18px rgba(32,31,29,0.45);}
html.pp-drawer-open{overflow:hidden;}
body .pp-hdr-nav{position:static;flex:1 1 auto;min-width:0;}
body .pp-nav{position:static;display:flex;align-items:center;}
body .pp-nav-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;}
body .pp-nav-item{position:static;display:flex;align-items:center;margin:0;}
body .pp-nav-rel{position:relative;display:flex;align-items:center;}
body .pp-nav-link{display:inline-flex;align-items:center;height:38px;padding:0 11px;border-radius:999px;font:500 14.5px/1 'Sarabun',sans-serif;color:var(--color-text);white-space:nowrap;text-decoration:none;transition:background 140ms ease,color 140ms ease;}
body .pp-nav-item.has-panel .pp-nav-link{padding-right:4px;border-top-right-radius:0;border-bottom-right-radius:0;}
body .pp-nav-chev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:38px;padding:0 6px 0 2px;border:0;background:transparent;border-radius:0 999px 999px 0;cursor:pointer;color:var(--color-neutral-700);}
body .pp-nav-chev svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;transition:transform 160ms ease;}
body .pp-nav-item:hover .pp-nav-link,body .pp-nav-item:hover .pp-nav-chev,body .pp-nav-item.is-open .pp-nav-link,body .pp-nav-item.is-open .pp-nav-chev,body .pp-nav-link:focus-visible,body .pp-nav-chev:focus-visible{background:var(--color-accent-100);color:var(--color-accent-700);outline:none;}
body .pp-nav-item.is-open .pp-nav-chev svg{transform:rotate(180deg);}
body .pp-nav-link:focus-visible,body .pp-nav-chev:focus-visible{box-shadow:0 0 0 2px var(--color-accent-300);}
body .pp-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#FFFFFF;border:1px solid var(--color-divider);border-radius:14px;box-shadow:0 24px 50px -24px rgba(32,31,29,0.5);padding:8px;display:none;z-index:95;}
body .pp-drop a{display:flex;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:9px;font-size:14.5px;color:var(--color-text);text-decoration:none;}
body .pp-drop a small{color:var(--color-neutral-700);font-size:12.5px;white-space:nowrap;font-feature-settings:'tnum';}
body .pp-drop a:hover,body .pp-drop a:focus-visible{background:var(--color-accent-100);color:var(--color-accent-700);outline:none;}
body .pp-drop .pp-drop-all{margin:6px 4px 2px;padding-top:9px;border-top:1px solid var(--color-divider);border-radius:0;color:var(--color-accent-700);font-weight:500;}
body .pp-nav-item.is-open .pp-drop{display:block;}
body .pp-mega{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);box-shadow:0 30px 60px -30px rgba(32,31,29,0.5);display:none;z-index:95;}
body .pp-nav-item.is-open .pp-mega{display:block;}
body .pp-mega-in{max-width:1240px;margin:0 auto;padding:26px 18px 28px;display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:32px;align-items:start;}
body .pp-mega-title{display:block;font:500 24px/1.2 'Noto Serif Thai',serif;color:var(--color-text);margin-bottom:6px;}
body .pp-mega-head p{margin:0 0 14px;color:var(--color-neutral-700);font-size:14px;line-height:1.6;}
body .pp-mega-head a{color:var(--color-accent-700);font-weight:500;font-size:14px;text-decoration:none;}
body .pp-mega-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;align-content:start;margin:0;padding:0;list-style:none;}
body .pp-mega-list li{margin:0;}
body .pp-mega-list a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 10px;border-radius:9px;font-size:14.5px;color:var(--color-text);text-decoration:none;border-left:2px solid transparent;}
body .pp-mega-list a small{color:var(--color-neutral-500);font-size:12px;white-space:nowrap;font-feature-settings:'tnum';}
body .pp-mega-list a:hover,body .pp-mega-list a:focus-visible,body .pp-mega-list a.is-hot{background:var(--color-accent-100);color:var(--color-accent-700);border-left-color:var(--color-accent-400);outline:none;}
body .pp-mega-list a.is-hot small{color:var(--color-accent);}
body .pp-mega-preview{display:block;border:1px solid var(--color-divider);border-radius:14px;overflow:hidden;background:var(--color-bg);text-decoration:none;color:var(--color-text);}
body .pp-mega-img{display:block;aspect-ratio:4/3;background:var(--color-neutral-200);}
body .pp-mega-img img{display:block;width:100%;height:100%;object-fit:cover;}
body .pp-mega-cap{display:block;padding:12px 14px 14px;}
body .pp-mega-cap b{display:block;font:500 16px 'Noto Serif Thai',serif;}
body .pp-mega-desc{display:block;margin:4px 0 8px;font-size:13px;color:var(--color-neutral-700);line-height:1.55;min-height:40px;}
body .pp-mega-cap em{font-style:normal;font-size:13px;color:var(--color-accent-700);font-weight:500;}
body .pp-burger{display:none;width:44px;height:44px;border:1px solid var(--color-divider);border-radius:999px;background:transparent;cursor:pointer;padding:0;}
body .pp-burger i{display:block;width:18px;height:2px;background:var(--color-text);margin:4px auto;border-radius:2px;}
body .pp-drawer{position:fixed;inset:0;background:rgba(32,31,29,0.45);z-index:200;}
body .pp-drawer[hidden]{display:none;}
body .pp-drawer-sheet{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--color-bg);overflow:auto;padding:14px 16px 32px;box-shadow:-20px 0 40px -20px rgba(0,0,0,0.4);}
body .pp-drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
body .pp-drawer-brand{font:500 18px 'Noto Serif Thai',serif;color:var(--color-text);text-decoration:none;}
body .pp-drawer-close{width:40px;height:40px;border:1px solid var(--color-divider);border-radius:999px;background:#FFFFFF;font-size:22px;line-height:1;cursor:pointer;color:var(--color-text);}
body .pp-drawer-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px;}
body .pp-drawer-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:999px;border:1px solid var(--color-accent-700);font:500 13.5px 'Sarabun',sans-serif;color:var(--color-accent-700);text-decoration:none;}
body .pp-drawer-btn.is-solid{background:var(--color-accent-700);color:#F3F2F2;}
body .pp-drawer-acc{border-top:1px solid var(--color-divider);}
body .pp-drawer-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 2px;font-weight:500;font-size:15px;}
body .pp-drawer-acc summary::-webkit-details-marker{display:none;}
body .pp-drawer-acc summary::after{content:'';width:8px;height:8px;border-right:1.5px solid var(--color-neutral-700);border-bottom:1.5px solid var(--color-neutral-700);transform:rotate(45deg);transition:transform 160ms ease;flex:0 0 8px;}
body .pp-drawer-acc[open] summary::after{transform:rotate(-135deg);}
body .pp-drawer-n{margin-left:auto;margin-right:10px;color:var(--color-neutral-500);font-size:12px;font-weight:400;}
body .pp-drawer-item{display:flex;align-items:center;gap:12px;padding:7px 2px 7px 8px;font-size:14.5px;color:var(--color-text);text-decoration:none;}
body .pp-drawer-item img,body .pp-drawer-noimg{width:52px;height:40px;object-fit:cover;border-radius:7px;flex:0 0 52px;background:var(--color-neutral-200);}
body .pp-drawer-item small{display:block;color:var(--color-neutral-500);font-size:12px;}
body .pp-drawer-all{display:block;padding:8px 2px 12px 8px;color:var(--color-accent-700);font-weight:500;font-size:14px;text-decoration:none;}
body .pp-drawer-link{display:block;padding:12px 2px;border-top:1px solid var(--color-divider);font-weight:500;font-size:15px;color:var(--color-text);text-decoration:none;}
body .pp-nav-link{padding:0 8px;font-size:14px;}
body .pp-nav-item.has-panel .pp-nav-link{padding-right:3px;}
body .pp-nav-chev{width:19px;padding:0 5px 0 1px;}
@media (max-width:1200px){
  body .pp-hdr-tel{display:none;}
}
@media (max-width:1024px){
  body .pp-nav-list{display:none;}
  body .pp-hdr-tel{display:block;}
  body .pp-burger{display:block;}
  body .pp-hdr-nav{flex:0 0 auto;order:5;}
  body .pp-hdr-tel{order:4;}
}
@media (prefers-reduced-motion:reduce){body .pp-nav-chev svg,body .pp-nav-link,body header.elementor-location-header .pp-hdr{transition:none;}}

/* ===== hub fact card (pp-hub-card, sandbox/pp-hubcard.php) ==================================
   The category hubs' facts box now uses the product pages' .pp-gcard grammar (task #23), so the
   two page types read as one system. The widget replaces the .pp-facts container in the 7fr/5fr
   intro grid inside the old right-hand wrapper container, which stays the grid item. */
body .pp-introgrid > .e-con:has(> .elementor-widget-pp-hub-card){width:auto;max-width:none;min-width:0;justify-self:stretch;}
body .pp-gcard-hub .pp-gcard-price small{font-size:13.5px;}
@media (max-width:767px){
  body .pp-introgrid > .e-con:has(> .elementor-widget-pp-hub-card){order:-1;}
}
/* in-page anchors (#pricing, #configurator, post headings) land below the sticky bar */
body .e-con[id],body .pp-post-body h2[id],body #takeaway,body #related-pages{scroll-margin-top:84px;}

/* ===== per-product static folio strips (pp-product-render.php): fewer than six tiles keep a full-width grid ===== */
body .pp-folio.pp-folio-3{grid-template-columns:repeat(3,1fr);}
body .pp-folio.pp-folio-4{grid-template-columns:repeat(4,1fr);}
body .pp-folio.pp-folio-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1024px){body .pp-folio.pp-folio-4,body .pp-folio.pp-folio-5{grid-template-columns:repeat(3,1fr);}}

/* ===== service cards 2026-09-19: two hover buttons, clickable title, per-hub price link (home + /services/) =====
   Desktop: the two buttons rise from the photo edge over a soft gradient (client picked option B); the title is
   accent green with a chevron and underlines on hover. Phones have no hover: the overlay is hidden and the filled
   "ดูบริการ…" button repeats in the card body (pp-card-go). Overlay containers pass clicks through to the photo link. */
body .pp-card-over,body .pp-cat-over{position:absolute;z-index:1;inset:0;display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:8px;padding:12px;opacity:1;pointer-events:none;background:linear-gradient(to top,rgba(15,22,20,0.85) 0%,rgba(15,22,20,0.35) 55%,rgba(15,22,20,0) 100%);}
body .pp-card-over > .elementor-widget-button,body .pp-cat-over > .elementor-widget-button{width:auto;transform:translateY(8px);opacity:0;transition:transform 180ms ease,opacity 180ms ease;pointer-events:auto;}
body .pp-card:hover .pp-card-over > .elementor-widget-button,body .pp-card:focus-within .pp-card-over > .elementor-widget-button,
body .pp-cat:hover .pp-cat-over > .elementor-widget-button,body .pp-cat:focus-within .pp-cat-over > .elementor-widget-button{transform:none;opacity:1;}
body .pp-card-over .elementor-button,body .pp-cat-over .elementor-button{white-space:nowrap;}
body .pp-card-title .elementor-heading-title a::after,body .pp-cat-h2 .elementor-heading-title a::after{content:" ›";color:#5DA391;font-weight:400;}
body .pp-card-title .elementor-heading-title a,body .pp-cat-h2 .elementor-heading-title a{text-decoration:none;text-underline-offset:5px;text-decoration-color:#A9CEC2;text-decoration-thickness:1px;transition:color 140ms ease;}
body .pp-card:hover .pp-card-title .elementor-heading-title a,body .pp-card:focus-within .pp-card-title .elementor-heading-title a,
body .pp-cat:hover .pp-cat-h2 .elementor-heading-title a,body .pp-cat:focus-within .pp-cat-h2 .elementor-heading-title a{text-decoration:underline;}
body .pp-card-ctas{margin-top:auto;}
body .pp-card-ctas .elementor-button{width:100%;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}
body .pp-card-cta{margin-top:0;}
body .pp-card-go{display:none;}
@media (max-width:767px){
  body .pp-card .pp-card-over,body .pp-cat-over{display:none;}
  body .pp-card .pp-card-go{display:block;}
  body .pp-card .pp-card-ctas{margin-top:4px;padding-top:10px;border-top:1px solid var(--color-divider);}
  body .pp-card .pp-card-cta{margin-top:0;padding-top:0;border-top:0;}
  body .pp-card .pp-card-ctas .elementor-button{min-height:40px;font-size:13px;padding:0 12px;}
}
@media (prefers-reduced-motion:reduce){
  body .pp-card-over > .elementor-widget-button,body .pp-cat-over > .elementor-widget-button{transition:none;transform:none;}
}/* End custom CSS */