/* Ahona Corporation — storefront + dashboard styles
   Plain CSS, no build step. BEM-ish naming. */

:root {
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-light: #ccfbf1;
  --accent: #f59e0b;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;

  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-mute: #94a3b8;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --wrap: 1180px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Roboto, "Noto Sans Bengali", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; box-shadow: 0 6px 24px -16px rgba(15, 23, 42, .3); }
.header-top { background: var(--brand-dark); color: #fff; font-size: 13px; padding: 6px 0; }
.header-top .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.header-main { padding: 16px 0; }
.header-main .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 48px; height: 48px; flex: none; display: block; border-radius: 13px;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo:hover .logo-mark { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 18px -6px rgba(15, 23, 42, .32); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-size: 24px; font-weight: 800; color: var(--brand-dark); letter-spacing: -.5px; }
.logo-sub { font-size: 10px; font-weight: 700; letter-spacing: 3.8px; color: var(--accent); margin-top: 4px; }

.search-form { flex: 1 1 320px; display: flex; max-width: 620px; border-radius: 999px; transition: box-shadow .15s; }
.search-form:focus-within { box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); }
.search-form input {
  flex: 1; padding: 12px 18px; border: 1.5px solid var(--line);
  border-right: none; border-radius: 999px 0 0 999px; font-size: 14.5px; background: #fff;
  transition: border-color .15s;
}
.search-form input::placeholder { color: var(--ink-mute); }
.search-form input:focus { outline: none; border-color: var(--brand); }
.search-form button {
  padding: 12px 24px; border: 1.5px solid var(--brand); background: var(--brand);
  color: #fff; border-radius: 0 999px 999px 0; cursor: pointer; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s, border-color .15s;
}
.search-form button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.search-form button svg { width: 16px; height: 16px; flex: none; }

.header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 14px; font-weight: 500; }
.cart-link { position: relative; }
.cart-badge {
  position: absolute; top: -8px; right: -12px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}

.nav-bar { border-top: 1px solid var(--line); background: #fff; }
.nav-bar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.nav-bar a { display: block; padding: 12px 16px; color: var(--ink); font-weight: 600; font-size: 14.5px; border-radius: var(--radius-sm); transition: color .15s, background .15s; }
.nav-bar a:hover { color: var(--brand); background: var(--brand-light); text-decoration: none; }

/* Category dropdown — collapse the long category list into one overlay menu */
.nav-bar .nav-dropdown { position: relative; }
.nav-bar .nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  border-radius: var(--radius-sm); transition: color .15s, background .15s;
}
.nav-bar .nav-dropdown-toggle:hover { color: var(--brand); background: var(--brand-light); }
.nav-caret {
  width: 0; height: 0; display: inline-block;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.nav-bar .nav-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 230px; max-height: 70vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.nav-bar .nav-dropdown-menu li { width: 100%; }
.nav-bar .nav-dropdown-menu a {
  display: block; padding: 8px 12px; white-space: nowrap;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-soft);
}
.nav-bar .nav-dropdown-menu a:hover { color: var(--brand); background: var(--brand-light); }
.nav-bar .nav-dropdown.is-open > .nav-dropdown-menu { display: block; }
@media (hover: hover) {
  .nav-bar .nav-dropdown:hover > .nav-dropdown-menu { display: block; }
}

/* ----------------------------------------------------------------- layout */
.main { padding: 28px 0 56px; }
.page-title { font-size: 26px; margin: 0 0 4px; font-weight: 700; }
.page-sub { color: var(--ink-soft); margin: 0 0 22px; font-size: 14px; }
.crumbs { font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; }
.crumbs a { color: var(--ink-soft); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card-tight { padding: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 17px; }

.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- products */
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-thumb { aspect-ratio: 1; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb .ph { color: var(--ink-mute); font-size: 32px; }
.product-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-name {
  font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.4;
  /* reserve a uniform two-line height so prices line up and short names don't
     leave a big gap below them */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.product-name a { color: inherit; }
.product-cat { font-size: 12px; color: var(--ink-mute); }
.price-row { display: flex; align-items: baseline; gap: 8px; }
.price { font-weight: 700; font-size: 17px; color: var(--brand-dark); }
.price-old { text-decoration: line-through; color: var(--ink-mute); font-size: 13px; }

/* Add-to-cart directly on the product card. margin-top:auto pins the CTA to
   the bottom so buttons line up across cards of differing content height. */
.add-cart-form { margin-top: auto; padding-top: 10px; }
.product-body > .btn-add-cart { margin-top: auto; }
.btn-add-cart {
  width: 100%; padding: 9px 14px; font-size: 13.5px; gap: 8px;
  position: relative;
}
.btn-add-cart .add-cart-ico { width: 17px; height: 17px; flex: none; }
.btn-add-cart.is-loading { color: transparent; pointer-events: none; }
.btn-add-cart.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn-add-cart.is-done { background: var(--success); }
.btn-add-cart.is-disabled,
.btn-add-cart:disabled {
  background: #f1f5f9; color: var(--ink-mute); cursor: not-allowed; border-color: var(--line);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Header cart badge pop when it changes */
.cart-badge.bump { animation: cart-bump .3s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Toast notifications */
.toast-wrap {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  z-index: 1200; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
  max-width: 100%;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--brand-dark); }
.toast-error { background: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .25s ease; transform: none; }
  .btn-add-cart.is-loading::after { animation: none; }
  .cart-badge.bump { animation: none; }
}

.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.badge-sale { background: #fee2e2; color: var(--danger); }
.badge-new { background: var(--brand-light); color: var(--brand-dark); }
.badge-out { background: #f1f5f9; color: var(--ink-mute); }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-danger { background: #fee2e2; color: var(--danger); }
.badge-info { background: #dbeafe; color: #1d4ed8; }
.badge-muted { background: #f1f5f9; color: var(--ink-soft); }

/* Selectable option cards (delivery area / payment method on checkout) */
.opt-group { display: flex; flex-direction: column; gap: 10px; }
.opt-card {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.opt-card:hover { border-color: var(--brand); }
.opt-card input[type="radio"] { width: 18px; height: 18px; flex: none; accent-color: var(--brand); margin: 0; }
.opt-card:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--brand-light); }
.opt-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.opt-title { font-weight: 600; color: var(--ink); }
.opt-sub { font-size: 12px; color: var(--ink-mute); }
.opt-price { font-weight: 700; font-size: 16px; color: var(--brand-dark); flex: none; }
.bkash-info {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: #fdf2f8; border: 1px solid #fbcfe8; color: var(--ink);
}
.bkash-info p { margin: 0; }

/* -------------------------------------------------------------------- ui */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
  background: var(--brand); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 16px; }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-light); color: var(--brand-dark); }
.btn-ghost { background: #fff; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: #f1f5f9; color: var(--ink); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: var(--warning); }
.btn-warning:hover { background: #b45309; }
.btn-success { background: var(--success); }
.btn-success:hover { background: #15803d; }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

form .field { margin-bottom: 15px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], input[type=url], input[type=date], input[type=file],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea { resize: vertical; min-height: 90px; }
.help { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; }

/* form help text (also used by the password rules on sign-up) */
.help { font-size: 12px; color: var(--ink-mute); margin-top: 5px; line-height: 1.45; }
.help ul { margin: 4px 0 0; padding-left: 18px; }
.help li { margin: 1px 0; }

/* ------------------------------------------------------------------ auth */
.auth-wrap {
  max-width: 430px;
  margin: 44px auto;
  padding: 34px 32px;
  box-shadow: var(--shadow-md);
}
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-logo { display: inline-flex; margin-bottom: 14px; }
.auth-logo img { width: 44px; height: 44px; }
.auth-wrap .page-title { font-size: 23px; margin-bottom: 6px; }
.auth-wrap .auth-head .page-sub { margin-bottom: 0; }
.auth-wrap .btn-block { margin-top: 8px; }
.auth-alt {
  text-align: center; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft);
}
.auth-switch { margin-top: 18px; text-align: center; }
.auth-switch-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
@media (max-width: 520px) { .auth-wrap { margin: 22px auto; padding: 24px 18px; } }

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
table.data tbody tr:hover { background: #f8fafc; }
table.data tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-mute); font-weight: 700; }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; color: var(--ink); }
.stat-hint { font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.stat.is-brand .stat-value { color: var(--brand-dark); }
.stat.is-accent .stat-value { color: var(--warning); }
.stat.is-danger .stat-value { color: var(--danger); }
.stat.is-success .stat-value { color: var(--success); }

/* ----------------------------------------------------------------- alerts */
.messages { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-debug { background: #f8fafc; border-color: var(--line); color: var(--ink-soft); }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-mute); }
.empty-icon { font-size: 44px; margin-bottom: 10px; }
.empty h3 { color: var(--ink-soft); margin: 0 0 6px; font-size: 17px; }

/* ------------------------------------------------------------------ steps */
.steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-mute); }
.step-num { width: 24px; height: 24px; border-radius: 999px; background: #f1f5f9; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.step.is-active { color: var(--brand-dark); font-weight: 600; }
.step.is-active .step-num { background: var(--brand); color: #fff; }
.step.is-done .step-num { background: var(--success); color: #fff; }

/* -------------------------------------------------------------- timeline */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--brand); border: 2px solid #fff; }
.timeline-when { font-size: 12px; color: var(--ink-mute); }
.timeline-what { font-weight: 600; font-size: 14px; }
.timeline-note { font-size: 13px; color: var(--ink-soft); }

/* --------------------------------------------------------------- summary */
.summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 17px; }
.summary-row .label { color: var(--ink-soft); }
.summary-row .value { font-variant-numeric: tabular-nums; }
.summary-row.is-refund { color: var(--danger); }
.summary-row.is-net { font-weight: 700; }

.overall { display: inline-block; font-size: 12px; color: var(--ink-soft); padding: 2px 8px; border-radius: 999px; background: #f1f5f9; }

/* --------------------------------------------------------------- dashboard */
.dash { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; } }
.dash-side { background: #0f172a; color: #cbd5e1; padding: 20px 0; }
.dash-brand { padding: 0 20px 18px; font-size: 17px; font-weight: 700; color: #fff; border-bottom: 1px solid #1e293b; }
.dash-brand span { color: var(--accent); }
.dash-side nav { padding: 12px 0; }
.dash-side .nav-group { padding: 14px 20px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #64748b; font-weight: 700; }
.dash-side a { display: flex; align-items: center; gap: 9px; padding: 9px 20px; color: #cbd5e1; font-size: 14px; }
.dash-side a:hover { background: #1e293b; color: #fff; text-decoration: none; }
.dash-side a.is-active { background: var(--brand-dark); color: #fff; font-weight: 600; border-left: 3px solid var(--accent); padding-left: 17px; }
.dash-side .count { margin-left: auto; background: #1e293b; border-radius: 999px; padding: 1px 7px; font-size: 11px; }

.dash-main { background: var(--bg); padding: 24px 28px 56px; min-width: 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-head h1 { font-size: 22px; margin: 0; }
.dash-head .who { font-size: 13px; color: var(--ink-soft); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin: 0; }
.filters select, .filters input { min-width: 150px; }

/* Compact single-row filter toolbar (dashboard list pages). */
.toolbar { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.toolbar > * { flex: 0 0 auto; margin: 0; }
.toolbar select {
  width: auto; min-width: 0; max-width: 150px; padding: 7px 9px; font-size: 13px;
}
.toolbar input.toolbar-search {
  flex: 1 1 auto; width: auto; min-width: 90px; padding: 7px 10px; font-size: 13px;
}
.toolbar .btn { padding: 7px 12px; white-space: nowrap; }
@media (max-width: 900px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar input.toolbar-search { flex: 1 1 100%; }
  .toolbar select { flex: 1 1 140px; max-width: none; }
}

.pager { display: flex; gap: 6px; justify-content: center; margin-top: 22px; align-items: center; }
.pager a, .pager span { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; background: #fff; }
.pager .current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #0f172a; color: #94a3b8; padding: 40px 0 24px; margin-top: 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.site-footer h4 { color: #fff; font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: #94a3b8; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1e293b; margin-top: 28px; padding-top: 18px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ misc */
.muted { color: var(--ink-mute); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.right { text-align: right; }
.center { text-align: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 14px; }
.dl dt { color: var(--ink-soft); font-weight: 600; }
.dl dd { margin: 0; }
.qty-form { display: flex; align-items: center; gap: 8px; }
.qty-form input { width: 72px; text-align: center; }
.thumb-sm { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: #f1f5f9; }

@media print {
  .site-header, .site-footer, .dash-side, .btn-row, .no-print { display: none !important; }
  .dash { grid-template-columns: 1fr; }
  body { background: #fff; }
}

/* ================================================================ */
/* Responsive + template-class fixes (appended)                     */
/* ================================================================ */

/* --- Utility classes referenced by templates --- */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* --- Table styling (templates use .table / .table-plain) --- */
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table th, table.table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.table th {
  background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-soft); font-weight: 700;
}
table.table tbody tr:hover { background: #f8fafc; }
table.table tbody tr:last-child td { border-bottom: none; }
table.table-plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table-plain td, table.table-plain th { padding: 6px 0; border: none; text-align: left; }

/* --- Hero (home) --- */
.hero { background: linear-gradient(120deg, #0f766e, #115e59); color: #fff; border: none; padding: 38px 28px; }
.hero h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.2; }
.hero p  { margin: 0 0 18px; opacity: .92; max-width: 640px; }

/* --- Mobile nav toggle (hidden on desktop) --- */
.nav-toggle { display: none; }
.nav-toggle-icon { width: 18px; height: 2px; background: currentColor; position: relative; display: inline-block; flex: none; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after  { top: 6px; }

/* --- Dashboard mobile top bar (hidden on desktop) --- */
.dash-topbar { display: none; }

/* ---------------- <= 1024px ---------------- */
@media (max-width: 1024px) {
  :root { --wrap: 100%; }
}

/* ---------------- <= 768px : tablets & phones ---------------- */
@media (max-width: 768px) {
  .header-main .wrap { gap: 12px 16px; }
  .logo { gap: 9px; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-name { font-size: 18px; }
  .logo-sub { font-size: 9px; letter-spacing: 3px; }
  .search-form { order: 3; flex: 1 1 100%; max-width: none; }
  .header-actions { order: 2; gap: 14px; }

  /* Collapse the category nav behind a Menu toggle */
  .nav-bar .wrap { padding: 0; }
  .nav-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 16px; background: #fff; border: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  }
  .nav-bar .nav-menu { display: none; flex-direction: column; gap: 0; padding: 0 0 6px; }
  .nav-bar .nav-menu.is-open { display: flex; }
  .nav-bar .nav-menu li { width: 100%; }
  .nav-bar .nav-menu a { display: block; padding: 11px 16px; border-radius: 0; }
  .nav-bar .nav-menu a:hover { border-radius: 0; }

  /* Category dropdown becomes an inline accordion inside the mobile menu */
  .nav-bar .nav-dropdown { width: 100%; }
  .nav-bar .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 11px 16px; border-radius: 0; }
  .nav-bar .nav-dropdown-menu {
    position: static; max-height: none; overflow: visible;
    min-width: 0; border: none; border-radius: 0; box-shadow: none; padding: 0;
  }
  .nav-bar .nav-dropdown-menu a { padding: 10px 16px 10px 32px; }
  .nav-bar .nav-dropdown:hover > .nav-dropdown-menu { display: none; }
  .nav-bar .nav-dropdown.is-open > .nav-dropdown-menu { display: block; }

  .main { padding: 20px 0 40px; }
  .page-title { font-size: 21px; }

  .hero { padding: 26px 18px; }
  .hero h1 { font-size: 24px; }
  .hero .btn-lg { padding: 11px 18px; font-size: 15px; }

  .split { grid-template-columns: 1fr; gap: 18px; }

  .dl { grid-template-columns: 1fr; gap: 0; }
  .dl dt { margin-top: 10px; }
  .dl dd { margin: 0; }

  .filters { gap: 8px; }
  .filters .field, .filters select, .filters input { min-width: 0; flex: 1 1 140px; }

  /* Dashboard: sidebar collapses behind a top bar */
  .dash { grid-template-columns: 1fr; }
  .dash-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #0f172a; color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 40;
  }
  .dash-topbar-title { font-weight: 700; font-size: 16px; }
  .dash-toggle {
    display: inline-flex; align-items: center; gap: 8px; background: transparent;
    border: 1px solid #334155; color: #fff; padding: 7px 12px; border-radius: 6px;
    font: inherit; font-size: 14px; cursor: pointer;
  }
  .dash-side { display: none; }
  .dash.nav-open .dash-side { display: block; }
  .dash-main { padding: 18px 16px 44px; }
  .dash-head h1 { font-size: 19px; }

  /* Wide tables scroll instead of overflowing the page */
  table.table:not(.table-plain) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------- <= 480px : small phones ---------------- */
@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 22px; }
  .page-title { font-size: 19px; }
  .hero h1 { font-size: 21px; }
  .product-name { font-size: 13px; }
  .header-top { font-size: 12px; }
  .header-top .wrap { justify-content: center; text-align: center; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* ================================================================ */
/* Hero image slider (supports any number of slides)                */
/* ================================================================ */
/* Images are shown exactly as uploaded — no wash, no text, no buttons.
   A fixed 3:1 banner ratio means a correctly-sized image fills it without
   cropping (see the recommended size in the dashboard). */
.hero-slider {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 1;
  background: linear-gradient(120deg, #0f766e, #115e59); /* fallback when no images */
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Prev / next arrows */
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); color: #115e59; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .15s;
}
.hero-nav:hover { background: #fff; }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }

/* Dot indicators */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; gap: 8px; justify-content: center; }
.hero-dots button {
  width: 10px; height: 10px; padding: 0; border: none; cursor: pointer; border-radius: 999px;
  background: rgba(255,255,255,.5); transition: background .15s, width .15s;
}
.hero-dots button.is-active { background: #fff; width: 26px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

@media (max-width: 768px) {
  .hero-nav { width: 36px; height: 36px; font-size: 22px; }
}
@media (max-width: 480px) {
  .hero-nav { display: none; } /* rely on swipe + dots on small phones */
}

/* ================================================================ */
/* Category showcase cards                                          */
/* ================================================================ */
/* Category slider — a single horizontal row of image tiles that auto-
   advances and can be scrolled manually (arrows, swipe or drag). */
.cat-slider {
  position: relative;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox: hide scrollbar */
  padding-bottom: 4px;
}
.cat-slider::-webkit-scrollbar { display: none; }   /* WebKit: hide scrollbar */
.cat-track { display: flex; gap: 16px; }
.cat-track > .cat-card-img { flex: 0 0 auto; width: 200px; scroll-snap-align: start; }

/* prev / next navigation buttons */
.cat-slider-nav { display: inline-flex; align-items: center; gap: 8px; }
.cat-nav-btn {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--brand-dark);
  border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.cat-nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat-nav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.cat-card-img {
  display: block;
  border-radius: 14px;
  border: 1.5px solid #eaeaea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  overflow: hidden;
  text-decoration: none;
  color: #333;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card-img:hover {
  border-color: #25d366;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(18, 140, 126, .18);
  text-decoration: none;
}

/* square image / icon area */
.cat-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8f8f0, #d4f1e6);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* photo tiles get a clean white fill behind the (uncropped) image */
.cat-img-wrap:has(.cat-img-photo) { background: #fff; }
.cat-img-photo {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  transition: transform .3s ease;
}
.cat-card-img:hover .cat-img-photo { transform: scale(1.04); }
.cat-img-icon { display: grid; place-items: center; color: #128c7e; }
.cat-img-icon svg { width: 34px; height: 34px; display: block; }

.cat-img-info {
  display: flex; flex-direction: column; justify-content: center;
  padding: .5rem .4rem .55rem; text-align: center;
}
.cat-img-name {
  display: block; font-size: .8rem; font-weight: 600; line-height: 1.3; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-img-count { display: block; font-size: .7rem; line-height: 1.35; color: #888; font-weight: 400; }

@media (max-width: 767px) { .cat-track > .cat-card-img { width: 170px; } }
@media (max-width: 575px) {
  .cat-track { gap: 12px; }
  .cat-track > .cat-card-img { width: 150px; }
  /* each card becomes a tidy square: image fills, compact name strip below */
  .cat-card-img { display: flex; flex-direction: column; aspect-ratio: 1 / 1; }
  .cat-img-wrap { flex: 1 1 0; width: 100%; aspect-ratio: unset; min-height: 0; }
  .cat-img-info { flex-shrink: 0; padding: .25rem .3rem .3rem; }
  .cat-img-name { font-size: .72rem; }
  .cat-img-count { display: none; }
}

/* ================================================================ */
/* Home: per-category product rows (categories one after another)   */
/* ================================================================ */
/* Each category gets its own section: a centered title, a horizontal
   row of that category's product cards (swipe / drag / arrows), and a
   "view all" link — stacked one category after another down the page. */
.cat-row { margin-top: 6px; }
.cat-row-title {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-align: center; font-size: 22px; font-weight: 700;
  color: var(--brand-dark); margin: 0 0 18px;
}
.cat-row-title::before,
.cat-row-title::after {
  content: ""; height: 2px; width: 46px; flex: none;
  background: var(--brand); border-radius: 2px; opacity: .5;
}
.cat-row-title a { color: inherit; }
.cat-row-title a:hover { color: var(--brand); text-decoration: none; }

.prod-slider {
  position: relative;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox: hide scrollbar */
  padding-bottom: 4px;
}
.prod-slider::-webkit-scrollbar { display: none; }  /* WebKit: hide scrollbar */
.prod-track { display: flex; gap: 18px; }
.prod-track > .product-card { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }

.prod-row-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 14px;
}
.prod-row-nav .btn-sm { margin-left: 4px; }

@media (max-width: 767px) {
  .cat-row-title { font-size: 19px; }
  .prod-track > .product-card { width: 190px; }
}
@media (max-width: 575px) {
  .cat-row-title { gap: 10px; }
  .cat-row-title::before, .cat-row-title::after { width: 26px; }
  .prod-track { gap: 12px; }
  .prod-track > .product-card { width: 160px; }
}

/* ================================================================ */
/* Scroll reveal — sections & cards fade up as they enter the view  */
/* ================================================================ */
/* The .reveal class is added by JS (main.js), never in the HTML, so if
   JavaScript doesn't run nothing is hidden and all content still shows.
   Motion is disabled for visitors who prefer reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1),
              transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* ================================================================ */
/* Dashboard: category reorder list (drag / arrow sortable)         */
/* ================================================================ */
.reorder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reorder-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s;
}
.reorder-item.dragging { opacity: .55; border-color: var(--brand); box-shadow: var(--shadow-md); }
.reorder-handle { cursor: grab; color: var(--ink-mute); font-size: 18px; line-height: 1; user-select: none; }
.reorder-handle:active { cursor: grabbing; }
.reorder-pos {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand-dark); font-weight: 700; font-size: 13px; border-radius: 999px;
}
.reorder-name { flex: 1; font-weight: 600; }
.reorder-count { flex: none; }
.reorder-actions { flex: none; display: flex; gap: 4px; }

/* ================================================================ */
/* Shop category / brand filter sidebar                             */
/* ================================================================ */
.filter-card { padding: 16px; }
.filter-title {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-soft);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.cat-filter { list-style: none; margin: 0; padding: 0; }
.cat-filter > li { margin: 0; }
.cat-filter a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; border-left: 3px solid transparent;
  color: var(--ink-soft); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cat-filter a:hover { background: #f1f5f9; color: var(--brand-dark); text-decoration: none; }
.cat-filter a.is-active {
  background: var(--brand-light); color: var(--brand-dark);
  font-weight: 700; border-left-color: var(--brand);
}
.cat-filter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-filter-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--ink-mute);
  background: #eef2f6; border-radius: 999px; padding: 1px 8px; min-width: 24px; text-align: center;
}
.cat-filter a:hover .cat-filter-count { background: #e2e8f0; }
.cat-filter a.is-active .cat-filter-count { background: #fff; color: var(--brand-dark); }
.cat-filter-sub {
  list-style: none; margin: 2px 0 6px 13px; padding-left: 10px;
  border-left: 1px solid var(--line);
}
.cat-filter-sub a { font-size: 13px; padding: 6px 10px; }

/* ================================================================ */
/* Collapsible dashboard sidebar groups                             */
/* ================================================================ */
.dash-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 14px 20px 6px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: #64748b; text-align: left;
  transition: color .15s ease;
}
.dash-group:hover { color: #cbd5e1; }
.dash-caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transition: transform .18s ease; margin-right: 2px;
}
.dash-group-block.is-collapsed .dash-caret { transform: rotate(0deg); }
.dash-group-block.is-collapsed .dash-group-items { display: none; }

/* Fix: template uses the `active` class on sidebar links */
.dash-side a.active {
  background: var(--brand-dark); color: #fff; font-weight: 600;
  border-left: 3px solid var(--accent); padding-left: 17px;
}

/* ================================================================ */
/* Dashboard sidebar brand (logo mark)                              */
/* ================================================================ */
.dash-brand a { display: flex; align-items: center; gap: 10px; padding: 0; }
.dash-brand a:hover { background: none; }
.dash-brand-mark { flex: none; display: block; border-radius: 9px; }
.dash-brand .dash-brand-text { color: #fff; font-size: 16px; font-weight: 700; }
.dash-brand .dash-brand-text small { color: var(--accent); font-weight: 700; margin-left: 2px; }