/* /electrical/ = 888 Trading product group 02: electrical, IT & government vehicles (v2.1 layout, v2.3.0 naming): page-only sections. Header, full-screen menu, buttons, verify us, footer and
   form fields come from site.css; every value comes from tokens.css. Classes here start with e- so they never meet the
   home page's. Sections in page order: language · artwork slots · hero · partner strip · section heads · about ·
   appointment · products · partners · process · contact · enquiry dialog */

/* ---------- Language: <span class="th"> / <span class="en">, switched by data-lang on <html> ---------- */
:root[data-lang="th"] .en,:root[data-lang="en"] .th{display:none!important}

/* ---------- Artwork slots: put one <img> inside to show artwork; while empty they take no space ---------- */
.art-slot:empty{display:none}
.art-slot img{display:block;width:100%;height:auto}
.e-art{background:var(--c-charcoal)}
.e-art-contact{margin:calc(-1 * var(--section-y)) 0 var(--section-y)}

/* ---------- Hero: charcoal, type only ---------- */
.e-hero{position:relative;display:flex;align-items:center;min-height:86vh;min-height:86svh;padding:calc(var(--header-h) + var(--s-8)) 0 var(--s-9);text-align:center;overflow:hidden}
.e-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(165,140,93,.16),rgba(165,140,93,0) 70%);pointer-events:none}
.e-hero-in{position:relative;width:100%;max-width:920px}
.e-emblem{width:64px;height:auto;margin:0 auto var(--s-6)}
@media (min-width:1200px){.e-emblem{width:76px}}
.e-fam{justify-content:center;max-width:680px;margin:0 auto var(--s-6);font:400 var(--fs-eyebrow)/1.9 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-on-dark-soft)}
:lang(th) .e-fam{text-transform:none;letter-spacing:.01em;font-size:15px}
.e-hero .lead{max-width:640px;margin:0 auto}
.e-ctas{justify-content:center;margin-top:var(--s-7)}
.e-down{position:absolute;left:50%;bottom:var(--s-5);width:44px;height:44px;margin-left:-22px;display:none}
.e-down span{position:absolute;left:50%;top:8px;width:1px;height:28px;background:rgba(246,243,236,.35);overflow:hidden}
.e-down span::after{content:"";position:absolute;left:0;top:-28px;width:1px;height:28px;background:var(--c-gold);animation:eDrip 2.4s var(--ease) infinite}
@keyframes eDrip{to{top:28px}}
@media (min-width:768px){.e-down{display:block}}
@media (max-width:767px){.e-ctas .btn{flex:1 1 auto}}

/* ---------- Partner strip under the hero ---------- */
.e-strip{padding:var(--s-7) 0;border-bottom:1px solid var(--c-line-soft)}
.e-strip .eyebrow{margin-bottom:var(--s-5)}
.e-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
@media (min-width:768px){.e-logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.e-logos li{min-width:0;height:72px;display:flex;align-items:center;justify-content:center;padding:var(--s-2) var(--s-4)}
.e-logos img{min-width:0;max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.75;transition:filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.e-logos li:hover img{filter:none;opacity:1}

/* ---------- Section head: title left, introduction right ---------- */
.e-head{display:grid;gap:var(--s-5);margin-bottom:var(--s-8)}
@media (min-width:1024px){.e-head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9);align-items:end}}
.e-head .title{margin-bottom:0}
.e-prose p:not(.lead){color:var(--c-ink-soft)}
/* small gold label used as a sub-heading */
:root .e-lbl{font:400 var(--fs-eyebrow)/1.6 var(--f-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-gold-deep);margin:0 0 var(--s-4)}
:root:lang(th) .e-lbl{text-transform:none;letter-spacing:.04em;font-size:13px}
.sec-dark .e-lbl{color:var(--c-gold)}
.e-no{font:400 var(--fs-eyebrow)/1.6 var(--f-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-gold-deep);margin:0 0 var(--s-3)}
:lang(th) .e-no{text-transform:none;letter-spacing:.04em;font-size:13px}
.e-note{margin-top:var(--s-4);font-size:13px;line-height:1.7;color:var(--c-ink-soft)}

/* ---------- About ---------- */
.e-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--c-line)}
@media (min-width:1024px){.e-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.e-facts > div{padding:var(--s-5) var(--s-4) var(--s-5) 0;border-bottom:1px solid var(--c-line)}
.e-facts > div:nth-child(even){padding-left:var(--s-5);border-left:1px solid var(--c-line)}
@media (min-width:1024px){.e-facts > div{padding:var(--s-6) var(--s-5)!important;border-left:1px solid var(--c-line)}.e-facts > div:first-child{border-left:0;padding-left:0!important}}
.e-facts dt{font:300 clamp(34px,4vw,46px)/1 var(--f-display);color:var(--c-ink)}
.e-facts dt span:not(.th):not(.en){color:var(--c-gold)}
.e-facts dd{margin-top:var(--s-3);font:400 var(--fs-small)/1.5 var(--f-display);color:var(--c-ink-soft)}
:lang(en) .e-facts dd{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.e-about{display:grid;gap:var(--s-8);margin-top:var(--s-8)}
@media (min-width:1024px){.e-about{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-9)}}
.e-vm > div{padding:var(--s-5) 0;border-top:1px solid var(--c-line)}
.e-vm > div:first-child{padding-top:0;border-top:0}
.e-vm p:not(.e-lbl){color:var(--c-ink-soft)}

/* key-value table (corporate information, contact details) */
.e-kv{width:100%;border-collapse:collapse}
.e-kv tr{border-top:1px solid var(--c-line)}
.e-kv tr:last-child{border-bottom:1px solid var(--c-line)}
.e-kv th,.e-kv td{padding:var(--s-4) 0;text-align:left;vertical-align:top}
.e-kv th{width:34%;padding-right:var(--s-5);font:400 12px/1.7 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-soft)}
:lang(th) .e-kv th{text-transform:none;letter-spacing:.01em;font-size:14px}
.e-kv td{overflow-wrap:anywhere}
@media (max-width:599px){.e-kv th,.e-kv td{display:block;width:auto}.e-kv th{padding-bottom:0}.e-kv td{padding-top:var(--s-1)}}
.sec-dark .e-kv tr{border-color:var(--c-line-dark)}
.sec-dark .e-kv th{color:var(--c-on-dark-soft)}

/* ---------- Official appointment ---------- */
.e-appoint-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5);align-items:center}
.e-appoint-copy{grid-column:1 / -1}
@media (min-width:1024px){.e-appoint-in{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:var(--s-7)}.e-appoint-copy{grid-column:auto;padding-right:var(--s-6)}}
.e-appoint .lead{color:var(--c-on-dark)}
.e-ref{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-6)}
.e-seal{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 16px;border:1px solid var(--c-gold);border-radius:var(--radius-pill);font:400 12px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold)}
:lang(th) .e-seal{text-transform:none;letter-spacing:.02em;font-size:14px}
.e-doc{margin:0}
.e-doc-frame{background:var(--c-white);padding:clamp(6px,1vw,10px);box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.e-doc-frame img{width:100%;height:auto}
.e-doc figcaption{margin-top:var(--s-3);text-align:center;font:400 12px/1.5 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-on-dark-soft)}
:lang(th) .e-doc figcaption{text-transform:none;letter-spacing:.01em;font-size:14px}

/* ---------- Products ---------- */
.e-prod{padding:var(--s-8) 0;border-top:1px solid var(--c-line)}
.e-prod:first-of-type{border-top:0;padding-top:0}
.e-phead{display:grid;gap:var(--s-4);margin-bottom:var(--s-6)}
@media (min-width:1024px){.e-phead{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9)}}
.e-prod h3{font-size:clamp(20px,2.2vw,26px);line-height:1.3}
:lang(th) .e-prod h3{line-height:1.45}
.e-phead p:not(.e-no){color:var(--c-ink-soft)}
.e-plogos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin-top:var(--s-4)}
.e-plogos img{width:auto;max-width:160px;height:auto;max-height:30px;object-fit:contain;mix-blend-mode:multiply}  /* the logo files have white backgrounds */
.e-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media (min-width:768px){.e-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.e-grid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.e-grid5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.e-grid li{min-width:0}
.e-plate{position:relative;aspect-ratio:1 / 1;background:var(--c-white);overflow:hidden}
.e-plate img{position:absolute;left:10%;top:10%;width:80%;height:80%;object-fit:contain;transition:transform 1.2s var(--ease)}
.e-plate-full img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.e-grid li:hover .e-plate img{transform:scale(1.03)}
.e-cap{margin:var(--s-3) 0 0;text-align:center;font:400 12px/1.5 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink)}
:lang(th) .e-cap{text-transform:none;letter-spacing:.01em;font-size:14px}
.e-cap small{display:block;margin-top:2px;font-size:12px;letter-spacing:.04em;color:var(--c-ink-soft);text-transform:none}
.e-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-6);border-top:1px solid var(--c-line)}
@media (min-width:1024px){.e-specs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.e-specs > div{min-width:0;padding:var(--s-4) var(--s-4) var(--s-4) 0;border-bottom:1px solid var(--c-line)}
.e-specs > div:nth-child(even){padding-left:var(--s-4);border-left:1px solid var(--c-line)}
@media (min-width:1024px){.e-specs > div{padding-left:var(--s-4)!important;border-bottom:0;border-left:1px solid var(--c-line)}.e-specs > div:first-child{padding-left:0!important;border-left:0}}
@media (max-width:1023px){.e-specs > div:last-child:nth-child(odd){grid-column:1 / -1;border-left:0;padding-left:0}}
.e-specs dt{font:400 11px/1.6 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold-deep);margin-bottom:var(--s-1)}
:lang(th) .e-specs dt{text-transform:none;letter-spacing:.01em;font-size:13px}
.e-specs dd{font:300 17px/1.45 var(--f-display);color:var(--c-ink)}
.e-cables{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:1024px){.e-cables:has(.art-slot img){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.e-cables .e-note{grid-column:1 / -1;margin-top:0}
.e-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.e-prod > .e-table{margin-top:var(--s-6)}
.e-spec{width:100%;border-collapse:collapse;background:var(--c-white);font-size:15px;line-height:1.55}
.e-spec th{padding:var(--s-4);text-align:left;font:400 11px/1.6 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-gold-deep);border-bottom:1px solid var(--c-ink)}
:lang(th) .e-spec th{text-transform:none;letter-spacing:.01em;font-size:13px}
.e-spec td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-line-soft);vertical-align:top}
.e-spec tr:last-child td{border-bottom:0}
.e-spec td:first-child{color:var(--c-ink)}
.e-spec td:not(:first-child){color:var(--c-ink-soft)}
/* v2.3.1 phones: each row becomes a small card (the first cell is its title, the other two sit side by side under their own
   labels from data-label-th/en), so a spec table never scrolls sideways; role attributes in the markup keep the table
   semantics for screen readers when the display changes */
@media (max-width:599px){
  .e-table{overflow:visible}
  .e-spec,.e-spec tbody,.e-spec tr,.e-spec td{display:block}
  .e-spec{font-size:14px;border-top:1px solid var(--c-ink)}
  .e-spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .e-spec tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2) var(--s-5);padding:var(--s-4);border-bottom:1px solid var(--c-line-soft)}
  .e-spec tr:last-child{border-bottom:0}
  .e-spec td{padding:0;border:0;min-width:0}
  .e-spec td:first-child{grid-column:1 / -1;font-size:15px}
  .e-spec td[data-label-en]::before{content:attr(data-label-en);display:block;margin-bottom:2px;font:400 12px/1.5 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-gold-deep)}
  :lang(th) .e-spec td[data-label-th]::before{content:attr(data-label-th);font-size:14px;letter-spacing:.01em;text-transform:none}
}
.e-mat{margin-top:var(--s-6);padding:var(--s-7) var(--s-6)}
@media (min-width:768px){.e-mat{padding:var(--s-8)}}
.e-mat .lead{max-width:none}

/* ---------- Partners ---------- */
.e-cards{display:grid;border-top:1px solid var(--c-line)}
@media (min-width:768px){.e-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.e-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.e-cards li{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:var(--s-6) 0;border-bottom:1px solid var(--c-line)}
@media (min-width:768px){.e-cards li{padding:var(--s-6) var(--s-6) var(--s-6) 0}.e-cards li:nth-child(even){padding-left:var(--s-6);border-left:1px solid var(--c-line)}}
@media (min-width:1200px){.e-cards li,.e-cards li:nth-child(even){padding:var(--s-7) var(--s-6);border-left:1px solid var(--c-line)}.e-cards li:nth-child(3n+1){padding-left:0;border-left:0}}
.e-card-logo{height:48px;display:flex;align-items:center;margin-bottom:var(--s-5)}
.e-card-logo img{width:auto;max-width:180px;height:auto;max-height:44px;object-fit:contain}
.e-cards h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin-bottom:var(--s-3)}
.e-cards p:not(.e-no){font-size:var(--fs-small);line-height:1.8;color:var(--c-ink-soft)}
.e-cards .more{margin-top:auto;padding-top:var(--s-4);border-bottom:0}
.e-cards .more{text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}   /* v2.3.1: the rule runs under the text and the dash, like every other .more */
#partners .e-note{margin-top:var(--s-6)}

/* ---------- Service process ---------- */
.e-steps{list-style:none;display:grid;gap:0 var(--s-6)}
@media (min-width:768px){.e-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.e-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-7)}}
.e-steps li{min-width:0;padding:var(--s-5) 0 var(--s-6);border-top:1px solid var(--c-line)}
.e-step-no{display:block;font:300 34px/1 var(--f-display);color:var(--c-gold);margin-bottom:var(--s-4)}
.e-steps h3{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:400;margin-bottom:var(--s-2)}
.e-steps p{font-size:var(--fs-small);line-height:1.8;color:var(--c-ink-soft)}
.e-lists{display:grid;gap:var(--s-7);margin-top:var(--s-8)}
@media (min-width:1024px){.e-lists{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}}
.e-list li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--c-line-soft);font-size:var(--fs-small);line-height:1.7;color:var(--c-ink-soft)}
.e-list li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--c-gold)}
.sec-dark .e-list li{border-color:var(--c-line-dark);color:var(--c-on-dark-soft)}

/* ---------- Contact ---------- */
.e-contact{display:grid;gap:var(--s-7)}
@media (min-width:1024px){.e-contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-9)}}
.e-link{color:var(--c-on-dark);text-decoration:none;border-bottom:1px solid var(--c-line-dark)}
.e-link:hover{border-bottom-color:var(--c-gold)}
#contact .e-kv .more{margin-top:var(--s-3)}
.e-act{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:var(--s-5);color:var(--c-on-dark);text-decoration:none;font:400 16px/1.4 var(--f-display);letter-spacing:.02em}
.e-act:hover{color:var(--c-gold)}
.e-act svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--c-gold);stroke-width:1.4}
.e-copy{min-height:32px;padding:4px 14px;border:1px solid var(--c-line-dark);border-radius:var(--radius-pill);font:400 12px/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-on-dark-soft);vertical-align:middle}
:lang(th) .e-copy{text-transform:none;letter-spacing:.01em;font-size:13px}
.e-copy:hover{border-color:var(--c-gold);color:var(--c-gold)}
.e-hint{display:block;margin-top:2px;font-size:13px;color:var(--c-on-dark-soft)}
.e-quote{padding:var(--s-6);border:1px solid var(--c-line-dark)}
@media (min-width:768px){.e-quote{padding:var(--s-7)}}
.e-quote .btn{margin-top:var(--s-6)}
.e-verify{margin-top:var(--s-8)}

/* ---------- Enquiry dialog (native <dialog>: it keeps focus inside and closes on Esc) ---------- */
.e-dialog{position:fixed;width:min(620px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:var(--s-7) var(--s-6) var(--s-6);border:0;background:var(--c-white);color:var(--c-ink);box-shadow:var(--shadow-modal);overflow-y:auto}
@media (min-width:768px){.e-dialog{padding:var(--s-8) var(--s-7) var(--s-7)}}
.e-dialog::backdrop{background:rgba(17,16,15,.55)}
.e-dialog[open]{animation:eIn var(--t) var(--ease)}
@keyframes eIn{from{opacity:0;transform:translateY(16px)}}
.e-dialog h2{font-size:var(--fs-h3);line-height:var(--lh-h3);margin-bottom:var(--s-3)}
:lang(en) .e-dialog h2{text-transform:uppercase;letter-spacing:var(--ls-heading)}
.e-dialog[data-mode="quote"] [data-mode="email"],.e-dialog[data-mode="email"] [data-mode="quote"]{display:none}
.e-dialog .btn-row{margin-top:var(--s-2)}
.e-dialog-head{margin-bottom:var(--s-6)}   /* v2.3.1: the lead is the last <p> of the head (margin 0), so the head keeps the 32px gap of the home form */
html.dialog-open{overflow:hidden}

/* the footer follows the charcoal contact section: a hairline keeps them apart */
.ftr{border-top:1px solid var(--c-line-dark)}

/* ---------- v2.1.0 line-art plates: ivory ground, art fills the plate; partner logos monochrome ---------- */
.e-plate{background:var(--c-ivory)}
.e-plate img{left:0;top:0;width:100%;height:100%}
.e-cables-art{background:var(--c-ivory)}
.e-card-logo img,.e-plogos img{filter:grayscale(1) contrast(.9);opacity:.8;transition:filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.e-cards li:hover .e-card-logo img{filter:none;opacity:1}

/* ---------- v2.2.0: seven product groups + import & export ----------
   index of groups under the heading · anchors clear the fixed header · groups 05–07 put their plates beside a scope list
   (.e-duo) · import & export closes the section (.e-trade). No aspect-ratio + percentage-height content in new blocks:
   the plates reuse the existing .e-plate (1:1 box, image positioned absolutely). */
#products .sec-head .lead{max-width:640px;margin:0 auto}
.e-index{list-style:none;margin:0 0 var(--s-8);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-5);border-top:1px solid var(--c-line)}
@media (min-width:768px){.e-index{grid-template-columns:repeat(4,minmax(0,1fr))}}
.e-index li{min-width:0}
.e-index a{display:block;height:100%;padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);text-decoration:none;font:400 12px/1.5 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);transition:color var(--t-fast)}
:lang(th) .e-index a{text-transform:none;letter-spacing:.01em;font-size:15px}
.e-index a:hover{color:var(--c-gold-deep)}
.e-index-no{display:inline-block;min-width:2.4em;color:var(--c-gold-deep);letter-spacing:.16em}
.e-prod,.e-trade{scroll-margin-top:var(--s-4)}   /* v2.4.0: html scroll-padding already clears the header (was header + 16, which doubled it) */
.e-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:768px){.e-duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:start}}
@media (min-width:1024px){.e-duo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9)}}   /* same columns as .e-phead above it */
.e-grid1{grid-template-columns:minmax(0,1fr)}
@media (max-width:767px){.e-grid1{width:100%;max-width:360px;margin:0 auto}}
.e-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.e-duo-body{min-width:0}
.e-duo-body .e-note{margin-top:var(--s-4)}
.e-duo-body .more{margin-top:var(--s-5)}
.e-trade{padding:var(--s-8) 0 0;margin-top:0;border-top:1px solid var(--c-line)}   /* v2.3.1: #p-07 already ends with 64px, so the rule sits the same 64px below the content as between every other category (was 128) */
.e-trade .e-phead{margin-bottom:0}
.e-trade .more{margin-top:var(--s-4)}
#about .e-prose .more{margin-top:var(--s-2)}

/* ---------- v2.3.0 polish: item lists, small text, Thai labels ---------- */
.e-mat .lead{margin-bottom:var(--s-4)}
.e-mat-items > li{font-size:var(--fs-lead);line-height:1.7;color:var(--c-on-dark)}
:lang(th) .e-mat-items > li{line-height:1.8}
.e-note,.e-hint{font-size:14px}
.e-cap small{font-size:14px}
:lang(th) .e-copy{font-size:14px}
.e-specs dt,.e-spec th{font-size:12px}
:lang(th) .e-specs dt,:lang(th) .e-spec th,:root:lang(th) .e-lbl,:lang(th) .e-no{font-size:14px}
.e-prose p,.e-phead p,.e-duo-body .e-note{max-width:38em}
/* category index: the number sits in its own column, so a wrapped label hangs aligned with its first line */
.e-index a{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline}
.e-index-no{min-width:0}

/* ---------- v2.4.0 product plates for every category (CHG-2026-060) ----------
   p-02, p-05 and p-06 show a row of plates right under the head, exactly like p-01/p-03/p-04. p-05 and p-06 then carry their
   list in .e-supply: label in the head's left column, list and link in its right column (same 5/6 split as .e-phead).
   The cable cut-away beside the p-02 table now has its own caption. */
.e-prod > .e-grid + .e-cables,.e-prod > .e-grid + .e-supply{margin-top:var(--s-6)}
.e-cap{text-wrap:balance}
.e-cables-art .e-cap{margin-top:var(--s-3)}
.e-supply{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding-top:var(--s-5);border-top:1px solid var(--c-line)}
@media (min-width:1024px){.e-supply{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9)}}
.e-supply .e-lbl{margin:var(--s-2) 0 0}
.e-supply .e-list{max-width:38em}
.e-trade .e-duo{margin-top:var(--s-6)}