/* ===== หน้าสินค้า v2 + การ์ดสินค้าหน้าแรก (T02e) ตาม design-system V1–V9 ===== */
:root{--line-strong:#5A5F69}
.pv2{font-size:18px;line-height:1.75}
.pv2 .btn{height:56px;min-width:200px;font-size:18px}
.pv2 p{max-width:60ch}
.pv2 a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.pv2 h2{margin-bottom:24px}
.pv2 h3{font-size:22px}
.p-muted{color:var(--muted)}
.p-lead{color:var(--ink);margin-bottom:12px}
.p-sec{padding-block:56px}
@media (min-width:1024px){.p-sec{padding-block:88px}}
.p-ico{width:40px;height:40px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p-hero{padding-block:32px 56px}
@media (min-width:1024px){.p-hero{padding-block:48px 88px}}
.p-crumb{color:var(--muted);margin-bottom:24px}
.p-crumb a{color:var(--muted)}
.p-hero-grid{display:grid;gap:40px;align-items:start}
.p-hero-copy{display:grid;gap:20px}
.p-hero-copy .btn-row{margin-top:8px}
.p-hero-art{max-width:800px}
@media (min-width:1180px){.p-hero-grid{grid-template-columns:5fr 7fr;gap:56px}.p-hero-art{max-width:none}}

/* ปกอาร์ตจริง (T02f) สลับได้จุดเดียวที่ตัวแปรสองตัวนี้ */
:root{
  --cover-hero:url(cover-hero.webp);
  --cover-card:url(cover-card.webp);
  --line-strong-s:#62676F; /* ขอบที่ตกบนพื้น --surface ให้ ≥ 3:1 (3.12 บน surface, 3.42 บน bg) */
}
.cover{position:relative;border:1px solid var(--line-strong-s);border-radius:8px;background:var(--surface);padding:16px;overflow:hidden;isolation:isolate}
@media (min-width:640px){.cover{padding:20px}}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cover-hero) center/cover no-repeat;transform:rotate(180deg)}
.p-label{position:relative;z-index:3;display:inline-block;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong-s);border-radius:4px;padding:2px 10px;font-size:18px;line-height:1.6}
.cover .p-label{margin-bottom:12px}
.cover .art-svg{display:block;width:100%;height:auto}
.art-small{display:block}
.art-full{display:none!important}
@media (min-width:640px){.art-small{display:none!important}.art-full{display:block!important}}
.art-svg text{font-family:"IBM Plex Sans Thai",sans-serif}
.p-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.p-chips li{height:44px;padding:0 16px;border-radius:4px;color:#0C0D0F;font-weight:500;display:flex;align-items:center}
.p-types{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.p-types li{display:flex;align-items:center;gap:10px}
.p-sw{display:inline-block;width:28px;height:20px;border-radius:3px;flex:none}
.sw-in{background:#fff;border:1.5px solid #0A5FD6}
.sw-calc{background:#C9DCF7}
.sw-warn{background:#FFE699;border:1.5px solid #8A6500}
.p-b{width:28px;height:28px;border-radius:50%;background:var(--blue-btn);color:var(--ink);display:inline-grid;place-items:center;font-size:16px;font-weight:600;line-height:1;flex:none}
@media (max-width:639px){.p-chips,.p-types{flex-direction:column}.p-chips li{width:100%}}
@media (prefers-reduced-motion:no-preference){
  .art-full .band{animation:bandIn .45s ease-out both}
  .art-full .b2{animation-delay:.15s}.art-full .b3{animation-delay:.3s}.art-full .b4{animation-delay:.45s}
}
@keyframes bandIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* จุดเด่น */
.p-feat{display:grid;gap:16px}
@media (min-width:640px){.p-feat{grid-template-columns:1fr 1fr}}
.p-feat li,.p-file,.p-tab{background:var(--surface);border:1px solid var(--line-strong-s);border-radius:8px}
.p-feat li{padding:32px;display:grid;gap:8px;align-content:start}

/* ขั้นตอน */
.p-steps{display:grid;gap:0}
.p-steps li{position:relative;display:flex;gap:20px;align-items:flex-start;padding-bottom:36px}
.p-steps li:last-child{padding-bottom:0}
.p-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue-btn);color:var(--ink);display:grid;place-items:center;font:500 20px/1 var(--mono)}
.p-steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--muted-on-light)}
.p-steps h3{margin-bottom:4px}
.light .p-steps p{color:var(--ink-on-light)}
@media (min-width:640px){
  .p-steps{grid-template-columns:repeat(3,1fr);gap:40px}
  .p-steps li{padding-bottom:0;flex-direction:column;gap:16px}
  .p-steps li:not(:last-child)::after{left:56px;right:-40px;top:21px;bottom:auto;width:auto;height:2px}
}

/* แผนที่ไฟล์ */
.p-map{display:grid;gap:0;grid-template-columns:1fr}
.p-tab{padding:20px 24px;border-radius:8px 8px 0 0}
.p-tab h3{margin-bottom:4px}
.p-tab p{max-width:none}
.p-role{display:inline-block;border:1px solid var(--ink);border-radius:4px;padding:0 10px;margin-bottom:8px}
.p-tab.t-central{border:2px solid var(--blue)}
.p-arr{display:grid;place-items:center;padding:12px 0}
.p-arr .ic{width:32px;height:32px;stroke:var(--blue)}
.p-arr .ar-r{display:none}
@media (min-width:1024px){
  .p-map{grid-template-columns:1fr 56px 1.25fr 56px 1fr}
  .t-read{grid-column:1;grid-row:1;margin-bottom:16px}
  .a-rs{display:none}
  .t-setup{grid-column:1;grid-row:2}
  .a-sc{grid-column:2;grid-row:2;padding:0;align-self:center}
  .t-central{grid-column:3;grid-row:1 / span 3;align-self:stretch;padding:32px}
  .a-cp{grid-column:4;grid-row:2;padding:0;align-self:center}
  .t-print{grid-column:5;grid-row:2;margin-bottom:16px}
  .a-ce{grid-column:4;grid-row:3;padding:0;align-self:center}
  .t-export{grid-column:5;grid-row:3}
  .p-arr .ar-d{display:none}
  .p-arr .ar-r{display:block}
}
@media (min-width:640px) and (max-width:1023px){
  .p-map{grid-template-columns:1fr 56px 1fr}
  .t-read{grid-column:1 / -1;grid-row:1}
  .a-rs{grid-column:1 / -1;grid-row:2}
  .t-setup{grid-column:1;grid-row:3}
  .a-sc{grid-column:2;grid-row:3;padding:0;align-self:center}
  .t-central{grid-column:3;grid-row:3}
  .a-cp{grid-column:1 / -1;grid-row:4}
  .t-print{grid-column:1;grid-row:5}
  .a-ce{display:none}
  .t-export{grid-column:3;grid-row:5}
  .a-sc .ar-d{display:none}
  .a-sc .ar-r{display:block}
}

/* ไฟล์ดาวน์โหลด */
.p-files{display:grid;gap:16px}
.p-file{padding:32px;display:grid;gap:16px;align-content:start}
.p-file.main{border:2px solid var(--blue)}
.p-file h3{margin-bottom:4px}
.p-file .btn{width:100%}
.p-file p{max-width:none}
.p-fname{color:var(--muted);margin-top:8px}
.p-fname .mono{font-size:18px;word-break:normal;overflow-wrap:anywhere;color:var(--muted)}
.p-fname .sz{white-space:nowrap}
@media (min-width:1024px){.p-files{grid-template-columns:repeat(3,1fr);gap:24px}.p-file{grid-template-rows:auto 1fr auto}}
@media (min-width:640px) and (max-width:1023px){.p-file{grid-template-columns:auto 1fr auto;align-items:center}.p-file .btn{width:auto}}

/* แกลเลอรี */
.gal-sec{container-type:inline-size;padding-inline:0}
.g-scroller{--pad:max(var(--gutter),calc((100cqw - 1120px)/2));--cw:min(1120px,calc(100cqw - 2*var(--gutter)));position:relative;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:auto;scrollbar-color:#A7A9AE #16181C;padding:8px var(--pad) 24px;scroll-padding-inline-start:var(--pad);margin-top:24px}
.g-scroller::-webkit-scrollbar{height:14px}
.g-scroller::-webkit-scrollbar-track{background:#16181C}
.g-scroller::-webkit-scrollbar-thumb{background:#A7A9AE;border-radius:7px}
.g-scroller:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.g-card{flex:0 0 min(1000px,calc(var(--cw)*.88));scroll-snap-align:start;min-width:0}
@media (max-width:639px){.g-card{flex-basis:calc(var(--cw)*.9)}}
.g-tab{display:inline-flex;align-items:center;height:44px;padding:0 20px;border:1px solid var(--line-strong-s);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface);color:var(--ink);font-weight:600;position:relative;z-index:2;margin-bottom:-1px}
.g-card.current .g-tab{background:var(--ink);color:#0C0D0F;border-color:var(--ink)}
.g-frame{position:relative;border:1px solid var(--line-strong);border-radius:0 8px 8px 8px;overflow:hidden;background:var(--bg)}
.g-link{display:block;line-height:0;cursor:zoom-in;position:relative}
.g-link:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.g-link img{display:block;width:100%;height:auto;aspect-ratio:8/5;max-height:640px;object-fit:cover;object-position:top left}
.g-zoom{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:#0C0D0F;display:grid;place-items:center}
.g-zoom .ic{width:28px;height:28px;stroke:#fff}
.g-cap{max-width:760px;margin-top:16px}
.g-cap h3{margin-bottom:4px}
.g-cap p{max-width:none}
.g-fixed{color:var(--muted)}
.g-after{margin-top:8px}
.g-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.g-btn{width:56px;height:56px;border-radius:8px;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.g-btn .ic{width:28px;height:28px;stroke:var(--ink);stroke-width:2.5}
.g-btn[aria-disabled=true]{border-color:var(--line-strong);cursor:default}
.g-btn[aria-disabled=true] .ic{stroke:var(--muted);stroke-width:1.5}
.g-btn:focus-visible,.g-dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.g-count{font:500 20px/1 var(--mono);width:72px;text-align:center;color:var(--ink)}
.g-dots{display:flex;margin-left:auto}
@media (max-width:639px){.g-dots{margin-left:0;width:100%;justify-content:center}}
.g-dot{width:48px;height:48px;background:transparent;border:0;display:grid;place-items:center;cursor:pointer;padding:0}
.g-dot i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid var(--muted)}
.g-dot[aria-current=true] i{width:16px;height:16px;background:var(--blue);border-color:var(--blue)}
.g-more{margin-top:8px}
@media (prefers-reduced-motion:no-preference){.g-scroller{scroll-behavior:smooth}}

/* กล่องภาพเต็ม */
.lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;padding:24px;background:var(--bg);color:var(--ink);opacity:0;transition:opacity .15s}
.lb.open{opacity:1}
.lb::backdrop{background:var(--bg)}
.lb-top{display:flex;justify-content:flex-end}
.lb-close{height:56px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font:500 18px/1 var(--font);cursor:pointer}
.lb-close .ic{width:28px;height:28px;stroke:var(--ink);stroke-width:2}
.lb-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lb-body{margin-top:16px;overflow:auto;max-height:calc(100vh - 240px);text-align:center;touch-action:pan-x pan-y pinch-zoom}
.lb-body img{max-width:100%;height:auto;display:inline-block;max-height:calc(100vh - 260px);width:auto}
.lb-cap{margin-top:16px;max-width:1200px;margin-inline:auto;font-size:18px}
.lb-cap p{margin:0;max-width:none}
.lb-cap h3{font-size:22px}
.lb-hint{display:none;color:var(--muted);margin:8px 0 0;font-size:18px}
@media (max-width:639px){.lb-body img{max-width:none;width:1200px;max-height:none}.lb-body{text-align:left}.lb-hint{display:block}}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}

/* ข้อควรรู้ */
.p-notes{display:grid;gap:16px;max-width:760px}
.p-notes li{display:flex;gap:20px;background:var(--surface);border:1px solid var(--line-strong-s);border-left:4px solid var(--blue);border-radius:8px;padding:24px}
.p-notes h3{margin-bottom:4px}
.p-notes p{max-width:none}
.p-notes strong{font-weight:600}
.p-end .wrap{display:grid;gap:24px;justify-items:start}
.p-terms{background:var(--surface);border:1px solid var(--line-strong-s);border-radius:8px;padding:24px 32px;max-width:760px}
.p-terms h2{font-size:26px;margin-bottom:8px}
.p-terms p{margin:0}
@media (max-width:639px){.pv2 .btn{width:100%}.p-feat li,.p-file{padding:24px}}

/* การ์ดสินค้าหน้าแรก (V3) */
.pcard{position:relative;display:grid;background:var(--surface);border:1px solid var(--line-strong-s);border-radius:8px;overflow:hidden;transition:border-color .12s}
.pcard:hover{border-color:var(--blue);outline:1px solid var(--blue);outline-offset:-2px}
.pcard:active{background:#1B1E23}
.pcard:has(.pcard-link:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pcard-link{color:var(--ink);text-decoration:none}
.pcard-link:focus-visible{outline:none}
.pcard-link::after{content:"";position:absolute;inset:0;z-index:1}
.pcard:hover .pcard-link{text-decoration:underline;text-underline-offset:4px}
.pcard-img{position:relative;aspect-ratio:5/4;background:var(--surface);overflow:hidden;isolation:isolate}
.pcard-img::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cover-card) center/cover no-repeat;transform:rotate(180deg)}
.pcard-img .p-label{position:absolute;left:14px;top:12px}
.pcard-art{position:absolute;left:16px;right:16px;top:44px;bottom:12px;width:calc(100% - 32px);height:calc(100% - 56px)}
.pcard-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--bg)}
@media (min-width:900px){.pcard-img{aspect-ratio:4/3}.pcard-art{left:20px;right:20px;top:48px;bottom:16px;width:calc(100% - 40px);height:calc(100% - 64px)}}
.pcard-body{padding:24px;display:flex;flex-direction:column;gap:12px;justify-content:center;font-size:18px}
.pcard-body p{max-width:none}
.pcard-body h3{font-size:22px}
.p-free{align-self:flex-start;background:var(--blue-btn);color:var(--ink);border-radius:4px;padding:0 12px;font-weight:500;font-size:18px;line-height:1.7}
.p-meta{color:var(--muted)}
.pcard .btn{position:relative;z-index:2;height:56px;min-width:200px;font-size:18px}
.pcard .btn-row{margin-top:8px;flex-wrap:wrap}
@media (max-width:639px){.pcard .btn{width:100%}}
@media (min-width:640px) and (max-width:899px){.pcard-img{aspect-ratio:16/7}.pcard-art{left:20px;right:20px;top:48px;bottom:16px;width:calc(100% - 40px);height:calc(100% - 64px)}}
@media (min-width:640px){.pcard-body{padding:32px}}
@media (min-width:900px){.pcard{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.pcard-body{padding:40px}}