/* =========================================================
   SELLCHON THEME – ใช้ร่วมกันทุกหน้าฝั่งลูกค้า (ยกเว้นหน้าแรกที่มี CSS ของตัวเอง)
   โหลดหลัง Bootstrap เพื่อปรับหน้าตา Bootstrap ให้เข้ากับหน้าแรก
   ========================================================= */
:root{
  --cream:#FBF1DC;
  --cream-2:#F0DDB8;
  --ink:#1E1611;
  --brown:#B5714C;
  --white:#fff;
  --radius-xl:36px;
  --radius-lg:24px;
  --radius-md:16px;
  --shadow:0 18px 40px -18px rgba(40,20,5,.35);
  --ease:cubic-bezier(.65,0,.35,1);
  --font-display:"Lilita One","Mitr",system-ui,sans-serif;
  --font-thai-display:"Mitr",system-ui,sans-serif;
  --font-body:"Prompt",system-ui,sans-serif;
}
body{
  font-family:var(--font-body)!important;color:var(--ink);background:var(--page)!important;
  padding:20px!important;margin:0;font-weight:400!important;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-thai-display);font-weight:500!important;color:var(--ink)}
a{color:inherit}
[hidden]{display:none!important}

.sc-site{
  max-width:1240px;margin:0 auto;background:var(--cream);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.35);
}

/* ================= HERO + NAV ================= */
.sc-hero{position:relative;background:var(--hero);color:#fff;padding:0 0 110px;overflow:hidden}
.sc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.22) 0,transparent 45%)}
.sc-nav{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 36px}
.sc-logo{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.sc-logo:hover{color:#fff}
.sc-logo img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#fff;padding:2px;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.sc-menu{display:flex;gap:4px;background:#fff;padding:5px;border-radius:999px;box-shadow:0 6px 20px -8px rgba(0,0,0,.3)}
.sc-menu a{color:var(--ink);font-weight:600;font-size:14px;padding:8px 18px;border-radius:999px;text-decoration:none;transition:background .25s,color .25s;white-space:nowrap}
.sc-menu a:hover{background:var(--cream);color:var(--ink)}
.sc-menu a.active{background:var(--ink);color:#fff}
.sc-icons{display:flex;gap:10px}
.sc-icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:#fff;
  background:rgba(255,255,255,.18);position:relative;border:0;text-decoration:none;transition:background .25s,transform .25s;
}
.sc-icon-btn:hover,.sc-icon-btn.current{background:rgba(255,255,255,.34);color:#fff;transform:translateY(-2px)}
.sc-menu-toggle{display:none}
.sc-badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#E2392E;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;
}
.sc-hero-text{position:relative;z-index:5;text-align:center;padding:40px 24px 10px}
.sc-hero-icon{
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-grid;place-items:center;
  font-size:26px;margin-bottom:14px;
}
.sc-hero-text h1{color:#fff;font-weight:600!important;font-size:clamp(30px,4vw,48px);line-height:1.2;text-shadow:0 4px 0 rgba(0,0,0,.12);margin:0}
.sc-hero-text p{max-width:560px;margin:12px auto 0;font-size:15px;line-height:1.7;opacity:.92}
.sc-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;z-index:4;pointer-events:none}

/* ================= MAIN ================= */
.sc-main{padding:10px 40px 70px;position:relative}
.sc-main .container{max-width:1000px}

/* ================= FOOTER ================= */
.sc-footer{position:relative;background:var(--accent);color:#fff;padding:140px 64px 30px}
.sc-wave-top{top:-1px;bottom:auto}
.sc-f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.sc-footer .sc-logo{font-size:30px;margin-bottom:18px}
.sc-footer .sc-logo img{width:56px;height:56px}
.sc-footer h4{font-size:15px;margin-bottom:12px;font-weight:600!important;color:#fff;font-family:var(--font-body)}
.sc-footer ul{padding:0;margin:0}
.sc-footer li{list-style:none;font-size:14px;opacity:.85;margin-bottom:8px;line-height:1.5}
.sc-footer a{color:#fff;text-decoration:none}
.sc-footer a:hover{text-decoration:underline}
.sc-copy{border-top:1px solid rgba(255,255,255,.2);margin-top:40px;padding-top:20px;font-size:12px;opacity:.7;text-align:center}

/* ================= BOOTSTRAP → THEME ================= */
.sc-main .card,.sc-main .cart-container,.sc-main .tracking-box{
  border:0!important;border-radius:var(--radius-lg)!important;background:#fff;box-shadow:var(--shadow)!important;
}
.sc-main .btn{border-radius:999px!important;font-weight:600;padding:.6rem 1.5rem;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.sc-main .btn:hover{transform:translateY(-2px)}
.sc-main .btn.text-white,.sc-main .search-btn{background:var(--hero)!important;border:0;color:#fff!important;box-shadow:0 5px 0 var(--accent)}
.sc-main .btn-outline-dark,.sc-main .btn-outline-secondary,.sc-main .btn-outline-primary{border:2px solid var(--ink);color:var(--ink);background:transparent}
.sc-main .btn-outline-dark:hover,.sc-main .btn-outline-secondary:hover,.sc-main .btn-outline-primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sc-main .btn-outline-danger{border-width:2px}
.sc-main .form-control,.sc-main .form-select{
  border:2px solid var(--cream-2);border-radius:14px!important;background:#fff;padding:.7rem 1rem;font-family:var(--font-body);
}
.sc-main .form-control:focus,.sc-main .form-select:focus{border-color:var(--hero);box-shadow:0 0 0 4px color-mix(in srgb,var(--hero) 20%,transparent)}
.sc-main .form-label{font-weight:600}
.sc-main .table{--bs-table-bg:transparent}
.sc-main .table thead th,.sc-main .table-light th{background:var(--cream)!important;color:var(--ink)!important;border:0;font-weight:600}
.sc-main .table thead th:first-child{border-radius:14px 0 0 14px}
.sc-main .table thead th:last-child{border-radius:0 14px 14px 0}
.sc-main .table td{border-color:var(--cream)}
.sc-main .bg-light{background:var(--cream)!important}
.sc-main .border{border-color:var(--cream-2)!important}
.sc-main .text-primary{color:var(--hero)!important}
.sc-main .badge.bg-secondary{background:var(--cream)!important;color:var(--ink);border:1px solid var(--cream-2);font-weight:500;border-radius:999px;padding:.45em .9em}
.sc-main .product-img{border-radius:14px!important}
.sc-main .alert{border:0;border-radius:var(--radius-md)}

/* ขั้นตอนการสั่งซื้อ (stepper) */
.sc-main .stepper-wrapper{--theme-color:var(--hero)!important}

/* หน้าโปสเตอร์ */
.sc-poster{max-width:900px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.sc-poster img{width:100%;height:auto;display:block}
.sc-empty{
  max-width:620px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--radius-lg);
  padding:56px 28px;box-shadow:var(--shadow);
}
.sc-empty .sc-empty-icon{
  width:84px;height:84px;border-radius:50%;background:var(--cream);color:var(--hero);
  display:inline-grid;place-items:center;font-size:34px;margin-bottom:18px;
}
.sc-empty h3{font-size:24px}
.sc-empty p{color:#7a6a5c;margin:8px 0 24px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:900px){
  body{padding:10px!important}
  .sc-nav{padding:16px 20px}
  .sc-nav .sc-logo{font-size:19px;gap:8px}
  .sc-nav .sc-logo img{width:38px;height:38px}
  .sc-icons{gap:6px}
  .sc-icon-btn{width:38px;height:38px;font-size:15px}
  .sc-menu{display:none;position:absolute;top:70px;left:20px;right:20px;flex-direction:column;border-radius:24px;padding:8px}
  .sc-menu.open{display:flex}
  .sc-menu a{text-align:center;padding:12px}
  .sc-menu-toggle{display:grid}
  .sc-hero{padding-bottom:90px}
  .sc-hero-text{padding-top:24px}
  .sc-wave{height:80px}
  .sc-main{padding:10px 14px 50px}
  .sc-footer{padding:120px 24px 24px}
  /* footer มือถือ: แบรนด์เต็มแถว แล้วลิงก์ 2 คอลัมน์เท่ากัน */
  .sc-f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .sc-f-grid > div:first-child{grid-column:1/-1;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2)}
  .sc-footer .sc-logo{font-size:24px;margin-bottom:12px}
  .sc-footer .sc-logo img{width:48px;height:48px}
}

/* stepper: ขั้นที่ผ่านแล้วใช้สีเข้มของธีม (แทนสีเขียวเดิม) */
.sc-main .stepper-item.completed .stepper-circle{background:var(--accent)!important}
.sc-main .search-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

/* ตะกร้าบนมือถือ: เปลี่ยนตารางเป็นการ์ดเรียงลงมา */
@media (max-width:700px){
  .sc-main .cart-container .table-responsive{overflow:visible}
  .sc-main .cart-container .table thead{display:none}
  .sc-main .cart-container .table tr{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:2px solid var(--cream)}
  .sc-main .cart-container .table td{display:flex;justify-content:space-between;align-items:center;border:0;padding:0!important;min-width:0!important;text-align:right!important;font-size:15px!important}
  .sc-main .cart-container .table td:first-child{text-align:left!important;margin-bottom:4px}
  .sc-main .cart-container .table td:nth-child(2)::before{content:"ตัวเลือก"}
  .sc-main .cart-container .table td:nth-child(3)::before{content:"ราคา/ชิ้น"}
  .sc-main .cart-container .table td:nth-child(4)::before{content:"จำนวน"}
  .sc-main .cart-container .table td:nth-child(5)::before{content:"รวม"}
  .sc-main .cart-container .table td::before{font-weight:400;color:#7a6a5c;font-size:14px}
  .sc-main .cart-container .table td:last-child{justify-content:flex-end}
}

/* ฟอร์มค้นหาออเดอร์บนมือถือ: ช่องกรอกเต็มความกว้าง ปุ่มอยู่ด้านล่าง */
@media (max-width:576px){
  .sc-main form.d-flex:has(.search-input){flex-direction:column;gap:10px}
  .sc-main .search-input{width:100%;border-radius:14px!important}
  .sc-main .search-btn{width:100%;justify-content:center;border-radius:999px!important}
}

@media (max-width:420px){.sc-icons .sc-icon-btn[aria-label="ค้นหาสินค้า"]{display:none}}