/* ════════════════════════════════════════════════════════════════════════════
   CHERDAGOLD Shop — storefront styles
   แปลงจาก mockup (Homepage + Listing) รวมเป็นไฟล์เดียว
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#ffffff; --panel:#f7f7f7; --line:#e6e6e6;
  --ink:#0a0a0a; --muted:#6f6f6f;
  /* สีทอง — ใช้แทนสีเขียวเดิม ให้เข้ากับแบรนด์ร้านทอง (amber-400 ชุดเดียวกับหลังบ้าน) */
  --gold:rgb(251 191 36 / var(--tw-text-opacity, 1));
  --on-gold:#3f2d00;          /* ตัวหนังสือบนพื้นทอง */
  /* ทองอ่อนไปเมื่อเป็นตัวหนังสือบนพื้นขาว (contrast ~1.9:1 อ่านไม่ออก) — ข้อความใช้เฉดเข้ม */
  --gold-ink:#b45309; --gold-soft:#fffbeb; --gold-line:#fde68a;
  --danger:#dc2626;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Prompt',sans-serif; line-height:1.6;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
button,select,input,textarea{font-family:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Utility bar ─────────────────────────────────────────────────────────── */
.utility-bar{background:var(--ink); color:#fff; font-size:13px;}
.utility-bar .container{display:flex; align-items:center; justify-content:space-between; padding:10px 24px; gap:16px; flex-wrap:wrap;}
.price-pill{display:inline-flex; align-items:center; gap:8px; margin-left:10px; background:var(--gold); color:var(--on-gold); font-weight:600; font-size:12px; padding:3px 10px; border-radius:999px;}
.price-pill.empty{background:#52525b; color:#e4e4e7;}
.utility-links{display:flex; gap:16px; opacity:.85;}
.utility-links a:hover{opacity:1; text-decoration:underline;}

/* ── Logo + nav ──────────────────────────────────────────────────────────── */
.brand{display:inline-block; line-height:0;}
/* ไฟล์โลโก้เป็น 380×50 — ล็อกความสูงแล้วให้ width auto ไปตามสัดส่วน
   (มี width/height ใน HTML ด้วย กัน layout shift ตอนรูปยังโหลดไม่เสร็จ) */
.brand-logo{height:40px; width:auto; max-width:100%;}
.brand-logo-sm{height:28px;}

.nav-row{border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:20;}
/* grid 3 ช่องเท่ากัน — ให้โลโก้อยู่กึ่งกลางจอจริง ไม่ใช่กึ่งกลางของที่เหลือ
   (ใช้ flex + space-between แล้วโลโก้จะเลื่อนตามความกว้างเมนูซ้าย/ไอคอนขวา) */
.nav-row .container{display:grid; grid-template-columns:1fr auto 1fr;
                    align-items:center; gap:16px; padding:0 24px; min-height:100px;}
.nav-left{display:flex; align-items:center; gap:14px; min-width:0;}
.nav-brand{justify-self:center; line-height:0;}
.nav-brand .brand-logo{height:34px;}
.nav-links{display:flex; gap:28px; font-size:13px; letter-spacing:.06em; font-weight:500;}
.nav-links a{padding-bottom:4px; border-bottom:2px solid transparent;}
.nav-links a:hover,.nav-links a.active{border-color:var(--ink);}
.nav-icons{display:flex; align-items:center; justify-content:flex-end; gap:20px; font-size:13px;}
.nav-icons a,.nav-icons button{background:none; border:none; color:var(--ink); padding:2px; display:flex; align-items:center;}
/* ไอคอน Phosphor เป็น icon font — คุมขนาดด้วย font-size ไม่ใช่ width/height */
.nav-icons i{font-size:21px; line-height:1;}
.mobile-toggle i{font-size:23px; line-height:1;}
.nav-drawer-close i{font-size:20px; line-height:1;}
.icon-btn{position:relative;}
.icon-btn .count{position:absolute; top:-7px; right:-8px; background:var(--ink); color:#fff; font-size:10px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center;}
.icon-btn .count:empty,.icon-btn .count[data-zero="1"]{display:none;}
/* ปุ่มเมนูย้ายมาอยู่ .nav-left แล้ว จึงต้องตั้ง style เองแทนที่จะรับจาก .nav-icons */
.mobile-toggle{display:none; background:none; border:none; color:var(--ink); padding:2px; align-items:center;}

/* ── Mobile drawer ───────────────────────────────────────────────────────── */
.nav-drawer-backdrop{position:fixed; inset:0; background:rgba(10,10,10,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:40;}
.nav-drawer-backdrop.open{opacity:1; pointer-events:auto;}
.nav-drawer{position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:#fff; z-index:41; transform:translateX(-100%); transition:transform .3s ease; display:flex; flex-direction:column; overflow-y:auto;}
.nav-drawer.open{transform:translateX(0);}
/* หัว drawer เป็นแถบเข้ม — ใช้โลโก้ขาว ให้ผู้ใช้รู้ว่ายังอยู่เว็บเดิมตอนเมนูเปิดทับ */
.nav-drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:var(--ink);}
.nav-drawer-head .brand-logo{height:26px;}
.nav-drawer-close{background:none; border:none; color:#fff; padding:4px;}
.nav-drawer-links{padding-top:8px;}
.nav-drawer-links a{display:block; padding:15px 24px; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.06em; font-weight:500;}
.nav-drawer-spacer{flex:1;}
.nav-drawer-actions a{display:flex; align-items:center; gap:12px; padding:15px 24px; border-top:1px solid var(--line); font-size:13px; font-weight:500;}
.nav-drawer-actions i{font-size:19px; line-height:1; width:19px; text-align:center;}
.nav-drawer-actions .badge{margin-left:auto; background:var(--ink); color:#fff; font-size:10px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center;}
body.drawer-open{overflow:hidden;}

/* ── Hero slideshow ──────────────────────────────────────────────────────── */
.hero-slideshow{position:relative; height:520px; overflow:hidden; background:var(--ink);}
/* สไลด์ที่ไม่ active ต้องกดออกจากลำดับการอ่านด้วย ไม่ใช่แค่จางหาย
   ไม่งั้นตัวอ่านหน้าจอกับปุ่ม Tab จะวิ่งเข้าไปในสไลด์ที่มองไม่เห็น */
.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s;
  display:flex; align-items:center; overflow:hidden;}
.slide.active{opacity:1; visibility:visible;}
/* รูปแบนเนอร์ — object-fit ทำให้รูปสัดส่วนไหนก็เต็มพื้นที่โดยไม่บิด */
.slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.slide-img.m{display:none;}
.slide-shade{position:absolute; inset:0;}
.slide-inner{color:#fff; max-width:520px; position:relative;}
.slide-inner.align-center{margin:0 auto; text-align:center;}
.slide-inner.align-right{margin-left:auto; text-align:right;}
.slide-eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.75; margin-bottom:14px; display:block;}
.slide h1{font-size:42px; font-weight:600; line-height:1.25; margin:0 0 24px;}
.slide-cta{display:inline-block; background:#fff; color:var(--ink); border:none; padding:14px 30px; font-size:14px; font-weight:600; letter-spacing:.03em; border-radius:2px;}
.slide-cta:hover{background:var(--gold);}
.slide-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,.15); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:20px; display:flex; align-items:center; justify-content:center;}
.slide-arrow:hover{background:rgba(255,255,255,.3);}
.slide-arrow.prev{left:24px;} .slide-arrow.next{right:24px;}
.slide-dots{position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:8px;}
/* จุดบอกสไลด์เล็กแค่ 7px แตะยากบนมือถือ — ขยายพื้นที่กดด้วย border ใส
   ให้ตัวจุดยังเท่าเดิมแต่โดนนิ้วง่ายขึ้น (พื้นที่กดจริง ~23px) */
.dot{width:7px; height:7px; border-radius:50%; background:transparent; padding:0;
  border:1px solid #fff; box-sizing:content-box; background-clip:padding-box;}
.slide-dots .dot{border-width:1px; outline:8px solid transparent; outline-offset:0;}
.dot.active{background:#fff;}
.slide-dots{gap:14px;}

/* ── Gold price band ─────────────────────────────────────────────────────── */
.price-band{padding:52px 0; background:var(--panel); border-bottom:1px solid var(--line);}
.price-band-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
.price-band-head h2{font-size:22px; font-weight:600; margin:0;}
.price-band-head span{font-size:12px; color:var(--muted);}
.price-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.price-card{background:#fff; border:1px solid var(--line); border-radius:4px; padding:22px 26px;}
.price-card h3{font-size:14px; font-weight:600; margin:0 0 14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.price-row{display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--line); font-size:14px;}
.price-row:first-of-type{border-top:none;}
.price-row span:first-child{color:var(--muted);}
.price-row b{font-variant-numeric:tabular-nums; font-weight:600; font-size:16px;}

/* ── Sections ────────────────────────────────────────────────────────────── */
.section{padding:72px 0;}
.section-head{margin-bottom:32px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;}
.section-head h2{font-size:22px; font-weight:600; margin:0;}
.section-head p{color:var(--muted); font-size:13px; margin:4px 0 0;}
.section-head a{font-size:13px; font-weight:500; border-bottom:1px solid var(--ink);}

.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.cat-card{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:26px 10px 18px; text-align:center; transition:border-color .2s ease;}
.cat-card:hover{border-color:var(--ink);}
.cat-card svg{width:32px; height:32px; margin:0 auto 12px; stroke:var(--ink);}
.cat-card span{font-size:13px; font-weight:500;}

/* ── Collection card ─────────────────────────────────────────────────────── */
/* ใช้ทั้งหน้าแรกและหน้า /collection จึงอยู่ที่นี่ ไม่ใช่ inline ในหน้าใดหน้าหนึ่ง */
.col-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.col-card{position:relative; display:block; aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:linear-gradient(160deg,#f2f2f2,#dcdcdc);}
.col-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.col-card:hover img{transform:scale(1.04);}
.col-card .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.col-card .ph svg{width:26%; height:26%; stroke:var(--ink); opacity:.3; fill:none;}
/* ไล่เฉดเข้มด้านล่าง เพื่อให้ตัวหนังสือขาวอ่านออกไม่ว่ารูปปกจะสว่างแค่ไหน */
.col-card-body{position:absolute; inset:auto 0 0 0; padding:20px 18px 16px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,transparent);}
.col-card-body h3{font-size:17px; font-weight:600; margin:0 0 3px; line-height:1.35;}
.col-card-body p{font-size:12px; margin:0; opacity:.85; line-height:1.5;}
.col-card-count{display:inline-block; margin-top:9px; font-size:11px; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:3px 10px;}

/* ── Product card ────────────────────────────────────────────────────────── */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 20px;}
.product-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.product-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.product-card{transition:opacity .2s ease; position:relative;}
.product-card:hover{opacity:.9;}
.product-thumb{aspect-ratio:1/1; background:linear-gradient(160deg,#f2f2f2,#e2e2e2); display:flex; align-items:center; justify-content:center; position:relative; border-radius:2px; overflow:hidden;}
.product-thumb img{width:100%; height:100%; object-fit:cover;}
.product-thumb .placeholder{width:36%; height:36%; stroke:var(--ink); opacity:.45; fill:none;}
.product-badge{position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-size:10px; padding:3px 9px; border-radius:999px; font-weight:500; letter-spacing:.03em; z-index:2;}
.product-soldout{position:absolute; inset:0; background:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; letter-spacing:.05em; z-index:3;}
.wish-btn{position:absolute; top:8px; right:8px; background:rgba(255,255,255,.85); border:none; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--ink); opacity:.75; transition:opacity .2s ease, transform .15s ease; z-index:4;}
.wish-btn:hover{opacity:1;}
/* ชุดไอคอนนี้ไม่มี ph-heart-fill — สถานะ "อยู่ในรายการโปรด" จึงบอกด้วยสีอย่างเดียว */
.wish-btn i{font-size:17px; line-height:1;}
.wish-btn.on{color:var(--danger); opacity:1;}
.wish-btn.pulse{transform:scale(1.18);}
.product-info{padding-top:12px;}
.product-info h3{font-size:13.5px; font-weight:500; margin:0 0 4px;}
.product-info .meta{font-size:11.5px; color:var(--muted); margin-bottom:6px;}
.product-info .price{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;}
.product-badge.kind-promo{background:#b45309;}
.product-badge.kind-pre{background:#6d28d9;}
.price-lock{display:inline-block; margin-left:6px; font-size:10px; font-weight:500; letter-spacing:.02em;
  color:var(--gold-ink); background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:999px; padding:1px 7px;
  vertical-align:1px;}
.card-left{font-size:11.5px; color:#6d28d9; margin-top:4px;}

/* ── Toolbar (listing) ───────────────────────────────────────────────────── */
.toolbar{padding:28px 0 20px;}
.toolbar .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.toolbar h1{font-size:18px; font-weight:600; margin:0; border-bottom:2px solid var(--ink); padding-bottom:6px;}
.toolbar-controls{display:flex; align-items:center; gap:18px;}
.sort-select{border:1px solid var(--line); background:#fff; padding:8px 12px; font-size:13px; border-radius:2px; color:var(--muted);}
.view-toggle{display:flex; gap:6px; align-items:center;}
.view-toggle button{background:none; border:none; padding:4px; color:var(--line);}
.view-toggle button.active{color:var(--ink);}
.cat-filter{display:flex; gap:8px; flex-wrap:wrap; padding-bottom:22px;}
.cat-filter a{font-size:12.5px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted);}
.cat-filter a:hover{border-color:var(--ink); color:var(--ink);}
.cat-filter a.active{background:var(--ink); border-color:var(--ink); color:#fff;}

.listing{padding:0 0 60px;}
.empty-state{padding:80px 0; text-align:center; color:var(--muted); font-size:14px;}

.pagination{display:flex; justify-content:center; align-items:center; gap:18px; padding-top:48px; font-size:14px;}
.pagination a{color:var(--muted);}
.pagination a.active{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:4px;}
.pagination .arrow{font-size:16px;}

/* ── Product detail ──────────────────────────────────────────────────────── */
.pd{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:40px 0 72px;}
.pd-gallery-main{aspect-ratio:1/1; background:linear-gradient(160deg,#f2f2f2,#e2e2e2); border-radius:3px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pd-gallery-main img{width:100%; height:100%; object-fit:cover;}
.pd-gallery-main .placeholder{width:30%; height:30%; stroke:var(--ink); opacity:.4; fill:none;}
.pd-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.pd-thumbs button{width:66px; height:66px; padding:0; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:#f2f2f2;}
.pd-thumbs button.active{border-color:var(--ink);}
.pd-thumbs img{width:100%; height:100%; object-fit:cover;}
.pd-title{font-size:26px; font-weight:600; margin:0 0 8px;}
.pd-meta{font-size:13px; color:var(--muted); margin-bottom:20px;}
.pd-price{font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; margin-bottom:6px;}
.pd-price-note{font-size:12px; color:var(--muted); margin-bottom:24px;}
.pd-breakdown{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:14px 18px; margin-bottom:24px; font-size:12.5px;}
.pd-breakdown .row{display:flex; justify-content:space-between; padding:4px 0; color:var(--muted);}
.pd-breakdown .row b{color:var(--ink); font-variant-numeric:tabular-nums;}
.pd-breakdown .row.total{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; color:var(--ink); font-weight:600;}
.pd-spec{font-size:13px; color:var(--muted); margin:-14px 0 24px;}
.pd-spec b{color:var(--ink); font-variant-numeric:tabular-nums;}
.pd-variants{margin-bottom:22px;}
.pd-variants h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px; font-weight:600;}
.pd-picked{text-transform:none; letter-spacing:0; color:var(--ink); font-weight:500;}
.variant-color{display:inline-flex; align-items:center; gap:8px;}
.variant-color .swatch{width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex-shrink:0;}
.variant-opt.active .swatch{border-color:rgba(255,255,255,.5);}
.variant-opts{display:flex; gap:8px; flex-wrap:wrap;}
.variant-opt{border:1px solid var(--line); background:#fff; padding:9px 16px; border-radius:2px; font-size:13px; text-align:left;}
.variant-opt:hover{border-color:var(--ink);}
.variant-opt.active{border-color:var(--ink); background:var(--ink); color:#fff;}
.variant-opt.disabled{opacity:.4; cursor:not-allowed; text-decoration:line-through;}
.variant-opt small{display:block; font-size:10.5px; opacity:.7;}
.pd-actions{display:flex; gap:12px; align-items:stretch; margin-bottom:20px;}
.qty-box{display:flex; align-items:center; border:1px solid var(--line); border-radius:2px;}
.qty-box button{background:none; border:none; width:38px; font-size:16px; color:var(--muted);}
.qty-box input{width:44px; border:none; text-align:center; font-size:14px; font-variant-numeric:tabular-nums;}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.btn-primary{flex:1; background:var(--ink); color:#fff; border:none; padding:14px 24px; font-size:14px; font-weight:600; border-radius:2px;}
.btn-primary:hover{background:var(--gold); color:var(--on-gold);}
.btn-primary:disabled{background:#a1a1aa; cursor:not-allowed;}
.btn-outline{border:1px solid var(--line); background:#fff; padding:14px 18px; border-radius:2px; display:flex; align-items:center; justify-content:center;}
.btn-outline:hover{border-color:var(--ink);}
.btn-outline i{font-size:19px; line-height:1;}

/* ── ปุ่มแชร์ ─────────────────────────────────────────────────────────────── */
.pd-share-wrap{position:relative; display:flex;}
.pd-share{position:absolute; right:0; bottom:calc(100% + 8px); z-index:30; min-width:180px;
          background:#fff; border:1px solid var(--line); border-radius:4px; padding:6px;
          box-shadow:0 8px 28px rgba(0,0,0,.12);}
.pd-share a,.pd-share button{display:flex; align-items:center; gap:10px; width:100%;
          padding:10px 12px; font-size:13px; color:var(--ink); background:none; border:none;
          text-align:left; border-radius:3px;}
.pd-share a:hover,.pd-share button:hover{background:var(--panel);}
.pd-share i{font-size:17px; line-height:1; width:20px; text-align:center;}
.pd-share .sh-fb i{color:#1877f2;}
.pd-share .sh-line i{color:#06c755;}

/* ── ปุ่มดูตารางไซซ์ ──────────────────────────────────────────────────────── */
.pd-sizelink{display:inline-flex; align-items:center; gap:7px; background:none; border:none;
             padding:8px 0; margin-bottom:6px; font-size:13px; color:var(--ink);
             border-bottom:1px solid var(--ink);}
.pd-sizelink i{font-size:17px; line-height:1;}
.pd-sizelink:hover{color:var(--gold-ink); border-color:var(--gold-ink);}

/* ── Modal ตารางไซซ์ ─────────────────────────────────────────────────────── */
.sc-modal{position:fixed; inset:0; z-index:70; display:flex; align-items:center;
          justify-content:center; padding:20px;}
.sc-modal[hidden]{display:none;}
.sc-backdrop{position:absolute; inset:0; background:rgba(10,10,10,.6);}
.sc-box{position:relative; background:#fff; border-radius:6px; max-width:640px; width:100%;
        max-height:88vh; display:flex; flex-direction:column; overflow:hidden;}
.sc-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
         padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0;}
.sc-head h3{font-size:15px; font-weight:600; margin:0;}
.sc-close{background:none; border:none; padding:8px; margin:-8px; color:var(--muted); display:flex;}
.sc-close:hover{color:var(--ink);}
.sc-close i{font-size:20px; line-height:1;}
.sc-body{padding:18px; overflow-y:auto;}
.sc-body img{width:100%; height:auto;}
.sc-note{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.7;}

/* ── สินค้าที่เกี่ยวข้อง ──────────────────────────────────────────────────── */
.pd-related{border-top:1px solid var(--line); padding-top:44px;}
.btn-outline.on{color:var(--danger); border-color:var(--danger);}
.pd-stock{font-size:12.5px; color:var(--muted); margin-bottom:20px;}
.pd-stock.out{color:var(--danger);}
.pd-desc{border-top:1px solid var(--line); padding-top:20px; font-size:13.5px; color:#3f3f46; white-space:pre-line;}
/* ── ชุดโปรโมชั่น / จองลายทอง ─────────────────────────────────────────────── */
.pd-price-note{font-size:12.5px; color:var(--gold-ink); background:var(--gold-soft); border:1px solid var(--gold-line);
  border-radius:4px; padding:8px 12px; margin:-16px 0 22px; line-height:1.6;}
.pd-price-note b{font-weight:600;}
.pd-bundle{border:1px solid var(--line); border-radius:4px; padding:16px 18px; margin-bottom:22px;}
.pd-bundle h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  margin:0 0 10px; font-weight:600;}
.pd-bundle ul{list-style:none; margin:0; padding:0;}
.pd-bundle li{font-size:13.5px; padding:6px 0; border-bottom:1px dashed var(--line); line-height:1.6;}
.pd-bundle li:last-child{border-bottom:none;}
.pd-bundle a{border-bottom:1px solid var(--line);}
.pd-bundle a:hover{border-color:var(--ink);}
.pd-bundle small{display:block; font-size:11.5px; color:var(--muted); margin-left:26px;}
.bn-qty{display:inline-block; min-width:22px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.bn-free{color:var(--gold-ink);}
.bn-tag{display:inline-block; font-size:10px; font-weight:600; background:var(--gold); color:var(--on-gold);
  border-radius:999px; padding:1px 8px; margin-right:6px;}
.pd-pre-note{background:#f5f3ff; border:1px solid #ddd6fe; border-radius:4px; padding:14px 16px; margin-bottom:22px;}
.pd-pre-note b{display:block; font-size:13.5px; color:#5b21b6; margin-bottom:4px;}
.pd-pre-note span{font-size:12.5px; color:#6d28d9; line-height:1.7;}
.pd-stock.pre{color:#6d28d9;}
.pd-stock.pre b{color:#5b21b6;}

.pd-cols{border-top:1px solid var(--line); margin-top:20px; padding-top:18px;}
.pd-cols h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px; font-weight:600;}
.pd-cols-chips{display:flex; gap:8px; flex-wrap:wrap;}
.pd-cols-chips a{font-size:12.5px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted);}
.pd-cols-chips a:hover{border-color:var(--ink); color:var(--ink);}


/* ── Auth forms ──────────────────────────────────────────────────────────── */
.auth-wrap{max-width:420px; margin:0 auto; padding:56px 24px 80px;}
.auth-wrap h1{font-size:22px; font-weight:600; margin:0 0 6px; text-align:center;}
.auth-wrap .sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:28px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; border:1px solid var(--line); border-radius:2px; padding:11px 13px; font-size:14px;}
.field input:focus{outline:none; border-color:var(--ink);}
.alert{padding:12px 14px; border-radius:3px; font-size:13px; margin-bottom:20px;}
.alert-error{background:#fef2f2; border:1px solid #fecaca; color:#991b1b;}
.alert-ok{background:#f0fdf4; border:1px solid #bbf7d0; color:#166534;}
.alert ul{margin:6px 0 0; padding-left:18px;}
.auth-alt{text-align:center; font-size:13px; color:var(--muted); margin-top:20px;}
.auth-alt a{border-bottom:1px solid var(--ink); color:var(--ink);}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:18px;}

/* ── ช่องค้นหาที่อยู่ (ใช้ทั้ง checkout และหน้าบัญชี) ───────────────────────── */
.addr-search{position:relative;}
.addr-list{display:none; position:absolute; left:0; right:0; top:100%; z-index:30; background:#fff; border:1px solid var(--ink); border-top:none; max-height:270px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.09);}
.addr-list.open{display:block;}
.addr-item{display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:10px 13px; font-size:13px; line-height:1.5;}
.addr-item:last-child{border-bottom:none;}
.addr-item:hover,.addr-item.on{background:var(--panel);}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{padding:38px 0 22px; font-size:12.5px; color:var(--muted);}
/* 2 คอลัมน์คู่กัน — ซ้ายแบรนด์ ขวาลิงก์ เตี้ยกว่าวางซ้อนกันเกือบครึ่ง */
.footer-cols{display:flex; justify-content:space-between; align-items:flex-start;
             gap:40px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.footer-brand{max-width:420px;}
.footer-brand p{margin:10px 0 0;}
/* ฝั่งขวา 2 บรรทัด — ลิงก์แนวนอนบน โซเชียลล่าง ชิดขวาทั้งคู่
   ทำให้สองคอลัมน์สูงเท่ากันพอดี (ซ้าย: โลโก้+คำโปรย) footer เลยดูสมดุล */
.footer-right{display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.footer-links{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 20px;}
.footer-links a{padding:2px 0;}
.footer-links a:hover{color:var(--ink);}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:32px; height:32px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.footer-social i{font-size:17px; line-height:1; color:var(--ink);}
.footer-social a:hover{border-color:var(--ink);}
.footer-bottom{padding-top:18px; text-align:center; font-size:11.5px;}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font-size:13px; padding:11px 20px; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:60;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  /* ต้องเจาะจงเท่า .product-grid.cols-N (0,2,0) ไม่งั้นแพ้ specificity
     แล้วแท็บ "สินค้าที่ชอบ" จะค้างที่ 3 คอลัมน์บนจอเล็ก */
  .product-grid,
  .product-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .col-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .price-cards{grid-template-columns:1fr;}
  .slide h1{font-size:32px;}
  .pd{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:640px){
  /* มือถือ: ☰ | โลโก้ | ตะกร้า — ซ่อนบัญชีกับรายการโปรด เพราะอยู่ใน drawer แล้ว
     ถ้าโชว์ครบทุกไอคอนช่องขวาจะกว้างกว่าช่องซ้าย โลโก้จะดูเบี้ยว */
  .mobile-toggle{display:flex;}
  .nav-links{display:none;}
  /* ต้องเจาะจงเท่า .nav-icons a (0,1,1) ไม่งั้นแพ้แล้วไอคอนยังโผล่ */
  .nav-icons .nav-account,
  .nav-icons .nav-wish{display:none;}
  /* minmax(0,…) ให้ช่องซ้าย/ขวาย่อได้ ไม่งั้นช่องที่ของกว้างกว่าจะดันโลโก้เบี้ยว */
  /* มือถือเตี้ยกว่าเดสก์ท็อป — แถบนี้ sticky อยู่ 100px จะกินจอไปกว่า 12%
     ทุกครั้งที่เลื่อน ซึ่งบนมือถือแลกไม่คุ้ม */
  .nav-row .container{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
                      padding:0 20px; gap:10px; min-height:64px;}
  .nav-brand .brand-logo{height:24px;}
  .nav-brand .brand-logo{height:22px;}
  .brand-logo{height:30px;}
  .brand-logo-sm{height:26px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid,
  .product-grid.cols-2,
  .product-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  /* มือถือ: การ์ดเดียวต่อแถว เตี้ยลงเป็นแบนเนอร์ ไม่งั้นต้องเลื่อนยาวมาก */
  .col-grid{grid-template-columns:1fr;}
  .col-card{aspect-ratio:3/2;}
  /* hero เตี้ยลง — 420px กินเกือบครึ่งจอมือถือก่อนเห็นสินค้าสักชิ้น */
  .hero-slideshow{height:340px;}
  .slide h1{font-size:26px;}
  /* สลับไปใช้รูปเวอร์ชันมือถือเฉพาะสไลด์ที่อัปโหลดไว้ — ที่เหลือใช้รูปเดิม */
  .slide.has-mobile .slide-img.d{display:none;}
  .slide.has-mobile .slide-img.m{display:block;}
  .toolbar-controls{width:100%; justify-content:space-between;}
  .pd-actions{flex-wrap:wrap;}
  .btn-primary{flex:1 1 100%; order:3;}

  /* หัวข้อ section ลดลง — 22px บนจอ 375 กินบรรทัดเยอะโดยไม่ได้ช่วยอ่าน */
  .section-head h2{font-size:18px;}

  /* ── เป้าแตะ ──────────────────────────────────────────────────────────
     นิ้วโป้งกดแม่นราว 44px ของเดิมหลายจุดอยู่ที่ 23–30px ทำให้กดพลาดบ่อย
     ขยายด้วย padding + margin ติดลบ กล่องโตแต่หน้าตาเหมือนเดิม */
  .footer-links a{padding:11px 0;}
  .footer-social a{width:42px; height:42px;}
  .cat-filter a{padding:10px 14px;}
  .nav-icons{gap:8px;}
  .nav-icons a,
  .nav-icons button{padding:11px; margin:-11px 0;}
  .nav-icons .icon-btn{width:auto; height:auto;}
  .mobile-toggle{padding:10px; margin:-10px;}
  .nav-drawer-close{padding:8px; margin:-8px;}
  .wish-btn{width:40px; height:40px;}
  .section-head a{padding:11px 0; margin:-11px 0;}
  /* จุดบอกสไลด์ — วงจริงเท่าเดิม แต่พื้นที่กดกว้างขึ้น */
  .slide-dots .dot{padding:11px; margin:-11px; background-clip:content-box;}

  /* 2 คอลัมน์ที่ 360px จะแคบจนคำโปรยแตกหลายบรรทัด — มือถือกลับไปซ้อนและจัดกลาง */
  .footer-cols{flex-direction:column; align-items:center; gap:18px; text-align:center;}
  .footer-brand img{margin-left:auto; margin-right:auto;}
  .footer-right{align-items:center; gap:16px;}
  .footer-links{justify-content:center; gap:2px 20px;}
  .footer-social{justify-content:center;}
}

/* จอเล็กจริง (360–400px) — เดิมกระโดดจาก 640 ลงพื้นเลย ทำให้อึดอัด */
@media (max-width:400px){
  .container{padding-left:16px; padding-right:16px;}
  .product-grid,
  .product-grid.cols-2,
  .product-grid.cols-3{gap:16px 12px;}
  .cat-grid{gap:10px;}
  .section-head h2{font-size:17px;}
  .hero-slideshow{height:300px;}
  .slide h1{font-size:22px;}
  .footer-links{gap:6px 16px;}
}