:root{
  --paper:#E4EAE1;
  --card:#FBF9F2;
  --ink:#16281F;
  --ink-soft:#425048;
  --teal:#0F6B5C;
  --teal-dark:#0B5347;
  --gold:#E8A93B;
  --pink:#C43F73;
  --line: rgba(22,40,31,0.16);
  --danger:#B23B2E;
  --radius: 4px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', Arial, sans-serif; font-size:15px; line-height:1.55;
}
h1,h2,h3,.display{ font-family:'Bricolage Grotesque', Georgia, serif; font-weight:700; letter-spacing:-0.01em; margin:0 0 6px; }
a{ color:var(--teal-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
.num{ font-variant-numeric: tabular-nums; }
img{ max-width:100%; display:block; }

header.top{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.top-inner{ max-width:1100px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-size:22px; }
.wordmark .dot{ color:var(--gold); }
.wordmark a{ color:inherit; text-decoration:none; }
nav.tabs{ display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; }
nav.tabs a{ padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
nav.tabs a.active{ background:var(--ink); color:var(--paper); }
.cart-link{ border:1px solid var(--ink); background:var(--ink); color:var(--paper) !important; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; }

main{ max-width:1100px; margin:0 auto; padding:28px 20px 80px; }

.hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:end; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:40px; line-height:1.05; }
.hero p{ color:var(--ink-soft); max-width:46ch; margin-top:12px; }
@media (max-width:760px){ .hero{ grid-template-columns:1fr; } .hero h1{ font-size:30px; } }

.receipt{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.receipt-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.receipt-row:last-child{ border-bottom:none; font-weight:700; }
.receipt-row.plain{ font-weight:400; }
.receipt-label{ color:var(--ink-soft); }

.store-bar{ display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.tile{ height:130px; display:flex; align-items:center; justify-content:center; position:relative; font-family:'Bricolage Grotesque'; font-weight:800; font-size:52px; color:rgba(255,255,255,0.92); background-size:cover; background-position:center; }
.tile::after{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 14px); }
.card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-cat{ font-size:11.5px; color:var(--ink-soft); }
.card-name{ font-weight:600; font-size:14.5px; line-height:1.3; }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price{ font-weight:700; font-size:17px; }

.btn{ display:inline-block; border:none; border-radius:var(--radius); padding:9px 14px; font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit; }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); color:#fff; text-decoration:none; }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-sm{ padding:6px 10px; font-size:12.5px; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

.stock-out{ font-size:12px; color:var(--danger); font-weight:600; }

.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:5px; max-width:420px; }
.field label{ font-size:13px; font-weight:600; }
.field .hint{ font-size:11.5px; color:var(--ink-soft); }
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=file],select,textarea{
  font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink); width:100%;
}
label.checkbox{ display:flex; align-items:center; gap:8px; font-weight:500; }

.section-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:22px; }
.section-box h3{ font-size:17px; margin-bottom:14px; }
.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.stat .label{ font-size:12px; color:var(--ink-soft); }
.stat .value{ font-family:'Bricolage Grotesque'; font-size:26px; font-weight:700; margin-top:4px; }
.stat .value.pink{ color:var(--pink); }
.stat .value.gold{ color:#a06e0f; }

table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
th{ font-size:11.5px; color:var(--ink-soft); font-weight:600; background:rgba(22,40,31,0.03); }
tr:last-child td{ border-bottom:none; }
table input[type=number]{ width:100px; }

.badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-pending{ background:#F1E3C0; color:#7A5A0A; }
.badge-info{ background:#D9E6E2; color:var(--teal-dark); }
.badge-shipped{ background:#DCE3F5; color:#2C4A9E; }
.badge-ok{ background:#DCEFD9; color:#256D2A; }
.badge-bad{ background:#F4D9D5; color:var(--danger); }

.link-box{ display:flex; align-items:center; gap:10px; background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius); padding:10px 12px; font-size:13.5px; flex-wrap:wrap; }

.notice{ padding:11px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13.5px; font-weight:600; }
.notice-ok{ background:#DCEFD9; color:#256D2A; }
.notice-bad{ background:#F4D9D5; color:var(--danger); }
.notice-info{ background:#D9E6E2; color:var(--teal-dark); }

.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty .display{ font-size:20px; color:var(--ink); margin-bottom:6px; }

.gate{ max-width:380px; margin:60px auto; text-align:center; }
.gate .display{ font-size:24px; margin-bottom:6px; }
.gate p{ color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }
.gate .field{ max-width:100%; text-align:left; }

.foot-note{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); }

/* ---------------- homepage slideshow (JS-driven, works for any slide count) ---------------- */
.hero-slides{ position:relative; height:220px; border-radius:var(--radius); overflow:hidden; margin-bottom:28px; }
.hero-slide{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:32px; color:#fff; opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:auto; }
.hero-slide h2{ font-size:26px; color:#fff; margin-bottom:8px; }
.hero-slide p{ max-width:44ch; color:rgba(255,255,255,0.9); }
.hero-slide.theme-teal{ background:linear-gradient(135deg,var(--teal),var(--teal-dark)); }
.hero-slide.theme-gold{ background:linear-gradient(135deg,var(--gold),#a06e0f); }
.hero-slide.theme-pink{ background:linear-gradient(135deg,var(--pink),#8a2a52); }
.hero-slide.theme-plum{ background:linear-gradient(135deg,#6b3f8c,#432759); }
.hero-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.hero-dots button{ width:8px; height:8px; border-radius:999px; border:none; background:rgba(255,255,255,0.5); cursor:pointer; padding:0; }
.hero-dots button.active{ background:#fff; }

/* ---------------- site footer ---------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding:28px 20px; background:var(--card); }
.site-footer-inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
.site-footer .logo-name{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:18px; margin-bottom:6px; }
.site-footer p{ color:var(--ink-soft); font-size:13px; max-width:44ch; }
.site-footer .footer-contact{ font-size:13px; color:var(--ink-soft); }
.site-footer .copyright{ width:100%; text-align:center; font-size:12px; color:var(--ink-soft); margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.site-logo-img{ height:32px; display:block; }

/* ---------------- payment method picker (checkout) ---------------- */
.payment-options{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.payment-option{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 14px; cursor:pointer; background:var(--card); font-size:13.5px; font-weight:600;
}
.payment-option.selected{ border-color:var(--teal); background:rgba(15,107,92,0.08); }
.payment-option input{ margin:0; width:auto; }
.payment-option .po-logo-img{ height:22px; width:auto; display:block; }
.payment-option .po-logo-fallback{
  width:22px; height:22px; border-radius:5px; background:var(--teal); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque';
}

/* ---------------- modal (stock confirmation popup) ---------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(22,40,31,0.45); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal-box{ background:var(--card); border-radius:var(--radius); max-width:480px; width:100%; padding:24px; border:1px solid var(--line); max-height:90vh; overflow-y:auto; }

/* ---------------- product detail page ---------------- */
.product-hero{ display:grid; grid-template-columns:320px 1fr; gap:28px; margin-bottom:24px; }
@media (max-width:760px){ .product-hero{ grid-template-columns:1fr; } }
.product-image-wrap{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:block; }
.product-image-wrap img{ width:100%; display:block; cursor:pointer; }
.download-badge{ position:absolute; bottom:8px; right:8px; background:rgba(22,40,31,0.75); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.copy-btn{ background:none; border:1px solid var(--line); border-radius:4px; padding:4px 10px; font-size:12px; cursor:pointer; color:var(--ink-soft); }
.copy-btn:hover{ border-color:var(--ink); color:var(--ink); }
.info-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 24px; }
.info-row{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:7px 0; font-size:13.5px; gap:10px; }
.info-label{ color:var(--ink-soft); }

/* ---------------- reseller top bar: search, notifications, profile ---------------- */
.reseller-search{ display:flex; align-items:center; }
.reseller-search input{ border-radius:999px 0 0 999px; border-right:none; width:180px; }
.reseller-search button{ border:1px solid var(--line); border-left:none; background:var(--card); border-radius:0 999px 999px 0; padding:9px 12px; cursor:pointer; }
.notif-bell{ position:relative; text-decoration:none; font-size:19px; color:var(--ink); padding:4px; }
.notif-badge{
  position:absolute; top:-2px; right:-2px; background:var(--pink); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:999px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.profile-menu{ position:relative; }
.avatar-btn{ border:none; background:none; cursor:pointer; padding:0; display:block; }
.avatar-img{ width:34px; height:34px; border-radius:999px; object-fit:cover; border:1px solid var(--line); }
.avatar-initials{
  width:34px; height:34px; border-radius:999px; background:var(--teal); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Bricolage Grotesque'; font-weight:700; font-size:15px;
}
.profile-dropdown{
  display:none; position:absolute; right:0; top:44px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:70; overflow:hidden;
}
.profile-dropdown.show{ display:block; }
.profile-dropdown a{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:13.5px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
.profile-dropdown a:last-child{ border-bottom:none; }
.profile-dropdown a:hover{ background:var(--paper); }
@media (max-width:640px){ .reseller-search input{ width:110px; } }

.subtabs{ display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; width:fit-content; margin-bottom:20px; flex-wrap:wrap; }
.subtabs a{ padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
.subtabs a.active{ background:var(--ink); color:var(--paper); }

@media (max-width:640px){
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  tr{ border-bottom:1px solid var(--line); padding:10px 0; }
  td{ border:none; padding:3px 12px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
  td::before{ content:attr(data-label); font-weight:600; color:var(--ink-soft); font-size:11.5px; }
}