/* =========================================================================
   DT07 storefront styles
   Ported from the BioPeptide Lab one-pager (manufacturer-direct.top) so the
   mobile-first catalog shell, cart drawer and offer modal render identically.
   --accent / --accent2 / --bg / --text are injected from theme settings.
   ========================================================================= */

:root {
  --bg:#f8fafc; --card:#fff; --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --accent:#0ea5e9; --accent2:#0284c7; --gold:#f59e0b;
  --green:#10b981; --red:#ef4444; --border:#e2e8f0;
  --topbar-h:0px; --search-h:0px; --cats-h:0px; --header-h:0px;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  padding-bottom:80px;
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}

button { font-family:inherit; }

/* ------------------------------------------------------------- topbar -- */
.topbar {
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  color:#fff;
  padding:32px 16px 24px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.topbar h1 { font-size:1.2rem; font-weight:700; letter-spacing:-.3px; }
.topbar .sub { font-size:.7rem; opacity:.7; margin-top:4px; }
.topbar .badge {
  display:inline-block;
  margin-top:10px;
  padding:4px 12px;
  border-radius:12px;
  font-size:.65rem;
  font-weight:600;
  background:rgba(255,255,255,.1);
  letter-spacing:.5px;
}

/* ------------------------------------------------------------- search -- */
/* Source pinned search + category bar both to top:0 and let them overlap on
   scroll. Offsetting each by the measured height of the one above it keeps the
   at-rest appearance identical while making the sticky stack behave. */
.search-wrap {
  padding:8px 10px;
  background:#fff;
  position:sticky;
  top:var(--topbar-h);
  z-index:9;
  border-bottom:1px solid var(--border);
}
.search-wrap input {
  width:100%;
  padding:8px 14px;
  border-radius:20px;
  border:1.5px solid var(--border);
  font-size:.78rem;
  outline:none;
  background:#f8fafc;
}
.search-wrap input:focus { border-color:var(--accent); background:#fff; }

/* -------------------------------------------------------- category nav -- */
.cat-nav {
  display:flex;
  gap:6px;
  padding:8px 10px;
  overflow-x:auto;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:calc(var(--topbar-h) + var(--search-h));
  z-index:8;
  -webkit-overflow-scrolling:touch;
}
.cat-chip {
  flex-shrink:0;
  padding:7px 14px;
  border-radius:18px;
  border:1.5px solid var(--border);
  background:#fff;
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  color:var(--text2);
}
.cat-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* --------------------------------------------------------- family card -- */
.container { max-width:600px; margin:0 auto; padding:8px 12px 40px; }

.family-card {
  background:var(--card);
  border-radius:12px;
  margin-bottom:8px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:all .15s;
}
.family-card.open { box-shadow:0 2px 12px rgba(0,0,0,.06); }
.family-head {
  display:flex;
  align-items:center;
  padding:12px 14px;
  cursor:pointer;
  gap:10px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.family-head:active { background:#f8fafc; }
.family-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.family-info { flex:1; min-width:0; }
.family-name-row { display:flex; align-items:center; gap:6px; }
.family-name { font-size:.82rem; font-weight:700; }
.family-count {
  font-size:.65rem;
  color:var(--text3);
  background:#f1f5f9;
  padding:2px 8px;
  border-radius:8px;
  white-space:nowrap;
}
.family-range { font-size:.78rem; font-weight:700; color:var(--accent2); flex-shrink:0; }
.family-arrow { font-size:.6rem; color:var(--text3); transition:transform .2s; flex-shrink:0; }
.family-card.open .family-arrow { transform:rotate(180deg); }

.family-body { display:none; border-top:1px solid var(--border); }
.family-card.open .family-body { display:block; }

/* --------------------------------------------------------- variant row -- */
.variant-row {
  display:flex;
  align-items:center;
  padding:10px 14px 10px 28px;
  gap:8px;
  border-bottom:1px solid #f1f5f9;
}
.variant-row:last-child { border-bottom:none; }
.v-code { font-size:.72rem; font-weight:700; color:var(--text); min-width:44px; }
.v-name { font-size:.74rem; color:var(--text); flex:1; }
.v-spec { font-size:.68rem; color:var(--text3); }
.v-price { font-size:.78rem; font-weight:700; color:var(--accent2); white-space:nowrap; }
.v-price small { font-weight:400; font-size:.65rem; color:var(--text3); }

.btn-add {
  flex-shrink:0;
  padding:5px 12px;
  border-radius:16px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  margin-left:auto;
}
.btn-add:active { background:var(--accent2); transform:scale(.96); }
.btn-add.in-cart { background:var(--green); }

/* --------------------------------------------------------- cart button -- */
.cart-fab {
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;
  font-size:1.4rem;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(14,165,233,.35);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s;
}
.cart-fab:active { transform:scale(.94); }
.cart-count {
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:22px;
  height:22px;
  border-radius:11px;
  background:var(--red);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:2px solid #fff;
}

/* --------------------------------------------------------- cart drawer -- */
.cart-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:200;
  display:none;
  justify-content:center;
  align-items:flex-end;
}
.cart-overlay.open { display:flex; }

.cart-drawer {
  background:#fff;
  border-radius:20px 20px 0 0;
  width:100%;
  max-width:600px;
  max-height:70vh;
  display:flex;
  flex-direction:column;
  animation:slideUp .25s ease;
}
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

.cart-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.cart-title { font-size:.95rem; font-weight:700; }
.cart-close {
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2);
}

.cart-items { flex:1; overflow-y:auto; padding:8px 0; max-height:40vh; }
.cart-empty { text-align:center; padding:32px; color:var(--text3); font-size:.8rem; }

.cart-item {
  display:flex;
  align-items:center;
  padding:12px 20px;
  gap:10px;
  border-bottom:1px solid #f1f5f9;
}
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:.78rem; font-weight:700; }
.cart-item-spec { font-size:.68rem; color:var(--text3); }
.cart-item-price { font-size:.72rem; color:var(--accent2); }

.qty-ctrl { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.qty-btn {
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:#fff;
  font-size:.9rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2);
  transition:background .1s;
}
.qty-btn:active { background:#f1f5f9; }
.qty-num { font-size:.8rem; font-weight:700; min-width:24px; text-align:center; }
.cart-item-total { font-size:.78rem; font-weight:700; color:var(--text); min-width:52px; text-align:right; }

.cart-footer { border-top:1px solid var(--border); padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.cart-total-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.88rem;
  font-weight:700;
}
.cart-total-price { color:var(--accent2); font-size:1.05rem; }
.cart-actions { display:flex; gap:8px; }
.btn-confirm {
  flex:1;
  padding:12px;
  border-radius:12px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.btn-confirm:active { background:var(--accent2); }
.btn-clear {
  padding:12px 18px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--text2);
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.btn-clear:active { background:#f1f5f9; }

/* ---------------------------------------------------------- offer modal */
.confirm-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:300;
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
}
.confirm-overlay.open { display:flex; }

.confirm-modal {
  background:#fff;
  border-radius:20px;
  width:100%;
  max-width:420px;
  text-align:center;
  padding:32px 24px 24px;
  animation:fadeIn .25s ease;
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  max-height:90vh;
  overflow-y:auto;
}
@keyframes fadeIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }

.confirm-badge {
  display:inline-block;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;
  padding:6px 18px;
  border-radius:20px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:16px;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
.confirm-title { font-size:1.1rem; font-weight:800; color:#0f172a; margin-bottom:20px; }

.countdown-box {
  background:#fef3c7;
  border:2px solid #f59e0b;
  border-radius:14px;
  padding:16px;
  margin-bottom:20px;
}
.countdown-label { font-size:.65rem; color:#92400e; font-weight:600; margin-bottom:4px; }
.countdown-timer {
  font-size:2.4rem;
  font-weight:800;
  color:#d97706;
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
}
.countdown-timer.urgent { color:#ef4444; animation:blink .6s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.confirm-offer {
  background:#f0fdf4;
  border:1.5px solid #10b981;
  border-radius:12px;
  padding:12px;
  margin-bottom:16px;
}
.confirm-offer-text { font-size:.85rem; font-weight:700; color:#065f46; }
.confirm-offer-sub { font-size:.7rem; color:#047857; margin-top:2px; }
.confirm-hint { font-size:.72rem; color:#64748b; margin-bottom:20px; line-height:1.5; }

.btn-copy-order {
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:filter .15s;
}
.btn-copy-order:active { filter:brightness(.9); }
.btn-copy-order.copied { background:#10b981; }
.btn-copy-order.copy-fail { background:#dc2626; }

.manual-copy-box {
  background:#fef3c7;
  border:2px dashed #f59e0b;
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
  text-align:center;
}
.manual-copy-label { font-size:.7rem; font-weight:700; color:#92400e; margin-bottom:8px; }
.manual-copy-textarea {
  width:100%;
  height:120px;
  padding:10px;
  border-radius:8px;
  border:1px solid #f59e0b;
  font-family:monospace;
  font-size:.65rem;
  resize:none;
  background:#fffbeb;
  color:#1c1917;
  line-height:1.4;
  -webkit-user-select:text;
  user-select:text;
}
.manual-copy-textarea:focus { outline:2px solid #f59e0b; outline-offset:-2px; }
.btn-copy-retry {
  width:100%;
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  border:none;
  background:#f59e0b;
  color:#1c1917;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.btn-copy-retry:active { filter:brightness(.9); }

.confirm-close {
  margin-top:12px;
  background:none;
  border:none;
  color:#94a3b8;
  font-size:.7rem;
  cursor:pointer;
  padding:4px;
}

/* -------------------------------------------------------------- footer -- */
.footer {
  text-align:center;
  padding:20px 16px;
  color:var(--text3);
  font-size:.65rem;
  line-height:1.8;
}
.footer strong { color:var(--text2); }
.dt07-wa-link { color:var(--accent); text-decoration:none; }
.dt07-wa-link:hover { text-decoration:underline; }
.dt07-stocklink {
  color:var(--accent);
  font-size:.6rem;
  text-decoration:none;
}
.dt07-stocklink:hover { text-decoration:underline; }
.dt07-version { font-size:.55rem; color:var(--text3); opacity:.5; }

.empty-state { text-align:center; padding:40px; color:var(--text3); font-size:.8rem; }

/* --------------------------------------------------------------- toast -- */
.toast {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  background:#0f172a;
  color:#fff;
  padding:14px 28px;
  border-radius:24px;
  font-size:.8rem;
  font-weight:600;
  z-index:500;
  opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  white-space:nowrap;
  max-width:90vw;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(4px); }
.toast.success { background:#059669; box-shadow:0 8px 32px rgba(5,150,105,.4); }
.toast.error { background:#dc2626; box-shadow:0 8px 32px rgba(220,38,38,.4); }

/* -------------------------------------------------------- stock list ---- */
.header {
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  color:#fff;
  padding:28px 16px 22px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:10;
}
.header h1 { font-size:1.15rem; font-weight:700; }
.header .sub { font-size:.68rem; opacity:.75; margin-top:5px; }

.summary-bar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:10px 12px;
  max-width:600px;
  margin:0 auto;
}
.summary-chip {
  padding:5px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
  font-size:.66rem;
  color:var(--text2);
}
.summary-chip b { color:var(--text); }

.cat-group {
  max-width:600px;
  margin:0 auto 10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.cat-group__title {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  font-size:.8rem;
  font-weight:700;
  border-bottom:1px solid var(--border);
}
.cat-group__meta { font-size:.62rem; font-weight:400; color:var(--text3); }
.stock-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-bottom:1px solid #f1f5f9;
  font-size:.7rem;
}
.stock-row:last-child { border-bottom:none; }
.stock-code { font-weight:700; min-width:52px; color:var(--text); }
.stock-name { flex:1; min-width:0; color:var(--text2); }
.stock-name small { display:block; color:var(--text3); font-size:.62rem; }
.stock-price { font-weight:700; color:var(--accent2); white-space:nowrap; }
.stock-qty { color:var(--text3); min-width:46px; text-align:right; white-space:nowrap; }
.stock-value { color:var(--green); font-weight:600; min-width:56px; text-align:right; white-space:nowrap; }

/* ------------------------------------------------- regular WP pages ----- */
.page-main { padding-top:16px; }
.page-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
}
.page-card h1 { font-size:1.15rem; margin-bottom:12px; }
.entry-content { font-size:.85rem; color:var(--text2); }
.entry-content a { color:var(--accent); }
.entry-content ul { margin:8px 0 8px 18px; }
.entry-content h2 { font-size:1rem; margin:14px 0 6px; color:var(--text); }

/* ------------------------------------------- WhatsApp in-app gate ------- */
.dt07-wa-gate {
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
}
.dt07-wa-gate[hidden] { display:none !important; }
.dt07-wa-gate__backdrop { position:absolute; inset:0; background:rgba(10,10,10,.55); }
.dt07-wa-gate__panel {
  position:relative;
  z-index:1;
  width:min(100%,420px);
  padding:22px 20px 18px;
  border-radius:16px 16px 0 0;
  background:#fff;
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
  display:grid;
  gap:12px;
}
.dt07-wa-gate__x {
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#667781;
  font-size:24px;
  cursor:pointer;
  line-height:1;
}
.dt07-wa-gate__brand { display:flex; align-items:center; justify-content:flex-start; }
.dt07-wa-gate__logo {
  display:block;
  width:40px;
  height:40px;
  padding:8px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
}
.dt07-wa-gate__panel h3 { margin:0 28px 0 0; font-size:22px; line-height:1.2; color:#111b21; }
.dt07-wa-gate__panel > p { margin:0; color:#667781; font-size:14px; line-height:1.45; white-space:pre-line; }
.dt07-wa-gate__phone { display:none !important; }
.dt07-wa-gate__hint { margin:0; color:#667781; font-size:12px; line-height:1.4; white-space:pre-line; }
.dt07-wa-gate__hint[hidden] { display:none !important; }
.dt07-wa-gate__copied { margin:0; color:#128c7e; font-size:13px; font-weight:600; }
.dt07-wa-gate__copied[hidden] { display:none !important; }
.dt07-wa-gate__btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
.dt07-wa-gate__btn-icon { flex:0 0 auto; display:block; }
.dt07-wa-gate__btn--primary {
  background:#25d366 !important;
  border-color:#25d366 !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(37,211,102,.28);
}
.dt07-wa-gate__btn--primary:hover { background:#1ebe57 !important; }
.dt07-wa-gate__btn--primary.is-opening { opacity:.85; pointer-events:none; }
.dt07-wa-gate__btn--ghost {
  background:#fff;
  color:#128c7e !important;
  border-color:rgba(18,140,126,.35);
}
.dt07-wa-gate__btn--ghost:hover { background:#f0faf4; border-color:#25d366; color:#075e54 !important; }
body.dt07-wa-gate-open { overflow:hidden; }
.dt07-wa-gate[data-dt07-wa-platform="facebook"] .dt07-wa-gate__hint {
  padding:10px 12px;
  background:#fff7e8;
  border-radius:8px;
  color:#7a4a00;
}

/* --------------------------------------------------------- a11y / motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
@media (max-width:480px) {
  .variant-row { padding-left:18px; }
}