/* ===== buddhawords ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --navy:#1C2B3C; --orange:#E07B39; --gold:#C9983A; --ink:#1A1A1A;
  --bg:#FAFAFA; --line:#ECECEC; --muted:#777;
}
body { font-family:'Sarabun',-apple-system,sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }
.serif, .brand, h1.hero-title { font-family:'DM Serif Display',serif; }

/* nav */
.topnav { display:flex; align-items:center; gap:22px; background:#fff; padding:12px 40px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; flex-wrap:wrap; }
.brand { font-family:'DM Serif Display',serif; font-size:24px; }
.brand.light { color:#fff; font-size:22px; }
.navlinks { display:flex; gap:18px; font-size:14.5px; }
.navlinks a:hover { color:var(--orange); }
.sale-link { color:#C62828; font-weight:600; }
.navsearch { flex:1; min-width:140px; }
.navsearch input { width:100%; max-width:320px; padding:8px 14px; border:1px solid var(--line); border-radius:20px; font:inherit; font-size:13.5px; background:var(--bg); }
.navright { display:flex; align-items:center; gap:14px; font-size:14px; }
.nav-user { display:flex; align-items:center; gap:7px; font-weight:600; }
.avatar-dot { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--gold),#8B6914); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.muted-link { color:var(--muted); font-size:13px; }
.cartlink { position:relative; font-size:20px; }
.cartbadge { position:absolute; top:-7px; right:-10px; background:var(--orange); color:#fff; font-size:11px; font-weight:700; border-radius:10px; padding:1px 6px; }

/* buttons & chips */
.btn { display:inline-block; border:none; cursor:pointer; font:inherit; font-weight:600; border-radius:10px; padding:12px 26px; font-size:15px; transition:.15s; }
.btn-orange { background:var(--orange); color:#fff; }
.btn-orange:hover { background:#c96a2e; }
.btn-dark { background:var(--ink); color:#fff; }
.btn-outline { background:#fff; border:1.5px solid var(--line); }
.btn-sm { padding:7px 16px; font-size:13.5px; border-radius:16px; }
.btn-block { width:100%; text-align:center; }
.chip { font-size:11.5px; font-weight:700; padding:2px 10px; border-radius:12px; background:#F0F0F0; }
.chip.gold { background:linear-gradient(135deg,#C9983A,#E6C46B); color:#4A3200; }
.chip.dark { background:var(--ink); color:#fff; padding:5px 12px; }
.badge-sale { background:#C62828; color:#fff; font-size:11px; font-weight:700; padding:2px 9px; border-radius:10px; }
.badge-new { background:#1B5E20; color:#fff; font-size:11px; font-weight:700; padding:2px 9px; border-radius:10px; }
.flash { background:#E8F5E9; color:#2E7D32; padding:11px 40px; font-size:14px; font-weight:600; }

/* hero */
.hero { background:var(--navy); color:#fff; padding:52px 40px 58px; display:flex; align-items:center; gap:48px; flex-wrap:wrap; }
.hero-left { flex:1; min-width:280px; max-width:640px; }
.hero-eyebrow { display:inline-block; background:rgba(224,123,57,.22); color:#F5B98A; padding:7px 18px; border-radius:18px; font-size:13.5px; font-weight:600; margin-bottom:18px; }
h1.hero-title { font-size:44px; line-height:1.15; font-weight:400; margin-bottom:12px; }
.hero-sub { color:rgba(255,255,255,.75); font-size:15.5px; margin-bottom:8px; }
.hero-rating { color:var(--gold); font-size:14px; margin-bottom:22px; }
.hero-cta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hero-price { font-size:26px; font-weight:700; color:#fff; }
.hero-cover { width:190px; height:264px; border-radius:6px; box-shadow:0 18px 44px rgba(0,0,0,.45); display:flex; align-items:flex-end; padding:16px; color:#fff; }
.hero-cover .t { font-family:'DM Serif Display',serif; font-size:19px; line-height:1.25; }
.stats { display:flex; gap:40px; padding:20px 40px; background:#fff; border-bottom:1px solid var(--line); font-size:14px; flex-wrap:wrap; }
.stats b { font-size:19px; color:var(--navy); display:block; }

/* filter bar */
.filterbar { display:flex; gap:10px; padding:16px 40px; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; align-items:center; }
.fchip { padding:6px 16px; border-radius:16px; font-size:13.5px; white-space:nowrap; border:1px solid var(--line); background:#fff; }
.fchip.on { background:#FFF3E0; color:var(--orange); font-weight:700; border-color:#F5C9A6; }
.sortsel { margin-left:auto; font:inherit; font-size:13.5px; padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }

/* product grid */
.section { padding:34px 40px 50px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.section-head h2 { font-family:'DM Serif Display',serif; font-weight:400; font-size:26px; }
.section-head span { color:var(--muted); font-size:13.5px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:22px; }
.card { background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:.18s; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.09); }
.card-cover { height:150px; display:flex; align-items:flex-end; padding:12px; color:#fff; position:relative; }
.card-cover .t { font-family:'DM Serif Display',serif; font-size:16px; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.card-cover .badges { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.card-body { padding:13px 15px 15px; flex:1; display:flex; flex-direction:column; }
.card-body .name { font-weight:700; font-size:14.5px; margin-bottom:2px; }
.card-body .author { color:var(--muted); font-size:12.5px; margin-bottom:6px; }
.card-body .rating { color:var(--gold); font-size:12.5px; margin-bottom:8px; }
.card-body .rating small { color:var(--muted); }
.card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.price { font-weight:700; font-size:16.5px; }
.price s { color:#BBB; font-weight:400; font-size:13px; margin-left:6px; }
.addbtn { width:32px; height:32px; border-radius:50%; border:none; background:var(--orange); color:#fff; font-size:18px; cursor:pointer; line-height:1; }
.addbtn:hover { background:#c96a2e; }
.oos { color:#C62828; font-size:12.5px; font-weight:600; }

/* detail */
.crumb { padding:16px 40px 0; font-size:13px; color:var(--muted); }
.detail { display:flex; gap:44px; padding:26px 40px 40px; flex-wrap:wrap; }
.detail-cover { width:300px; height:420px; border-radius:8px; display:flex; align-items:flex-end; padding:22px; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.18); }
.detail-cover .t { font-family:'DM Serif Display',serif; font-size:26px; line-height:1.25; }
.detail-info { flex:1; min-width:300px; max-width:640px; }
.detail-info h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:32px; margin:6px 0 4px; }
.detail-info .author { color:var(--muted); margin-bottom:10px; }
.detail-info .rating { color:var(--gold); margin-bottom:16px; font-size:14.5px; }
.detail-price { font-size:30px; font-weight:700; margin-bottom:16px; }
.detail-price s { font-size:18px; color:#BBB; font-weight:400; margin-left:10px; }
.detail-price .disc { font-size:13px; color:#C62828; background:#FFEBEE; border-radius:10px; padding:3px 10px; margin-left:10px; vertical-align:middle; }
.detail-desc { color:#444; line-height:1.75; font-size:15px; margin-bottom:20px; }
.meta-row { display:flex; gap:26px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 20px; font-size:13.5px; margin-bottom:20px; flex-wrap:wrap; }
.meta-row b { display:block; font-size:14.5px; }
.premium-box { background:linear-gradient(120deg,#FDF6E5,#FBEED0); border:1px solid #EAD9A8; border-radius:12px; padding:14px 18px; font-size:14px; margin-bottom:22px; }
.buy-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wishbtn { width:48px; height:48px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-size:20px; cursor:pointer; }
.wishbtn.on { color:#C62828; border-color:#F3B6B6; background:#FFF5F5; }

/* reviews */
.reviews { padding:10px 40px 50px; max-width:980px; }
.reviews h2 { font-family:'DM Serif Display',serif; font-weight:400; font-size:24px; margin-bottom:16px; }
.review { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:14px; }
.review-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.review-head .avatar-dot { width:34px; height:34px; font-size:15px; }
.review-head .nm { font-weight:700; font-size:14.5px; }
.review-head .dt { color:var(--muted); font-size:12.5px; }
.review .stars { color:var(--gold); font-size:13px; }
.review p { font-size:14px; line-height:1.7; color:#333; }
.verified { color:#2E7D32; font-size:12px; font-weight:600; }
.review-form textarea { width:100%; min-height:90px; }

/* cart & checkout */
.page-wrap { max-width:1080px; margin:0 auto; padding:32px 24px 60px; }
.page-wrap h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:30px; margin-bottom:4px; }
.page-sub { color:var(--muted); font-size:14px; margin-bottom:26px; }
.cart-layout { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.cart-list { flex:2; min-width:300px; }
.cart-item { display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:12px; align-items:center; }
.mini-cover { width:56px; height:78px; border-radius:5px; flex-shrink:0; }
.cart-item .info { flex:1; }
.cart-item .nm { font-weight:700; font-size:14.5px; }
.cart-item .au { color:var(--muted); font-size:12.5px; }
.qtybox { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; padding:4px 10px; }
.qtybox button { border:none; background:none; font-size:16px; cursor:pointer; padding:2px 6px; }
.rm { color:#C62828; font-size:12.5px; border:none; background:none; cursor:pointer; }
.summary { flex:1; min-width:270px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; position:sticky; top:80px; }
.summary h3 { font-size:16.5px; margin-bottom:14px; }
.sumrow { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; }
.sumrow.total { font-size:17px; font-weight:700; border-top:1px solid var(--line); padding-top:12px; margin-top:6px; }
.sumrow .free { color:#2E7D32; font-weight:600; }
.sumrow .disc { color:#C62828; }
.empty { text-align:center; padding:60px 20px; color:var(--muted); }
.empty .big { font-size:44px; margin-bottom:10px; }

/* forms */
.form-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; margin-bottom:20px; }
.form-card h3 { font-size:16.5px; margin-bottom:16px; }
.frow { display:flex; gap:14px; }
.fgroup { flex:1; margin-bottom:14px; }
.fgroup label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.fgroup input, .fgroup select, .fgroup textarea { width:100%; padding:10px 13px; border:1px solid #DDD; border-radius:9px; font:inherit; font-size:14px; }
.fgroup input:focus, .fgroup textarea:focus { outline:2px solid rgba(224,123,57,.35); border-color:var(--orange); }
.payopt { display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:11px; padding:13px 16px; margin-bottom:10px; cursor:pointer; font-size:14.5px; }
.payopt input { accent-color:var(--orange); }
.payopt .rec { margin-left:auto; }
.err { background:#FFEBEE; color:#C62828; border-radius:9px; padding:10px 14px; font-size:13.5px; margin-bottom:14px; }

/* auth */
.auth-wrap { max-width:440px; margin:44px auto 70px; padding:0 20px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:0 8px 30px rgba(0,0,0,.05); }
.auth-tabs { display:flex; margin-bottom:22px; border-bottom:1px solid var(--line); }
.auth-tabs a { flex:1; text-align:center; padding:11px; font-weight:600; font-size:15px; color:var(--muted); border-bottom:2.5px solid transparent; }
.auth-tabs a.on { color:var(--orange); border-color:var(--orange); }
.auth-card h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:26px; text-align:center; margin-bottom:4px; }
.auth-sub { text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:22px; }
.fineprint { font-size:12px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.6; }

/* profile */
.tierbox { background:var(--navy); color:#fff; border-radius:16px; padding:24px 28px; margin-bottom:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.tierbox .avatar-dot { width:52px; height:52px; font-size:22px; }
.tierbox .muted { color:rgba(255,255,255,.65); font-size:13px; }
.order-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:12px; }
.order-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap; gap:6px; }
.order-top .oid { font-weight:700; }
.status-pill { font-size:12px; font-weight:700; padding:3px 12px; border-radius:12px; }
.order-meta { color:var(--muted); font-size:13px; }

/* success */
.success-wrap { text-align:center; padding:70px 20px; }
.success-wrap .ok { width:74px; height:74px; border-radius:50%; background:#E8F5E9; color:#2E7D32; font-size:34px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.success-wrap h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:32px; margin-bottom:8px; }

/* admin */
.admin-body { background:#F4F5F7; }
.admin-nav { background:var(--navy); color:#fff; padding:12px 32px; display:flex; gap:24px; align-items:center; }
.admin-nav a { color:rgba(255,255,255,.8); font-size:14px; }
.admin-nav a.on, .admin-nav a:hover { color:#fff; font-weight:600; }
.admin-wrap { max-width:1100px; margin:0 auto; padding:28px 24px 60px; }
.admin-wrap h1 { font-size:24px; margin-bottom:20px; }
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:12px; padding:18px 22px; border:1px solid var(--line); }
.stat-card b { font-size:24px; display:block; color:var(--navy); }
.stat-card span { color:var(--muted); font-size:13px; }
table.admin { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line); font-size:13.5px; }
table.admin th { background:#FAFAFA; text-align:left; padding:11px 14px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line); }
table.admin td { padding:11px 14px; border-bottom:1px solid #F3F3F3; vertical-align:middle; }
table.admin tr:last-child td { border-bottom:none; }
.inline-form { display:inline-flex; gap:6px; align-items:center; }
.inline-form select { font:inherit; font-size:12.5px; padding:4px 8px; border-radius:7px; border:1px solid #DDD; }

/* footer */
.footer { background:var(--navy); color:rgba(255,255,255,.75); margin-top:30px; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding:40px; font-size:13.5px; }
.footer-inner h4 { color:#fff; font-size:14px; margin-bottom:10px; }
.footer-inner a { display:block; margin-bottom:7px; }
.footer-inner a:hover { color:#fff; }
.footer-inner p { line-height:1.7; margin-top:8px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:16px; font-size:12.5px; }
.gold-dot { color:var(--gold); }

/* pagination */
.pager { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.pager a, .pager span { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:#fff; font-size:14px; }
.pager .cur { background:var(--ink); color:#fff; border-color:var(--ink); }

@media (max-width:760px) {
  .topnav { padding:10px 16px; gap:12px; }
  .navlinks { display:none; }
  .hero { padding:36px 20px; }
  h1.hero-title { font-size:32px; }
  .section, .filterbar, .stats, .detail, .reviews, .crumb { padding-left:20px; padding-right:20px; }
  .footer-inner { grid-template-columns:1fr 1fr; padding:28px 20px; }
  .frow { flex-direction:column; gap:0; }
}

/* ===== additional gallery styles ===== */
.detail-gallery-container {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
.main-media-viewer {
  width: 300px;
  height: 420px;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-cover-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
/* address cascading selects */
.addr-select { width:100%; padding:8px 12px; border:1px solid #ccc; border-radius:6px; background:#fff; box-sizing:border-box; height:42px; font:inherit; font-size:14px; }
.addr-select:disabled { background:#F5F5F5; color:#999; cursor:not-allowed; }