:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#16a34a;
  --brand2:#10b981;
  --warn:#f59e0b;
  --shadow: 0 10px 25px rgba(15,23,42,.08);

  /* ✅ HERO tuning */
  --hero-left:#0b1220;
  --hero-right:#3b2f2f;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Kanit",Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

/* container */
.container{max-width:1200px;margin:0 auto;padding:20px}

/* topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px; max-width:1200px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800;
}
.brand .dot{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 20px rgba(16,185,129,.25);
}
.brand span{font-size:20px}
.actions{display:flex; align-items:center; gap:10px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:#fff;
}
.badge b{font-weight:800}

/* layout */
.layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:start;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.p{padding:16px}
.h{
  font-weight:800;
  margin:0 0 10px 0;
}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:12px 0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;            /* ✅ กันแตกบรรทัดในปุ่ม */
}
.btn.primary{
  background:linear-gradient(135deg,var(--warn),#fb923c);
  border:none;
  color:#111827;
}
.btn.green{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;
  color:white;
}

/* search */
.search-bar .btn,
.search-bar button,
.search-bar a {
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}
.input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
}

/* =========================
   ✅ HERO (ปรับให้เหมือนรูปที่ 2)
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);

  /* ✅ ให้ภาพ/พื้นหลังเต็มกรอบ */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;

  /* ✅ fallback ถ้าไม่มีภาพ */
  background-image:
    linear-gradient(135deg, rgba(11,18,32,.78), rgba(11,18,32,.25)),
    radial-gradient(1200px 400px at 0% 0%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(900px 350px at 100% 0%, rgba(245,158,11,.14), transparent 60%),
    linear-gradient(135deg, var(--hero-left, #0b1220), var(--hero-right, #3b2f2f));

  color:#fff;

  /* ✅ ความสูงแบบแบนเนอร์ */
  min-height:120px;
}

/* overlay บางๆ ให้ตัวหนังสืออ่านง่าย ถ้าใช้รูปพื้นหลังจริง */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
}

.hero .inner{
  position:relative;
  z-index:1;

  /* ✅ จัดแนวแบบแบนเนอร์: ซ้ายข้อความ ขวาปุ่ม */
  padding:16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* ✅ ลดตัวอักษรให้เหมือนรูปที่ 2 */
.hero .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  font-weight:800;
  font-size:12px;
  line-height:1;
}

.hero h1{
  margin:8px 0 0 0;
  font-size:18px;          /* ✅ ลดจาก 26 */
  line-height:1.15;
  letter-spacing:.1px;
}
.hero p{
  margin:6px 0 0 0;
  font-size:12px;          /* ✅ ลดลง */
  color:rgba(255,255,255,.85);
}

/* ปุ่มบน hero ให้ดูเหมือนแบนเนอร์ */
.hero .btn.primary{
  height:40px;
  padding:0 14px;
  border-radius:14px;
  font-weight:900;
}

/* =========================
   grid products
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.product{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(15,23,42,.06);
  display:flex; flex-direction:column;
}
.product .body{ padding:14px; }

/* ✅ รูปเต็มกรอบทุกขนาด */
.product .img{
  display:block;
  width:100%;
  overflow:hidden;
  background:#0b1220;
  aspect-ratio: 1 / 1;          /* ✅ ทำกรอบรูปให้คงที่ */
}
.product .img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* name */
.product .name{font-weight:800; line-height:1.25}

/* ✅ meta จัดระยะราคา/แท็ก */
.product .meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.product .meta .price{
  font-weight:900;
  color:var(--brand);
  line-height:1.15;
}
.old-price{
  color:#94a3b8;
  text-decoration:line-through;
  font-weight:800;
  font-size:13px;
  display:block;               /* ✅ ให้ราคาเดิมลงบรรทัดใหม่ */
  margin-top:6px;              /* ✅ ห่างจากราคาใหม่ */
}

/* tags */
.tag{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  white-space:nowrap;
}
.tag.sale{background:#fff7ed;color:#9a3412}
.tag.new{background:#ecfdf5;color:#065f46}

/* ✅ ปุ่มให้เท่ากัน + ไม่ตกบรรทัด */
.product .body > div:last-child{
  display:flex !important;
  gap:12px;
  margin-top:12px;
}
.product .body > div:last-child > a.btn,
.product .body > div:last-child > form{
  flex:1 !important;
}
.product .body > div:last-child > form .btn{
  width:100% !important;
}
.product .body > div:last-child .btn{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* categories */
.catlist a{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 10px;
  border-radius:12px;
}
.catlist a:hover{background:#f3f4f6}
.catlist .active{background:#ecfdf5;border:1px solid #bbf7d0}

/* pager */
.pager{
  display:flex; gap:8px; justify-content:center;
  margin-top:16px;
}
.pager a{
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:#fff; font-weight:800;
}

/* footer */
.footer{
  margin-top:28px; padding:22px 0; color:var(--muted);
  text-align:center;
}

/* ✅ images generic */
img { max-width: 100%; height: auto; }

/* responsive */
@media (max-width:1100px){
  .grid{grid-template-columns: repeat(3,1fr);}
  .layout{grid-template-columns: 300px 1fr;}

  .hero{ min-height:115px; }
  .hero h1{ font-size:17px; }
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .grid{grid-template-columns: repeat(2,1fr);}

  .topbar .row{
    flex-wrap: wrap;
    gap:10px;
  }
  .actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap: wrap;
    gap:8px;
  }
  .badge{
    padding:8px 10px;
    border-radius:12px;
  }

  /* ✅ Hero มือถือให้เป็นแบนเนอร์จริง */
  .hero .inner{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:14px;
  }
  .hero h1{ font-size:16px; }
  .hero p{ font-size:12px; }
  .hero .btn.primary{ height:38px; }
}
@media (max-width:520px){
  .container{ padding:12px; }
  .grid{grid-template-columns:1fr;}

  .topbar .row{ padding:12px 12px; }
  .brand span{ font-size:18px; }
  .brand .dot{ width:30px; height:30px; border-radius:10px; }

  .btn, .badge{ min-height:42px; }

  /* ✅ มือถือ: ตัวอักษรเล็ก + banner เต็ม */
  .hero{ min-height:105px; border-radius:16px; }
  .hero .inner{ padding:12px; }
  .hero .pill{ font-size:11px; padding:6px 9px; }
  .hero h1{ font-size:15px; }
  .hero p{ font-size:11px; }

  .product .body{ padding:12px; }
  .product .name{ font-size:16px; }
}

/* ===== Admin Dashboard UI ===== */
.admin-wrap{max-width:1200px;margin:0 auto;padding:22px;}
.admin-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.admin-title h1{margin:0;font-size:22px;letter-spacing:.2px;}
.admin-title .sub{color:var(--muted);margin-top:4px;font-size:13px;}

.admin-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.admin-nav a{
  padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;
  font-weight:800; box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.admin-nav a:hover{transform:translateY(-1px);transition:.15s;}
.admin-nav a.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:14px;
}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.kpi:before{
  content:"";
  position:absolute; inset:auto -80px -80px auto;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(16,185,129,.25), transparent 60%);
}
.kpi .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.kpi .label{color:var(--muted);font-weight:700;}
.kpi .value{font-size:34px;font-weight:950;line-height:1;margin-top:8px;}
.kpi .hint{color:var(--muted);font-size:12px;margin-top:10px;}
.kpi .icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef2ff,#ecfeff);
  border:1px solid var(--line);
  font-size:20px;
}
.kpi.green .icon{background:linear-gradient(135deg,#ecfdf5,#d1fae5);}
.kpi.orange .icon{background:linear-gradient(135deg,#fff7ed,#ffedd5);}
.kpi.blue .icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);}

.panel-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:14px;
}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  overflow:hidden;
}
.panel .head{
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.panel .head .t{font-weight:900;}
.panel .body{padding:14px 16px;}

.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px 8px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px;}
.table th{color:var(--muted);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.status{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--line);
  background:#f8fafc;color:#0f172a;
}
.status.pending{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.status.paid{background:#ecfdf5;color:#065f46;border-color:#bbf7d0;}
.status.packing{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.status.shipped{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;}
.status.completed{background:#f0fdf4;color:#166534;border-color:#bbf7d0;}
.status.cancelled{background:#fef2f2;color:#991b1b;border-color:#fecaca;}

.quick{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.quick a{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);font-weight:900;
}
.quick a span{color:var(--muted);font-weight:800;font-size:12px;}
.quick a:hover{transform:translateY(-1px);transition:.15s;}

@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .panel-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .admin-wrap{padding:14px;}
  .kpi-grid{grid-template-columns:1fr;}
  .quick{grid-template-columns:1fr;}
}

/* ===== Product Page ===== */
.pd-wrap{max-width:1200px;margin:0 auto;padding:20px;}
.pd-hero{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  overflow:hidden;
}
.pd-grid{display:grid;grid-template-columns: 1.05fr .95fr; gap:0;}
.pd-media{padding:18px;border-right:1px solid var(--line);     background: linear-gradient(135deg, #ffffff, #f7faff);}
.pd-media .frame{
  border-radius:16px; overflow:hidden;
  background:#0b1220; border:1px solid rgba(255,255,255,.12);
  aspect-ratio: 1 / 1;
  display:flex; align-items:center; justify-content:center;
}
.pd-media img{height:100%;object-fit:cover;display:block;}
.pd-info{padding:18px;background:#fff;}
.pd-title{margin:0;font-size:28px;line-height:1.2;font-weight:950;}
.pd-price{margin-top:10px;font-size:26px;font-weight:950;color:var(--brand);}
.pd-old{color:var(--muted);text-decoration:line-through;font-weight:800;margin-left:8px;font-size:15px;}
.pd-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.pd-tag{
  padding:7px 10px;border-radius:999px;font-weight:950;font-size:12px;
  border:1px solid var(--line); background:#f8fafc;color:#0f172a;
}
.pd-tag.new{background:#ecfdf5;color:#065f46;border-color:#bbf7d0;}
.pd-tag.sale{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.pd-tag.stock{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}

.pd-desc{margin-top:14px;color:#334155;line-height:1.7;}
.pd-actions{
  margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;
}
.pd-actions .btn{height:46px;border-radius:14px;font-weight:950;}
.pd-actions form{margin:0;}

.pd-buyrow{
  margin-top:14px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.qty{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:14px; padding:8px 10px; background:#fff;
}
.qty input{
  width:70px; border:none; outline:none; font-weight:900; text-align:center;
}
.qty button{
  width:34px;height:34px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:900;
}
.pd-meta{
  margin-top:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.pd-box{
  border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff;
}
.pd-box .k{color:var(--muted);font-weight:800;font-size:12px;}
.pd-box .v{font-weight:950;margin-top:4px;}

.pd-related{
  margin-top:16px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  padding:16px;
}
.pd-related .head{display:flex;justify-content:space-between;align-items:end;gap:10px;}
.pd-related .head .t{font-weight:950;font-size:16px;}
.pd-related .head .m{color:var(--muted);font-size:13px;}
.pd-related .grid{margin-top:12px;}

@media (max-width: 900px){
  .pd-grid{grid-template-columns:1fr;}
  .pd-media{border-right:none;border-bottom:1px solid var(--line);}
  .pd-title{font-size:22px;}
  .pd-price{font-size:22px;}
  .pd-meta{grid-template-columns:1fr;}
}

/* ===== Admin Form UI ===== */
.af-wrap{max-width:980px;margin:0 auto;padding:22px;}
.af-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.af-title{font-size:20px;font-weight:950;margin:0;}
.af-sub{color:var(--muted);font-size:13px;margin-top:4px;}

.af-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  overflow:hidden;
}
.af-card .head{
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
}
.af-card .head .t{font-weight:950;}
.af-card .body{padding:16px;}

.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.af-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media (max-width:900px){ .af-grid,.af-grid3{grid-template-columns:1fr;} }

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:900;font-size:13px;}
.help{color:var(--muted);font-size:12px;line-height:1.45;}
.req{color:#ef4444;font-weight:950;margin-left:4px;}

.input, textarea, select{
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  padding:12px 12px !important;
  font-weight:700;
}
textarea{resize:vertical;min-height:120px;}

.af-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-weight:900;
}
.pill small{color:var(--muted);font-weight:800;}
.preview{
  padding:12px 14px;border-radius:16px;border:1px dashed #cbd5e1;background:#f8fafc;
}
.preview b{font-weight:950;}
.preview .ok{color:var(--brand);font-weight:950;}
.preview .warn{color:#b45309;font-weight:950;}
.af-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

/* ===== Cart overflow fix (mobile) ===== */
.cart-item, .cart-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.cart-item > *, .cart-row > *{
  min-width:0;                 /* สำคัญ: อนุญาตให้หด */
}

/* ชื่อสินค้า/รายละเอียด ให้ตัดบรรทัดไม่ล้น */
.cart-item .info, .cart-row .info{
  flex:1;
  min-width:0;
}
.cart-item .title, .cart-row .title{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ราคาด้านขวา ไม่ให้ดันล้น */
.cart-item .right, .cart-row .right,
.cart-item .line-total, .cart-row .line-total,
.cart-item .price-total, .cart-row .price-total{
  flex:0 0 auto;
  max-width:40%;
  text-align:right;
  white-space:nowrap;
}

/* ช่องจำนวน อย่าให้กว้างเกิน */
.cart-item input[type="number"],
.cart-row input[type="number"]{
  width:72px;
  max-width:72px;
}

/* มือถือ: จัดเป็น 2 บรรทัด (กันล้นชัวร์) */
@media (max-width:520px){
  .cart-item, .cart-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  /* รูป */
  .cart-item img, .cart-row img{
    width:54px;
    height:54px;
    border-radius:12px;
    object-fit:cover;
  }

  /* กล่องข้อมูลเต็มแถว */
  .cart-item .info, .cart-row .info{
    flex:1 1 calc(100% - 66px);
  }

  /* กล่องขวา (จำนวน+ราคารวม) ลงบรรทัดใหม่ */
  .cart-item .right, .cart-row .right,
  .cart-item .line-total, .cart-row .line-total,
  .cart-item .price-total, .cart-row .price-total{
    flex:1 1 100%;
    max-width:100%;
    text-align:right;
  }
}
/* ===== Cart Responsive Fix ===== */
.cart-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #e5e7eb;
}
.cart-row > *{ min-width:0; } /* สำคัญ: อนุญาตให้ย่อ */

.cart-img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:12px;
  flex:0 0 auto;
}

.cart-info{
  flex:1;
  min-width:0;
}
.cart-name{
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.cart-price{ margin-top:4px; }
.cart-old{
  margin-left:8px;
  text-decoration:line-through;
  color:#94a3b8;
  font-weight:800;
}

.cart-qty{
  flex:0 0 90px;
}
.cart-qty .input{
  width:100%;
}

.cart-line{
  flex:0 0 120px;
  text-align:right;
  font-weight:950;
  color:#16a34a;
  white-space:nowrap;
}

/* bottom area */
.cart-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.cart-left-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cart-summary{
  text-align:right;
  min-width:220px;
}
.cart-total{
  font-size:22px;
  font-weight:950;
  margin-top:4px;
}

/* ✅ มือถือ: ทำให้ไม่ล้นกรอบ */
@media (max-width:520px){
  .cart-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .cart-img{
    width:56px;
    height:56px;
  }

  .cart-info{
    flex:1 1 calc(100% - 68px);
  }

  .cart-qty{
    flex:0 0 110px;
  }

  .cart-line{
    flex:1 1 100%;
    text-align:right;
    padding-top:6px;
  }

  .cart-summary{
    width:100%;
    min-width:0;
  }
  .cart-summary .btn.green{
    width:100%;
  }
}
/* ===== FORCE FIX cart overflow (override inline width) ===== */
@media (max-width:520px){

  /* 1) บังคับให้แถวใน cart wrap */
  .card form > div[style*="display:flex"][style*="border-bottom"]{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  /* 2) รูปเล็กลง */
  .card form > div[style*="display:flex"][style*="border-bottom"] img{
    width:56px !important;
    height:56px !important;
    flex:0 0 auto !important;
  }

  /* 3) กล่องชื่อ/ราคา ให้กินพื้นที่ที่เหลือ */
  .card form > div[style*="display:flex"][style*="border-bottom"] > div[style*="flex:1"]{
    flex: 1 1 calc(100% - 68px) !important;
    min-width: 0 !important;
  }

  /* 4) ช่องจำนวน: ลดความกว้าง/ไม่ดันล้น */
  .card form > div[style*="display:flex"][style*="border-bottom"] input[type="number"]{
    width:110px !important;
    max-width:110px !important;
  }

  /* 5) ราคาขวาสุด (div width:120px) ให้ลงบรรทัดใหม่เต็มแถว */
  .card form > div[style*="display:flex"][style*="border-bottom"] > div[style*="width:120px"]{
    width:auto !important;
    flex: 1 1 100% !important;
    text-align:right !important;
    padding-top:6px !important;
    white-space:nowrap !important;
  }
}
.cat-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cat-actions .btn{flex:1;min-width:140px;white-space:nowrap;}
@media (max-width:520px){
  .cat-actions .btn{min-width:0;flex:1 1 100%;}
}

/* ===== HERO PRO (คงไว้ แต่ไม่ทับ hero หลักแบบพัง) ===== */
.hero.hero-anim{
  position:relative;
}
.hero.hero-anim:after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(600px 200px at 20% 30%, rgba(255,255,255,.08), transparent 60%);
  animation: heroShimmer 6s ease-in-out infinite;
  pointer-events:none;
}
.hero.hero-anim .inner{
  animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@keyframes heroShimmer{
  0%,100%{ transform:translateX(0); opacity:.65; }
  50%{ transform:translateX(30px); opacity:.9; }
}
/* ✅ Desktop: เพิ่มสูงบน-ล่างของ HERO อีกนิด (ไม่กระทบมือถือ) */
@media (min-width: 901px){
  .hero{
    min-height: 155px;          /* เดิมประมาณ 120 -> เพิ่มสูงขึ้น */
  }
  .hero .inner{
    padding: 22px 20px;         /* เพิ่มระยะบน-ล่าง */
    align-items: center;         /* ให้กึ่งกลางแนวตั้งสวย */
  }
}

/* ✅ Desktop ใหญ่ขึ้นอีกนิด */
@media (min-width: 1200px){
  .hero{
    min-height: 170px;
  }
  .hero .inner{
    padding: 26px 24px;
  }
}

/* ===== INDEX PRODUCT CARD: make like style #2 ===== */

/* การ์ดทั้งใบเป็น flex column เพื่อดันปุ่มลงล่าง */
.product{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* โซนรูปให้เท่ากัน */
.product .img{
  aspect-ratio: 1 / 1 !important;
}

/* โซนเนื้อหาต้องยืดได้ เพื่อให้ปุ่มอยู่ล่าง */
.product .body{
  display:flex !important;
  flex-direction:column !important;
  gap:10px;
  flex:1 1 auto !important;
}

/* ชื่อสินค้าให้กิน 2 บรรทัดเท่ากัน (กันการ์ดสูงไม่เท่ากัน) */
.product .name{
  min-height: 44px;              /* 2 บรรทัดประมาณนี้ */
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* meta (ราคา/แท็ก) ให้จัดระยะสม่ำเสมอ */
.product .meta{
  margin-top:auto;               /* ดัน meta ลงล่างก่อนปุ่ม */
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* ปุ่ม: ให้อยู่ล่างสุดเสมอ */
.product .body > div:last-child{
  margin-top:12px !important;
}

/* กันการ์ดเตี้ย/สูงต่างกันใน grid */
.grid{
  align-items:stretch !important;
}
/* =========================
   Category tree / collapse
   ========================= */
.cat-tree{display:flex;flex-direction:column;gap:8px}
.cat-tree-item{display:block}
.cat-tree-box{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.cat-tree-box[open]{background:#f8fafc}
.cat-tree-box summary{
  list-style:none;
  cursor:pointer;
  padding:0;
}
.cat-tree-box summary::-webkit-details-marker{display:none}
.cat-tree-summary,
.cat-tree-link.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
}
.cat-tree-summary::before{
  content:'▸';
  color:#475569;
  font-size:12px;
  flex:0 0 auto;
  transition:transform .18s ease;
}
.cat-tree-box[open] .cat-tree-summary::before{transform:rotate(90deg)}
.cat-tree-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  font-weight:700;
}
.cat-tree-link span,
.cat-tree-link:not(.row){flex:1}
.cat-tree-link b,
.cat-tree-summary b{
  min-width:28px;
  text-align:center;
  padding:3px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:12px;
}
.cat-tree-link.active{
  color:#166534;
}
.cat-tree-link.active b{background:#dcfce7;color:#166534}
.cat-tree-box .cat-tree-link.active,
.cat-tree-link.row.active{
  background:#ecfdf5;
  border-radius:12px;
  padding:9px 10px;
}
.cat-tree-children{
  padding:0 10px 10px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.level-1>.cat-tree-box,.level-1>.cat-tree-link.row{box-shadow:0 4px 12px rgba(15,23,42,.04)}
.product-path{
  margin-top:7px;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  min-height:34px;
}
.empty-products{
  grid-column:1 / -1;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:28px 18px;
  text-align:center;
  background:#f8fafc;
}
@media (max-width: 768px){
  .cat-tree-summary,
  .cat-tree-link.row,
  .cat-tree-link{font-size:14px}
  .cat-tree-children{padding-left:14px}
}


.ajax-loading{opacity:.55;pointer-events:none;transition:opacity .2s ease;}
.btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c;}
.btn.danger:hover{background:#ffe4e6;}
@media (max-width:700px){
  #productsContainer .product{scroll-margin-top:20px;}
  .btn.danger{width:100%;}
}