/* ========== CONFIG: เปลี่ยนลิงก์ LINE ของร้านตรงนี้ ========== */
  /* แก้ที่ตัวแปร LINE_URL ในส่วน <script> ด้านล่างสุด */

  :root{
    --bg:#f4f6f9;
    --bg-2:#ffffff;
    --surface:#ffffff;
    --surface-2:#eef1f5;
    --line:#e2e6ec;
    --text:#181b21;
    --muted:#5c646f;
    --muted-2:#98a0ac;
    --gold:#a9781a;
    --gold-2:#c79324;
    --line-green:#06c755;
    --line-green-ink:#04a445;
    /* --- Design tokens: รัศมี / เงา / ระยะห่าง / ความกว้าง container --- */
    --radius-sm:11px;
    --radius:18px;
    --radius-lg:26px;
    --shadow-sm:0 6px 18px -10px rgba(24,27,40,.22);
    --shadow-lg:0 30px 70px -28px rgba(24,27,40,.30);
    --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px;
    --space-5:36px; --space-6:54px; --space-7:90px;
    --container:1180px;
    --tap:44px;
    --shadow:0 20px 50px -20px rgba(24,27,40,.18);
    --nav-bg:rgba(255,255,255,.82);
    --nav-bg-scrolled:rgba(255,255,255,.95);
    --logo-color:#181b21;
    --grad:#a9781a;
  }
  html[data-theme="dark"]{
    --bg:#0c0d10;
    --bg-2:#121419;
    --surface:#16181f;
    --surface-2:#1c1f29;
    --line:#262a36;
    --text:#f4f5f7;
    --muted:#9aa0ad;
    --muted-2:#6b7280;
    --gold:#e7b75a;
    --gold-2:#f6d488;
    --shadow:0 24px 60px -20px rgba(0,0,0,.65);
    --nav-bg:rgba(12,13,16,.72);
    --nav-bg-scrolled:rgba(12,13,16,.9);
    --logo-color:#ffffff;
    --grad:#ffe188;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Anuphan',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.72;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Sora','Anuphan',sans-serif;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--gold);color:#0c0d10}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}

  /* ===== Nav ===== */
  header.nav{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);
    background:var(--nav-bg);
    border-bottom:1px solid transparent;
    transition:border-color .3s,background .3s;
  }
  header.nav.scrolled{border-color:var(--line);background:var(--nav-bg-scrolled)}
  .nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;height:76px}
  .nav-logo{display:flex;align-items:center;min-height:var(--tap);color:#fff;z-index:2}
  .logo-text{
    font-family:'Sora','Anuphan',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.01em;color:var(--logo-color);
    text-shadow:0 0 6px rgba(255,255,255,.6),0 0 16px rgba(224,234,255,.5),0 0 34px rgba(200,220,255,.32);
    animation:logoNeon 3s ease-in-out infinite;transition:transform .3s
  }
  .logo-sub{font-size:.5em;font-weight:600;letter-spacing:.02em;margin-left:3px;color:var(--gold-2);text-shadow:0 0 8px rgba(231,183,90,.5)}
  .nav-logo:hover .logo-text{transform:scale(1.04)}
  @keyframes logoNeon{
    0%,100%{text-shadow:0 0 6px rgba(255,255,255,.55),0 0 15px rgba(224,234,255,.45),0 0 32px rgba(200,220,255,.28)}
    50%{text-shadow:0 0 10px rgba(255,255,255,.9),0 0 24px rgba(230,238,255,.7),0 0 48px rgba(205,222,255,.42)}
  }
  @media(prefers-reduced-motion:reduce){.logo-text{animation:none}}
  .nav-right{display:flex;align-items:center;gap:16px;z-index:2;min-width:0}
  .theme-toggle{background:var(--surface);border:1px solid var(--line);color:var(--text);width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .2s,border-color .2s;flex-shrink:0}
  .theme-toggle:hover{border-color:var(--gold);transform:translateY(-1px)}
  .theme-toggle .ic-sun{display:none}
  html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
  html[data-theme="dark"] .theme-toggle .ic-moon{display:none}
  html:not([data-theme="dark"]) .orbs{display:none}
  .brand{font-weight:800;font-size:22px;display:inline-flex;align-items:baseline;gap:1px;color:var(--text);white-space:nowrap}
  .brand .big{font-size:23px}
  .brand .sm{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.04em;text-transform:uppercase}
  .brand .dot{color:var(--gold)}
  .nav-links{display:flex;gap:22px;align-items:center;white-space:nowrap}
  .nav-links a{color:var(--muted);font-size:15px;font-weight:500;transition:color .2s;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px}
  .nav-links a:hover{color:var(--text)}
  .nav-cta{
    white-space:nowrap;flex-shrink:0;
    background:var(--line-green);color:#fff;padding:11px 18px;min-height:var(--tap);border-radius:999px;
    font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px;
    transition:transform .2s,box-shadow .2s;box-shadow:0 8px 22px -8px rgba(6,199,85,.6);
  }
  .nav-cta:hover{transform:translateY(-2px)}
  .burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:9px;min-width:var(--tap);min-height:var(--tap);align-items:center;justify-content:center}
  @media(max-width:1024px){
    .nav-links{display:none}
    .nav-cta{display:none}
    .burger{display:inline-flex}
    .logo-text{font-size:25px}
    .brand{font-size:17px}
  }
  @media(max-width:420px){
    .brand .sm{display:none}
    .brand{font-size:16px}
  }

  /* ===== Hero ===== */
  .hero{position:relative;padding:96px 0 80px;overflow:hidden;isolation:isolate}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:
      radial-gradient(60% 50% at 80% 0%,rgba(231,183,90,.16),transparent 60%),
      radial-gradient(50% 50% at 0% 30%,rgba(231,183,90,.08),transparent 60%);
  }
  .hero::after{display:none}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
    color:var(--gold-2);background:rgba(231,183,90,.1);border:1px solid rgba(231,183,90,.25);
    padding:7px 15px;border-radius:999px;margin-bottom:26px;
  }
  .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(231,183,90,.6);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,183,90,.55)}70%{box-shadow:0 0 0 10px rgba(231,183,90,0)}100%{box-shadow:0 0 0 0 rgba(231,183,90,0)}}
  /* ===== CMYK floating orbs ===== */
  .orbs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
  .orb{position:absolute;border-radius:50%;filter:blur(2px);mix-blend-mode:screen;opacity:.92;
    will-change:transform;animation:drift 1s ease-in-out infinite}
  .orb::after{content:"";position:absolute;inset:-40% ;border-radius:50%;filter:blur(34px);opacity:.55;background:inherit}
  .orb.c{width:150px;height:150px;background:radial-gradient(circle at 32% 30%,#9ff6ff,#00aeef 55%,#0090c8);top:16%;left:6%;animation-duration:13s}
  .orb.m{width:175px;height:175px;background:radial-gradient(circle at 32% 30%,#ffb3ec,#ec008c 55%,#c00074);top:44%;left:0%;animation-duration:17s;animation-delay:-3s}
  .orb.y{width:130px;height:130px;background:radial-gradient(circle at 32% 30%,#fff7b0,#fff200 55%,#ffd400);top:8%;left:26%;animation-duration:15s;animation-delay:-6s}
  .orb.k{width:160px;height:160px;background:radial-gradient(circle at 32% 30%,#5a5f6b,#2a2d34 55%,#101216);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 70px -20px #000;top:56%;left:16%;animation-duration:19s;animation-delay:-9s;mix-blend-mode:normal}
  @keyframes drift{
    0%{transform:translate(0,0) scale(1)}
    25%{transform:translate(-46px,38px) scale(1.08)}
    50%{transform:translate(30px,-44px) scale(.94)}
    75%{transform:translate(-26px,-22px) scale(1.05)}
    100%{transform:translate(0,0) scale(1)}
  }
  @media(max-width:860px){.orbs{opacity:.5}.orb{filter:blur(6px)}}
  @media(prefers-reduced-motion:reduce){.orb{animation:none}}
  /* รูปงาน PET ลอยฝั่งขวาของ hero (โชว์เฉพาะโหมดสว่าง แทนลูกไฟ) */
  .hero-showcase{position:absolute;right:0;top:0;width:48%;height:100%;z-index:1;pointer-events:none}
  @media(max-width:880px){.hero-showcase{display:none}}
  .hs{position:absolute}
  .hs img{display:block;width:100%;height:auto;animation:heroFloat 6s ease-in-out infinite}
  html:not([data-theme="dark"]) .hs img{filter:drop-shadow(0 18px 34px rgba(20,24,40,.2))}
  html[data-theme="dark"] .hs img{filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
  .hs-pet{width:40%;right:26%;top:15%;transform:rotate(3deg);z-index:5}
  .hs-pet img{animation-duration:6s}
  .hs-box{width:30%;left:4%;top:5%;transform:rotate(-7deg);z-index:3}
  .hs-box img{animation-duration:7s;animation-delay:-1s}
  .hs-menu{width:23%;right:2%;top:20%;transform:rotate(8deg);z-index:4}
  .hs-menu img{animation-duration:6.6s;animation-delay:-3s}
  .hs-brochure{width:31%;left:7%;bottom:7%;transform:rotate(5deg);z-index:2}
  .hs-brochure img{animation-duration:7.4s;animation-delay:-2s}
  .hs-sticker{width:31%;right:7%;bottom:3%;transform:rotate(-4deg);z-index:6}
  .hs-sticker img{animation-duration:6.8s;animation-delay:-4s}
  @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @media(prefers-reduced-motion:reduce){.hs img{animation:none}}

  .hero h1{font-size:clamp(38px,6vw,68px);font-weight:800;line-height:1.05;max-width:14ch;position:relative}
  .hero h1 .grad{
    color:var(--grad);
    text-shadow:
      0 0 7px rgba(255,224,136,.65),
      0 0 18px rgba(246,212,136,.55),
      0 0 38px rgba(231,183,90,.4),
      0 0 70px rgba(231,183,90,.28);
    animation:neon 2.8s ease-in-out infinite;
  }
  @keyframes neon{
    0%,100%{text-shadow:0 0 7px rgba(255,224,136,.6),0 0 18px rgba(246,212,136,.5),0 0 38px rgba(231,183,90,.36),0 0 70px rgba(231,183,90,.24)}
    50%{text-shadow:0 0 11px rgba(255,233,160,.9),0 0 28px rgba(246,212,136,.7),0 0 56px rgba(231,183,90,.5),0 0 96px rgba(231,183,90,.35)}
  }
  @media(prefers-reduced-motion:reduce){.hero h1 .grad{animation:none}}
  .hero p.lead{color:var(--muted);font-size:clamp(16px,2vw,19px);max-width:52ch;margin:24px 0 36px}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
    padding:14px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  }
  .btn-gold{background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1407;box-shadow:0 14px 34px -12px rgba(231,183,90,.6)}
  .btn-gold:hover{transform:translateY(-2px)}
  .btn-gold:active{transform:translateY(0)}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
  .order-btn:active,.view-btn:active{transform:translateY(0)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
  .hero-stats{display:flex;gap:40px;margin-top:54px;flex-wrap:wrap}
  .hero-stats .stat .n{font-family:'Sora';font-size:30px;font-weight:800;color:var(--text)}
  .hero-stats .stat .l{font-size:13px;color:var(--muted);font-weight:500}

  /* ===== Section heading ===== */
  .sec{padding:90px 0}
  .sec-head{max-width:640px;margin:0 auto 50px;text-align:center}
  .sec-head .tag{color:var(--gold);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
  .sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;margin:10px 0 14px}
  .sec-head p{color:var(--muted);font-size:16px}

  /* ===== Filter pills ===== */
  .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
  .pill{
    background:var(--surface);border:1px solid var(--line);color:var(--muted);
    padding:11px 18px;min-height:var(--tap);border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;
    transition:all .2s;font-family:inherit;
  }
  .pill:hover{color:var(--text);border-color:var(--muted-2)}
  .pill.active{background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1407;border-color:transparent;font-weight:600}

  /* ===== Product grid ===== */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:580px){.grid{grid-template-columns:1fr}}
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s;
  }
  .card:hover{transform:translateY(-6px);border-color:rgba(231,183,90,.4);box-shadow:var(--shadow)}
  .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;display:grid;place-items:center}
  .thumb svg{width:100%;height:100%;display:block}
  .thumb-img,.top-thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface);z-index:1}
  .modal-thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface)}
  .thumb .badge{
    position:absolute;top:12px;left:12px;background:rgba(12,13,16,.7);backdrop-filter:blur(6px);
    color:var(--gold-2);font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid rgba(231,183,90,.25)
  }
  .card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
  .card-body h3{font-size:18px;font-weight:700}
  .card-body p{color:var(--muted);font-size:14px;flex:1}
  .card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
  .price{color:var(--gold-2);font-weight:600;font-size:15px}
  .price small{color:var(--muted);font-weight:400;font-size:12px}
  .card-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .order-btn{
    flex:1;background:var(--line-green);color:#fff;border:0;border-radius:var(--radius-sm);padding:11px;min-height:var(--tap);
    font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;gap:7px;transition:filter .2s,transform .2s
  }
  .order-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .view-btn{
    background:var(--surface-2);border:1px solid var(--line);color:#fff;border-radius:var(--radius-sm);
    padding:11px 14px;min-height:var(--tap);font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;transition:border-color .2s,color .2s
  }
  .view-btn{color:var(--text)}
  .view-btn:hover{border-color:var(--gold);color:var(--gold-2)}
  /* ปุ่มดูตารางราคา — Secondary ในระบบสีแบรนด์ (ทอง) */
  .table-btn{
    background:transparent;border:1.6px solid var(--gold);color:var(--gold);border-radius:var(--radius-sm);
    padding:11px 14px;min-height:var(--tap);
    font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;gap:8px;transition:background .2s,color .2s,border-color .2s,transform .2s
  }
  .table-btn:hover{background:var(--gold);color:#1a1407;transform:translateY(-1px)}
  .table-btn:active{transform:translateY(0)}
  .table-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  html[data-theme="dark"] .table-btn{border-color:var(--gold-2);color:var(--gold-2)}
  html[data-theme="dark"] .table-btn:hover{background:var(--gold-2);color:#1a1407}
  /* Price table modal */
  .price-modal-body{padding:26px}
  .price-modal-body h3{font-size:21px;font-weight:800;margin-bottom:16px}
  .price-img-wrap{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;min-height:200px;display:grid;place-items:center;overflow:hidden;padding:10px}
  .price-img-wrap img{max-width:100%;border-radius:8px;display:block}
  .price-img-wrap .ph{color:var(--muted);text-align:center;padding:36px 18px;font-size:14px;line-height:1.7}
  .ptable-sub{color:var(--gold-2);font-weight:600;font-size:13px;margin-bottom:10px;letter-spacing:.02em}
  .ptable-scroll{overflow-x:auto;border-radius:10px}
  .ptable{width:100%;min-width:520px;border-collapse:collapse;font-size:13px}
  .ptable th,.ptable td{border:1px solid var(--line);padding:9px 8px;text-align:center;color:var(--text);white-space:nowrap}
  .ptable thead th{background:rgba(231,183,90,.16);color:var(--gold-2);font-weight:700;font-size:12px;line-height:1.35;white-space:normal}
  .ptable thead th:first-child,.ptable td.qcol{background:var(--surface-2);font-weight:700;color:var(--text)}
  .ptable tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
  /* Gallery modal */
  .gallery-card{max-height:88vh;overflow-y:auto}
  .gallery-body{padding:26px}
  .gallery-body h3{font-size:21px;font-weight:800;margin-bottom:16px}
  .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .gallery-grid a{display:block;border-radius:12px;overflow:hidden}
  .gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:transform .2s,border-color .2s;background:var(--bg-2)}
  .gallery-grid img:hover{transform:scale(1.04);border-color:var(--gold)}
  .gallery-empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:44px 18px;border:1px dashed var(--line);border-radius:14px;line-height:1.8;font-size:14px}
  .ptable-cap{color:var(--text);font-weight:600;font-size:13px;margin:0 0 8px}
  .ptable-note{color:var(--muted);font-size:12px;margin-top:12px;line-height:1.6;text-align:left}

  /* ===== Neon-fire badge บนการ์ดสินค้า (คลิกดูรูปงานจริง) ===== */
  .fire-badge{
    position:absolute;top:12px;right:12px;z-index:3;width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;color:#dfe3ea;text-decoration:none;cursor:pointer;padding:0;font:inherit;
    background:rgba(16,18,22,.7);backdrop-filter:blur(4px);
    border:1px solid rgba(200,206,216,.45);
    animation:fireGlow 1.9s ease-in-out infinite;transition:transform .25s
  }
  .fire-badge:hover{transform:scale(1.18)}
  .card:hover .fire-badge{transform:scale(1.12)}
  @keyframes fireGlow{
    0%,100%{box-shadow:0 0 6px rgba(200,206,216,.45),0 0 16px rgba(150,156,168,.3);filter:drop-shadow(0 0 4px rgba(220,226,236,.6))}
    50%{box-shadow:0 0 12px rgba(220,226,236,.8),0 0 30px rgba(160,166,178,.45);filter:drop-shadow(0 0 9px rgba(235,240,248,.95))}
  }
  .fire-hint{
    position:absolute;left:12px;bottom:12px;z-index:3;font-size:12px;font-weight:600;color:#fff;
    background:rgba(24,26,30,.9);padding:5px 11px;border-radius:999px;opacity:0;transform:translateY(6px);
    transition:opacity .3s,transform .3s;display:inline-flex;align-items:center;gap:6px;pointer-events:none;
    border:1px solid rgba(200,206,216,.35);box-shadow:0 0 14px rgba(200,206,216,.4)
  }
  .card:hover .fire-hint{opacity:1;transform:none}

  /* ===== Top sellers ===== */
  .top-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;margin:0 auto}
  @media(max-width:760px){.top-row{grid-template-columns:1fr;max-width:420px}}
  .top-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
  .top-card:hover{transform:translateY(-5px);border-color:rgba(231,183,90,.42);box-shadow:var(--shadow)}
  .top-thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
  .top-thumb svg{width:100%;height:100%}
  .top-thumb .rank{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1407;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(231,183,90,.7)}
  .top-thumb .badge{position:absolute;top:10px;right:10px;background:rgba(12,13,16,.7);backdrop-filter:blur(6px);color:var(--gold-2);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid rgba(231,183,90,.25)}
  .top-card-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:4px}
  .top-card-body h3{font-size:16px;font-weight:700}
  .top-card-body .price{color:var(--gold-2);font-weight:600;font-size:14px}
  .top-card-body .price small{color:var(--muted);font-weight:400;font-size:12px}
  .top-card-body .order-btn{margin-top:10px;padding:9px;font-size:13px}

  /* ===== Features ===== */
  .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
  .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:border-color .3s}
  .feat:hover{border-color:rgba(231,183,90,.35)}
  .feat .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(231,183,90,.12);color:var(--gold-2);margin-bottom:16px}
  .feat h3{font-size:17px;font-weight:700;margin-bottom:6px}
  .feat p{color:var(--muted);font-size:14px}

  /* ===== How it works ===== */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.steps{grid-template-columns:1fr}}
  .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:border-color .3s,transform .3s}
  .step:hover{border-color:rgba(231,183,90,.4);transform:translateY(-4px)}
  .step .num{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1407;font-family:'Sora',sans-serif;font-weight:800;font-size:18px;margin-bottom:14px}
  .step h3{font-size:16px;font-weight:700;margin-bottom:6px}
  .step p{color:var(--muted);font-size:14px}

  /* ===== FAQ ===== */
  .faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .faq-item summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:600;font-size:15px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--gold-2);transition:transform .25s;flex-shrink:0}
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-item[open] summary{color:var(--gold-2)}
  .faq-a{padding:0 20px 18px;color:var(--muted);font-size:14px;line-height:1.7}

  /* ===== Service area + Google Map ===== */
  .area-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
  @media(max-width:900px){.area-grid{grid-template-columns:1fr}}
  .map-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:360px}
  .map-card iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
  .area-info{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:18px}
  .area-info h3{font-size:18px;font-weight:700}
  .area-nap{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--muted);line-height:1.65}
  .area-nap li{display:flex;gap:11px;align-items:flex-start}
  .area-nap .ic{color:var(--gold-2);flex-shrink:0;margin-top:3px}
  .area-nap strong{color:var(--text);font-weight:600;display:block}
  .area-nap a:hover{color:var(--gold-2)}
  .area-sub{font-size:17px;font-weight:700;text-align:center;margin:44px 0 18px}
  .area-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:900px;margin:0 auto}
  .area-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--muted);transition:border-color .25s,color .25s}
  .area-chip:hover{border-color:rgba(231,183,90,.45);color:var(--text)}
  .area-note{color:var(--muted);font-size:14px;line-height:1.8;max-width:74ch;margin:24px auto 0;text-align:center}

  /* ===== Testimonials ===== */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:820px){.reviews{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.reviews{grid-template-columns:1fr}}
  .review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s}
  .review:hover{border-color:rgba(231,183,90,.4);transform:translateY(-4px)}
  .review .stars{color:#f5b301;font-size:14px;letter-spacing:2px}
  .review .rv-text{color:var(--text);font-size:14px;line-height:1.75;flex:1}
  .review .rv-who{display:flex;align-items:center;gap:11px;margin-top:2px}
  .review .rv-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;font-family:'Sora',sans-serif}
  .review .rv-name{font-weight:700;font-size:14px;color:var(--text)}
  .review .rv-src{font-size:12px;color:var(--muted)}

  /* ===== CTA band ===== */
  .cta-band{position:relative;border-radius:26px;padding:60px 40px;text-align:center;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
  .cta-band::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 120% at 50% 0%,rgba(231,183,90,.18),transparent 60%)}
  .cta-band > *{position:relative;z-index:1}
  .cta-band h2{font-size:clamp(26px,4vw,40px);font-weight:800}
  .cta-band p{color:var(--muted);max-width:48ch;margin:14px auto 30px}

  /* ===== Footer ===== */
  footer{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 32px;margin-top:30px}
  .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
  @media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:28px}}
  footer p{color:var(--muted);font-size:14px}
  footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin-bottom:14px}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  footer ul a{color:var(--muted);font-size:14px;transition:color .2s}
  footer ul a:hover{color:var(--gold-2)}
  .foot-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted-2);font-size:13px}

  /* ===== Floating LINE ===== */
  .fab{
    position:fixed;right:22px;bottom:22px;z-index:60;background:var(--line-green);color:#fff;
    padding:14px 22px;border-radius:999px;font-weight:700;font-size:15px;display:inline-flex;
    align-items:center;gap:10px;box-shadow:0 16px 40px -10px rgba(6,199,85,.7);cursor:pointer;
    transition:transform .2s;animation:floaty 3.5s ease-in-out infinite
  }
  .fab:hover{transform:translateY(-3px) scale(1.03)}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @media(max-width:520px){.fab span.t{display:none}.fab{padding:16px;border-radius:50%}}
  .fab-fb{position:fixed;right:22px;bottom:90px;z-index:60;width:54px;height:54px;border-radius:50%;background:#1877f2;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(24,119,242,.7);transition:transform .2s}
  .fab-fb:hover{transform:translateY(-3px) scale(1.05)}
  @media(max-width:520px){.fab-fb{bottom:84px;width:52px;height:52px}}

  /* ===== Modal ===== */
  .modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;background:rgba(6,7,9,.78);backdrop-filter:blur(6px)}
  .modal.open{display:grid}
  .modal-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;max-width:560px;width:100%;overflow:hidden;box-shadow:var(--shadow);animation:pop .25s ease}
  @keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
  .modal-thumb{aspect-ratio:16/9}
  .modal-thumb svg{width:100%;height:100%}
  .modal-body{padding:26px}
  .modal-body h3{font-size:24px;font-weight:800;margin-bottom:8px}
  .modal-body p{color:var(--muted);margin-bottom:18px}
  .modal-body .price{font-size:18px;margin-bottom:20px;display:block}
  .modal-actions{display:flex;gap:10px}
  .modal-close{position:absolute;top:14px;right:16px;background:rgba(12,13,16,.6);border:1px solid var(--line);color:#fff;width:var(--tap);height:var(--tap);border-radius:50%;cursor:pointer;font-size:18px;z-index:1}

  /* ===== Mockup Studio ===== */
  .mock-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:center}
  @media(max-width:840px){.mock-wrap{grid-template-columns:1fr;gap:26px}}
  .dropzone{border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface);padding:36px 22px;min-height:var(--tap);text-align:center;cursor:pointer;transition:border-color .25s,background .25s}
  .dropzone:focus-visible{border-color:var(--gold);background:rgba(231,183,90,.06)}
  .dropzone:hover,.dropzone.drag{border-color:var(--gold);background:rgba(231,183,90,.06)}
  .dz-inner{display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
  .dz-inner .ic{color:var(--gold-2)}
  .dz-inner strong{font-size:17px;font-weight:700}
  .dz-inner span{color:var(--muted);font-size:13px}
  .mock-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
  .seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
  .seg button{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;padding:10px 14px;min-height:40px;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap}
  .seg button.active{background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1407}
  .mock-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .mock-actions .btn{font-size:14px;padding:12px 20px;min-height:var(--tap)}
  #dlBtn[disabled]{opacity:.45;cursor:not-allowed}
  .mock-stage{display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:92px;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:24px 20px}
  @media(max-width:840px){.mock-stage{position:static}}
  .mock-stage-title{align-self:flex-start;font-weight:700;font-size:14px;color:var(--gold-2);display:inline-flex;align-items:center;gap:8px}
  .mock-stage-title .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(231,183,90,.6);animation:pulse 2s infinite}
  .mock-card-shadow{position:relative;width:100%;max-width:480px;min-height:300px;display:grid;place-items:center;perspective:1300px}
  #mockCanvas{max-width:100%;max-height:380px;height:auto;border-radius:14px;display:none;transform:rotateX(6deg) rotateY(-10deg);box-shadow:0 44px 70px -26px rgba(0,0,0,.85),0 12px 26px -12px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .mock-card-shadow:hover #mockCanvas{transform:rotateX(2deg) rotateY(-3deg)}
  .mock-empty{color:var(--muted-2);font-size:14px;border:1px dashed var(--line);border-radius:14px;width:100%;min-height:300px;display:grid;place-items:center;padding:20px;text-align:center}
  .mock-note{color:var(--muted-2);font-size:12px;text-align:center}

  /* LINE add-friend modal */
  .line-modal-body{padding:30px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
  .line-logo{width:50px;height:50px;border-radius:15px;background:var(--line-green);display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px -8px rgba(6,199,85,.6)}
  .line-modal-body h3{font-size:20px;font-weight:800}
  .line-modal-body p{color:var(--muted);font-size:14px;margin-top:-4px}
  .line-qr{width:216px;height:216px;border-radius:14px;background:#fff;padding:8px;border:1px solid var(--line)}
  .line-id-row{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 18px}
  .line-id-row span{font-family:'Sora',sans-serif;font-weight:700;color:var(--gold-2);font-size:16px;letter-spacing:.02em}
  .line-copy{background:var(--line-green);color:#fff;border:0;border-radius:999px;padding:8px 18px;min-height:var(--tap);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:filter .2s}
  .line-copy:hover{filter:brightness(1.08)}

  /* ===== ปรับการจัดวางบนมือถือให้เป็นระเบียบ ===== */
  @media(max-width:600px){
    .wrap{padding:0 16px}
    .sec{padding:54px 0}
    .hero{padding:60px 0 46px}
    .sec-head{margin-bottom:32px}
    .sec-head h2{font-size:26px}
    .hero h1{font-size:34px;line-height:1.1}
    .hero p.lead{font-size:16px;margin:18px 0 28px}
    .hero-btns{gap:10px}
    .hero-btns .btn{padding:12px 18px;font-size:14px;flex:1 1 auto;justify-content:center}
    .hero-stats{gap:18px 26px;margin-top:34px}
    .hero-stats .stat .n{font-size:23px}
    .hero-stats .stat .l{font-size:12px}
    .orbs{opacity:.22}
    .orb{filter:blur(8px)}
    .orb.c{width:110px;height:110px}.orb.m{width:120px;height:120px}.orb.y{width:90px;height:90px}.orb.k{display:none}
    .nav-inner{height:62px}
    .logo-text{font-size:21px}
    .filters{gap:8px;margin-bottom:30px}
    .pill{padding:8px 14px;font-size:13px}
    .mock-controls{flex-direction:column}
    .mock-controls .seg{width:100%}
    .mock-controls .seg button{flex:1;font-size:12px;padding:9px 6px}
    .mock-stage{padding:18px 14px}
    #mockCanvas{max-height:300px}
    .grid{gap:16px}
    .feat-grid{gap:14px}
    .map-card,.map-card iframe{min-height:270px}
    .area-info{padding:22px 18px}
    .area-sub{margin:32px 0 14px;font-size:16px}
    .cta-band{padding:42px 20px;border-radius:20px}
    .modal{padding:14px}
    .modal-body,.price-modal-body,.gallery-body,.line-modal-body{padding:22px 18px}
    .modal-body h3,.price-modal-body h3,.gallery-body h3{font-size:19px}
    .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
    .line-qr{width:200px;height:200px}
    footer{padding:46px 0 28px}
    .foot-bottom{flex-direction:column;gap:6px}
  }

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ===== Hero: ป้องกันหัวข้อทับรูป + แถบความน่าเชื่อถือ ===== */
  .hero .wrap{position:relative;z-index:2}
  .hero-trust{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;
    color:var(--muted);font-size:14px;font-weight:500
  }
  .hero-trust .dot{color:var(--gold)}
  .btn-lg{padding:16px 30px;font-size:16px}
  @media(min-width:1060px){
    .hero h1,.hero p.lead,.hero-btns,.hero-trust,.hero-stats{max-width:600px}
    .hero-showcase{width:42%}
  }
  @media(max-width:1059px) and (min-width:861px){
    .hero h1,.hero p.lead{max-width:60%}
    .hero-showcase{opacity:.45}
  }

  /* ===== เมนูมือถือ ===== */
  .mobile-menu{
    display:none;border-top:1px solid var(--line);
    background:var(--nav-bg-scrolled);backdrop-filter:blur(14px);
    max-height:calc(100dvh - 62px);overflow-y:auto
  }
  .mobile-menu[hidden]{display:none}
  .mobile-menu.open{display:block}
  @media(min-width:1025px){.mobile-menu{display:none !important}}
  .mobile-menu-inner{display:flex;flex-direction:column;padding:10px 24px 22px;gap:2px}
  .mobile-menu-inner a{
    display:flex;align-items:center;min-height:52px;color:var(--text);
    font-size:16px;font-weight:600;border-bottom:1px solid var(--line)
  }
  .mobile-menu-inner a:last-of-type{border-bottom:0}
  .mobile-menu-cta{width:100%;justify-content:center;margin-top:14px}

  /* ===== Sticky CTA มือถือ ===== */
  .mobile-cta{display:none}
  @media(max-width:1024px){
    .mobile-cta{
      display:grid;grid-template-columns:1fr 1.35fr;gap:10px;
      position:fixed;left:0;right:0;bottom:0;z-index:70;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:var(--nav-bg-scrolled);backdrop-filter:blur(14px);
      border-top:1px solid var(--line)
    }
    .mcta{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:var(--tap);border-radius:999px;font-family:inherit;
      font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer
    }
    .mcta-call{background:var(--surface);border-color:var(--line);color:var(--text)}
    .mcta-line{background:var(--line-green);color:#fff}
    .mcta-line:active,.mcta-call:active{transform:translateY(1px)}
    /* กัน sticky bar บังเนื้อหาท้ายหน้า */
    body{padding-bottom:76px}
    /* ปุ่มลอยซ้ำซ้อนกับ sticky bar -> ซ่อนบนมือถือ */
    .fab,.fab-fb{display:none}
  }

  /* ===== Product card: จัดแนวให้สม่ำเสมอ ===== */
  .thumb{background:var(--surface-2)}
  .card-body h3{font-size:18px;font-weight:700;min-height:1.6em}
  .card-body p{
    color:var(--muted);font-size:14px;flex:1;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(2 * 1.72em)
  }
  .card-actions{margin-top:auto;padding-top:14px}

  /* ===== Accessibility: skip link + focus indicator ===== */
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--gold-2);color:#1a1407;padding:12px 20px;
    border-radius:0 0 12px 0;font-weight:700;font-size:15px;
  }
  .skip-link:focus{left:0}
  :focus-visible{outline:3px solid var(--gold-2);outline-offset:2px;border-radius:4px}
  html[data-theme="dark"] :focus-visible{outline-color:var(--gold-2)}
  /* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของระบบ */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .orb,.logo-text{animation:none}
    *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }

/* ======================================================================
   หน้าสินค้า (Product page template) — ใช้ร่วมกันทุกหน้าใน /<slug>/
   ====================================================================== */
.pp{padding:28px 0 90px}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:26px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span[aria-hidden]{color:var(--muted-2)}
.breadcrumb [aria-current]{color:var(--text);font-weight:600}

.pp-top{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
@media(max-width:900px){.pp-top{grid-template-columns:1fr;gap:26px}}

.pp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pp-gallery a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.pp-gallery a:first-child{grid-column:1 / -1}
.pp-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .25s}
.pp-gallery a:first-child img{aspect-ratio:4/3}
.pp-gallery a:hover img{transform:scale(1.04)}
.pp-empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:34px 22px;text-align:center;color:var(--muted)}

.pp-info h1{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.15;margin-bottom:14px}
.pp-lead{color:var(--muted);font-size:16px;margin-bottom:22px}
.pp-info h2{font-size:19px;font-weight:700;margin:26px 0 10px}
.pp-detail{color:var(--muted);font-size:15px;line-height:1.8}
.pp-spec{margin-top:10px;padding:12px 14px;background:var(--surface-2);border-radius:12px;font-size:14px}

.pp-cta-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-wrap:wrap;gap:10px;box-shadow:var(--shadow-sm)}
.pp-cta-box .btn{flex:1 1 auto;justify-content:center}
.pp-trust{flex-basis:100%;margin:2px 0 0;color:var(--muted);font-size:13.5px;line-height:1.7}

.pp-sec{margin-top:56px}
.pp-sec > h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-bottom:18px}
.pp-price-sub{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.pp-table-cap{font-size:16px;font-weight:700;margin:22px 0 10px}
.pp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:min(100%,460px)}
.pp-table th,.pp-table td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.pp-table thead th{background:var(--surface-2);font-weight:700;color:var(--text)}
.pp-table tbody th{text-align:left;font-weight:600;color:var(--text)}
.pp-table tbody tr:last-child th,.pp-table tbody tr:last-child td{border-bottom:0}
.pp-table tbody td{color:var(--muted)}
.pp-price-note{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:14px}
.pp-quote{color:var(--muted);font-size:15.5px;line-height:1.85;max-width:70ch}
.pp-price-cta{margin-top:20px}

.pp-related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.pp-related{grid-template-columns:1fr 1fr;gap:12px}}
.pp-rel-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,transform .25s}
.pp-rel-card:hover{border-color:rgba(231,183,90,.45);transform:translateY(-4px)}
.pp-rel-card img,.pp-rel-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.pp-rel-name{display:block;padding:14px 16px;font-weight:700;font-size:15px;color:var(--text)}

@media(max-width:600px){
  .pp{padding:20px 0 70px}
  .pp-sec{margin-top:40px}
  .pp-gallery{grid-template-columns:repeat(2,1fr)}
  .pp-cta-box{padding:16px}
  /* ตารางราคาบนมือถือ: เลื่อนแนวนอนได้ในกรอบของตัวเอง ไม่ดันหน้าเว็บ */
  .pp-table{font-size:13.5px}
  .pp-table th,.pp-table td{padding:9px 11px}
}

/* ลิงก์บนการ์ดสินค้าหน้าแรก (ชี้ไปหน้าสินค้าจริง) */
.card-thumb-link{display:block;color:inherit}
.card-title-link{color:inherit}
.card-title-link:hover{color:var(--gold)}
a.view-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* ======================================================================
   บทความ (Phase 6) — /articles/ และ /articles/<slug>/
   ====================================================================== */
.art{max-width:74ch;margin:0 auto}
.art h1{font-size:clamp(27px,3.6vw,42px);font-weight:800;line-height:1.2;margin-bottom:20px}
.art h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin:38px 0 12px;line-height:1.35}
.art p{color:var(--text);font-size:16.5px;line-height:1.95;margin-bottom:16px}
.art-lead{font-size:18px !important;color:var(--muted) !important;line-height:1.9 !important;
  padding-left:16px;border-left:3px solid var(--gold);margin-bottom:30px !important}
.art a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.art a:hover{color:var(--gold-2)}
.art strong{font-weight:700}

.art-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.art-list li{position:relative;padding-left:26px;font-size:16px;line-height:1.9;color:var(--text)}
.art-list li::before{content:"";position:absolute;left:6px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--gold)}

.art-check{list-style:none;counter-reset:none;margin:0;padding:0}
.art-check > li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:14px}
.art-check > li h2{margin:0 0 8px;font-size:18px}
.art-check > li p{margin:0;color:var(--muted);font-size:15.5px}

.art-note{background:var(--surface-2);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;
  padding:18px 20px;margin:26px 0;color:var(--text);font-size:15.5px;line-height:1.9}

.art-formula{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;text-align:center;font-size:18px;margin:18px 0;color:var(--text)}

.art-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:20px 0}
.art-table-wrap .pp-table th,.art-table-wrap .pp-table td{text-align:left;white-space:normal;vertical-align:top;min-width:110px}

/* หน้ารวมบทความ */
.art-hub{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
@media(max-width:760px){.art-hub{grid-template-columns:1fr}}
.art-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;transition:border-color .25s,transform .25s,box-shadow .25s}
.art-card:hover{border-color:rgba(231,183,90,.5);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.art-card h2{font-size:19px;font-weight:700;line-height:1.4;color:var(--text)}
.art-card p{color:var(--muted);font-size:14.5px;line-height:1.8;flex:1}
.art-more{color:var(--gold);font-weight:700;font-size:14.5px;margin-top:4px}

@media(max-width:600px){
  .art p{font-size:16px}
  .art-lead{font-size:16.5px !important}
  .art-check > li{padding:16px 18px}
}