/*
Theme Name: Thaisublimation HP
Description: Custom block-theme child of Twenty Twenty-Five, styled per HP's DESIGN.md (adapted for Thai typography and a printer-catalog + LINE lead-gen business). See project memory: platform-migration-woocommerce-flatsome-to-cpt-hp.
Template: twentytwentyfive
Version: 1.2
Author: Thaisublimation
*/

/* Most visual tokens live in theme.json. This file covers things theme.json
   can't express directly: shortcode-rendered catalog markup (products/categories
   grids, price, LINE buttons), and small structural fixes. */

.thaisub-cat-grid,
.thaisub-prod-grid{
  display:grid;
  grid-template-columns:repeat(var(--thaisub-cols,4),1fr);
  gap:clamp(.9rem,1.6vw,1.35rem);
  margin-block:1.5rem;
}
@media(max-width:820px){ .thaisub-cat-grid,.thaisub-prod-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .thaisub-cat-grid,.thaisub-prod-grid{grid-template-columns:1fr} }

.thaisub-cat-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--wp--preset--color--surface,#fff);
  border:1px solid var(--wp--preset--color--line,#e8e8e8);
  border-radius:var(--wp--custom--radius--card,8px);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.thaisub-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--wp--custom--shadow--lift); }
.thaisub-cat-media{ aspect-ratio:4/3; background:var(--wp--preset--color--cloud,#d9d9d9); display:block; overflow:hidden; }
.thaisub-cat-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.thaisub-cat-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.3rem; }
.thaisub-cat-name{ font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:17px; letter-spacing:normal; color:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-cat-count{ font-size:.85rem; color:var(--wp--preset--color--muted,#636363); }

.thaisub-prod-card{
  display:flex; flex-direction:column;
  background:var(--wp--preset--color--surface,#fff);
  border:1px solid var(--wp--preset--color--line,#e8e8e8);
  border-radius:var(--wp--custom--radius--card,8px);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.thaisub-prod-card:hover{ transform:translateY(-4px); box-shadow:var(--wp--custom--shadow--lift); }
.thaisub-prod-media{ display:block; aspect-ratio:1/1; background:#fff; padding:1rem; }
.thaisub-prod-media img{ width:100%; height:100%; object-fit:contain; }
.thaisub-prod-body{ padding:0 1.1rem 1rem; display:flex; flex-direction:column; gap:.22rem; border-top:1px solid var(--wp--preset--color--line,#e8e8e8); padding-top:.65rem; }
.thaisub-prod-cat{ font-family:var(--wp--preset--font-family--heading); font-size:.74rem; font-weight:500; color:var(--wp--preset--color--brand,#024ad8); background:var(--wp--preset--color--brand-tint,#d3e2f3); align-self:flex-start; padding:.16rem .55rem; border-radius:4px; }
.thaisub-prod-title{ margin:0; font-size:.98rem; font-weight:700; line-height:1.28; letter-spacing:normal; font-family:var(--wp--preset--font-family--body); }
.thaisub-prod-title a{ color:var(--wp--preset--color--ink,#1a1a1a); text-decoration:none; }
.thaisub-prod-actions{ display:flex; gap:.5rem; margin-top:.4rem; flex-wrap:wrap; }

.thaisub-price-row{ display:flex; align-items:baseline; gap:.5rem; font-variant-numeric:tabular-nums; }
.thaisub-price{ font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:1.2rem; color:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-price-sale{ color:var(--wp--preset--color--accent-deep,#b3262b); }
.thaisub-price-was{ font-size:.85rem; color:var(--wp--preset--color--muted,#636363); text-decoration:line-through; }

.thaisub-btn-outline,
.thaisub-line-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:.9rem;
  padding:.6rem .9rem; border-radius:var(--wp--custom--radius--btn,8px);
  text-decoration:none; flex:1;
  transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s, color .2s;
}
.thaisub-btn-outline{ background:#fff; color:var(--wp--preset--color--ink,#1a1a1a); box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--line,#e8e8e8); }
.thaisub-btn-outline:hover{ box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--brand,#024ad8); color:var(--wp--preset--color--brand,#024ad8); }
.thaisub-line-btn{ background:#06c755; color:var(--wp--preset--color--ink,#1a1a1a) !important; }
.thaisub-line-btn:hover{ background:#05b34c; transform:translateY(-2px); }
.thaisub-line-btn-lg{ font-size:1.05rem; padding:.85rem 1.5rem; flex:none; }

.thaisub-line-fab{
  position:fixed; right:18px; bottom:18px; z-index:9000;
  display:inline-flex; align-items:center; gap:8px; background:#06c755; color:var(--wp--preset--color--ink,#1a1a1a);
  font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:15px; padding:13px 18px;
  border-radius:var(--wp--custom--radius--btn,8px); box-shadow:0 10px 26px -8px rgba(6,199,85,.6); text-decoration:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.thaisub-line-fab:hover{ transform:translateY(-3px); }
@media(max-width:480px){ .thaisub-line-fab span{display:none} .thaisub-line-fab{padding:14px} }

/* Accessibility: the parent theme's default focus ring references a color slot
   (--wp--preset--color--accent-4) that doesn't exist in this palette, so
   keyboard focus was effectively invisible on custom components. Give every
   interactive element a real, token-based focus-visible ring. */
.thaisub-line-btn:focus-visible,
.thaisub-line-fab:focus-visible,
.thaisub-btn-outline:focus-visible,
.thaisub-prod-card:focus-visible,
.thaisub-cat-card:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--wp--preset--color--brand,#024ad8);
  outline-offset:2px;
}

/* Pressed/active feedback — a physical click needs to feel like one */
.thaisub-line-btn:active,
.thaisub-btn-outline:active{ transform:scale(.97); }
.thaisub-prod-card:active,
.thaisub-cat-card:active{ transform:translateY(-1px) scale(.99); }

/* Respect reduced-motion: strip the hover-lift transforms and long transitions */
@media (prefers-reduced-motion: reduce){
  .thaisub-prod-card,
  .thaisub-cat-card,
  .thaisub-pdp-rel-card,
  .thaisub-line-btn,
  .thaisub-line-fab,
  .thaisub-btn-outline{
    transition:none !important;
  }
  .thaisub-prod-card:hover,
  .thaisub-cat-card:hover,
  .thaisub-pdp-rel-card:hover,
  .thaisub-line-fab:hover,
  .thaisub-line-btn:active,
  .thaisub-btn-outline:active,
  .thaisub-prod-card:active,
  .thaisub-cat-card:active{
    transform:none !important;
  }
}

.thaisub-empty{ color:var(--wp--preset--color--muted,#636363); padding:2rem 0; }

/* Header nav-actions row (search + LINE button): lock a consistent gap and
   vertical-center everything to one baseline, matching HP's nav-bar-top
   discipline ("1px hairline... elements aligned on one line"). */
.thaisub-header .wp-block-group{ align-items:center; }
.thaisub-header .wp-block-search{ margin:0; }
.thaisub-header .wp-block-group > .wp-block-group{ gap:.75rem !important; }
.thaisub-brand-mark{ align-items:center; gap:.6rem; }

/* Search: single seamless pill with a leading icon (no separate visible button) —
   replaces the earlier two-piece input+blue-button look, which read as two
   disconnected shapes rather than one control. buttonPosition is "no-button"
   on the block itself; the form still submits on Enter. */
.thaisub-search-pill{ margin:0; }
.thaisub-search-pill .wp-block-search__inside-wrapper{ border:none !important; }
.thaisub-search-pill .wp-block-search__input{
  background:var(--wp--preset--color--cloud,#f2f3f5) !important;
  border:none !important;
  border-radius:999px !important;
  padding:.6rem 1rem .6rem 2.5rem !important;
  font-family:var(--wp--preset--font-family--body);
  font-size:.92rem;
  color:var(--wp--preset--color--ink,#1a1a1a);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  background-size:16px 16px;
}
.thaisub-search-pill .wp-block-search__input::placeholder{ color:var(--wp--preset--color--muted,#8a8f98); }
.thaisub-search-pill .wp-block-search__input:focus-visible{ outline:2px solid var(--wp--preset--color--brand,#024ad8); outline-offset:2px; }

/* Section rhythm: every top-level home-page band shares one spacing unit and
   alternates white/cloud/ink bands, replacing the previous ad-hoc/undefined
   section spacing (each wp:group had no padding at all, so bands ran together
   with no consistent rhythm — the "random spacing" finding from the design
   review). */
.thaisub-sec{ padding-block:var(--wp--custom--spacing--section,5rem); }
.thaisub-inner{ max-width:1180px; margin-inline:auto; padding-inline:1.5rem; }
@media(max-width:600px){ .thaisub-sec{ padding-block:3rem; } }

/* Hero: the "-grid" class name implied a two-column layout but had no actual
   grid/flex rule, so the headline copy and product photo simply stacked full-
   width. Also gives the copy block one deliberate spacing scale (8/16/24/32px)
   instead of relying on the single global 1.5rem blockGap for every gap. */
.thaisub-hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center; }
@media(max-width:820px){ .thaisub-hero-grid{ grid-template-columns:1fr; } }
.thaisub-hero-copy{ display:flex; flex-direction:column; gap:1.5rem; }
.thaisub-h1{ margin:0; }
.thaisub-lead{ margin:0; color:var(--wp--preset--color--ink-2,#3d3d3d); }
.thaisub-hero-btns{ margin:.5rem 0 0; gap:1rem !important; }
.thaisub-trust{ margin:0; font-size:.85rem; color:var(--wp--preset--color--muted,#636363); }
.thaisub-hero-img{ margin:0; }
/* Reserve the hero image box up-front so it can't collapse-then-push on load —
   this was the dominant CLS source (0.209 on mobile). aspect-ratio matches the
   real asset (1200x528) so the reserved height is exact at every width. */
.thaisub-hero-img img{ width:100%; height:auto; aspect-ratio:1200/528; object-fit:cover; border-radius:var(--wp--custom--radius--card,8px); }

/* "Why us" band: dark ink slab (matches the footer's own ink tone) so the
   existing white-text supporting paragraph is actually visible — previously
   this section had no background color at all, making that white text
   unreadable against the page's white canvas. Replaces the mismatched
   macro-photo (looked like a phone snapshot of camera repair, not the
   printer-service work this business does) with a bordered statement panel,
   which also removes the leftover empty-space bug from the old single-image
   layout without needing a new photo asset. */
.thaisub-why{ background:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-why .thaisub-sec-title,
.thaisub-why-title{ color:#fff; }
.thaisub-why-feature{ align-items:center; }
.thaisub-why-statement{
  border:1px solid rgba(255,255,255,.16); border-radius:var(--wp--custom--radius--card,8px);
  padding:2rem; background:rgba(255,255,255,.04);
}
.thaisub-why-statement p{ font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1.4rem; line-height:1.4; color:#fff; margin:0; }
.thaisub-feats h3{ color:#fff; }
.thaisub-feats p{ color:var(--wp--preset--color--line,#e8e8e8); }



.thaisub-compare-scroll{ overflow-x:auto; border:1px solid var(--wp--preset--color--line,#e8e8e8); border-radius:var(--wp--custom--radius--card,8px); margin-top:1.5rem; }
.thaisub-compare-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:.92rem; }
.thaisub-compare-table th,
.thaisub-compare-table td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8); white-space:nowrap; }
.thaisub-compare-table th{ font-family:var(--wp--preset--font-family--heading); font-weight:600; background:var(--wp--preset--color--cloud,#d9d9d9); }
.thaisub-compare-table tr:last-child td{ border-bottom:none; }
.thaisub-compare-table td:first-child{ font-family:var(--wp--preset--font-family--heading); font-weight:600; }
.thaisub-compare-price-was{ color:var(--wp--preset--color--muted,#636363); text-decoration:line-through; font-size:.85em; margin-right:.35rem; }
.thaisub-compare-price{ font-family:var(--wp--preset--font-family--heading); font-weight:700; color:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-compare-note{ margin-top:.75rem; font-size:.85rem; color:var(--wp--preset--color--muted,#636363); }

/* LINE-branded core/button instances (hero + closing CTA) — these had no
   color override at all before, so they rendered in plain brand blue and
   were visually indistinguishable from the primary CTA next to them. */
.wp-block-button.thaisub-btn-line .wp-block-button__link{
  background:#06c755 !important; color:var(--wp--preset--color--ink,#1a1a1a) !important;
}
.wp-block-button.thaisub-btn-line .wp-block-button__link:hover{ background:#05b34c !important; }

/* Separates the long-form legacy product description from the quick-facts
   card above it — addresses the "undifferentiated prose in one scroll"
   cognitive-load finding from the design critique. */
.thaisub-product-description{ max-width:75ch; }
.thaisub-product-description h2,
.thaisub-product-description h3{ margin-top:2rem; font-size:1.15rem; }
.thaisub-product-description img{ border-radius:12px; height:auto; max-width:100%; }
.thaisub-product-description p{ line-height:1.75; }

.thaisub-utility-strip{ min-height:36px; display:flex; align-items:center; }
.thaisub-utility-strip .wp-block-group{ width:100%; }
.thaisub-utility-strip p{ margin:0; }
.thaisub-utility-strip a{ color:inherit; text-decoration:none; }
.thaisub-utility-strip a:hover{ text-decoration:underline; }
@media(max-width:600px){
  .thaisub-utility-strip{ font-size:.82rem; min-height:34px; }
  /* Mobile: drop the long marketing tagline, keep only actionable contact info centered. */
  .thaisub-utility-strip > .wp-block-group > p{ display:none; }
  .thaisub-utility-strip > .wp-block-group{ justify-content:center; }
  .thaisub-utility-strip > .wp-block-group > .wp-block-group{ flex-wrap:wrap; justify-content:center; gap:.05rem .55rem; text-align:center; }
}

.thaisub-faq-row{ background:var(--wp--preset--color--surface,#fff); border-radius:8px; padding:1.25rem 1.5rem; margin-bottom:.75rem; border:1px solid var(--wp--preset--color--line,#e8e8e8); }
.thaisub-faq-row summary{ font-family:var(--wp--preset--font-family--heading); font-weight:500; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.thaisub-faq-row summary::-webkit-details-marker{ display:none; }
.thaisub-faq-row summary::after{ content:"+"; font-size:1.3rem; color:var(--wp--preset--color--brand,#024ad8); flex:0 0 auto; margin-left:1rem; }
.thaisub-faq-row[open] summary::after{ content:"−"; }
.thaisub-faq-row p{ margin:.9rem 0 0; color:var(--wp--preset--color--ink-2,#3d3d3d); }

.thaisub-breadcrumb{ font-size:.88rem; color:var(--wp--preset--color--muted,#636363); margin-bottom:1.2rem; }
.thaisub-breadcrumb a{ color:var(--wp--preset--color--muted,#636363); text-decoration:underline; text-underline-offset:2px; }
.thaisub-breadcrumb a:hover{ color:var(--wp--preset--color--brand,#024ad8); }
.thaisub-breadcrumb [aria-current="page"]{ color:var(--wp--preset--color--ink,#1a1a1a); font-weight:500; }
.thaisub-breadcrumb-sep{ margin:0 .5rem; }

/* WooCommerce auto-patches block-theme headers with its own account/cart icons
   while it's still active in the background (see platform-migration-woocommerce-
   flatsome-to-cpt-hp). This is a catalog + LINE-inquiry site with no login/cart --
   hide both until WooCommerce is fully deactivated in Phase 3, at which point
   this rule becomes a no-op. */
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart{ display:none !important; }

/* Catalog toolbar: category filter chips + sort dropdown (archive + category
   pages). Chips are real links to term archives (crawlable); sort is a GET
   <select> that submits on change, with a no-JS submit fallback. */
.thaisub-catalog-toolbar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin:1.5rem 0 2rem; }
.thaisub-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.thaisub-chip{ display:inline-flex; align-items:center; font-family:var(--wp--preset--font-family--heading); font-size:.85rem; font-weight:500; line-height:1; padding:.5rem .95rem; border-radius:999px; text-decoration:none; color:var(--wp--preset--color--ink-2,#3d3d3d); background:var(--wp--preset--color--cloud,#d9d9d9); border:1px solid var(--wp--preset--color--line,#e8e8e8); transition:background .2s,color .2s,border-color .2s; }
.thaisub-chip:hover{ border-color:var(--wp--preset--color--brand,#024ad8); color:var(--wp--preset--color--brand,#024ad8); }
.thaisub-chip.is-active{ background:var(--wp--preset--color--ink,#1a1a1a); color:#fff; border-color:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-sort{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--wp--preset--font-family--body); font-size:.85rem; color:var(--wp--preset--color--muted,#636363); }
.thaisub-sort label{ white-space:nowrap; }
.thaisub-sort select{ font-family:var(--wp--preset--font-family--heading); font-size:.85rem; padding:.45rem 2rem .45rem .8rem; border-radius:var(--wp--custom--radius--btn,8px); border:1px solid var(--wp--preset--color--line,#e8e8e8); background-color:#fff; color:var(--wp--preset--color--ink,#1a1a1a); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636363' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .65rem center; background-size:14px; }
.thaisub-sort select:focus-visible{ outline:2px solid var(--wp--preset--color--brand,#024ad8); outline-offset:2px; }
.thaisub-price-ask{ font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:.98rem; color:var(--wp--preset--color--muted,#636363); }
.thaisub-pagination{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2.5rem; }
.thaisub-pagination a,
.thaisub-pagination span{ display:inline-flex; min-width:2.4rem; height:2.4rem; align-items:center; justify-content:center; padding:0 .6rem; border-radius:var(--wp--custom--radius--btn,8px); font-family:var(--wp--preset--font-family--heading); font-size:.9rem; text-decoration:none; border:1px solid var(--wp--preset--color--line,#e8e8e8); color:var(--wp--preset--color--ink-2,#3d3d3d); background:#fff; }
.thaisub-pagination a:hover{ border-color:var(--wp--preset--color--brand,#024ad8); color:var(--wp--preset--color--brand,#024ad8); }
.thaisub-pagination .current{ background:var(--wp--preset--color--brand,#024ad8); color:#fff; border-color:var(--wp--preset--color--brand,#024ad8); }
.thaisub-pagination .dots{ border:none; background:none; }
@media(max-width:520px){ .thaisub-catalog-toolbar{ flex-direction:column; align-items:stretch; } .thaisub-sort{ justify-content:flex-end; } }

/* ============================================================
   HP DESIGN-hp.md alignment layer (2026-07-06 Epson rebuild)
   Full HP token set now lives in theme.json; this layer adds
   the HP signature pieces the catalog was missing: the blue
   chevron hero, HP display-scale section titles, the two-tier
   16px/4px radius made explicit, and the dark help-band that
   closes the page (HP "how can we help?" prelude / Epson
   support-&-where-to-buy band).
   ============================================================ */

/* Section titles at HP display scale: weight 500 (HP keeps 500 even at hero),
   tight line-height, generous space beneath each band heading. */
.thaisub-sec-title{ font-size:clamp(28px,3.4vw,44px); font-weight:500; line-height:1.15; margin:0 0 1.75rem; }

/* HERO — HP chevron echo, toned right down. A SINGLE soft-blue slash anchored
   to the right edge behind the product photo, low-opacity so it reads as brand
   texture framing the printer — never a solid slab floating in empty space (the
   full-bleed dual-chevron version read as "random blue shapes" on this hero). */
.thaisub-hero{ position:relative; overflow:hidden; background:var(--wp--preset--color--surface,#fff); }
.thaisub-hero::after{ content:""; position:absolute; top:0; bottom:0; right:-6%; width:34%; background:var(--wp--preset--color--brand-tint,#c9e0fc); opacity:.4; transform:skewX(-12deg); z-index:0; pointer-events:none; }
.thaisub-hero > .thaisub-inner{ position:relative; z-index:1; }
@media(max-width:767px){ .thaisub-hero::after{ display:none; } }
.thaisub-h1{ font-weight:500; line-height:1.1; }

/* HP button-primary: solid electric-blue, 4px radius, ~44px tall. Thai text
   keeps normal casing/tracking (unlike HP's Latin uppercase spec). */
.wp-block-button.thaisub-btn-primary .wp-block-button__link{ background:var(--wp--preset--color--brand,#024ad8); color:#fff; border-radius:var(--wp--custom--radius--btn,4px); padding:.7rem 1.5rem; font-family:var(--wp--preset--font-family--heading); font-weight:600; }
.wp-block-button.thaisub-btn-primary .wp-block-button__link:hover{ background:var(--wp--preset--color--brand-deep,#0e3191); }

/* Two-tier radius: cards/photo frames soft 16px, buttons sharp 4px. The card
   var is now 16px in theme.json; state it explicitly so intent is legible. */
.thaisub-cat-card,.thaisub-prod-card{ border-radius:var(--wp--custom--radius--card,16px); }
/* Product photo reads as a hero shot, not a thumbnail (HP whitespace rule). */
.thaisub-prod-media{ padding:2rem; }

/* HP help-band / Epson closing support band: dark ink slab, centered pill
   action tabs (ปรึกษา LINE / ดูสินค้า / บทความ / ติดต่อ). */
.thaisub-help-band{ background:var(--wp--preset--color--ink,#1a1a1a); }
.thaisub-help-band .thaisub-sec-title,
.thaisub-help-band p{ color:#fff; text-align:center; }
.thaisub-help-band p{ max-width:52ch; margin-inline:auto; color:var(--wp--preset--color--fog,#e8e8e8); }
.thaisub-help-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.75rem; }
.thaisub-help-actions a{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--wp--preset--font-family--heading); font-weight:500; font-size:.95rem; color:#fff; text-decoration:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.7rem 1.4rem; transition:background .2s,border-color .2s; }
.thaisub-help-actions a:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); }

/* Product-card action buttons: stack full-width so the LINE label never wraps
   to two lines (the cramped side-by-side pair read as "broken buttons"). */
.thaisub-prod-actions{ flex-direction:column; flex-wrap:nowrap; gap:.5rem; }
.thaisub-prod-actions .thaisub-btn-outline,
.thaisub-prod-actions .thaisub-line-btn{ flex:none; width:100%; white-space:nowrap; }
.thaisub-line-btn svg{ flex:0 0 auto; }

/* ============================================================
   MOCKUP PORT (2026-07-06) — approved Epson-layout + HP mockup
   ported into the live block theme. Chevron dropped; real logo;
   expanding search; multi-column footer; feature/support/help
   component classes used by the native-block home page.
   ============================================================ */

/* Chevron removed entirely (mockup has none, per user). */
.thaisub-hero::before,.thaisub-hero::after{content:none !important;display:none !important}

/* Logo (core/site-logo) sizing in header + footer. */
.thaisub-header .wp-block-site-logo img{height:62px;width:auto}
.thaisub-footer .thaisub-foot-logo img{height:72px;width:auto;margin-bottom:1rem}
.thaisub-header .wp-block-site-logo{margin:0}

/* Header actions: search sits right, vertically centered. */
.thaisub-nav-actions{align-items:center;gap:.75rem}

/* Expanding search: 230px → 360px on focus, right edge pinned so it grows
   leftward (search is the rightmost header element). */
.thaisub-header .thaisub-search-pill{width:230px;margin:0;transition:width .4s cubic-bezier(.16,1,.3,1)}
.thaisub-header .thaisub-search-pill:focus-within{width:360px}
.thaisub-header .thaisub-search-pill .wp-block-search__input{width:100%;transition:background .25s,box-shadow .25s}
.thaisub-header .thaisub-search-pill:focus-within .wp-block-search__input{background-color:#fff !important;box-shadow:0 6px 18px rgba(2,74,216,.15)}
@media(max-width:781px){ .thaisub-header .thaisub-search-pill,.thaisub-header .thaisub-search-pill:focus-within{width:100%} }

/* Footer: multi-column link grid on the ink slab. */
.thaisub-footer :where(h4){color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15px;margin:0 0 14px}
.thaisub-foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.thaisub-foot-list li{margin:0}
.thaisub-foot-list a{color:#cfcfcf;text-decoration:none;font-size:14.5px}
.thaisub-foot-list a:hover{color:#fff}
@media(max-width:781px){ .thaisub-foot-grid{gap:2rem} }

/* Section eyebrow + titles (HP display scale). */
.thaisub-eyebrow{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:13px;color:var(--wp--preset--color--brand);text-transform:uppercase;letter-spacing:normal;margin-bottom:.4rem}

/* Feature bands (core/columns, image + copy). */
.thaisub-featband{align-items:center}
.thaisub-featband .thaisub-feat-media img,
.thaisub-featband figure.wp-block-image img{border-radius:var(--wp--custom--radius--card,16px);width:100%}
.thaisub-feat-media img{aspect-ratio:16/10;object-fit:cover;border:1px solid var(--wp--preset--color--line);box-shadow:var(--wp--custom--shadow--lift)}

/* Support cards (core/columns of core/group), brand top-accent, no AI icon tile. */
.thaisub-supp{background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--card,16px);box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));padding:26px 24px;height:100%}
.thaisub-supp .thaisub-supp-ic{color:var(--wp--preset--color--brand);line-height:0;margin-bottom:14px;display:block}
.thaisub-supp .thaisub-supp-ic svg{width:34px;height:34px}
.thaisub-supp h3{margin:0 0 6px;font-size:18px}
.thaisub-supp p{color:var(--wp--preset--color--muted);font-size:15px;margin:0 0 14px}

/* CTA buttons on dark slabs (help band / promo strip). */
.thaisub-btn-white .wp-block-button__link{background:#fff;color:var(--wp--preset--color--ink)}
.thaisub-btn-white .wp-block-button__link:hover{background:var(--wp--preset--color--fog)}
.thaisub-btn-ghost .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.thaisub-btn-ghost .wp-block-button__link:hover{background:#fff;color:var(--wp--preset--color--ink);border-color:#fff}

/* Dark promo strip + help band text on ink. */
.thaisub-promo-dark,.thaisub-help-band{color:#fff}
.thaisub-promo-dark :where(h2),.thaisub-help-band :where(h2){color:#fff}
.thaisub-help-band p{color:#c9c9c9}

/* ---- Hero slider (Getwid content-slider) ---- */
.thaisub-hero-slider{background:linear-gradient(180deg,#fff 0%,var(--wp--preset--color--cloud) 100%);position:relative;overflow:hidden}
.thaisub-hero-slider .ts-slide{width:100%}
.thaisub-hero-slider .ts-hero-cols{max-width:1600px;margin-inline:auto !important;padding:44px 40px 70px;gap:40px !important;align-items:center}
.thaisub-hero-slider .ts-hero-h1{font-weight:500;line-height:1.1;font-size:clamp(34px,4.4vw,58px);margin:0 0 18px}
.thaisub-hero-slider .ts-hero-lead{font-size:19px;color:var(--wp--preset--color--ink-2);margin:0 0 26px;max-width:46ch}
.thaisub-hero-slider .ts-hero-btns{gap:14px !important;margin-top:6px;align-items:center}
.thaisub-hero-slider .ts-hero-img{margin:0}
.thaisub-hero-slider .ts-hero-img img{max-height:460px;width:auto;margin-inline:auto;display:block}
.thaisub-hero-slider .thaisub-eyebrow{margin-bottom:12px}
/* slick chrome recolored to brand/ink */
.thaisub-hero-slider .slick-dots{bottom:20px}
.thaisub-hero-slider .slick-dots li{width:auto;height:auto;margin:0 4px}
.thaisub-hero-slider .slick-dots li button{width:8px;height:8px;padding:0;border-radius:50%;background:var(--wp--preset--color--steel);transition:width .3s,background .3s}
.thaisub-hero-slider .slick-dots li button:before{content:none}
.thaisub-hero-slider .slick-dots li.slick-active button{width:28px;border-radius:9999px;background:var(--wp--preset--color--brand)}
.thaisub-hero-slider .slick-prev,.thaisub-hero-slider .slick-next{width:46px;height:46px;background:rgba(255,255,255,.92);border:1px solid var(--wp--preset--color--line);border-radius:50%;box-shadow:var(--wp--custom--shadow--lift);z-index:3}
.thaisub-hero-slider .slick-prev{left:26px}
.thaisub-hero-slider .slick-next{right:26px}
.thaisub-hero-slider .slick-prev:hover,.thaisub-hero-slider .slick-next:hover{background:#fff}
.thaisub-hero-slider .slick-prev:before,.thaisub-hero-slider .slick-next:before{font-family:inherit;content:"‹";color:var(--wp--preset--color--ink);font-size:26px;line-height:1;opacity:.85}
.thaisub-hero-slider .slick-next:before{content:"›"}
@media(max-width:1023px){ .thaisub-hero-slider .slick-prev,.thaisub-hero-slider .slick-next{display:none !important} }
@media(max-width:781px){ .thaisub-hero-slider .ts-hero-cols{padding:32px 24px 60px} }

/* ---- Feature bands ---- */
.thaisub-featband{gap:clamp(2rem,4vw,3.5rem) !important;align-items:center}
.thaisub-featband .thaisub-feat-media img{border-radius:var(--wp--custom--radius--card,16px);aspect-ratio:16/10;object-fit:cover;border:1px solid var(--wp--preset--color--line);box-shadow:var(--wp--custom--shadow--lift);width:100%}

/* ---- Text-link with arrow (feature bands, support cards) ---- */
.thaisub-tlink{margin-top:.5rem}
.thaisub-tlink a{font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--brand);text-decoration:none}
.thaisub-tlink a:hover{color:var(--wp--preset--color--brand-deep);text-decoration:underline}

/* ---- Section sub-title ---- */
.thaisub-sec-sub{color:var(--wp--preset--color--ink-2);font-size:18px}

/* ---- Support cards grid + help band spacing ---- */
.thaisub-supp-grid{gap:24px !important;margin-top:2.25rem}
.thaisub-supp-grid .wp-block-column{display:flex}
.thaisub-help-actions{gap:14px !important;margin-top:1.75rem}

/* Promo-dark: keep white CTA button legible, align right on desktop. */
.thaisub-promo-dark .wp-block-buttons{justify-content:flex-end}
@media(max-width:781px){ .thaisub-promo-dark .wp-block-buttons{justify-content:flex-start} }


/* ---- Mockup parity round 2 (2026-07-06) ---- */
.thaisub-hero-slider .ts-hero-img{position:relative}
.thaisub-hero-slider .ts-hero-img::before{content:"";position:absolute;left:8%;right:8%;top:12%;bottom:12%;border-radius:50%;background:radial-gradient(circle,var(--wp--preset--color--brand-tint) 0%,rgba(201,224,252,0) 70%);opacity:.5;z-index:0;pointer-events:none}
.thaisub-hero-slider .ts-hero-img img{position:relative;z-index:1}
.ts-hero-trust{font-size:14px;color:var(--wp--preset--color--muted);margin:6px 0 0}
.ts-hero-cta{gap:1rem}
.ts-hero-cta .wp-block-buttons{margin:0}
.ts-hero-cta .thaisub-tlink{margin:0}
.thaisub-tlink-nav{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15px;color:var(--wp--preset--color--brand);text-decoration:none;white-space:nowrap}
.thaisub-tlink-nav:hover{color:var(--wp--preset--color--brand-deep)}
.thaisub-header .wp-block-navigation-item a{position:relative}
.thaisub-header .wp-block-navigation-item a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--wp--preset--color--brand)}
@media(min-width:782px){ .thaisub-utility-strip p{white-space:nowrap} }


/* ---- Inner pages (2026-07-06): page titles, blog cards, CF7 form, service steps ---- */
.thaisub-page-title{font-size:clamp(28px,3.4vw,44px);font-weight:500;line-height:1.15}
.thaisub-article-grid{gap:24px}
.thaisub-article-card{background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.thaisub-article-card:hover{transform:translateY(-4px);box-shadow:var(--wp--custom--shadow--lift)}
.thaisub-article-card figure{margin:0}
.thaisub-article-card figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.thaisub-article-body{padding:18px 20px 22px}
.thaisub-article-body .wp-block-post-title{margin:.35rem 0 .4rem;font-weight:600;font-size:19px;line-height:1.4}
.thaisub-article-body .wp-block-post-title a{color:var(--wp--preset--color--ink);text-decoration:none}
.thaisub-article-body .wp-block-post-title a:hover{color:var(--wp--preset--color--brand)}
.thaisub-article-body .wp-block-post-excerpt{font-size:15px;color:var(--wp--preset--color--ink-2)}
.thaisub-article-body .wp-block-post-excerpt__more-link{font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--brand);text-decoration:none}
.wp-block-query-pagination{margin-top:2.5rem;font-family:var(--wp--preset--font-family--heading)}
.wp-block-query-pagination a{color:var(--wp--preset--color--brand);text-decoration:none}
/* Contact Form 7 to match the design system */
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 input[type="url"],.wpcf7 textarea{width:100%;border:1px solid var(--wp--preset--color--steel);border-radius:12px;padding:10px 14px;font-family:var(--wp--preset--font-family--body);font-size:15px;background:#fff;color:var(--wp--preset--color--ink)}
.wpcf7 input:focus,.wpcf7 textarea:focus{border-color:var(--wp--preset--color--ink);outline:none}
.wpcf7 input:focus-visible,.wpcf7 textarea:focus-visible{outline:2px solid var(--wp--preset--color--brand);outline-offset:1px}
.wpcf7 label{font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:14px;color:var(--wp--preset--color--ink-2)}
.wpcf7 input[type="submit"]{background:var(--wp--preset--color--brand);color:#fff;border:none;border-radius:var(--wp--custom--radius--btn,4px);padding:12px 28px;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15px;cursor:pointer;transition:background .18s}
.wpcf7 input[type="submit"]:hover{background:var(--wp--preset--color--brand-deep)}
/* Service steps */
.thaisub-step-num{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:36px;line-height:1;color:var(--wp--preset--color--brand);margin:0 0 10px}
.thaisub-steps h3{font-size:18px;margin:0 0 6px}
.thaisub-steps p{font-size:15px;color:var(--wp--preset--color--ink-2)}


/* ---- Catalog-card cleanup + contact cards (anti-slop, 2026-07-06) ---- */
.thaisub-prod-body{flex:1}
.thaisub-prod-actions{margin-top:auto}
.thaisub-prod-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-prod-cat{background:none;padding:0;border-radius:0;color:var(--wp--preset--color--muted,#636363);font-size:12.5px;font-weight:600;line-height:1.2}
.thaisub-prod-more{display:block;text-align:center;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.88rem;color:var(--wp--preset--color--brand,#024ad8);text-decoration:none;padding:.35rem 0 0}
.thaisub-prod-more:hover{color:var(--wp--preset--color--brand-deep,#0e3191);text-decoration:underline}
.thaisub-contact-card{background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);padding:24px 26px;height:100%}
.thaisub-contact-card h2{font-size:20px;margin:0 0 14px}
.thaisub-contact-rows{margin-top:1.1rem}
.thaisub-contact-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8);font-size:15px}
.thaisub-contact-row:last-child{border-bottom:none}
.thaisub-contact-row b{font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--ink-2,#3d3d3d);flex:0 0 auto}
.thaisub-contact-row span{text-align:right}
.thaisub-contact-note{font-size:13px;color:var(--wp--preset--color--muted,#636363)}


/* ---- impeccable pass (2026-07-06): kill eyebrow grammar, quiet card CTA, calm price ---- */
.thaisub-line-btn.thaisub-line-btn--card{background:#fff;box-shadow:inset 0 0 0 1px var(--wp--preset--color--steel,#c2c2c2)}
.thaisub-line-btn--card svg{color:#06c755}
.thaisub-line-btn.thaisub-line-btn--card:hover{background:#06c755;color:#123b22 !important;box-shadow:none;transform:none}
.thaisub-line-btn--card:hover svg{color:#fff}
.thaisub-prod-body .thaisub-price{font-size:1.12rem}
.thaisub-prod-body .thaisub-price-was{font-size:.8rem}
.thaisub-prod-more{text-align:left;padding:.25rem 0 0}


/* ---- Contact: ink info panel (white box + settings-table rows read as slop) ---- */
.thaisub-contact-panel{background:var(--wp--preset--color--ink,#1a1a1a);color:#fff;border-radius:var(--wp--custom--radius--card,16px);padding:26px 28px;height:100%;display:flex;flex-direction:column}
.thaisub-contact-panel h2{color:#fff;font-size:20px;margin:0 0 4px}
.thaisub-contact-panel .thaisub-panel-note{color:#b5b5b5;font-size:14px;margin:0 0 12px}
.thaisub-ci{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.thaisub-ci:last-of-type{border-bottom:none}
.thaisub-ci small{display:block;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:12px;color:#8f8f8f;margin-bottom:2px}
.thaisub-ci span{font-size:16.5px;color:#fff}
.thaisub-ci a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.thaisub-ci a:hover{color:var(--wp--preset--color--brand-tint,#c9e0fc)}
.thaisub-ci .pending{color:#8f8f8f;font-size:14px}
.thaisub-contact-panel .thaisub-panel-cta{margin-top:auto;padding-top:20px}
.thaisub-contact-panel .thaisub-line-btn{width:100%;flex:none;justify-content:center}


/* ---- Contact panel v3: light + natural height (the ink slab read heavy; forced
   equal-height left a void; 100%-width button overflowed — content-box bug). ---- */
.thaisub-line-btn,.thaisub-btn-outline,.thaisub-line-btn-lg{box-sizing:border-box}
.thaisub-contact-panel{background:var(--wp--preset--color--cloud,#d9d9d9);color:var(--wp--preset--color--ink,#1a1a1a);height:auto;display:block}
.thaisub-contact-panel h2{color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-contact-panel .thaisub-panel-note{color:var(--wp--preset--color--muted,#636363)}
.thaisub-ci{border-bottom:none;border-top:1px solid var(--wp--preset--color--line,#e8e8e8);padding:12px 0}
.thaisub-ci:first-of-type{border-top:none}
.thaisub-ci small{color:var(--wp--preset--color--muted,#636363)}
.thaisub-ci span{color:var(--wp--preset--color--ink,#1a1a1a);font-size:16px}
.thaisub-ci a{color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-ci a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-ci .pending{color:var(--wp--preset--color--muted,#636363)}
.thaisub-contact-panel .thaisub-panel-cta{margin-top:8px;padding-top:14px}


/* ---- Contact v4: input box-sizing (fields overflowed the card), equal-height
   columns (textarea capped so the void never returns), LINE button matched to
   the theme's outline button language. ---- */
.wpcf7 input,.wpcf7 textarea,.wpcf7 select{box-sizing:border-box;max-width:100%}
.wpcf7 textarea{height:150px;min-height:150px;resize:vertical}
.wpcf7 label{display:block}
.thaisub-contact-panel{height:100%;display:flex;flex-direction:column}
.thaisub-contact-panel .thaisub-panel-cta{margin-top:auto;padding-top:16px}
.thaisub-contact-panel .thaisub-line-btn{background:#fff;color:var(--wp--preset--color--ink,#1a1a1a) !important;box-shadow:inset 0 0 0 1px var(--wp--preset--color--steel,#c2c2c2);border-radius:var(--wp--custom--radius--btn,4px)}
.thaisub-contact-panel .thaisub-line-btn svg{color:#06c755}
.thaisub-contact-panel .thaisub-line-btn:hover{background:#06c755;color:#123b22 !important;box-shadow:none;transform:none}
.thaisub-contact-panel .thaisub-line-btn:hover svg{color:#fff}


/* Focus rings: keyboard-only. Mouse clicks were leaving the parent theme's
   outline box on nav links; :focus-visible keeps the ring for Tab users
   (a11y) while suppressing it for pointer clicks. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.wp-block-navigation-item a:focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible){outline:none;box-shadow:none}


/* ---- Product description: long-form/SEO typography (2026-07-06).
   Legacy content shipped as an italic wall; content is now cleaned and this
   gives the remaining prose a real reading structure. ---- */
.thaisub-product-description{max-width:none}
.thaisub-product-description :where(em,i){font-style:normal}
.thaisub-product-description p{margin:.9rem 0;line-height:1.75;text-wrap:pretty}
.thaisub-product-description :where(h2,h3){font-size:1.25rem;font-weight:600;margin:2.25rem 0 .75rem}
.thaisub-product-description ul{margin:1rem 0 1.75rem;padding:0 0 0 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.thaisub-product-description li{line-height:1.65;margin:0}
.thaisub-product-description li::marker{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-product-description img{margin:1.5rem 0}


/* ---- Product spec tables (Epson-style label/value groups) ---- */
.thaisub-spec-table{margin:0 0 1.5rem}
.thaisub-spec-table table{border-collapse:collapse;width:100%;border:none}
.thaisub-spec-table td{border:none;border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8);padding:.7rem .5rem;vertical-align:top;font-size:15px}
.thaisub-spec-table tr:last-child td{border-bottom:none}
.thaisub-spec-table td:first-child{width:38%;font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--ink-2,#3d3d3d)}
.thaisub-product-description h3{font-size:1.05rem;font-weight:600;margin:1.75rem 0 .5rem}


/* ---- Product hero highlights (Epson-style sell beside the photo) ---- */
.thaisub-highlights{margin-top:.9rem}
.thaisub-highlights p{margin:0 0 .6rem;font-size:15.5px;line-height:1.65;color:var(--wp--preset--color--ink-2,#3d3d3d)}
.thaisub-highlights p strong{color:var(--wp--preset--color--ink,#1a1a1a);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:16.5px}
.thaisub-highlights ul{margin:.4rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.thaisub-highlights li{font-size:14.5px;line-height:1.55;color:var(--wp--preset--color--ink-2,#3d3d3d)}
.thaisub-highlights li::marker{color:var(--wp--preset--color--brand,#024ad8)}


/* ---- PDP v10 (2026-07-06) — research-based rebuild (Baymard: sticky-TOC one-long-page
   beats horizontal tabs; Google: unique per-product copy + Offer/availability). ---- */
.thaisub-btn-outline-lg{font-size:1.05rem;padding:.85rem 1.5rem;flex:none}
.thaisub-pdp-media img{width:100%;height:auto;max-height:420px;object-fit:contain}
.thaisub-pdp-avail{font-size:13.5px;color:var(--wp--preset--color--ink-2,#3d3d3d);margin:.6rem 0 .1rem}
.thaisub-pdp-trust{font-size:13px;color:var(--wp--preset--color--muted,#636363);margin:0 0 1rem}
.thaisub-pdp-cta-row{margin:.85rem 0 .6rem;gap:10px}
/* Sticky sub-nav — Baymard's best-performing PDP pattern (7% overlook rate vs
   27% for horizontal tabs); anchors always land on #overview (template-
   supplied on every product) and on #specs/#consumables/#faq once a product's
   content uses the matching headings (auto-id’d via the_content filter). */
.thaisub-pdp-subnav{position:sticky;top:0;z-index:40;display:flex;gap:2px;overflow-x:auto;background:rgba(255,255,255,.97);backdrop-filter:blur(4px);border-block:1px solid var(--wp--preset--color--line,#e8e8e8);margin:0 0 1.5rem}
.thaisub-pdp-subnav a{font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:14px;color:var(--wp--preset--color--ink-2,#3d3d3d);padding:12px 14px;white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}
.thaisub-pdp-subnav a:hover{color:var(--wp--preset--color--brand,#024ad8);border-bottom-color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-prod-detail :where(h2,h3){scroll-margin-top:56px}
/* Related products (auto, taxonomy-driven, no fabricated 'similar' copy) */
.thaisub-pdp-related{padding:48px 0 56px;margin-top:0}
.thaisub-pdp-related h2{margin-bottom:20px}
.thaisub-pdp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.thaisub-pdp-rel-card{background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.thaisub-pdp-rel-card:hover{transform:translateY(-4px);box-shadow:var(--wp--custom--shadow--lift)}
.thaisub-pdp-rel-media{aspect-ratio:16/9;background:#fff;padding:12px;display:flex;align-items:center;justify-content:center}
.thaisub-pdp-rel-media img{max-height:100%;width:100%;object-fit:contain}
.thaisub-pdp-rel-body{padding:12px 16px 16px;border-top:1px solid var(--wp--preset--color--line,#e8e8e8);display:flex;flex-direction:column;gap:4px;flex:1}
.thaisub-pdp-rel-use{font-size:12.5px;color:var(--wp--preset--color--muted,#636363)}
.thaisub-pdp-rel-title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15.5px;color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-pdp-rel-body .thaisub-price-row{margin-top:auto;padding-top:6px}
@media(max-width:781px){ .thaisub-pdp-rel-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .thaisub-pdp-rel-grid{grid-template-columns:1fr} }
/* Mobile sticky CTA bar */
@media(max-width:640px){
  .thaisub-pdp-top{margin-bottom:.5rem}
}
@media(max-width:1023px){ .thaisub-pdp-media{margin-bottom:1rem} }


/* Spec-table value column: force ink color explicitly (was relying on
   inheritance, which read as tinted/link-like in review). */
.thaisub-spec-table td{color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-spec-table td:first-child{color:var(--wp--preset--color--ink-2,#3d3d3d)}





/* Real heading hierarchy for SEO/a11y: FAQ questions + related-product titles
   were plain text before (no heading tag at all); now genuine H3s nested one
   level under their H2 section, with no skipped levels. Reset margin/size so
   they keep the existing visual design instead of default heading styling. */
.thaisub-faq-row summary h3{margin:0;font:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;line-height:inherit}
.thaisub-pdp-rel-title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15.5px;color:var(--wp--preset--color--ink,#1a1a1a);margin:0;line-height:1.4}


/* Fix: spec-table columns were overflowing the 780px reading column on
   narrow viewports — long unbreakable English spec strings (e.g. 'Nozzle
   Verification Technology (NVT)') pushed the table wider than its container
   because table-layout:auto lets column width follow content. table-layout:
   fixed forces the browser to respect the declared widths and wrap instead.
   overflow-wrap (not word-break:break-all — that would break Thai mid-syllable,
   a hard rule for this project) is the backstop for any still-unbreakable token. */
.thaisub-spec-table table{table-layout:fixed}
.thaisub-spec-table td{overflow-wrap:break-word;word-break:normal}
.thaisub-product-description{overflow-wrap:break-word}
.thaisub-product-description p{overflow-wrap:break-word}

/* Align product detail to the same 1200px-centered axis as the sticky
   sub-nav (both are constrained children of the 1200px main). Explicit +
   higher-specificity so a stray max-width can't knock it off-axis again. */
.thaisub-pdp .thaisub-prod-detail{max-width:1200px;margin-inline:auto}


/* Related-products cards: title reverted h3->span (a block <h3> inside the
   inline <a>/<span> card broke the HTML via auto-close, ejecting price/title
   out of the card). span is correct here anyway — these are nav links, not
   content headings. Also made the whole module more compact (was too large). */
.thaisub-pdp-rel-title{display:block}
.thaisub-pdp-related{padding:36px 0 44px}
.thaisub-pdp-related h2{margin-bottom:16px;font-size:clamp(19px,1.8vw,24px)}
.thaisub-pdp-rel-grid{gap:16px}
.thaisub-pdp-rel-media{aspect-ratio:16/10;padding:10px}
.thaisub-pdp-rel-media img{max-height:140px}
.thaisub-pdp-rel-body{padding:10px 14px 14px;gap:2px}
.thaisub-pdp-rel-use{font-size:12px}
.thaisub-pdp-rel-title{font-size:15px;line-height:1.35}
.thaisub-pdp-rel-body .thaisub-price-row{padding-top:5px}
.thaisub-pdp-rel-body .thaisub-price{font-size:1rem}
.thaisub-pdp-rel-body .thaisub-price-was{font-size:.78rem}


/* ---- 2026-07-07: restore approved-mockup fidelity ---- */
/* Sharp dark-band CTAs (kill the leftover pill radius on the help band). */
.thaisub-btn-white .wp-block-button__link{border-radius:4px}
.thaisub-help-actions a{border-radius:4px;background:transparent;border-color:transparent}
/* LINE-brand icon on the white “ปรึกษาผ่าน LINE” buttons in the dark bands. */
.thaisub-btn-lineic .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.thaisub-btn-lineic .wp-block-button__link::before{content:"";display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.7 2 10.2c0 4 3.6 7.4 8.5 8v2.3c0 .5.5.8 1 .5 1-.6 4.5-2.9 6-4.6C21 14.6 22 12.5 22 10.2 22 5.7 17.5 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.7 2 10.2c0 4 3.6 7.4 8.5 8v2.3c0 .5.5.8 1 .5 1-.6 4.5-2.9 6-4.6C21 14.6 22 12.5 22 10.2 22 5.7 17.5 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* After darkening the global muted token, keep muted text readable on dark slabs. */
.thaisub-footer .has-muted-color,.thaisub-promo-dark .has-muted-color,.thaisub-help-band .has-muted-color{color:#b4b8c0}
/* Footer social icons (mockup parity). */
.thaisub-foot-social{display:flex;gap:.75rem;align-items:center}
.thaisub-foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px;transition:border-color .2s,background .2s}
.thaisub-foot-social a:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Footer tagline width (mockup wraps ~3 lines). */
.thaisub-footer .thaisub-foot-grid .wp-block-column:first-child p{max-width:27rem}

/* Kill the root block-gap white strip between <main> and the footer template
   part (mockup: the dark help band flows straight into the dark footer). */
footer.wp-block-template-part{margin-block-start:0}
body .wp-site-blocks > main{margin-block-end:0}

/* ---- Category cards: mockup parity (2026-07-07) ---- */
/* The 800x800 category art already contains the Thai title + benefit strip;
   the old 4:3 crop was chopping both off. Render the full square image. */
.thaisub-cat-media{aspect-ratio:auto}
.thaisub-cat-media img{height:auto;object-fit:fill}
.thaisub-cat-body{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.thaisub-cat-more{color:var(--wp--preset--color--brand,#024ad8);font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:.9rem}
.thaisub-cat-card:hover .thaisub-cat-more{text-decoration:underline}

/* Bands stack flush: kill the white block-gap strips between full-width
   sections (became visible once the cloud gray darkened to #d9d9d9). */
body.home main{margin-block-start:0}
body.home .wp-block-post-content > * + *{margin-block-start:0}
.wp-site-blocks > .thaisub-pdp-related,
.wp-site-blocks > .thaisub-promo-dark{margin-block-start:0}
/* Article cards were blending into the white page (faint #e8e8e8 border,
   hover-only shadow). Stronger steel border + a resting Soft Lift shadow. */
.thaisub-article-card{border-color:var(--wp--preset--color--steel,#c2c2c2);box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08))}
.thaisub-article-card:hover{box-shadow:0 8px 20px rgba(26,26,26,.15)}
/* ---- Single blog post: reference layout (2026-07-07) — featured image top,
   category chip, H1, tags, byline (โพสโดย + share), centered 840px column. ---- */
.thaisub-post .wp-block-post-featured-image{margin:0 0 1.5rem}
.thaisub-post .wp-block-post-featured-image img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;border-radius:16px}
.thaisub-post-catchip{display:inline-block;background:var(--wp--preset--color--brand-tint,#c9e0fc);color:var(--wp--preset--color--brand-deep,#0e3191);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.8rem;line-height:1;padding:.4rem .65rem;border-radius:4px;text-decoration:none;margin:0 0 .75rem}
.thaisub-post-catchip:hover{background:var(--wp--preset--color--brand,#024ad8);color:#fff}
.thaisub-post h1.thaisub-page-title{margin:.25rem 0 .9rem}
.thaisub-post-tags{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:0 0 1.25rem;font-size:.95rem}
.thaisub-post-tags a{color:var(--wp--preset--color--ink-2,#3d3d3d);text-decoration:none;position:relative}
.thaisub-post-tags a+a::before{content:"\25aa";position:absolute;left:-0.95rem;color:var(--wp--preset--color--steel,#c2c2c2)}
.thaisub-post-tags a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-byline{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 1rem;padding:0 0 1.1rem;margin:0 0 1.75rem;border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8)}
.thaisub-byline-who{display:flex;align-items:center;gap:.7rem}
img.thaisub-byline-avatar{width:44px;height:44px;border-radius:50%;display:block}
.thaisub-byline-meta{display:flex;flex-direction:column;line-height:1.35}
.thaisub-byline-name{font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-byline-date{font-size:.85rem;color:var(--wp--preset--color--muted,#4d4d4d)}
.thaisub-byline-share{display:flex;align-items:center;gap:.5rem}
.thaisub-byline-share-label{font-size:.9rem;color:var(--wp--preset--color--muted,#4d4d4d);margin-right:.15rem}
.thaisub-byline-share a,.thaisub-byline-share button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--wp--preset--color--steel,#c2c2c2);background:#fff;color:var(--wp--preset--color--ink,#1a1a1a);cursor:pointer;padding:0;transition:border-color .2s,color .2s,background .2s}
.thaisub-byline-share a:hover,.thaisub-byline-share button:hover{border-color:var(--wp--preset--color--brand,#024ad8);color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-byline-share button.is-copied{background:var(--wp--preset--color--brand,#024ad8);border-color:var(--wp--preset--color--brand,#024ad8);color:#fff}
@media (max-width:600px){.thaisub-byline{align-items:flex-start;flex-direction:column}}
/* Post body media: never overflow the 840px reading column. */
.thaisub-post .wp-block-post-content img{max-width:100%;height:auto;border-radius:12px}
.thaisub-post .wp-block-post-content figure{max-width:100%;margin-inline:auto}
.thaisub-post .wp-block-post-content iframe{max-width:100%}

/* Footer column labels demoted from h4 (heading-order a11y) — same look. */
.thaisub-footer .thaisub-foot-head{color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:15px;margin:0 0 14px}

/* About page stat band. */
.thaisub-about-stats .wp-block-column{text-align:center}
.thaisub-stat-num{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:clamp(30px,3.4vw,44px);color:var(--wp--preset--color--brand,#024ad8);margin:0 0 .2rem;line-height:1.1}
.thaisub-stat-label{color:var(--wp--preset--color--ink-2,#3d3d3d);margin:0;font-size:.95rem}

/* Static pages: section rhythm */
body.page .wp-block-post-content > .wp-block-group + .wp-block-group{margin-block-start:3.5rem}

/* Pages ending on a dark band: the band swallows the page template's bottom
   padding so it flows straight into the dark footer (no white strip). */
body.page main > .wp-block-post-content > .thaisub-promo-dark:last-child,
body.page main > .wp-block-post-content > .thaisub-help-band:last-child{margin-bottom:calc(-1 * var(--wp--preset--spacing--60))}

/* Pages: full-width bands stack flush (no white block-gap strips between
   sections), matching the home page. Non-band text groups keep the 3.5rem rhythm. */
body.page .wp-block-post-content > .wp-block-group.alignfull{margin-block-start:0}

/* About stats band: breathe below the intro image (exempt from the flush rule). */
body.page .wp-block-post-content > .wp-block-group.thaisub-about-stats{margin-block-start:3rem}

/* Product gallery slider (multi-image PDP). */
.thaisub-pgal-single img{width:100%;height:auto;border-radius:16px;display:block}
.thaisub-pgal-main{position:relative;aspect-ratio:4/3;background:#fff;border-radius:16px;overflow:hidden}
.thaisub-pgal-main img{width:100%;height:100%;object-fit:contain;display:block}
.thaisub-pgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--wp--preset--color--steel,#c2c2c2);background:rgba(255,255,255,.94);color:var(--wp--preset--color--ink,#1a1a1a);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.thaisub-pgal-prev{left:12px}.thaisub-pgal-next{right:12px}
.thaisub-pgal-nav:hover{border-color:var(--wp--preset--color--brand,#024ad8);color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-pgal-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thaisub-pgal-thumb{width:72px;height:72px;padding:0;border:2px solid var(--wp--preset--color--line,#e8e8e8);border-radius:8px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .2s}
.thaisub-pgal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thaisub-pgal-thumb.is-active,.thaisub-pgal-thumb:hover{border-color:var(--wp--preset--color--brand,#024ad8)}
/* Product image lightbox. */
.thaisub-pgal-main img,.thaisub-pgal-single img{cursor:zoom-in}
#ts-lb{position:fixed;inset:0;z-index:99999;background:rgba(10,10,10,.72);display:none;align-items:center;justify-content:center;padding:20px}
#ts-lb.is-open{display:flex}
.ts-lb-panel{background:#fff;border-radius:16px;max-width:1040px;width:100%;max-height:92vh;display:flex;flex-direction:column;padding:14px 18px 18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ts-lb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
.ts-lb-title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.05rem;color:var(--wp--preset--color--ink,#1a1a1a)}
.ts-lb-close{border:none;background:none;cursor:pointer;color:var(--wp--preset--color--ink,#1a1a1a);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;padding:4px 6px}
.ts-lb-close:hover{color:var(--wp--preset--color--brand,#024ad8)}
.ts-lb-body{position:relative;height:72vh;display:flex;align-items:center;justify-content:center}
.ts-lb-img{width:100%;height:100%;object-fit:contain;display:block}
.ts-lb-prev{position:absolute;left:8px;top:50%;transform:translateY(-50%)}
.ts-lb-next{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
/* Search results page. */
.thaisub-search-again{display:flex;gap:10px;margin:1rem 0 2rem;max-width:640px}
.thaisub-search-again input{flex:1;padding:.7rem 1rem;border:1px solid var(--wp--preset--color--steel,#c2c2c2);border-radius:4px;font-size:1rem}
.thaisub-search-again button{border-radius:4px;border:none;background:var(--wp--preset--color--brand,#024ad8);color:#fff;padding:.7rem 1.4rem;cursor:pointer;font-family:var(--wp--preset--font-family--heading);font-weight:500}
.thaisub-search-again button:hover{background:var(--wp--preset--color--brand-bright,#296ef9)}
h2.thaisub-search-sec{font-size:clamp(22px,2.4vw,30px);font-weight:500;margin:2.25rem 0 1rem}
.thaisub-search-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

/* Search article cards: uniform 16:9 thumbs (posters were stretching cards). */
.thaisub-search-articles .thaisub-article-card figure{margin:0}
.thaisub-search-articles .thaisub-article-card figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.thaisub-search-articles .thaisub-article-body{padding:16px 18px 20px}

/* Wider header search (contact link removed): base 320px, grows to 440px on focus. */
.thaisub-header .thaisub-search-pill{width:320px}
.thaisub-header .thaisub-search-pill:focus-within{width:440px}

/* Post TOC (สารบัญ) + related posts. */
.thaisub-toc{border:1px solid var(--wp--preset--color--brand-tint,#c9e0fc);background:#f4f8ff;border-radius:12px;padding:14px 18px;margin:0 0 1.75rem}
.thaisub-toc summary{cursor:pointer;font-family:var(--wp--preset--font-family--heading);font-weight:600;color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-toc ol{margin:.75rem 0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.thaisub-toc a{color:var(--wp--preset--color--ink-2,#3d3d3d);text-decoration:none}
.thaisub-toc a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-relposts{margin-top:3rem;border-top:1px solid var(--wp--preset--color--line,#e8e8e8);padding-top:1.5rem}
html{scroll-behavior:smooth}

/* Product cards: stronger presence + uncropped media + short desc. */
.thaisub-prod-card{border-color:var(--wp--preset--color--steel,#c2c2c2);box-shadow:0 3px 14px rgba(26,26,26,.14)}
.thaisub-prod-card:hover{box-shadow:0 12px 28px rgba(26,26,26,.2)}
.thaisub-prod-media{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.thaisub-prod-media img{width:100%;height:100%;object-fit:contain}
.thaisub-prod-desc{font-size:.85rem;line-height:1.32;color:var(--wp--preset--color--ink-2,#3d3d3d);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Hovering a card image cycles through the product's other photos on repeat (single-image cards stay put). */
.thaisub-prod-media .thaisub-prod-media-alt,.thaisub-prod-media .thaisub-prod-media-alt2{position:absolute;top:2rem;left:2rem;width:calc(100% - 4rem);height:calc(100% - 4rem);max-width:none;object-fit:contain;background:#fff;opacity:0;transition:opacity .35s ease}

/* Mobile menu opener: enlarge to a comfortable ~44px tap target (icon was 24px and easy to miss). */
.wp-block-navigation__responsive-container-open{padding:8px;margin-left:auto}
.wp-block-navigation__responsive-container-open svg{width:30px;height:30px}

/* Legacy content tables (ink price lists etc.): full-width, headers aligned with data, hairline rows. */
.thaisub-prod-detail table{width:100%;max-width:100%;border-collapse:collapse;margin:1rem 0;table-layout:auto}
.thaisub-prod-detail table th,.thaisub-prod-detail table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8);vertical-align:top}
.thaisub-prod-detail table th{background:var(--wp--preset--color--paper,#f5f5f5);font-weight:600;white-space:nowrap}
.thaisub-prod-detail table tr:hover td{background:#fafafa}

/* Body size: Sarabun reads best a touch larger than the old Plex (17px base, articles included). */
body{font-size:1.0625rem}

/* Overview readability: cap huge legacy images; long overviews start collapsed with an expand button. */
.thaisub-prod-detail .entry-content img{max-width:100%;width:auto;height:auto;max-height:460px;display:block;margin:1.25rem auto}
.thaisub-ov-collapsed{max-height:2200px;overflow:hidden;position:relative}
.thaisub-ov-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.thaisub-ov-more{display:block;margin:.75rem auto 0;padding:.65rem 1.6rem;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;color:var(--wp--preset--color--brand,#024ad8);background:#fff;border:1px solid var(--wp--preset--color--steel,#c2c2c2);border-radius:4px;cursor:pointer}
.thaisub-ov-more:hover{border-color:var(--wp--preset--color--brand,#024ad8)}

/* Safety net: long URLs / unbreakable tokens wrap instead of forcing horizontal scroll. */
.thaisub-post .wp-block-post-content p,.thaisub-post .wp-block-post-content li,.thaisub-post .wp-block-post-content a,.thaisub-prod-detail .entry-content p,.thaisub-prod-detail .entry-content li,.thaisub-prod-detail .entry-content a{overflow-wrap:break-word}

/* Responsive tables: wide tables scroll horizontally inside their own box. */
.thaisub-tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;margin:1rem 0}
.thaisub-tablewrap>table{margin:0}

/* Footer legal text: lift muted (#4d4d4d, ~1.6:1 on the dark slab) to a light grey that passes WCAG AA. */
.thaisub-footer .has-muted-color{color:#b0b0b0 !important}

/* thaisub-hero-cls-guard: reserve hero space so deferred slick init causes no layout shift (CLS) */
.thaisub-hero-slider{min-height:560px}
@media(max-width:1023px){.thaisub-hero-slider{min-height:600px}}
@media(max-width:767px){.thaisub-hero-slider{min-height:700px}}
/* before slick initializes, show ONLY the first slide (raw getwid markup stacks all 3 = 3x tall = big collapse shift) */
.thaisub-hero-slider .wp-block-getwid-content-slider__wrapper:not(.slick-initialized)>*:not(:first-child){display:none!important}
.thaisub-hero-slider .wp-block-getwid-content-slider__wrapper:not(.slick-initialized){overflow:hidden;max-height:800px}
/* thaisub-services-redesign 2026-07-10 */
.thaisub-svc-intro{text-align:center;max-width:660px;margin-left:auto;margin-right:auto}
.thaisub-steps-v2{background:#f4f7fd}
.thaisub-steps-v2 .wp-block-column{position:relative}
.thaisub-step-dot{width:44px;height:44px;border-radius:50%;background:var(--wp--preset--color--brand);color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.05rem;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
@media(min-width:782px){.thaisub-steps-v2 .wp-block-column:not(:last-child)::before{content:"";position:absolute;top:21px;left:60px;right:-14px;height:2px;background:var(--wp--preset--color--brand-tint)}}
.thaisub-steps-v2 h3{font-size:1.05rem;margin:0 0 6px}
.thaisub-steps-v2 p{margin:0;font-size:.95rem;color:var(--wp--preset--color--ink-2)}
.thaisub-checklist{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 44px;max-width:820px}
.thaisub-checklist li{position:relative;padding-left:32px}
.thaisub-checklist li::before{content:"\2713";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--wp--preset--color--brand-tint);color:var(--wp--preset--color--brand-deep);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
@media(max-width:640px){.thaisub-checklist{grid-template-columns:1fr}}
.thaisub-faq details{background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.thaisub-faq summary{font-weight:600;cursor:pointer}
.thaisub-faq details[open] summary{margin-bottom:8px}
.thaisub-faq details p{margin:0;color:var(--wp--preset--color--ink-2)}
.thaisub-btn-ghost .wp-block-button__link{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.thaisub-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.12)}
/* thaisub-fixpack-20260710b */
/* 1) buttons vanished after click: the a11y rule a:focus:not(:focus-visible){box-shadow:none}
   wiped these buttons' box-shadow borders. Restore the border in that exact state. */
.thaisub-line-btn:focus:not(:focus-visible){box-shadow:inset 0 0 0 1px var(--wp--preset--color--steel,#c2c2c2)}
.thaisub-line-btn:focus:not(:focus-visible):hover{box-shadow:none}
.thaisub-btn-outline:focus:not(:focus-visible){box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--line,#e8e8e8)}
.thaisub-btn-outline:focus:not(:focus-visible):hover{box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--brand,#024ad8)}
/* 2) category chips: read as buttons, not grey labels */
.thaisub-chip{background:#fff;border:1px solid var(--wp--preset--color--steel,#c2c2c2);box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:600}
.thaisub-chip:hover{background:var(--wp--preset--color--brand-tint,#c9e0fc);border-color:var(--wp--preset--color--brand,#024ad8);color:var(--wp--preset--color--brand-deep,#0e3191)}
.thaisub-chip.is-active{background:var(--wp--preset--color--brand,#024ad8);border-color:var(--wp--preset--color--brand,#024ad8);color:#fff;box-shadow:none}
/* 3) promotion nav item: brand-red emphasis (accent-deep = AA contrast on white) */
.thaisub-nav-promo a{color:var(--wp--preset--color--accent-deep,#b3262b)!important;font-weight:600}
.thaisub-nav-promo a:hover{color:var(--wp--preset--color--accent,#ff5050)!important}
/* 6) product card images: larger (padding 2rem -> 1.1rem), hover layers follow */
.thaisub-prod-media{padding:1.1rem}
.thaisub-prod-media .thaisub-prod-media-alt,.thaisub-prod-media .thaisub-prod-media-alt2{top:1.1rem;left:1.1rem;width:calc(100% - 2.2rem);height:calc(100% - 2.2rem)}
/* thaisub-postcards (home promo/article cards) 2026-07-10 */
.thaisub-postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:781px){.thaisub-postcards{grid-template-columns:1fr}}
.thaisub-postcard{display:block;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .25s ease,transform .25s ease}
.thaisub-postcard:hover{box-shadow:0 12px 28px rgba(0,0,0,.08);transform:translateY(-3px)}
.thaisub-postcard-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#f4f4f4}
.thaisub-postcard-media img{width:100%;height:100%;object-fit:cover}
.thaisub-postcard-body{display:block;padding:16px 18px}
.thaisub-postcard-title{display:block;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;line-height:1.45;color:var(--wp--preset--color--ink,#1a1a1a)}
.thaisub-postcard-date{display:block;margin-top:6px;font-size:.85rem;color:var(--wp--preset--color--muted,#4d4d4d)}
/* thaisub-trustbar 2026-07-10: dark-grey trust strip under the hero */
.thaisub-trustbar{background:var(--wp--preset--color--ink,#1a1a1a);padding:0}
.thaisub-trustbar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:1200px;margin:0 auto;padding:20px 24px}
.thaisub-trustbar-item{display:flex;gap:12px;align-items:center;padding:8px 16px;border-right:1px solid rgba(255,255,255,.12)}
.thaisub-trustbar-item:last-child{border-right:0}
.thaisub-trustbar-item svg{width:26px;height:26px;color:#8db6ff;flex:0 0 auto}
.thaisub-trustbar-item b{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;color:#fff;display:block;line-height:1.3}
.thaisub-trustbar-item span{font-size:.8rem;color:#b6bcc8}
@media(max-width:1023px){
  .thaisub-trustbar-grid{grid-template-columns:1fr 1fr;gap:8px 0;padding:16px 20px}
  .thaisub-trustbar-item{border-right:0;padding:8px 10px}
  .thaisub-trustbar-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .thaisub-trustbar-item:last-child{border-right:0}
}
@media(max-width:480px){
  .thaisub-trustbar-grid{grid-template-columns:1fr;padding:12px 18px}
  .thaisub-trustbar-item{border-right:0!important;padding:7px 6px}
  .thaisub-trustbar-item svg{width:22px;height:22px}
}
/* thaisub chooser (home block A) 2026-07-10 - v2: match site card language (flat white, brand top border, squared corners) */
.ts-choose-card{background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-top:3px solid var(--wp--preset--color--brand,#024ad8);border-radius:var(--wp--custom--radius--card,16px);padding:26px 24px}
.ts-choose-q{margin-bottom:18px}
.ts-choose-l{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.92rem;color:var(--wp--preset--color--ink);display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.ts-choose-l span{color:var(--wp--preset--color--brand);font-weight:600}
.ts-choose-l span::after{content:"."}
.ts-choose-chips{display:flex;flex-wrap:wrap;gap:8px}
.ts-choose-chips button{font-family:var(--wp--preset--font-family--heading);font-weight:500;font-size:.85rem;padding:9px 14px;border-radius:8px;background:#fff;border:1px solid var(--wp--preset--color--steel,#c2c2c2);color:var(--wp--preset--color--ink-2);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ts-choose-chips button:hover{border-color:var(--wp--preset--color--brand);color:var(--wp--preset--color--brand)}
.ts-choose-chips button.on{background:var(--wp--preset--color--brand);border-color:var(--wp--preset--color--brand);color:#fff}
.ts-choose-go{display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box;background:var(--wp--preset--color--brand);color:#fff !important;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;padding:13px 20px;border-radius:var(--wp--custom--radius--btn,4px);text-decoration:none;margin-top:6px;transition:background .2s}
.ts-choose-go:hover{background:var(--wp--preset--color--brand-deep)}
.ts-choose-alt{text-align:center;margin:12px 0 0;font-size:.86rem;color:var(--wp--preset--color--muted)}
.ts-choose-alt a{color:#0a8f43;font-weight:600;font-family:var(--wp--preset--font-family--heading);text-decoration:none}
.ts-choose-alt a:hover{text-decoration:underline}
@media(max-width:781px){.ts-choose-card{padding:20px 16px}}
/* thaisub portfolio grid (home block B) 2026-07-10 */
.thaisub-pf-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.thaisub-pf-grid figure.wp-block-image{margin:0;border-radius:14px;overflow:hidden;border:1px solid #ccd6e6;position:relative;height:100%}
.thaisub-pf-grid figure.wp-block-image:first-child{grid-row:span 2}
.thaisub-pf-grid figure.wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.thaisub-pf-grid figure.wp-block-image figcaption.wp-element-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 16px 12px;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;color:var(--wp--preset--color--ink);background:linear-gradient(0deg,rgba(255,255,255,.92),rgba(255,255,255,0));text-align:left}
@media(max-width:781px){.thaisub-pf-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}}
@media(max-width:480px){.thaisub-pf-grid{grid-template-columns:1fr;grid-auto-rows:190px}.thaisub-pf-grid figure.wp-block-image:first-child{grid-row:span 1}}
/* thaisub-prelaunch-fixes 2026-07-10 */
/* 1) 320px: search must never exceed the viewport (base + focus states) */
@media(max-width:480px){
  .thaisub-header .thaisub-nav-actions{width:100%;min-width:0;flex:1 1 100%}
  .thaisub-header .thaisub-search-pill,
  .thaisub-header .thaisub-search-pill:focus-within{width:100% !important;max-width:100% !important;box-sizing:border-box}
  .thaisub-search-pill .wp-block-search__inside-wrapper,.thaisub-search-pill .wp-block-search__input{max-width:100%;box-sizing:border-box;min-width:0}
}
/* 2) compact mobile header */
@media(max-width:600px){
  .thaisub-header{padding-top:0.4rem !important;padding-bottom:0.45rem !important}
  .thaisub-header .wp-block-site-logo img{width:120px;height:auto}
  .thaisub-header > .wp-block-group{gap:0.45rem}
}
/* 3) hero dots: keep the bar look but give a >=24px hit area */
.thaisub-hero-slider .slick-dots li{width:auto;height:auto;margin:0}
.thaisub-hero-slider .slick-dots li button{width:44px;height:24px;padding:0;background:transparent !important;position:relative;font-size:0}
.thaisub-hero-slider .slick-dots li button::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:8px;border-radius:5px;background:#c9d2e2;opacity:1;transition:background .2s}
.thaisub-hero-slider .slick-dots li.slick-active button::before{background:var(--wp--preset--color--brand,#024ad8);width:32px}
.thaisub-hero-slider .slick-dots li button:focus-visible{outline:2px solid var(--wp--preset--color--brand,#024ad8);outline-offset:2px}
/* 4) pause/play control */
.thaisub-hero-pause{position:absolute;right:14px;bottom:12px;z-index:5;width:34px;height:34px;border-radius:50%;border:1px solid var(--wp--preset--color--steel,#c2c2c2);background:rgba(255,255,255,.9);color:var(--wp--preset--color--ink,#1a1a1a);font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thaisub-hero-pause:hover{background:#fff;border-color:var(--wp--preset--color--brand,#024ad8);color:var(--wp--preset--color--brand,#024ad8)}
/* 5) visible focus on dark bands */
.thaisub-help-band a:focus-visible,.thaisub-help-band button:focus-visible,
.thaisub-footer a:focus-visible,.thaisub-trustbar a:focus-visible,
.thaisub-utility-strip a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 6) mobile menu buttons: comfortable tap target */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
/* 7) form privacy note */
.thaisub-form-privacy{font-size:.85rem;color:var(--wp--preset--color--muted,#4d4d4d);margin:6px 0 10px}
.thaisub-form-privacy a{color:var(--wp--preset--color--brand,#024ad8)}
/* thaisub-audit-fixes-p1 2026-07-10 */
/* hero arrows: bottom-right control cluster - never overlaps copy at any width */
.thaisub-hero-slider .slick-prev,
.thaisub-hero-slider .slick-next{top:auto;bottom:12px;transform:none;width:34px;height:34px}
.thaisub-hero-slider .slick-prev{left:auto;right:96px}
.thaisub-hero-slider .slick-next{left:auto;right:55px}
.thaisub-hero-pause{right:14px;bottom:12px}
@media(max-width:781px){
  /* image above text on mobile so the product is visible in the first screen */
  .thaisub-hero-slider .ts-hero-cols{display:flex;flex-direction:column-reverse;flex-wrap:nowrap}
  .thaisub-hero-slider .ts-hero-cols > .wp-block-column{flex-basis:100% !important;width:100%}
  /* tighter mobile header */
  .thaisub-utility-strip{min-height:30px;font-size:.78rem}
  .thaisub-search-pill .wp-block-search__input{padding-top:7px;padding-bottom:7px}
}
/* thaisub-mobile-header-v2 */
@media(max-width:600px){
  .thaisub-utility-strip{padding-top:2px;padding-bottom:2px}
  .thaisub-utility-strip p{margin:0;line-height:1.35}
  .thaisub-header{padding-top:0.3rem !important;padding-bottom:0.3rem !important}
  .thaisub-header > .wp-block-group{gap:0.3rem}
  .thaisub-header .wp-block-site-logo img{width:106px}
}
/* thaisub-hide-hero-controls: ซ่อนลูกศร+ปุ่มหยุด (คำขอเจ้าของเว็บ) - ยังเหลือ dots + ปัดนิ้ว + autoplay */
.thaisub-hero-slider .slick-prev,
.thaisub-hero-slider .slick-next,
.thaisub-hero-pause{display:none !important}

/* ============ thaisub-ux-p0-pack 2026-07-10 ============ */
/* --- P0-1: sticky contact bar (mobile, single product) --- */
.thaisub-sticky-cta{display:none}
@media(max-width:781px){
  .thaisub-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--wp--preset--color--line,#e8e8e8);box-shadow:0 -4px 16px rgba(20,30,60,.08)}
  .thaisub-sticky-cta a{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;border-radius:8px;padding:12px 10px;text-decoration:none;min-height:44px}
  .thaisub-sticky-line{flex:1.6;background:var(--wp--preset--color--line-green,#06c755);color:#123b22 !important}
  .thaisub-sticky-line svg{color:#123b22}
  .thaisub-sticky-call{flex:1;background:#fff;color:var(--wp--preset--color--ink,#1a1a1a);box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--steel,#c2c2c2)}
  .single-thaisub_product .thaisub-footer{padding-bottom:84px}
  .single-thaisub_product .thaisub-line-fab{display:none}
}
/* --- P0-1: PDP mobile - ซ่อน thumbs, ใช้ปุ่มดูรูปทั้งหมด --- */
.thaisub-pgal-seeall{display:none}
@media(max-width:781px){
  .thaisub-pgal .thaisub-pgal-thumbs{display:none}
  .thaisub-pgal-seeall{display:block;width:100%;margin-top:8px;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.9rem;padding:11px;border-radius:8px;background:#fff;border:1px solid var(--wp--preset--color--steel,#c2c2c2);color:var(--wp--preset--color--ink-2,#3d3d3d);cursor:pointer;min-height:44px}
  .thaisub-pgal .thaisub-pgal-nav{display:none}
}
/* --- P0-2: mobile menu drawer --- */
.thaisub-drawer-logo,.thaisub-drawer-cta{display:none}
@media(max-width:781px){
  .wp-block-navigation__responsive-container.is-menu-open{padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
  .wp-block-navigation__responsive-container.is-menu-open .thaisub-drawer-logo{display:block;padding:2px 0 12px;border-bottom:1px solid var(--wp--preset--color--line,#e8e8e8);margin-bottom:6px}
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:flex;flex-direction:column;height:100%}
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{width:100%;gap:0}
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--wp--preset--color--fog,#e8e8e8)}
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a{display:block;width:100%;padding:13px 4px;min-height:44px;font-size:1.05rem}
  .wp-block-navigation__responsive-container.is-menu-open .thaisub-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:18px}
  .thaisub-drawer-cta a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:8px;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;text-decoration:none}
  .thaisub-drawer-products{background:var(--wp--preset--color--brand,#024ad8);color:#fff !important}
  .thaisub-drawer-line{background:var(--wp--preset--color--line-green,#06c755);color:#123b22 !important}
  .thaisub-drawer-call{background:#fff;color:var(--wp--preset--color--ink,#1a1a1a) !important;box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--steel,#c2c2c2)}
}
/* --- P0-3 + P2-9: active menu ชัดทุกอุปกรณ์ (น้ำเงิน+ขีดเส้นใต้) / แดงสงวนให้โปรโมชั่น --- */
.thaisub-menu a[aria-current="page"],.thaisub-menu .current-menu-item > a{color:var(--wp--preset--color--brand,#024ad8) !important;font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.thaisub-nav-promo a[aria-current="page"]{color:var(--wp--preset--color--accent-deep,#b3262b) !important}
/* --- P1-4: search มีไอคอนแว่นขยาย กด Enter ค้นหา --- */
.thaisub-search-pill .wp-block-search__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6072' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;padding-left:38px !important}
.thaisub-search-pill ::placeholder{color:#5a6072;opacity:1}
/* --- P1-6: breadcrumb ย่อบนมือถือ --- */
@media(max-width:600px){
  .ts-crumb-mid{display:none}
  .thaisub-breadcrumb, nav[class*=breadcrumb]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* --- P1-7: chips เลื่อนนอน + sort แถวเดียว + จำนวนสินค้า --- */
.ts-chip-count{opacity:.55;font-weight:500;font-size:.78em;margin-left:2px}
@media(max-width:781px){
  .thaisub-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-inline:-4px;padding-inline:4px;min-width:0;max-width:100%}
  .thaisub-chips::-webkit-scrollbar{display:none}
  .thaisub-chip{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center}
  .thaisub-catalog-toolbar{flex-direction:column;gap:.6rem}
}
/* --- P1-7: card CTA hierarchy - LINE เขียวเต็ม = CTA หลักหนึ่งเดียวของการ์ด --- */
.thaisub-line-btn.thaisub-line-btn--card{background:var(--wp--preset--color--line-green,#06c755);color:#123b22 !important;box-shadow:none}
.thaisub-line-btn.thaisub-line-btn--card svg{color:#123b22}
.thaisub-line-btn.thaisub-line-btn--card:hover{background:#05b34c;color:#0e2f1b !important}
.thaisub-line-btn.thaisub-line-btn--card:focus:not(:focus-visible){box-shadow:none}
@media(max-width:600px){.ts-crumb-mid + .thaisub-breadcrumb-sep{display:none}}

/* --- P0-6: โครงสร้างโปรโมชั่น (ACF simple form) --- */
.thaisub-postcard-media{position:relative;display:block}
.thaisub-postcard-promo-price{position:absolute;top:10px;right:10px;background:var(--wp--preset--color--line-green,#06c755);color:#123b22;font-weight:700;font-size:.82rem;padding:.25em .6em;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.ts-promo-box{margin-top:1.75rem;padding:1.1rem 1.25rem;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa}
.ts-promo-row{display:flex;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #ebebeb;flex-wrap:wrap}
.ts-promo-row:last-of-type{border-bottom:none}
.ts-promo-k{font-weight:600;min-width:9rem;color:#555}
.ts-promo-v{flex:1}
.ts-promo-price{color:#c0392b;font-weight:700}
.ts-promo-terms{font-size:.9rem;color:#666}
.ts-promo-badge{display:inline-block;margin-bottom:.75rem;padding:.3em .8em;border-radius:999px;font-size:.85rem;font-weight:600}
.ts-promo-badge-off{background:#f1f1f1;color:#888}
.ts-promo-cta{display:inline-block;margin-top:1rem;padding:.7em 1.6em;border-radius:999px;background:var(--wp--preset--color--line-green,#06c755);color:#123b22 !important;font-weight:600;text-decoration:none}
.ts-promo-cta:hover{background:#05b34c;color:#0e2f1b !important}
/* --- restyle-20260714-spacing: bigger logo on mobile + section breathing room + gutters --- */
@media(max-width:781px){ .thaisub-header .wp-block-site-logo img{height:46px} }
.home .wp-block-group.alignfull > .wp-block-group__inner-container,
.home .alignfull > .is-layout-constrained{ padding-inline:clamp(20px,5vw,64px) }
.home main > .wp-block-group, .home main > section, .home .thaisub-section{ padding-block:clamp(40px,6vw,80px) }

/* --- nerd-inspired-air-20260714: bigger bolder section headings + more whitespace + uniform product-image frame --- */
.home .thaisub-sec-title{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;line-height:1.2;margin-bottom:1.35rem}
.home .thaisub-sec{padding-block:clamp(56px,7vw,104px)}
.thaisub-prod-media,.thaisub-prod-media.has-alt{background:#fff;padding:10px}
.thaisub-postcard-media{background:#fff}
.home .thaisub-prod-grid,.home .thaisub-cat-grid{gap:1.75rem}

/* --- promo-clean-20260715: promo cards = clean text-forward (cut loud flyer images, nerd-style) --- */
.thaisub-postcards--promo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.thaisub-postcards--promo .thaisub-postcard{display:block;background:#fff;border:1px solid var(--wp--preset--color--line,#e6ebf2);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,42,.04),0 12px 30px rgba(16,24,42,.06);overflow:hidden;transition:transform .2s,box-shadow .2s}
.thaisub-postcards--promo .thaisub-postcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,74,216,.12)}
.thaisub-postcards--promo .thaisub-postcard-media{display:none}
.thaisub-postcards--promo .thaisub-postcard-body{display:block;padding:1.3rem 1.4rem 1.5rem}
.thaisub-postcards--promo .thaisub-postcard-body::before{content:'●\00a0\00a0โปรโมชั่น';display:inline-block;color:var(--wp--preset--color--accent-deep,#b3262b);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.74rem;margin-bottom:.85rem;letter-spacing:normal}
.thaisub-postcards--promo .thaisub-postcard-title{display:block;font-weight:700;color:var(--wp--preset--color--ink,#141a26);font-size:1.05rem;line-height:1.5}
.thaisub-postcards--promo .thaisub-postcard-date{display:block;color:var(--wp--preset--color--muted,#5a6478);font-size:.85rem;margin-top:.7rem}
.thaisub-postcards--promo .thaisub-postcard-body::after{content:'สอบถามโปรนี้ →';display:inline-block;margin-top:1rem;color:var(--wp--preset--color--brand,#024ad8);font-weight:700;font-size:.92rem}
@media(max-width:900px){.thaisub-postcards--promo{grid-template-columns:1fr}}

/* --- line-outline-card-20260715: product-card LINE = clean outline (green border, dark-green text AA; fills green on hover). Hero/contact keep solid green. --- */
.thaisub-line-btn.thaisub-line-btn--card{background:#fff !important;color:#0a6b32 !important;box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--line-green,#06c755) !important}
.thaisub-line-btn.thaisub-line-btn--card svg{color:#0a6b32 !important}
.thaisub-line-btn.thaisub-line-btn--card:hover{background:var(--wp--preset--color--line-green,#06c755) !important;color:#123b22 !important;box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--line-green,#06c755) !important;transform:translateY(-2px)}
.thaisub-line-btn.thaisub-line-btn--card:hover svg{color:#123b22 !important}

/* --- line-btn-brand-20260715: in-content LINE buttons use the brand-blue button style (still link to LINE; LINE icon kept for recognition). Floating FAB widget stays green. --- */
.thaisub-line-btn.thaisub-line-btn--card{background:var(--wp--preset--color--brand,#024ad8) !important;color:#fff !important;box-shadow:none !important}
.thaisub-line-btn.thaisub-line-btn--card svg{color:#fff !important}
.thaisub-line-btn.thaisub-line-btn--card:hover{background:var(--wp--preset--color--brand-deep,#0e3191) !important;color:#fff !important;box-shadow:none !important;transform:translateY(-2px)}
.thaisub-line-btn.thaisub-line-btn--card:hover svg{color:#fff !important}
.thaisub-contact-panel .thaisub-line-btn{background:var(--wp--preset--color--brand,#024ad8) !important;color:#fff !important}
.thaisub-contact-panel .thaisub-line-btn svg{color:#fff !important}
.thaisub-contact-panel .thaisub-line-btn:hover{background:var(--wp--preset--color--brand-deep,#0e3191) !important;color:#fff !important}

/* --- navy-bands-20260715: dark bands use deep navy (#101a30) like nerdoptimize, not pure black --- */
.has-ink-background-color{background-color:#101a30 !important}
.thaisub-trustbar{background:#101a30 !important}
.thaisub-footer{background:#101a30 !important}
.thaisub-help-band,.thaisub-final-cta{background:#101a30 !important}

/* catgrid-all-20260715 — 8th 'view all' tile: clean CTA look, fills the 4-col grid */
.thaisub-cat-card--all{background:var(--wp--preset--color--brand-tint,#c9e0fc);border-color:transparent}
.thaisub-cat-card--all .thaisub-cat-media{display:flex;align-items:center;justify-content:center;background:transparent;aspect-ratio:8/5}
.thaisub-cat-card--all .thaisub-cat-media svg{width:48px;height:48px;color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-cat-card--all .thaisub-cat-body{align-items:flex-start}
.thaisub-cat-card--all .thaisub-cat-name{color:var(--wp--preset--color--brand-deep,#0e3191)}
.thaisub-cat-card--all .thaisub-cat-more{color:var(--wp--preset--color--brand,#024ad8);font-weight:600}

/* choose-lighter-20260715 — lighten the product-chooser card: drop the heavy blue top bar & gray chip-grid, go airy (nerdoptimize/anga) */
.ts-choose-card{border:1px solid var(--wp--preset--color--line,#e8e8e8);box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));padding:30px 28px}
.ts-choose-q{margin-bottom:22px}
.ts-choose-l{font-size:.9rem;margin-bottom:11px}
.ts-choose-chips{gap:9px}
.ts-choose-chips button{background:#f4f6fa;border:1px solid transparent;border-radius:999px;color:var(--wp--preset--color--ink-2,#3d3d3d);padding:9px 15px}
.ts-choose-chips button:hover{background:var(--wp--preset--color--brand-tint,#c9e0fc);border-color:transparent;color:var(--wp--preset--color--brand-deep,#0e3191)}
.ts-choose-chips button.on{background:var(--wp--preset--color--brand,#024ad8);border-color:transparent;color:#fff}

/* catcard-ratio-20260715 — category tiles: fixed 8:5 box + cover so ANY uploaded image (now hard-cropped to 800x500) renders clean, never stretched */
.thaisub-cat-media{aspect-ratio:8/5;overflow:hidden}
.thaisub-cat-media img{width:100%;height:100%;object-fit:cover}

/* home-steps-20260715 — 'how it works' 4-step section (replaced the photo-less portfolio grid) */
.thaisub-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.thaisub-step{position:relative;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));padding:28px 22px 24px}
.thaisub-step-num{position:absolute;top:16px;right:18px;font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:1.7rem;line-height:1;color:var(--wp--preset--color--brand-tint,#c9e0fc)}
.thaisub-step-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:var(--wp--preset--color--brand-tint,#c9e0fc);color:var(--wp--preset--color--brand,#024ad8);margin-bottom:16px}
.thaisub-step-ic svg{width:26px;height:26px}
.thaisub-step-t{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.02rem;line-height:1.35;color:var(--wp--preset--color--ink,#1a1a1a);margin:0 0 8px}
.thaisub-step-d{font-size:.9rem;line-height:1.65;color:var(--wp--preset--color--muted,#636363);margin:0}
.thaisub-steps-cta{display:flex;justify-content:center;margin-top:30px}
.thaisub-steps-line{display:inline-flex;align-items:center;gap:9px;background:var(--wp--preset--color--brand,#024ad8);color:#fff;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;padding:13px 26px;border-radius:9999px;text-decoration:none;transition:background .2s}
.thaisub-steps-line svg{color:#fff;flex:0 0 auto}
.thaisub-steps-line:hover{background:var(--wp--preset--color--brand-deep,#0e3191);color:#fff}
@media(max-width:900px){.thaisub-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.thaisub-steps{grid-template-columns:1fr}}

/* steps-deslop-20260715 — drop generic icon-in-tint-box (AI-slop); lead each step with its real sequence number */
.thaisub-step-ic{display:none}
.thaisub-step-num{position:static;display:block;top:auto;right:auto;font-size:2.3rem;font-weight:700;color:var(--wp--preset--color--brand,#024ad8);margin:0 0 14px;line-height:1;font-variant-numeric:tabular-nums}

/* catall-deslop-20260715 — view-all tile: drop generic grid-icon (slop); lead with the real model count as an editorial stat */
.thaisub-cat-card--all{background:#eaf1fe}
.thaisub-cat-card--all .thaisub-cat-allnum{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:3.2rem;color:var(--wp--preset--color--brand,#024ad8);font-variant-numeric:tabular-nums}
.thaisub-cat-card--all .thaisub-cat-allnum small{font-size:.85rem;font-weight:600;color:var(--wp--preset--color--brand-deep,#0e3191);margin-top:7px;letter-spacing:normal}

/* article-rows-20260715 — nerdoptimize-style themed article carousels (Section 09) */
.thaisub-arow{margin-bottom:44px}
.thaisub-arow:last-child{margin-bottom:0}
.thaisub-arow-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.thaisub-arow-title{font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.3;color:var(--wp--preset--color--ink,#1a1a1a);margin:0}
.thaisub-arow-all{flex:0 0 auto;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;color:var(--wp--preset--color--brand,#024ad8);text-decoration:none;white-space:nowrap}
.thaisub-arow-all:hover{text-decoration:underline}
.thaisub-arow-viewport{position:relative}
.thaisub-arow-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none;-ms-overflow-style:none}
.thaisub-arow-track::-webkit-scrollbar{display:none}
.thaisub-acard{flex:0 0 300px;max-width:80vw;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;text-decoration:none;box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));transition:box-shadow .2s,transform .2s}
.thaisub-acard:hover{box-shadow:0 10px 24px rgba(26,26,26,.14);transform:translateY(-2px)}
.thaisub-acard-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--wp--preset--color--cloud,#f5f6f8)}
.thaisub-acard-media img{width:100%;height:100%;object-fit:cover;display:block}
.thaisub-acard-media--ph{display:flex;align-items:center;justify-content:center;background:var(--wp--preset--color--brand-tint,#c9e0fc)}
.thaisub-acard-media--ph span{font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:1.05rem;color:var(--wp--preset--color--brand-deep,#0e3191);opacity:.85;padding:0 14px;text-align:center}
.thaisub-acard-body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1 1 auto}
.thaisub-acard-chip{align-self:flex-start;background:var(--wp--preset--color--brand-tint,#c9e0fc);color:var(--wp--preset--color--brand-deep,#0e3191);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.72rem;line-height:1;padding:.38rem .6rem;border-radius:9999px}
.thaisub-acard-title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--wp--preset--color--ink,#1a1a1a);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-acard-excerpt{font-size:.87rem;line-height:1.6;color:var(--wp--preset--color--muted,#636363);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-acard-date{margin-top:auto;padding-top:4px;font-size:.8rem;color:var(--wp--preset--color--muted,#636363)}
.thaisub-arow-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:9999px;border:1px solid var(--wp--preset--color--line,#e8e8e8);background:#fff;color:var(--wp--preset--color--ink,#1a1a1a);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(26,26,26,.16);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.thaisub-arow-nav:hover{background:var(--wp--preset--color--brand,#024ad8);color:#fff;border-color:transparent}
.thaisub-arow-prev{left:-14px}
.thaisub-arow-next{right:-14px}
.thaisub-arow-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.thaisub-arow-dot{width:8px;height:8px;padding:0;border:0;border-radius:9999px;background:var(--wp--preset--color--steel,#c2c2c2);opacity:.55;cursor:pointer;transition:width .2s,opacity .2s,background .2s}
.thaisub-arow-dot.on{width:22px;opacity:1;background:var(--wp--preset--color--brand,#024ad8)}
@media(max-width:781px){.thaisub-arow-nav{display:none}.thaisub-acard{flex-basis:82vw}}

/* agrid-20260715 — 'บทความทั้งหมด' grid on /blog/ reuses the .thaisub-acard card in a responsive grid + pager */
.thaisub-agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;align-items:start}
.thaisub-agrid .thaisub-acard{flex:initial;max-width:none;scroll-snap-align:none}
.thaisub-agrid-pager{margin-top:30px}
.thaisub-agrid-pager .page-numbers{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0}
.thaisub-agrid-pager .page-numbers li{margin:0}
.thaisub-agrid-pager a.page-numbers,.thaisub-agrid-pager span.page-numbers{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:9999px;background:#fff;color:var(--wp--preset--color--ink,#1a1a1a);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.95rem;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.thaisub-agrid-pager a.page-numbers:hover{border-color:var(--wp--preset--color--brand,#024ad8);color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-agrid-pager span.page-numbers.current{background:var(--wp--preset--color--brand,#024ad8);border-color:transparent;color:#fff}
.thaisub-agrid-pager .page-numbers.dots{border-color:transparent;background:transparent}

/* arow-drag-20260716 — click-drag to scroll the article carousel (desktop); suppress link click while dragging */
.thaisub-arow-track{cursor:grab}
.thaisub-arow-track.is-grabbing{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.thaisub-arow-track.is-grabbing .thaisub-acard{cursor:grabbing}

/* ui-deslop-toc-tag-20260716 — TOC as editorial left-rule list; chips as leading-dot labels (not filled pills). Per NN/g TOC guide + chip-UX research. Later source-order overrides the earlier boxed styles. */
.thaisub-toc{border:0;background:none;border-radius:0;border-left:2px solid var(--wp--preset--color--brand-tint,#c9e0fc);padding:.15rem 0 .15rem 20px;margin:0 0 2rem}
.thaisub-toc>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.82rem;color:var(--wp--preset--color--muted,#636363)}
.thaisub-toc>summary::-webkit-details-marker{display:none}
.thaisub-toc>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;opacity:.6;position:relative;top:-2px}
.thaisub-toc[open]>summary::after{transform:rotate(-135deg);top:1px}
.thaisub-toc ol{margin:.85rem 0 0;padding:0;list-style:none;counter-reset:tocc;display:flex;flex-direction:column;gap:.6rem}
.thaisub-toc li{counter-increment:tocc;margin:0}
.thaisub-toc a{display:inline-flex;gap:.6rem;align-items:baseline;color:var(--wp--preset--color--ink-2,#3d3d3d);text-decoration:none;font-size:.98rem;line-height:1.45}
.thaisub-toc a::before{content:counter(tocc,decimal-leading-zero);color:var(--wp--preset--color--brand,#024ad8);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.85em;font-variant-numeric:tabular-nums;opacity:.5;min-width:1.5em}
.thaisub-toc a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-toc a:hover::before{opacity:1}
.thaisub-post-catchip,.thaisub-acard-chip{background:none;border:0;border-radius:0;padding:0;color:var(--wp--preset--color--brand-deep,#0e3191);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.78rem;display:inline-flex;align-items:center;gap:.42rem;line-height:1.2}
.thaisub-post-catchip::before,.thaisub-acard-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--brand,#024ad8);flex:0 0 auto}
.thaisub-post-catchip:hover{color:var(--wp--preset--color--brand,#024ad8);text-decoration:underline;background:none}

/* promocamp-20260716 — special-campaign offer cards on the Promotions page (not blog cards) */
.thaisub-promocamp{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:1rem;align-items:start}
.thaisub-promocard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;text-decoration:none;box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));transition:box-shadow .2s,transform .2s}
.thaisub-promocard:hover{box-shadow:0 10px 24px rgba(26,26,26,.14);transform:translateY(-2px)}
.thaisub-promocard-media{display:block;background:var(--wp--preset--color--cloud,#f5f6f8)}
.thaisub-promocard-media img{width:100%;height:auto;display:block}
.thaisub-promocard-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1 1 auto}
.thaisub-promocard-tag{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;color:var(--wp--preset--color--accent-deep,#b3262b);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.74rem}
.thaisub-promocard-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--accent,#ff5050)}
.thaisub-promocard-title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.04rem;line-height:1.4;color:var(--wp--preset--color--ink,#1a1a1a);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-promocard-desc{font-size:.88rem;line-height:1.6;color:var(--wp--preset--color--muted,#636363);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-promocard-more{margin-top:auto;padding-top:4px;color:var(--wp--preset--color--brand,#024ad8);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.92rem}

/* promocard-equal-20260716 — uniform 4:3 media (contain, no crop) + stretch so campaign cards are equal height */
.thaisub-promocamp{align-items:stretch}
.thaisub-promocard-media{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thaisub-promocard-media img{width:100%;height:100%;object-fit:contain}

/* nohover-alt-20260716 — disable product-card hover gallery overlay (gallery images are inconsistent flyers -> ugly overlap) */
.thaisub-prod-media .thaisub-prod-media-alt,.thaisub-prod-media .thaisub-prod-media-alt2{display:block !important;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);background:#fff}

/* excerpt-3line-20260716 — give clean summaries room so line-clamp doesn't add an ellipsis */
.thaisub-acard-excerpt{-webkit-line-clamp:3}

/* pdp-heading-size-20260716 — product-page content headings were the theme's 35px hero size; scale to product-section size */
body.single-thaisub_product .thaisub-prod-detail h2{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:700;line-height:1.35}
body.single-thaisub_product .thaisub-product-description h2,body.single-thaisub_product .thaisub-product-description h3{font-size:clamp(1.2rem,1.9vw,1.4rem);font-weight:700;line-height:1.4}

/* pdp-bold-norm-20260716 — tame migrated WooCommerce markup: inline bold rendered at the heading font's 900 weight (looked over-dark); stray h4/h5/h6 pseudo-headings sized to the h3 scale */
.thaisub-product-description :where(strong,b){font-weight:600}
.thaisub-product-description :where(h4,h5,h6){font-size:clamp(1.1rem,1.7vw,1.3rem);font-weight:700;line-height:1.4;margin:1.75rem 0 .5rem}
.thaisub-product-description :where(h2,h3,h4,h5,h6) :where(strong,b){font-weight:inherit}

/* promo-slider-20260717 — editor-managed banner carousel (box 1 of the Promotions page): autoplay + arrows + dots + drag, no crop beyond the 12:5 frame */
.thaisub-pslider{position:relative;margin:.5rem 0 0}
.thaisub-pslider-viewport{position:relative;border-radius:16px;overflow:hidden}
.thaisub-pslider-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.thaisub-pslider-track::-webkit-scrollbar{display:none}
.thaisub-pslider-track.is-grab{cursor:grabbing}
.thaisub-pslider-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:12/5;background:var(--wp--preset--color--cloud,#f5f6f8)}
.thaisub-pslider-a,.thaisub-pslider-img{display:block;width:100%;height:100%}
.thaisub-pslider-img{object-fit:cover}
.thaisub-pslider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--wp--preset--color--ink,#1a1a1a);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:background .2s}
.thaisub-pslider-nav:hover{background:#fff}
.thaisub-pslider-prev{left:12px}.thaisub-pslider-next{right:12px}
.thaisub-pslider-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.thaisub-pslider-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--wp--preset--color--line,#d9d9d9);cursor:pointer;transition:background .2s,width .2s}
.thaisub-pslider-dot.on{width:22px;border-radius:5px;background:var(--wp--preset--color--brand,#024ad8)}
.thaisub-pslider-empty{border:1px dashed var(--wp--preset--color--line,#d9d9d9);border-radius:12px;padding:22px;text-align:center;color:var(--wp--preset--color--muted,#636363);font-size:.9rem;line-height:1.7}
@media(max-width:600px){.thaisub-pslider-nav{width:34px;height:34px;font-size:18px}}

/* promo-query-20260717 — native Query Loop styled as the promo offer cards (Gutenberg-editable replacement for [thaisub_promo_campaigns]) */
.thaisub-promo-query .wp-block-post-template{gap:24px;margin:1rem 0 0;padding:0;list-style:none}
.thaisub-promo-query .wp-block-post{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));transition:box-shadow .2s,transform .2s}
.thaisub-promo-query .wp-block-post:hover{box-shadow:0 10px 24px rgba(26,26,26,.14);transform:translateY(-2px)}
.thaisub-qcard-media{margin:0;background:var(--wp--preset--color--cloud,#f5f6f8);line-height:0}
.thaisub-qcard-media img{width:100%;height:auto;display:block}
.thaisub-qcard-body{flex:1 1 auto;padding:16px 18px 18px}
.thaisub-qcard-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;margin:0;color:var(--wp--preset--color--accent-deep,#b3262b);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.74rem}
.thaisub-qcard-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--accent,#ff5050)}
.thaisub-qcard-title{margin:0;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.04rem;line-height:1.4}
.thaisub-qcard-title a{color:var(--wp--preset--color--ink,#1a1a1a);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-qcard-title a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-qcard-desc{margin:0}
.thaisub-qcard-desc .wp-block-post-excerpt__excerpt{margin:0;font-size:.88rem;line-height:1.6;color:var(--wp--preset--color--muted,#636363);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-qcard-desc .wp-block-post-excerpt__more-text{margin:.5rem 0 0}
.thaisub-qcard-desc .wp-block-post-excerpt__more-text a,.thaisub-qcard-desc a.wp-block-post-excerpt__more-link{color:var(--wp--preset--color--brand,#024ad8);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:.92rem;text-decoration:none}

/* blog-query-20260717 — native Query Loop as the /blog/ article grid (replaces [thaisub_article_grid]) */
.thaisub-blog-query .wp-block-post-template{gap:24px;margin:0;padding:0;list-style:none}
.thaisub-blog-query .wp-block-post{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--wp--preset--color--line,#e8e8e8);border-radius:var(--wp--custom--radius--card,16px);overflow:hidden;box-shadow:var(--wp--custom--shadow--lift,0 2px 8px rgba(26,26,26,.08));transition:box-shadow .2s,transform .2s}
.thaisub-blog-query .wp-block-post:hover{box-shadow:0 10px 24px rgba(26,26,26,.14);transform:translateY(-2px)}
.thaisub-aqcard-media{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--wp--preset--color--cloud,#f5f6f8);line-height:0}
.thaisub-aqcard-media a,.thaisub-aqcard-media img{display:block;width:100%;height:100%}
.thaisub-aqcard-media img{object-fit:cover}
.thaisub-aqcard-body{flex:1 1 auto;padding:16px 16px 18px}
.thaisub-aqcard-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:.42rem;margin:0;color:var(--wp--preset--color--brand-deep,#0e3191);font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:.78rem;line-height:1.2}
.thaisub-aqcard-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--brand,#024ad8);flex:0 0 auto}
.thaisub-aqcard-title{margin:0;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1.02rem;line-height:1.4}
.thaisub-aqcard-title a{color:var(--wp--preset--color--ink,#1a1a1a);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-aqcard-title a:hover{color:var(--wp--preset--color--brand,#024ad8)}
.thaisub-aqcard-excerpt{margin:0}
.thaisub-aqcard-excerpt .wp-block-post-excerpt__excerpt{margin:0;font-size:.87rem;line-height:1.6;color:var(--wp--preset--color--muted,#636363);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.thaisub-aqcard-date{margin-top:auto;padding-top:6px;font-size:.8rem;color:var(--wp--preset--color--muted,#636363)}
.thaisub-blog-query .wp-block-query-pagination{margin-top:32px;gap:10px;flex-wrap:wrap}
.thaisub-blog-query .wp-block-query-pagination a,.thaisub-blog-query .wp-block-query-pagination .wp-block-query-pagination-numbers span{text-decoration:none;color:var(--wp--preset--color--ink,#1a1a1a);font-family:var(--wp--preset--font-family--heading);font-weight:600}
.thaisub-blog-query .wp-block-query-pagination [aria-current]{color:var(--wp--preset--color--brand,#024ad8)}

/* chip-size-20260717 — enlarge catalog filter chips ~15% for readability */
.thaisub-chip{font-size:1rem;padding:.58rem 1.1rem}
.thaisub-chips{gap:.6rem}
@media(max-width:781px){.thaisub-chip{min-height:44px}}

/* pager-relposts-fix-20260718 — (1) blog Query Loop pager showed page numbers stacked
   vertically: the nav carries .thaisub-agrid-pager (old <ul> circle styling) but the Query
   Loop DOM puts .page-numbers on the items and .wp-block-query-pagination-numbers on the
   container, which wasn't flex, so each display:flex number became block-level and stacked.
   (2) related-posts module reused the big search grid (minmax 280) -> oversized 2-col cards. */
.thaisub-agrid-pager .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thaisub-agrid-pager.wp-block-query-pagination{align-items:center;gap:12px}
.thaisub-pagination .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.thaisub-pagination .wp-block-query-pagination-next,.thaisub-pagination .wp-block-query-pagination-previous{font-size:0}
.thaisub-pagination .wp-block-query-pagination-next-arrow,.thaisub-pagination .wp-block-query-pagination-previous-arrow{display:none}
.thaisub-pagination .wp-block-query-pagination-next::after{content:"\203A";font-size:1rem}
.thaisub-pagination .wp-block-query-pagination-previous::before{content:"\2039";font-size:1rem}
.thaisub-blog-query .wp-block-query-pagination a,.thaisub-blog-query .wp-block-query-pagination-numbers span,.thaisub-pagination .wp-block-query-pagination-numbers .page-numbers{color:var(--wp--preset--color--ink-2,#3d3d3d);font-weight:400}
.thaisub-blog-query .wp-block-query-pagination [aria-current],.thaisub-pagination .wp-block-query-pagination-numbers .page-numbers.current{color:#fff;font-weight:400}
.thaisub-relposts .thaisub-search-articles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.thaisub-relposts .thaisub-article-card figure img{aspect-ratio:16/10;max-height:150px}
.thaisub-relposts .thaisub-article-body{padding:12px 14px 16px}
.thaisub-relposts h3.wp-block-post-title{font-size:16px!important;line-height:1.4}
@media(max-width:560px){.thaisub-relposts .thaisub-search-articles{grid-template-columns:1fr 1fr;gap:12px}}