:root {
  --ink: #0f172a;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --green: #16a34a;
  --red: #dc2626;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .05);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', 'Hind Siliguri', sans-serif; font-size: 15px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.good { color: var(--green); }
.bad { color: var(--red); }
.empty { color: var(--muted); padding: 30px 0; }

/* ---------- header ---------- */
.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 20px; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: #fff; white-space: nowrap; }
.brand span { color: var(--accent); }
.brand em { font-style: normal; font-size: 13px; vertical-align: super; color: #94a3b8; margin-left: 2px; }
.search { flex: 1; display: flex; max-width: 520px; }
.search input {
  flex: 1; border: 0; border-radius: 8px 0 0 8px; padding: 10px 14px; font-size: 14px;
  font-family: inherit; outline: none;
}
.search button {
  border: 0; background: var(--accent); color: #fff; padding: 0 16px;
  border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center;
}
.search button:hover { background: var(--accent-dark); }
.main-nav { display: flex; gap: 22px; align-items: center; margin-left: auto; font-weight: 500; font-size: 14px; }
.main-nav a { color: #cbd5e1; display: flex; align-items: center; gap: 6px; }
.main-nav a:hover { color: #fff; }
.cart-link { position: relative; }
.badge {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}

/* ---------- hero ---------- */
.hero { background: linear-gradient(120deg, var(--ink) 0%, #134e4a 100%); color: #fff; }
.hero-inner { padding: 72px 20px; }
.hero-kicker { color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin: 0 0 10px; }
.hero h1 { color: #fff; font-size: 44px; font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; }
.hero-sub { color: #cbd5e1; font-size: 17px; margin: 0 0 28px; max-width: 480px; }

/* ---------- sections ---------- */
.section { padding: 40px 20px; }
.section-title { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; }
.see-all { color: var(--primary); font-weight: 600; font-size: 14px; }
.narrow { max-width: 900px; }
.page-title { font-size: 28px; margin: 0 0 24px; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 500; transition: all .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip small { color: var(--muted); margin-left: 4px; }

.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.perk {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.perk span { color: var(--muted); font-size: 13px; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-img { position: relative; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 12px 14px 14px; }
.card h3 {
  font-size: 14px; font-weight: 500; margin: 0 0 8px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px;
}
.card-price { font-size: 17px; font-weight: 700; color: var(--primary); }

.stock-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px;
}
.stock-badge.in { background: #dcfce7; color: var(--green); }
.stock-badge.out { background: #fee2e2; color: var(--red); }
.card-img .stock-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--primary); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 10px 22px; border-radius: 8px; border: 1px solid transparent;
  transition: background .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.btn-accent { background: var(--accent); }
.btn.btn-accent:hover { background: var(--accent-dark); }
.btn-lg { padding: 13px 30px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
input, select, textarea {
  font-family: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.alert { background: #fee2e2; color: #991b1b; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.alert.success { background: #dcfce7; color: #166534; }
.alert.info { background: #e0f2fe; color: #075985; }

/* ---------- shop page ---------- */
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.shop-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.shop-side h3 { margin: 0 0 10px; font-size: 15px; }
.side-cat { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; }
.side-cat:hover { background: var(--bg); }
.side-cat.on { background: var(--primary); color: #fff; }
.side-cat.on small { color: #d1fae5; }
.side-cat small { color: var(--muted); }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 30px; font-size: 14px; }
.pagination a { color: var(--primary); font-weight: 600; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pagination a:hover { border-color: var(--primary); }

/* ---------- product page ---------- */
.product-page { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 40px; align-items: start; }
.gallery-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 4px; }
.gallery-thumbs img:hover, .gallery-thumbs img.on { border-color: var(--primary); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--primary); }
.product-info h1 { font-size: 26px; margin: 0 0 14px; }
.price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.price { font-size: 30px; font-weight: 800; color: var(--primary); }
.buy-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.qty-box { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.qty-box button { border: 0; background: var(--bg); width: 38px; font-size: 17px; cursor: pointer; }
.qty-box input { width: 56px; text-align: center; border: 0; border-radius: 0; }
.qty-box.small input { width: 60px; }
.delivery-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 18px; }
.short-desc { font-size: 14.5px; }
.short-desc ul { padding-left: 18px; }
.long-desc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; font-size: 14.5px; overflow-wrap: break-word; }
.long-desc img { border-radius: 8px; }
.long-desc h1, .long-desc h2, .long-desc h3 { font-size: 18px; }
.long-desc table { border-collapse: collapse; width: 100%; }
.long-desc td, .long-desc th { border: 1px solid var(--line); padding: 8px 10px; }

/* ---------- cart / checkout ---------- */
.cart-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.cart-row {
  display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
}
.cart-row img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; }
.cart-row-info { display: flex; flex-direction: column; gap: 3px; }
.cart-row-info a { font-weight: 600; font-size: 14px; }
.cart-line { font-weight: 700; min-width: 80px; text-align: right; }
.icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 6px; }
.icon-btn:hover { color: var(--red); }
.cart-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; max-width: 380px; margin-left: auto; }
.cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.cart-summary .btn { width: 100%; text-align: center; }

.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.checkout-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.checkout-form h3 { margin: 0; }
.pay-method { background: var(--bg); border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.order-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: sticky; top: 80px; }
.order-summary h3 { margin: 0 0 14px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sum-row.total { font-weight: 800; font-size: 15px; border-bottom: 0; color: var(--ink); }

/* ---------- order confirm / track ---------- */
.order-confirm { text-align: center; padding: 30px 0 10px; }
.order-confirm .check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.order-no { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: 1px; margin: 8px 0 12px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 18px 0; }
.panel h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.track-form { display: flex; gap: 10px; margin-bottom: 24px; }
.track-form input { flex: 1; }

.status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.s-pending { background: #fef3c7; color: #92400e; }
.s-confirmed { background: #dbeafe; color: #1d4ed8; }
.s-shipped { background: #e0e7ff; color: #4338ca; }
.s-delivered { background: #dcfce7; color: #166534; }
.s-cancelled { background: #fee2e2; color: #991b1b; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #94a3b8; margin-top: 50px; font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 30px; padding: 44px 20px 24px; }
.site-footer h4 { color: #fff; margin: 0 0 10px; font-size: 14px; }
.site-footer a { display: block; padding: 3px 0; color: #94a3b8; }
.site-footer a:hover { color: #fff; }
.brand-footer { font-size: 20px; margin-bottom: 8px; display: inline-block; }
.copyright { border-top: 1px solid #1e293b; padding: 16px 20px; font-size: 12.5px; }

/* ---------- admin ---------- */
.admin { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-side { background: var(--ink); padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.admin-side .brand { display: block; margin-bottom: 26px; padding: 0 10px; }
.admin-side nav { display: flex; flex-direction: column; gap: 4px; }
.admin-side nav a { color: #cbd5e1; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.admin-side nav a:hover { background: #1e293b; color: #fff; }
.admin-side nav a.on { background: var(--primary); color: #fff; }
.admin-main { padding: 28px 32px; min-width: 0; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: 24px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat span { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.stat strong { font-size: 22px; color: var(--ink); }
.stat.good strong { color: var(--green); }
.stat.warn strong { color: var(--accent-dark); }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; }
.table th { text-align: left; background: var(--bg); padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
/* :not(.btn) — a bare .btn is (0,1,0) and loses to .table a (0,1,1), which
   repainted button labels teal-on-teal and made them vanish. Buttons keep the
   colour their own variant sets; only real links get the link colour. */
.table a:not(.btn) { color: var(--primary); font-weight: 600; }
.table .thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.table .name-cell { max-width: 340px; }
.table tr.dim { opacity: .45; }
.price-form { display: flex; gap: 6px; align-items: center; }
.price-form input { width: 90px; padding: 6px 8px; }
.tag { display: inline-block; background: #fef3c7; color: #92400e; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.two-col { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.settings-form { max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.settings-form small { font-weight: 400; }

.admin-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--ink); }
.admin-login-box { background: var(--card); border-radius: 16px; padding: 36px; width: 360px; display: flex; flex-direction: column; gap: 16px; }
.admin-login-box h1 { font-size: 26px; margin: 0; font-weight: 800; }
.admin-login-box h1 span { color: var(--accent); }
.admin-login-box h1 em { font-style: normal; font-size: 13px; vertical-align: super; color: var(--muted); }
.admin-login-box p { margin: -10px 0 6px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; max-width: none; width: 100%; }
  .hero h1 { font-size: 32px; }
  .shop-layout, .product-page, .checkout-layout, .two-col { grid-template-columns: 1fr; }
  /* Collapsed by default on phones: products must be the first thing on screen.
     The toggle reveals it; on desktop the button is hidden and this never applies. */
  .shop-side { position: static; max-height: none; display: none; }
  .shop-side.open { display: block; margin-bottom: 4px; }
  /* .shop-filter-toggle is revealed at the end of this file — its base rule is
     declared later, so showing it here would be overridden by the cascade. */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .admin-side nav { flex-direction: row; flex-wrap: wrap; }
  /* superseded by the cart-layout block further down; kept from the older markup */
  .cart-line { text-align: left; }
}

/* ============ ecommerce feature styles ============ */
.promo-bar { background: var(--primary-dark); color: #d1fae5; text-align: center; font-size: 12.5px; padding: 6px 12px; }
.icon-nav { position: relative; }
.icon-nav .badge, .cart-link .badge { position: absolute; top: -6px; right: -10px; }

/* product card with wishlist */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-link { display: flex; flex-direction: column; height: 100%; }
.wish-btn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.wish-btn:hover { color: var(--red); }
.wish-btn.on { color: var(--red); border-color: var(--red); }
.deal-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.card-rating { margin: 2px 0 6px; }
.stars { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.stars span { color: #d1d5db; }
.stars span.on { color: #f59e0b; }
.rating-count { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* newsletter */
.newsletter { background: #ecfdf5; border-top: 1px solid #d1fae5; margin-top: 50px; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 20px; flex-wrap: wrap; }
.newsletter h3 { margin: 0 0 4px; }
.newsletter p { margin: 0; color: var(--muted); font-size: 14px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { min-width: 240px; }
.site-footer { margin-top: 0; }
.foot-contact { color: #cbd5e1; font-weight: 600; }

/* floating whatsapp */
.float-wa { position: fixed; bottom: 20px; right: 20px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); z-index: 40; }
.float-wa:hover { transform: scale(1.06); }

/* auth pages */
.auth-page { display: flex; justify-content: center; }
.auth-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; width: 100%; max-width: 420px; }
.auth-box form { display: flex; flex-direction: column; gap: 14px; }
.auth-box .btn { width: 100%; text-align: center; }
.auth-alt { text-align: center; margin: 14px 0 0; font-size: 14px; }
.auth-alt a { color: var(--primary); font-weight: 600; }

/* account */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.account-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; }
.account-user { padding: 8px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; display: flex; flex-direction: column; }
.account-side nav { display: flex; flex-direction: column; gap: 2px; }
.account-side nav a { padding: 9px 10px; border-radius: 7px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.account-side nav a:hover { background: var(--bg); }
.account-side nav a.on { background: var(--primary); color: #fff; }
.pill { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.account-side nav a.on .pill { background: rgba(255,255,255,.25); color: #fff; }

/* order cards */
.order-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.order-card-no { font-weight: 700; color: var(--primary); margin-right: 10px; }
.order-card-items { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.order-card-items img { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.order-card-items .more { color: var(--muted); font-size: 13px; }
.order-card-foot { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.order-card-foot .btn { margin-left: auto; }
.order-actions { display: flex; gap: 12px; }

/* product page additions */
.product-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.share-row { display: flex; gap: 14px; align-items: center; margin: 16px 0; font-size: 14px; }
.share-row a { color: var(--primary); font-weight: 600; }
.wish-btn-lg { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.wish-btn-lg.on { color: var(--red); border-color: var(--red); }

/* reviews */
.reviews-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.review { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.review-form { display: flex; flex-direction: column; gap: 12px; }
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 26px; }
.star-picker input { display: none; }
.star-picker label { color: #d1d5db; cursor: pointer; padding: 0 2px; }
.star-picker input:checked ~ label,
.star-picker label:hover, .star-picker label:hover ~ label { color: #f59e0b; }

/* coupon + discount */
.coupon-box { display: flex; gap: 8px; margin: 10px 0; }
.coupon-box input { flex: 1; text-transform: uppercase; }
.sum-row.discount { color: var(--green); font-weight: 600; }
.sum-row.discount .rm { color: var(--muted); margin-left: 6px; text-decoration: none; }

/* shop filters */
.side-h { margin-top: 18px; }
.price-filter { display: flex; flex-direction: column; gap: 8px; }
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: 100%; padding: 7px 8px; }

/* info pages */
.info-page .prose p, .info-page .prose li { font-size: 15px; }
.info-page .prose ul { padding-left: 20px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--text); }

/* admin extras */
.coupon-admin-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.coupon-admin-form label { flex: 1; min-width: 130px; }
.coupon-admin-form .chk { flex-direction: row; align-items: center; gap: 8px; min-width: auto; }
.row-actions { display: flex; gap: 6px; }
.row-actions form { display: inline; }
.panel-head-row { display: flex; justify-content: space-between; align-items: center; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 90px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.bar { background: var(--bg); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); }
.bar-val { text-align: right; font-weight: 600; }

@media (max-width: 900px) {
  .account-layout, .reviews-layout { grid-template-columns: 1fr; }
  .account-side { position: static; }
  .newsletter-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-form input { min-width: 0; flex: 1; }
}

/* ============ homepage rich sections ============ */
/* hero carousel */
.hero-carousel { position: relative; overflow: hidden; }
.hero-track { display: flex; transition: transform .5s ease; }
.hero-slide { min-width: 100%; }
.hero-slide .hero-inner { padding: 76px 20px; }
.hero-copy { max-width: 560px; }
.s-teal { background: linear-gradient(120deg, var(--ink) 0%, #134e4a 100%); }
.s-amber { background: linear-gradient(120deg, #7c2d12 0%, #b45309 55%, #f59e0b 130%); }
.s-navy { background: linear-gradient(120deg, #0b1220 0%, #1e3a5f 100%); }
.hero-slide h1, .hero-slide h2 { color: #fff; font-size: 44px; font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; }
.hero-slide .hero-kicker { color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin: 0 0 10px; }
.s-amber .hero-kicker { color: #fde68a; }
.hero-slide .hero-sub { color: #cbd5e1; font-size: 17px; margin: 0 0 28px; }
.s-amber .hero-sub { color: #fff7ed; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #000; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.hero-arrow:hover { background: rgba(255,255,255,.32); }
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .2s; }
.hero-dots span.on { background: #fff; width: 24px; border-radius: 5px; }

/* category cards */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card-img { aspect-ratio: 1.3; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cat-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-card-body { padding: 10px 12px; border-top: 1px solid var(--line); }
.cat-card-body strong { display: block; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card-body span { font-size: 12px; color: var(--muted); }

/* promo banners */
.promo-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-banner { border-radius: var(--radius); padding: 26px 24px; color: #fff; min-height: 130px; display: flex; align-items: center; transition: transform .15s; overflow: hidden; position: relative; }
.promo-banner:hover { transform: translateY(-3px); }
.promo-banner h3 { color: #fff; font-size: 22px; margin: 4px 0 6px; }
.promo-banner p { margin: 0 0 8px; font-size: 13.5px; opacity: .9; }
.pb-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; opacity: .85; }
.pb-cta { font-weight: 700; font-size: 14px; }
.pb-deals { background: linear-gradient(120deg, #b45309, #f59e0b); }
.pb-new { background: linear-gradient(120deg, #0f766e, #14b8a6); }
.pb-cod { background: linear-gradient(120deg, #1e293b, #475569); }

/* perks band */

/* testimonials */
.t-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

@media (max-width: 900px) {
  .hero-slide h1, .hero-slide h2 { font-size: 30px; }
  .hero-slide .hero-inner { padding: 52px 20px; }
  .promo-banners { grid-template-columns: 1fr; }
  .cat-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ============ info pages ============ */
.info-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.info-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 80px; }
.info-side h3 { margin: 0 0 10px; font-size: 15px; }
.info-side nav { display: flex; flex-direction: column; gap: 2px; }
.info-side nav a { padding: 9px 10px; border-radius: 7px; font-size: 14px; }
.info-side nav a:hover { background: var(--bg); }
.info-side nav a.on { background: var(--primary); color: #fff; }
.info-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.info-help a { color: var(--primary); font-weight: 600; }
.info-main .page-title { margin-top: 0; }
.prose .lead { font-size: 17px; color: var(--ink); font-weight: 500; margin-bottom: 18px; }
.prose h3 { margin: 22px 0 8px; font-size: 17px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.about-stats div { background: var(--bg); border-radius: var(--radius); padding: 16px; text-align: center; }
.about-stats strong { display: block; font-size: 24px; color: var(--primary); }
.about-stats span { font-size: 12.5px; color: var(--muted); }
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { color: var(--primary); font-weight: 600; }

@media (max-width: 900px) {
  .info-layout { grid-template-columns: 1fr; }
  .info-side { position: static; }
  .info-side nav { flex-direction: row; flex-wrap: wrap; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============ white header with real logo ============ */
.site-header { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.brand-logo { height: 42px; width: auto; display: block; }
.site-header .search input { border: 1px solid var(--line); }
.main-nav a { color: var(--text); }
.main-nav a:hover { color: var(--primary); }
.main-nav .icon-nav, .main-nav .cart-link { color: var(--ink); }
.main-nav .icon-nav:hover, .main-nav .cart-link:hover { color: var(--primary); }
.header-inner .badge { background: var(--accent); color: #fff; }
@media (max-width: 900px) {
  .brand-logo { height: 34px; }
}

/* ============ customer account: avatars, address book ============ */
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.account-link { display: inline-flex; align-items: center; gap: 7px; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; overflow: hidden; margin: 0 auto 8px; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.account-user { text-align: center; }
.avatar-xl { width: 84px; height: 84px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; }
.account-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.avatar-edit { display: flex; align-items: center; gap: 18px; padding-bottom: 6px; }
.avatar-edit .avatar-lg { margin: 0; }
.file-label { font-weight: 600; font-size: 13.5px; }
.file-label input { display: block; margin-top: 6px; font-weight: 400; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chk { flex-direction: row; align-items: center; gap: 8px; }
.account-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.btn-danger { background: var(--red); }
.btn-danger:hover { background: #b91c1c; }
.btn.btn-danger-ghost { background: #fff; color: var(--red); border-color: #fecaca; }
.btn.btn-danger-ghost:hover { background: #fef2f2; }
.order-card-btns { margin-left: auto; display: flex; gap: 6px; }
.order-card-btns form { display: inline; }

.addr-form { display: none; margin-bottom: 20px; }
.addr-form.open { display: flex; }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.addr-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.addr-card.is-default { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.addr-default-tag { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.addr-label { display: inline-block; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.addr-card strong { display: block; }
.addr-card p { margin: 4px 0; font-size: 13.5px; }
.addr-actions { display: flex; gap: 6px; margin-top: 10px; }
.addr-actions form { display: inline; }

/* checkout saved-address picker */
.saved-addr-pick { margin-bottom: 18px; }
.saved-addr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.saved-addr { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-width: 160px; display: flex; flex-direction: column; gap: 2px; font-family: inherit; }
.saved-addr:hover { border-color: var(--primary); }
.saved-addr.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.saved-addr strong { font-size: 13.5px; }
.saved-addr span { font-size: 12px; color: var(--text); }

@media (max-width: 900px) { .form-2col { grid-template-columns: 1fr; } }

/* ============ line icons ============ */
.ic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.account-link { display: inline-flex; align-items: center; gap: 7px; }
.account-nav a { display: flex; align-items: center; gap: 11px; }
.account-nav a .ic { color: var(--muted); }
.account-nav a.on .ic { color: #fff; }
.account-nav a span:not(.pill) { flex: 1; }
.account-nav a .pill { flex: none; }

/* ============ order detail + status timeline ============ */
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.back-link { color: var(--primary); font-weight: 600; font-size: 13.5px; }
.status-badge.big { font-size: 13px; padding: 6px 14px; }
.order-placed-banner { display: flex; align-items: center; gap: 16px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; }
.order-placed-banner .check { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-placed-banner h1 { font-size: 22px; margin: 0 0 4px; }
.cancelled-note { border-color: #fecaca; background: #fef2f2; }

.timeline { list-style: none; margin: 6px 0 0; padding: 0; display: flex; }
.tl-step { flex: 1; position: relative; padding-top: 40px; text-align: center; }
.tl-step::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.tl-step:first-child::before { display: none; }
.tl-step.done::before, .tl-step.active::before { background: var(--primary); }
.tl-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; z-index: 1; }
.tl-step.done .tl-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl-step.active .tl-dot { background: #fff; border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(15,118,110,.15); }
.tl-body { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.tl-body strong { font-size: 13px; }
.tl-body .muted { font-size: 11.5px; }
.tl-step.todo .tl-body strong { color: var(--muted); }
.tl-hint { margin: 16px 0 0; font-size: 13px; }

.order-detail-cols { margin-top: 18px; grid-template-columns: 340px minmax(0, 1fr); }
@media (max-width: 900px) { .order-detail-cols { grid-template-columns: 1fr; } }
.order-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-item-row img { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.oi-info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.btn.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.btn-light:hover { background: var(--bg); }
.order-actions form { display: inline; }

@media (max-width: 640px) {
  .tl-body .muted { display: none; }
  .tl-body strong { font-size: 11px; }
  .order-head { flex-direction: column; }
}

/* ============ advance payment ============ */
.advance-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.advance-headline { margin: 0; font-size: 15px; }
.advance-box .muted { margin: 0; font-size: 13px; }
.pay-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-tab { flex: 1; min-width: 140px; border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; background: #fff; display: flex; flex-direction: column; gap: 1px; font-weight: 400; }
.pay-tab input { display: none; }
.pay-tab.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.pt-name { font-weight: 700; color: var(--ink); }
.pt-num { font-size: 17px; font-weight: 800; color: var(--primary); letter-spacing: .3px; }
.pt-type { font-size: 11px; color: var(--muted); }
.pay-inst { background: #fff; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--text); }
.sum-row.advance-row { color: #b45309; font-weight: 600; }
.sum-row.cod-row { color: var(--ink); }
.verified-tag { color: var(--green); font-size: 11px; font-weight: 700; }
.settings-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 5px 0; font-size: 14px; vertical-align: top; }
.kv td:first-child { color: var(--muted); width: 130px; }

/* ============ checkout redesign (payment on right) ============ */
.checkout-page { max-width: 1100px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.checkout-left, .checkout-right { min-width: 0; }
.checkout-left .panel { margin-bottom: 0; }
.checkout-right { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.checkout-right .panel { margin: 0; }
.step-h { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.addr-hint { font-size: 12.5px; margin: 8px 0 14px; }
.co-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 260px; overflow-y: auto; }
.co-item { display: flex; align-items: center; gap: 10px; }
.co-item img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0; }
.co-item-info { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 13px; min-width: 0; }
.co-item-info span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-coupon { display: flex; gap: 8px; margin: 4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.co-coupon input { flex: 1; text-transform: uppercase; }
.co-totals .sum-row { border: 0; padding: 5px 0; }
.co-totals .sum-row.small { font-size: 11.5px; padding: 0 0 4px; }
.co-totals .total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.co-totals .advance-row { color: #b45309; }
.co-totals .cod-row { color: var(--ink); font-weight: 700; }
.btn-block { width: 100%; text-align: center; }
.co-trust { text-align: center; font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.payment-panel .advance-box { margin-bottom: 0; }

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-right { position: static; }
}

/* admin record-payment form */
.pay-record-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pay-record-form label { flex: 1; min-width: 120px; }
.pay-record-form small { flex-basis: 100%; }

/* admin product editor */
.row-links { font-size: 12px; margin-top: 3px; }
.row-links a { color: var(--primary); font-weight: 600; }
.prod-edit .two-col { align-items: start; }
.prod-edit label { margin-bottom: 12px; }
.prod-edit textarea { font-family: inherit; }
.edit-images { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.edit-img { border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.edit-img img { width: 80px; height: 80px; object-fit: contain; background: #fff; display: block; margin-bottom: 6px; }
.edit-img .chk { font-size: 11px; gap: 4px; margin: 0; justify-content: center; }
.prod-edit-actions { display: flex; gap: 12px; margin-top: 20px; }

/* regular/sale price */
.old-price { color: var(--muted); text-decoration: line-through; font-size: 13px; font-weight: 500; margin-left: 4px; }
.old-price.big { font-size: 18px; }
.save-badge { background: #dcfce7; color: var(--green); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* ============ cart page (full-width, 2-column) ============ */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.cart-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 20px; }
/* 5 columns: pick · product · qty · total · remove. The select checkbox added a
   cell to every row, and a grid with fewer columns than cells wraps the overflow
   into new rows — which is what squeezed the product names into one word a line. */
.cart-list-head { display: grid; grid-template-columns: 26px 1fr 110px 110px 32px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.cart-list-head span:nth-child(3), .cart-list-head span:nth-child(4) { text-align: center; }
.cart-row { display: grid; grid-template-columns: 26px 1fr 110px 110px 32px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row:last-of-type { border-bottom: 0; }
.cart-row-prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cart-row-prod img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; flex-shrink: 0; }
.cart-row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-row-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.cart-row .qty-box { justify-self: center; }
.cart-row .cart-line { text-align: center; font-weight: 700; }
.cart-row .icon-btn { justify-self: center; }
.cart-continue { display: inline-block; margin-top: 16px; color: var(--primary); font-weight: 600; font-size: 14px; }
.cart-summary { position: sticky; top: 80px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.cart-summary h3 { margin: 0 0 14px; }
.cart-summary .sum-row { border: 0; padding: 7px 0; }
.cart-summary .total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 800; font-size: 16px; color: var(--ink); }
.cart-summary .btn-block { margin-top: 14px; }
.cart-empty { text-align: center; padding: 40px 0; }

@media (max-width: 820px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-list-head { display: none; }
  /* phones: checkbox pinned left, product beside it, qty and total underneath */
  .cart-row {
    grid-template-columns: 26px 1fr auto;
    grid-template-areas: "pick prod remove" ".    qty  total";
    gap: 10px 12px;
  }
  .cart-row .c-pick { grid-area: pick; align-self: start; padding-top: 4px; }
  .cart-row-prod { grid-area: prod; gap: 10px; }
  /* a 64px thumbnail left ~83px for the title, so long names ran to five lines */
  .cart-row-prod img { width: 52px; height: 52px; }
  .cart-row-name {
    font-size: 13.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;                      /* full name is on the product page */
  }
  .cart-row .qty-box { grid-area: qty; justify-self: start; }
  .cart-row .cart-line { grid-area: total; text-align: right; }
  .cart-row .icon-btn { grid-area: remove; justify-self: end; }
}

/* ============ track order page (full width) ============ */
.track-head { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.track-head .page-title { margin-bottom: 6px; }
.track-head .track-form { margin-top: 16px; }
.track-form { display: flex; gap: 10px; }
.track-form input { flex: 1; }
.track-results { width: 100%; }
.track-count { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.track-order { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 14px; transition: box-shadow .15s, border-color .15s; }
.track-order:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.track-order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.track-order-no { font-weight: 700; font-size: 16px; color: var(--ink); margin-right: 10px; }
.track-order-total { font-weight: 800; font-size: 17px; color: var(--primary); }
.track-order-meta { margin: 4px 0 10px; font-size: 13px; }
.track-order-items { border-top: 1px solid var(--line); padding-top: 8px; }
.track-order-view { display: inline-block; margin-top: 10px; color: var(--primary); font-weight: 600; font-size: 13.5px; }

/* order privacy note (non-owner view) */
.privacy-note { text-align: center; }
.privacy-note p:first-child { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 0; }
.privacy-note a { color: var(--primary); font-weight: 600; }

/* ================================================================
   THEME v6 — modern Teal & Charcoal (fresh, calm, professional)
   Teal primary on clean white with charcoal text. Amber stars only.
   ================================================================ */
:root {
  --bg: #f6f8f8;             /* soft cool white canvas */
  --ink: #14202b;            /* charcoal: text, headings, dark surfaces */
  --line: #e4eaea;
  --primary: #0d9488;        /* teal-600: buttons, links, active */
  --primary-dark: #0b7d73;
  --accent: #14b8a6;         /* bright teal: highlights */
  --accent-dark: #0d9488;
  --price: #ea580c;          /* warm orange: prices POP against the teal theme */
}

/* buttons: solid teal primary; slightly brighter teal CTA */
.btn { background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark); }
.btn-accent { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; box-shadow: 0 6px 16px rgba(13,148,136,.3); }
.btn-accent:hover { background: linear-gradient(135deg, #0b7d73, #0d9488); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0a141c; }

/* promo bar: brand teal */
.promo-bar { background: var(--primary); color: #fff; }

/* hero: calm teal → deep teal gradients, crisp white CTA */
.hero-slide h1, .hero-slide h2 { color: #fff; }
.s-teal { background: linear-gradient(120deg, #0b7d73 0%, #14b8a6 100%); }
.s-navy { background: linear-gradient(120deg, #14202b 0%, #0f766e 100%); }
.hero-slide .hero-kicker { color: #99f6e4; }
.hero-slide .hero-sub { color: #d1faf4; }
.hero-slide .btn { background: #fff; color: var(--primary-dark); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.hero-slide .btn:hover { background: #ecfdfa; color: var(--primary-dark); }
/* "Hot Deals" slide: warm coral pop against the teal family (eye-catching) */
.s-amber { background: linear-gradient(125deg, #0f766e 0%, #0d9488 40%, #f97316 130%); }
.s-amber h1, .s-amber .hero-sub { color: #fff; }
.s-amber .hero-kicker { color: #ffedd5; }
.s-amber .btn { background: #fff; color: #c2410c; }
.s-amber .btn:hover { background: #fff7ed; color: #c2410c; }

/* promo banners: teal, deep teal, charcoal */
.pb-deals { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.pb-new { background: linear-gradient(135deg, #0b7d73, #2dd4bf); }
.pb-cod { background: linear-gradient(135deg, #14202b, #334155); }

/* newsletter band: soft teal tint */
.newsletter { background: #effcfa; border-top: 1px solid #99f6e4; }

/* timeline + active states = teal */
.tl-step.done .tl-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl-step.active .tl-dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(13,148,136,.2); }
.tl-step.done::before, .tl-step.active::before { background: var(--primary); }
.side-cat.on { background: var(--primary); }
.side-cat.on small { color: #99f6e4; }
.account-side nav a.on, .info-side nav a.on { background: var(--primary); }
.account-side nav a.on .pill { background: rgba(255,255,255,.22); color: #fff; }

/* admin sidebar active + report bars = teal */
.admin-side nav a.on { background: var(--primary); color: #fff; }
.admin-side nav a.on .ic, .admin-nav a.on .ic { color: #fff; }
.bar-fill { background: var(--primary); }

/* step numbers, avatars in teal */
.step-n, .avatar-sm, .avatar-lg, .avatar-xl, .t-avatar { background: var(--primary); }

/* search button = teal; prices = deep teal; stars keep amber (universal) */
.search button { background: var(--primary); color: #fff; }
.search button:hover { background: var(--primary-dark); }
.card-price, .price { color: var(--price); font-weight: 800; }
.card-price { font-size: 18px; }
.stars span.on, .stars { color: #f59e0b; }
.btn-count { background: var(--accent); color: #fff; }
.pt-num { color: var(--primary); }
/* struck-through original price stays muted; savings badge warm */
.old-price { color: var(--muted); }
.save-badge { background: #fff7ed; color: #c2410c; }

/* real logo on dark areas (footer, admin sidebar) via white chip */
.logo-chip { display: inline-block; background: #fff; padding: 8px 14px; border-radius: 10px; }
.logo-chip img { height: 32px; width: auto; display: block; }
.admin-logo { margin-bottom: 26px; margin-left: 10px; }
.admin-logo img { height: 28px; }
.login-logo { height: 40px; width: auto; align-self: flex-start; }

/* ============ professional admin dashboard ============ */
.admin-nav a { display: flex; align-items: center; gap: 11px; }
.admin-nav .ic { color: #94a3b8; flex-shrink: 0; }
.admin-nav a:hover .ic { color: #fff; }
.admin-nav a.on .ic { color: #1a1200; }
.dash-sub { margin: 2px 0 0; font-size: 13px; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.btn-count { background: var(--accent); color: #1a1200; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }

.dash-stats .stat { flex-direction: row; align-items: center; gap: 14px; }
.dash-stats .stat > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-stats .stat strong { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-amber { background: #fef3c7; color: #b45309; }
.ic-green { background: #dcfce7; color: #15803d; }
.ic-blue  { background: #dbeafe; color: #1d4ed8; }
.ic-ink   { background: #e2e8f0; color: #0f172a; }
.ic-red   { background: #fee2e2; color: #b91c1c; }
.stat.attention { border-color: #fecaca; }

/* admin profile card in sidebar */
.admin-side { display: flex; flex-direction: column; }
.admin-nav { flex: 1; }
.admin-profile-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #1a1200; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; overflow: hidden; flex-shrink: 0; }
.admin-profile-av img { width: 100%; height: 100%; object-fit: cover; }

/* product meta (sku/brand/category) + tags */
.product-meta { list-style: none; padding: 0; margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.product-meta span { color: var(--ink); font-weight: 600; }
.product-meta a { color: var(--primary); }
.product-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; font-size: 13px; }
.tag-chip { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 3px 11px; border-radius: 999px; font-size: 12.5px; }
.tag-chip:hover { border-color: var(--primary); color: var(--primary); }

/* ============ product page — professional redesign ============ */
.top-crumbs { font-size: 13px; color: var(--muted); padding-top: 18px; }
.top-crumbs a { color: var(--muted); }
.top-crumbs a:hover { color: var(--primary); }
.top-crumbs span { color: var(--ink); }
.product-page { padding-top: 20px; }
.product-gallery { position: sticky; top: 84px; }
.gallery-main { position: relative; }
.gallery-off { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--price); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.gallery-thumbs img { transition: border-color .15s; }

.pi-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pi-brand { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); }
.product-info h1 { font-size: 27px; line-height: 1.25; margin: 0 0 10px; }
.pi-subrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pi-subrow .product-rating { margin: 0; }
.pi-sku { font-size: 13px; }

.price-block { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.price-block .price { font-size: 34px; font-weight: 800; color: var(--price); line-height: 1; }
.price-block .old-price.big { font-size: 19px; }

.short-desc { font-size: 14.5px; color: var(--text); margin-bottom: 22px; }
.short-desc ul { padding-left: 18px; margin: 0; }
.short-desc li { margin-bottom: 5px; }

.buy-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.buy-form .qty-box { border-radius: 10px; }
.buy-form .btn-lg { padding: 13px 28px; }
.oos-note { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-weight: 600; }

.trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.tb { display: flex; align-items: center; gap: 11px; }
.tb-ic { font-size: 22px; flex-shrink: 0; }
.tb strong { display: block; font-size: 13.5px; color: var(--ink); }
.tb small { color: var(--muted); font-size: 12px; }

.pi-footer { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.pi-footer .product-tags, .pi-footer .share-row { margin: 0; }

/* details + reviews section polish */
.long-desc { padding: 26px 30px; }
.long-desc img { height: auto; }

@media (max-width: 860px) {
  .product-gallery { position: static; }
  .trust-badges { grid-template-columns: 1fr; }
  .product-info h1 { font-size: 22px; }
  .price-block .price { font-size: 28px; }
}

/* ============ product card — aesthetic redesign ============ */
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,32,43,.10); border-color: #cdebe6; }
.card-img-wrap { position: relative; }
.card-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.badge-off { background: var(--price); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(234,88,12,.3); }
.badge-deal { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; }
.wish-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: color .15s, transform .15s; }
.wish-btn:hover { transform: scale(1.1); color: var(--red); }
.wish-btn.on { color: var(--red); }
.card-img { display: block; aspect-ratio: 1; background: #fbfdfd; display: flex; align-items: center; justify-content: center; padding: 14px; position: relative; }
.card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-oos { position: absolute; inset: 0; background: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .5px; z-index: 2; }

.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; border-top: 1px solid #f1f5f4; }
.card-title { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.card-title:hover { color: var(--primary); }
.card-rating { min-height: 16px; font-size: 12px; }
.card-rating .no-rating { color: #b6c2c0; font-size: 11.5px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.card-price { font-size: 18px; font-weight: 800; color: var(--price); display: flex; flex-direction: column; line-height: 1.1; }
.card-price .old-price { font-size: 12px; font-weight: 500; margin: 1px 0 0; }
.card-add button { width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.card-add button:hover { background: var(--primary-dark); transform: scale(1.06); }
.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

/* ============ dropshipping sync page ============ */
.sync-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; }
.sync-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sync-card h3 { margin: 4px 0 0; }
.sync-card p.muted { flex: 1; font-size: 13.5px; margin: 0 0 6px; }
.sync-card .btn { margin-top: 4px; }
.sync-card-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.sync-last { font-size: 12.5px; color: var(--green); margin: 0; font-weight: 600; }
.sync-last.err { color: var(--red); }
.sync-status { width: 100%; margin: 10px 0 0; font-size: 13px; }
.sync-info code { background: var(--bg); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* ============ admin products: filters + pagination ============ */
.prod-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.prod-filters input[type=search] { min-width: 180px; }
.prod-filters select { padding: 8px 10px; font-size: 13px; }
.pager-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.pager-info { font-size: 13.5px; color: var(--muted); }
.pager-per a { color: var(--muted); padding: 0 3px; }
.pager-per a.on { color: var(--primary); font-weight: 700; }
.pagination.numbered { display: flex; gap: 6px; margin: 0; }
.pagination.numbered .pg { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.pagination.numbered .pg:hover { border-color: var(--primary); color: var(--primary); }
.pagination.numbered .pg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination.numbered .pg.off { opacity: .4; pointer-events: none; }
.pagination.numbered .pg-dots { padding: 0 4px; color: var(--muted); align-self: center; }
@media (max-width: 700px) { .pager-bar { flex-direction: column; align-items: flex-start; } }

/* homepage "see all categories" button + all-categories page */
.cat-see-all { text-align: center; margin-top: 22px; }

/* header live-search suggestions */
form.search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14); overflow: hidden;
  max-height: 70vh; overflow-y: auto;
}
.ss-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none; color: var(--ink); }
.ss-item + .ss-item { border-top: 1px solid #f1f5f9; }
.ss-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; background: #f8fafc; }
.ss-name { flex: 1; font-size: .9rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ss-price { font-weight: 800; color: var(--price); white-space: nowrap; }
.ss-item:hover, .ss-item.on { background: #f0fdfa; }
.ss-all { display: block; padding: 10px 12px; text-align: center; font-weight: 700; font-size: .85rem;
  color: var(--primary); text-decoration: none; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.ss-all:hover, .ss-all.on { background: #ccfbf1; }

/* sync panel: re-fetch hint under the main button */
.sync-note { font-size: .8rem; margin-top: 10px; }
.sync-note a { color: var(--primary); text-decoration: underline; }

/* admin orders: status tabs, bulk bar, table tweaks */
.status-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.status-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.status-tabs a em { font-style: normal; opacity: .65; margin-left: 3px; }
.status-tabs a:hover { border-color: var(--primary); color: var(--primary); }
.status-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.status-tabs a.on em { opacity: .8; }

.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
  background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; }
.bulk-bar[hidden] { display: none; }          /* display:flex would otherwise beat [hidden] */
.bulk-bar .spacer { flex: 1; }

/* NOTE: .order-no is the big customer-facing confirmation style — admin uses .o-no */
.orders-table .o-no { font-weight: 700; font-size: 13.5px; letter-spacing: .2px; }
.orders-table .c-check { width: 34px; }
.orders-table .nowrap { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.orders-table .num { text-align: right; white-space: nowrap; }
.orders-table .c-act { width: 1%; white-space: nowrap; }
.orders-table .row-status { font-size: 12.5px; padding: 4px 6px; max-width: 120px; }
.orders-table td { vertical-align: middle; }
.btn-danger { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.prod-filters .f-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.prod-filters .f-date input { font-size: 13px; }
/* wide admin tables scroll inside themselves, never the whole page.
   min-width is per-table — a blanket value here forces narrow grid columns wide. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .orders-table { min-width: 900px; }
.table-wrap .items-table { min-width: 540px; }

/* ---- admin order detail ---------------------------------------------- */
/* own grid, not .two-col: that one is shared by 5 other pages, and its
   `300px 1fr` was dropping the 3rd panel into the narrow column */
.order-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.order-detail .panel { margin: 0 0 20px; }
.order-detail .order-main > .panel:last-child,
.order-detail .order-side > .panel:last-child { margin-bottom: 0; }
/* minmax(0,…) not 1fr: plain 1fr floors at min-content and the table pushes it
   wider than the viewport, scrolling the whole page sideways */
@media (max-width: 1000px) { .order-detail { grid-template-columns: minmax(0, 1fr); } }

.order-head { align-items: flex-start; }
.order-head h1 { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; }
.back-link { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--primary); }
.order-placed { font-size: 12.5px; margin: 4px 0 0; }

/* items table: product absorbs the slack, figures size to their content.
   width:100% + width:1% is the usual trick — auto layout otherwise hands the
   spare pixels to the numeric columns and squeezes the product name. */
.items-table .c-img { width: 56px; }
.items-table .item-name { width: 100%; min-width: 200px; line-height: 1.35; }
.items-table .item-name small { display: block; margin-top: 2px; font-size: 11.5px; }
.items-table .num { width: 1%; text-align: right; white-space: nowrap; }
.items-table .strong { font-weight: 700; }
.items-table th, .items-table td { padding: 8px 9px; }   /* 7 columns need the room */

.order-totals { max-width: 340px; margin-left: auto; margin-top: 16px; }

.cust-name { margin: 0 0 10px; font-size: 15px; }
.cust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.cust-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.cust-list li > span:first-child { flex: none; }
.cust-note { margin: 12px 0 0; padding: 9px 12px; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; font-size: 13px; color: #92400e; }

/* in a 340px column the payment fields read better stacked */
.pay-record-form.stacked { flex-direction: column; align-items: stretch; gap: 12px; }
.pay-record-form.stacked label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--muted); min-width: 0; }
.pay-record-form.stacked input, .pay-record-form.stacked select { width: 100%; }
.pay-record-form .opt { font-weight: 400; opacity: .7; }

/* ---- header category bar ------------------------------------------------ */
.cat-bar { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); }
.cat-bar-inner { display: flex; align-items: stretch; gap: 0; }

.cat-all {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 0 18px 0 0; margin-right: 18px;
  border-right: 1px solid rgba(255,255,255,.14);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.cat-all:hover { color: var(--accent); }
.cat-all .ic { flex: none; }

/* one row that scrolls sideways — wrapping would push the header taller on
   phones and shove the page content down */
.cat-scroll {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-scroll a {
  padding: 11px 13px; white-space: nowrap; text-decoration: none;
  color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.cat-scroll a:hover { color: #fff; background: rgba(255,255,255,.07); }
.cat-scroll a.on { color: #fff; border-bottom-color: var(--accent); }
.cat-scroll a:focus-visible, .cat-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 640px) {
  .cat-all { font-size: 12.5px; padding-right: 12px; margin-right: 12px; }
  .cat-scroll a { padding: 10px 11px; font-size: 12.5px; }
}
/* arrows: the row overflows on desktop too, and a bare scroll gives no hint */
.cat-track { position: relative; flex: 1; min-width: 0; display: flex; align-items: stretch; }
.cat-arrow {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 34px;
  border: 0; cursor: pointer; color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cat-arrow[hidden] { display: none; }
.cat-arrow.prev { left: 0;  background: linear-gradient(90deg, var(--ink) 55%, rgba(20,32,43,0)); }
.cat-arrow.next { right: 0; background: linear-gradient(270deg, var(--ink) 55%, rgba(20,32,43,0)); }
.cat-arrow:hover { color: var(--accent); }
.cat-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* inside the flex track the scroller must be allowed to shrink, or it sizes to
   its content and never scrolls */
.cat-track .cat-scroll { flex: 1; min-width: 0; }
.cat-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .cat-scroll { scroll-behavior: auto; } }

/* product detail tabs + specification table */
.detail-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 0; }
.dtab {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--muted);
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 22px; margin-bottom: -2px; cursor: pointer;
}
.dtab:hover { color: var(--ink); }
.dtab.on { color: var(--primary); border-bottom-color: var(--primary); }
.dtab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dpane { display: none; }
.dpane.on { display: block; }
.dpane .long-desc { border-radius: 0 0 var(--radius) var(--radius); }

.spec-table { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-top: 0; font-size: 14.5px; }
.spec-table th, .spec-table td { padding: 12px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { width: 240px; color: var(--muted); font-weight: 600; background: var(--bg); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .spec-table th { width: 40%; } .dtab { padding: 11px 14px; font-size: 14px; } }

/* footer social icons */
.social-row { display: flex; gap: 10px; margin-top: 14px; }
.social-row a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.10); color: #fff; transition: background .15s, color .15s;
}
.social-row a:hover { background: var(--accent); color: #14202b; }

/* admin settings tabs */
.settings-tabs { margin-bottom: 0; }
.settings-pane { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); margin-top: 0; }
.settings-pane .sf-sub { margin: 22px 0 4px; }
.settings-pane .sf-note { font-size: 13px; margin-top: 0; }
.settings-save { margin-top: 16px; }

/* admin settings: full-width tabbed layout, responsive field grid */
.admin-settings { max-width: none; }
.admin-settings .settings-pane { padding: 26px 30px; }
.admin-settings .settings-pane.on { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px 26px; align-items: start; }
.admin-settings label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 0; }
.admin-settings label input { width: 100%; }
.admin-settings .sf-sub, .admin-settings .sf-note, .admin-settings .settings-pane > p, .admin-settings .settings-pane > button { grid-column: 1 / -1; }
.admin-settings .sf-sub { margin: 8px 0 -6px; font-size: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-settings .settings-pane > button { justify-self: start; }
.admin-settings .settings-save { display: flex; justify-content: flex-end; padding: 14px 0; }
.check-inline span { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* product edit: content-first layout */
.pe-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.pe-panel { display: flex; flex-direction: column; gap: 14px; }
.pe-panel h3 { margin-bottom: 0; }
.pe-panel label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; margin: 0; }
.pe-panel label.chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.pe-panel label.chk input, .edit-img .chk input { width: auto; flex: none; }
.pe-panel input, .pe-panel textarea { width: 100%; }
.pe-panel .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pe-panel textarea.code-area { font-family: ui-monospace, Consolas, monospace !important; font-size: 12.5px; line-height: 1.55; }
.pe-supplier { font-size: 13px; margin: -4px 0 0; line-height: 1.6; }
.pe-profit { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; }
.pe-save { position: sticky; bottom: 0; background: var(--bg); padding: 14px 0; margin-top: 4px;
  border-top: 1px solid var(--line); display: flex; gap: 10px; z-index: 5; }
@media (max-width: 1000px) { .pe-layout { grid-template-columns: minmax(0, 1fr); } }

/* shop page heading (audit: page had no h1) */
.shop-h1 { font-size: 22px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.3px; }

/* dashboard: charts + trend badges */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-grid .panel { margin: 0; }
@media (max-width: 900px) { .dash-grid, .dash-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.trend { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.trend.up { background: #dcfce7; color: #15803d; }
.trend.down { background: #fee2e2; color: #b91c1c; }
.trend.flat { background: var(--bg); color: var(--muted); }

.revchart { width: 100%; height: 190px; display: block; }
.revchart-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut { width: 130px; height: 130px; flex: none; }
.donut-legend { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 7px; }
.donut-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.donut-legend b { margin-left: 4px; }

.dash-bar .bar-label { width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar.bar-row { grid-template-columns: 210px 1fr 110px; }
.dash-low td { padding: 7px 0; }
.dash-low .num { text-align: right; }
@media (max-width: 560px) {
  .dash-bar.bar-row { grid-template-columns: 120px 1fr 84px; }
  .dash-bar .bar-label { width: auto; }
  .donut-wrap { flex-wrap: wrap; }
  .bar-row { grid-template-columns: 70px 1fr 76px; font-size: 12px; }
}

/* Bangladesh footprint map */
.dash-map-row { grid-template-columns: minmax(0, 1fr); }
.bd-map-wrap { display: flex; gap: 26px; align-items: flex-start; }
.bd-map { width: 300px; max-width: 42%; flex: none; height: auto; }
.bd-map circle { transition: r .15s; cursor: default; }
.bd-top { flex: 1; min-width: 0; }
.bd-top h4 { margin: 4px 0 12px; font-size: 15px; }
.bd-top-row { display: grid; grid-template-columns: 26px 1fr 46px 110px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bd-top-row:last-of-type { border-bottom: 0; }
.bd-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bd-top-row.other .bd-rank { background: var(--muted); }
.bd-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-cnt { text-align: right; font-weight: 800; color: var(--primary); }
.bd-rev { text-align: right; font-weight: 600; color: var(--green); }
.bd-note { font-size: 12px; margin-top: 12px; }
@media (max-width: 700px) { .bd-map-wrap { flex-wrap: wrap; } .bd-map { max-width: 100%; margin: 0 auto; } }

/* rich text editor (admin product edit) */
.rte-field { display: flex; flex-direction: column; gap: 7px; }
.rte-label { font-weight: 600; font-size: 13.5px; }
.rte-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.rte-bar { display: flex; gap: 2px; padding: 6px 8px; background: var(--bg); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rte-bar button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid transparent;
  background: none; border-radius: 6px; cursor: pointer; color: var(--ink); }
.rte-bar button:hover { background: #fff; border-color: var(--line); }
.rte-bar .rte-src.on { background: var(--ink); color: #fff; }
.rte-gap { flex: 1; }
.rte { padding: 12px 14px; font-size: 14px; line-height: 1.55; outline: none; overflow-y: auto; max-height: 520px; }
.rte:focus { box-shadow: inset 0 0 0 2px rgba(13,148,136,.25); }
.rte h1, .rte h2, .rte h3 { margin: 12px 0 6px; }
.rte ul, .rte ol { padding-left: 22px; margin: 8px 0; }
.rte p { margin: 0 0 8px; }
.rte-wrap textarea { width: 100%; border: 0; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; outline: none; resize: vertical; }
.pe-spec-prev th { width: 220px; }
.price-form .list-input { max-width: 74px; opacity: .85; }

/* ---------- admin: order editing ---------- */
/* The [hidden] attribute loses to any author `display` rule. .bulk-bar and
   .cat-arrow each needed their own patch for this; one global rule instead, so
   the next component that sets a display value cannot quietly reintroduce it. */
[hidden] { display: none !important; }

/* An order is read first and edited rarely, so the panel opens as plain text and
   only swaps in form controls once Edit is pressed. */
.items-panel .cell-in,
.items-panel .edit-only { display: none; }
.items-panel.editing .view-only,
.items-panel.editing .cell-text { display: none; }
.items-panel.editing .cell-in { display: inline-block; }
.items-panel.editing th.edit-only,
.items-panel.editing td.edit-only { display: table-cell; }
.items-panel.editing .order-edit-actions { display: flex; }
.items-panel.editing .add-item { display: block; }

.cell-text { font-variant-numeric: tabular-nums; }
.cell-in {
  width: 76px; padding: 4px 7px; font-size: 12.5px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.cell-in:focus { border-color: var(--primary); outline: none; }
.items-table .c-act { width: 1%; text-align: center; }
.order-edit-actions { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* adding a product is part of editing, so it reads as a section of this panel */
.add-item { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.add-item h4 { margin: 0 0 10px; font-size: 14px; }
.add-item-box { position: relative; }
.add-item-box input[type="search"] { width: 100%; }
.find-results {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 8px;
  max-height: 300px; overflow-y: auto; background: #fff;
}
.find-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left; color: var(--ink);
}
.find-row:last-child { border-bottom: 0; }
.find-row:hover { background: var(--bg); }
.find-row img { width: 34px; height: 34px; object-fit: contain; border: 1px solid var(--line); border-radius: 5px; background: #fff; flex: none; }
.find-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-price { font-weight: 700; color: var(--primary); flex: none; }
.find-empty { padding: 10px; font-size: 13px; color: var(--muted); }

.add-item-confirm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px; background: var(--bg); border-radius: 8px;
}
.add-item-confirm .thumb { width: 38px; height: 38px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.add-name { flex: 1; min-width: 160px; font-size: 13px; font-weight: 600; }
.add-item-confirm label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* ---------- admin: product specification editor ---------- */
.spec-edit { width: 100%; border-collapse: collapse; margin-top: 4px; }
.spec-edit th {
  text-align: left; padding: 6px 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); font-weight: 600;
}
.spec-edit td { padding: 3px 4px; vertical-align: middle; }
.spec-edit td:first-child { width: 34%; }
.spec-edit .c-act { width: 1%; }
.spec-edit input { width: 100%; padding: 7px 9px; font-size: 13px; }
.spec-edit tbody tr:hover .spec-del { opacity: 1; }
.spec-del { opacity: .55; transition: opacity .15s; }

.spec-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.spec-note { font-size: 12.5px; margin-top: 12px; line-height: 1.55; }
.spec-source {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.spec-source.is-manual { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* ---------- brands ---------- */
/* A brand with no logo yet must still look deliberate, so the name is set as a
   wordmark rather than leaving a hole where an image would be. */
.brand-wordmark {
  display: inline-block; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark);
  font-size: 17px; line-height: 1.15; text-align: center; word-break: break-word;
}

.brand-grid {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}
.brand-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brand-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(13,148,136,.10); transform: translateY(-2px); }
.brand-card-mark { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; }
.brand-card-mark img { max-height: 56px; max-width: 100%; object-fit: contain; }
.brand-card-name { font-size: 14px; color: var(--ink); }
.brand-card-count { font-size: 12px; }

.brand-hero {
  /* flex-start, not center: with a multi-line description the logo would
     otherwise float halfway down instead of sitting beside the brand name */
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin: 14px 0 26px;
}
.brand-hero-mark {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 128px; height: 96px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.brand-hero-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero-body { flex: 1; min-width: 240px; }
.brand-hero-body h1 { margin: 0 0 2px; }
.brand-count { font-size: 13px; margin: 0 0 8px; }
/* No character cap here: 70ch measured 618px inside a 960px panel and left an
   obvious empty block to the right. The blurb is a few lines, so filling the
   panel reads as deliberate where the gap read as broken. */
.brand-desc-text { font-size: 14px; line-height: 1.7; color: var(--ink); }
.brand-desc-text p { margin: 0 0 8px; }
.brand-desc-text p:last-child { margin-bottom: 0; }

/* brand chip in the product eyebrow — see .pi-brand above for the text form */
a.pi-brand { display: inline-flex; align-items: center; }
a.pi-brand:hover { text-decoration: underline; }
/* a logo carries the name itself, so drop the uppercase text treatment */
a.pi-brand.has-logo { letter-spacing: 0; }
a.pi-brand.has-logo:hover { text-decoration: none; opacity: .75; }
.pi-brand img { height: 22px; max-width: 90px; object-fit: contain; display: block; }

.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--primary); font-weight: 600; }

/* admin */
.brand-form .brand-desc { display: block; margin-top: 12px; }
.brand-form .brand-desc textarea { width: 100%; }
.brand-logo-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.brand-logo-prev {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 130px; height: 90px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px;
}
.brand-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase;
}
.warn-text { color: var(--accent-dark); font-weight: 600; }
/* same reason as .fcheck: the global `label` rule is column, so say row */
.inline-check { display: flex; flex-direction: row; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 500; }
.inline-check input { flex: none; }

/* ---------- home page brand slider ---------- */
.brand-track { position: relative; display: flex; align-items: stretch; margin-top: 4px; }
.brand-scroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
  flex: 1; min-width: 0; padding: 4px 2px 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.brand-scroll::-webkit-scrollbar { display: none; }

.brand-slide {
  flex: 0 0 auto; width: 156px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brand-slide:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(13,148,136,.10); transform: translateY(-2px); }
.brand-slide-mark { display: flex; align-items: center; justify-content: center; height: 52px; width: 100%; }
.brand-slide-mark img { max-height: 52px; max-width: 100%; object-fit: contain; }
.brand-slide-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.brand-slide-count { font-size: 11.5px; color: var(--muted); }

/* the shared .cat-arrow is styled for the dark header bar — repaint it for this
   light section, otherwise a dark slab sits over the cards */
.brand-track .cat-arrow { color: var(--ink); width: 40px; }
.brand-track .cat-arrow.prev { background: linear-gradient(90deg, var(--bg) 60%, rgba(247,249,250,0)); }
.brand-track .cat-arrow.next { background: linear-gradient(270deg, var(--bg) 60%, rgba(247,249,250,0)); }
.brand-track .cat-arrow:hover { color: var(--primary); }

@media (max-width: 640px) { .brand-slide { width: 132px; padding: 13px 10px; } }


/* ---------- shop: mobile filter toggle ---------- */
/* Hidden on desktop, where the sidebar is always visible beside the products. */
.shop-filter-toggle {
  display: none; width: 100%; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
}
.shop-filter-toggle span:first-child { display: inline-flex; align-items: center; gap: 8px; flex: 1; }
.shop-filter-toggle .filter-count {
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800;
  min-width: 20px; padding: 2px 7px; border-radius: 999px; text-align: center;
}
.shop-filter-toggle .chev { transition: transform .18s; color: var(--muted); }
.shop-filter-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.shop-filter-toggle:hover { border-color: var(--primary); }

/* Must come after .shop-filter-toggle's base `display: none` above, or the
   cascade keeps the button hidden on phones — same specificity, later wins. */
@media (max-width: 900px) {
  .shop-filter-toggle { display: flex; }
}

/* ---------- shop sidebar: category filter ---------- */
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.side-head h3 { margin: 0 0 10px; }
.side-clear { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.side-clear:hover { text-decoration: underline; }

/* long labels must truncate rather than wrap under their own count */
.side-cat { align-items: center; gap: 10px; }
.side-cat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cat > small { flex: none; font-variant-numeric: tabular-nums; }

  width: 100%; margin-top: 6px; padding: 8px 10px;
  background: none; border: 1px dashed var(--line); border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary);
}

/* The panel used to be a fixed-height box with its own scrollbar, which is what
   made the category list feel cramped. With the list capped at 14 the panel can
   size to its content and simply stop before the viewport edge. */
.shop-side { max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.shop-side::-webkit-scrollbar { width: 8px; }
.shop-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.shop-side::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

@media (max-width: 900px) {
  /* already inside a collapsible panel on phones — no nested scroll area */
  .shop-side { max-height: none; overflow: visible; }
}

/* ---------- category copy under the product grid ---------- */
.cat-copy {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.cat-copy h2 { font-size: 19px; margin: 0 0 10px; }
.cat-copy-text { font-size: 14px; line-height: 1.75; color: var(--ink); }
.cat-copy-text p { margin: 0 0 10px; }

/* ---------- admin nav groups ---------- */
.nav-group {
  display: block; margin: 16px 0 6px; padding: 0 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.admin-nav > .nav-group:first-child { margin-top: 8px; }

/* ---------- verified reviews + customer photos ---------- */
.verified-badge {
  font-size: 11px; font-weight: 700; color: #047857; background: #ecfdf5;
  border: 1px solid #a7f3d0; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.verified-note { color: #047857; font-weight: 600; font-size: 12.5px; margin: 0 0 10px; }
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.review-photos img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
}
.review-photos a:hover img { border-color: var(--primary); }
.review-form input[type="file"] { font-size: 12.5px; }

/* ---------- account: write-a-review cards ---------- */
.rv-heading { font-size: 17px; margin: 4px 0 4px; }
.rv-sub { font-size: 13px; margin: 0 0 14px; }
.rv-card { margin-bottom: 14px; }
.rv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rv-thumb {
  width: 52px; height: 52px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.rv-form { display: flex; flex-direction: column; gap: 10px; }
.rv-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.rv-form textarea, .rv-form input[type="file"] { width: 100%; }
.rv-form .btn { align-self: flex-start; }
.pill-due { background: var(--accent); color: #1a1200; font-weight: 800; }

/* ---------- admin dashboard: sections + to-do queue ---------- */
.dash-section {
  font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px;
}
.dash-section:first-of-type { margin-top: 6px; }
.dash-section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-section-row .dash-section { margin-bottom: 12px; }

/* stat tiles that link somewhere should say so on hover */
a.stat { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.stat:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(13,148,136,.10); transform: translateY(-1px); }

.todo-panel { margin-bottom: 4px; }
.todo-panel.todo-clear { border-color: #a7f3d0; background: #f0fdf9; }
.todo-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.todo-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  font-size: 13.5px; color: var(--ink); transition: border-color .15s, background .15s;
}
.todo-item:hover { border-color: var(--primary); background: var(--bg); }
.todo-item strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.todo-label { flex: 1; min-width: 0; color: var(--muted); }
.todo-go { color: var(--muted); font-weight: 700; }
.todo-item:hover .todo-go { color: var(--primary); }
.todo-ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; flex: none; }
.tone-bad  .todo-ic { background: #fee2e2; color: #b91c1c; }
.tone-warn .todo-ic { background: #fef3c7; color: #92400e; }
.tone-info .todo-ic { background: #e0f2fe; color: #075985; }

/* ---------- dashboard: recent orders ---------- */
/* Pending is the row you have to act on, so it should read as a queue item
   rather than blend into the list. */
.recent-orders .row-pending { background: #fffbeb; }
.recent-orders .row-pending:hover { background: #fef3c7; }
.recent-orders tbody tr:hover { background: var(--bg); }
.recent-orders .name-cell small { display: block; margin-top: 2px; font-size: 11.5px; }
.recent-orders .name-cell small a { color: var(--muted); }
.recent-orders .name-cell small a:hover { color: var(--primary); }

/* ---------- admin viewing the store as a customer ---------- */
/* Deliberately loud and sticky: the real risk of this feature is forgetting it is
   on and doing something that lands on a live customer's account. */
.impersonate-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 16px; background: #7c2d12; color: #fff;
  font-size: 13px; font-weight: 600; text-align: center;
  border-bottom: 2px solid #ea580c;
}
.impersonate-bar span { display: inline-flex; align-items: center; gap: 8px; }
.impersonate-bar strong { color: #fed7aa; }
.imp-exit {
  background: #fff; color: #7c2d12; padding: 4px 12px; border-radius: 999px;
  font-weight: 800; font-size: 12.5px; white-space: nowrap;
}
.imp-exit:hover { background: #fed7aa; }
body.is-impersonating { outline: 3px solid #ea580c; outline-offset: -3px; }

/* ---------- admin topbar: account controls on every page ---------- */
/* Profile / View Store / Logout are account actions, not sections of the admin,
   so they sit here instead of competing with real navigation in the sidebar. */
.admin-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 0 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.topbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.topbar-btn:hover { border-color: var(--primary); background: var(--bg); }

.topbar-user {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s;
}
.topbar-user:hover, .topbar-user.on { border-color: var(--primary); }
.topbar-user .admin-profile-av { width: 34px; height: 34px; font-size: 14px; }
.topbar-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.topbar-user-info strong { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user-info small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .admin-topbar { justify-content: space-between; padding-bottom: 14px; }
  .topbar-btn span { display: none; }          /* icons only when space is tight */
  .topbar-user-info small { display: none; }
}

/* ---------- admin topbar: account menu ---------- */
.topbar-user-wrap { position: relative; }
.topbar-user {
  cursor: pointer; font-family: inherit; text-align: left;
  gap: 10px; padding-right: 10px;
}
.topbar-chev { color: var(--muted); font-size: 11px; margin-left: 2px; transition: transform .15s; }
.topbar-user[aria-expanded="true"] { border-color: var(--primary); }
.topbar-user[aria-expanded="true"] .topbar-chev { transform: rotate(180deg); }

.topbar-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 12px 34px rgba(15,23,42,.14); padding: 6px; overflow: hidden;
}
.topbar-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.topbar-menu a:hover { background: var(--bg); }
.topbar-menu .menu-danger { color: var(--red); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.topbar-menu .menu-danger:hover { background: #fef2f2; }

/* ---------- admin: email templates ---------- */
.mail-when { font-size: 12.5px; display: flex; align-items: center; gap: 7px; margin: 0 0 14px; }
.mail-body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; width: 100%; }
.mail-vars { margin-top: 12px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-vars code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 7px; font-size: 11.5px; color: var(--primary-dark);
}
.mail-tools {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.mail-test { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.mail-test label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.notify-grid { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.auth-forgot { text-align: right; font-size: 12.5px; margin: -4px 0 4px; }

/* ---------- add-to-cart toast ---------- */
.cart-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 11px; z-index: 120;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15,23,42,.28); font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: min(92vw, 460px);
}
.cart-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast.bad { background: #b91c1c; }
.cart-toast .ct-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary); font-size: 13px;
}
.cart-toast.bad .ct-ic { background: #fff; color: #b91c1c; }
.cart-toast .ct-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-toast .ct-go { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* ---------- cart: per-item selection + added date ---------- */
.cart-list-head, .cart-row { align-items: center; }
.c-pick { display: flex; align-items: center; justify-content: center; }
.c-pick input { width: 17px; height: 17px; cursor: pointer; }
.cart-row.unpicked { opacity: .55; }
.cart-row.unpicked .cart-row-name { text-decoration: line-through; text-decoration-color: var(--line); }
.cart-added { font-size: 11.5px; color: var(--muted); }
.cart-note { font-size: 12px; margin: 8px 0 0; text-align: center; }

/* ---------- category header: lede + brand filter ---------- */
/* Named .cat-brand, not .brand-chip — that one is the 40x40 letter avatar in the
   admin brand table, and its fixed width squashed these into overlapping circles. */
.cat-lede { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 2px 0 16px; max-width: 100ch; }
.cat-lede strong { font-weight: 700; }

.cat-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cat-brand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}
.cat-brand:hover { border-color: var(--primary); color: var(--primary); }
.cat-brand.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-brand small { font-size: 11px; font-weight: 700; opacity: .6; }
.cat-brand.on small { opacity: .85; }
@media (max-width: 640px) { .cat-brand { padding: 6px 12px; font-size: 12.5px; } }

.brand-desc-head { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }

/* ---------- shop: full-width header above the two-column layout ---------- */
/* The lede and brand filter describe the whole page, so they sit above the grid
   rather than inside the product column — which also lets the sidebar start level
   with the first product row. */
.shop-head { margin-bottom: 20px; }
.shop-head .shop-h1 { margin: 0 0 10px; }
.shop-head .crumbs { margin-bottom: 8px; }
.shop-head .cat-lede { max-width: none; }
.shop-head .cat-brands { margin-bottom: 0; }

/* ---------- shop filters: price slider, checkbox facets ---------- */
.fgroup { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fgroup:last-of-type { border-bottom: 0; }
.fgroup h3 { margin: 0 0 12px; font-size: 14px; }
.side-head-top { padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* two range inputs stacked on one track — the standard dual-handle trick */
.price-slider { position: relative; height: 26px; margin: 4px 2px 14px; }
.price-slider .ps-track, .price-slider .ps-fill {
  position: absolute; top: 11px; height: 4px; border-radius: 999px;
}
.price-slider .ps-track { left: 0; right: 0; background: var(--line); }
.price-slider .ps-fill { background: var(--accent-dark); }
.price-slider input[type="range"] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 26px;
  margin: 0; padding: 0; background: none; appearance: none; pointer-events: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; cursor: grab;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent-dark); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent-dark); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.price-inputs input { text-align: center; }

.fcheck {
  /* flex-direction is explicit: the global `label` rule sets `column`, which put
     every checkbox on its own line above its text. */
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 6px 2px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.fcheck:hover { color: var(--primary); }
.fcheck input { width: 16px; height: 16px; cursor: pointer; flex: none; }
.fcheck span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcheck small { color: var(--muted); font-size: 11.5px; }

/* ---------- home: live store figures ---------- */
.stats-band { background: var(--ink); color: #fff; padding: 30px 0; margin: 34px 0; }
.stats-row {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stat-item-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.08); color: var(--accent); margin-bottom: 4px;
}
.stat-item strong { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-item-label { font-size: 12.5px; color: #94a3b8; }
@media (max-width: 640px) {
  .stats-band { padding: 22px 0; margin: 24px 0; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .stat-item strong { font-size: 21px; }
}

/* ---------- AI assistant widget ---------- */
.ai-widget { position: fixed; right: 20px; bottom: 88px; z-index: 90; }
.ai-bubble {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(13,148,136,.38);
}
.ai-bubble:hover { background: var(--primary-dark); }
.ai-panel {
  position: absolute; right: 0; bottom: 66px; width: min(92vw, 370px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15,23,42,.22); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(74vh, 560px);
}
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; background: var(--ink); color: #fff; }
.ai-head strong { display: block; font-size: 14px; }
.ai-head small { color: #94a3b8; font-size: 11.5px; }
.ai-close { background: none; border: 0; color: #94a3b8; font-size: 15px; cursor: pointer; }
.ai-close:hover { color: #fff; }

.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); }
.ai-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ai-msg.bot { background: var(--card); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.me  { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.ai-msg.me a { color: #d1fae5; }
.ai-msg.typing { opacity: .6; letter-spacing: 3px; }

.ai-chips { display: flex; gap: 6px; padding: 9px 12px 0; flex-wrap: wrap; background: var(--bg); }
.ai-chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; font-size: 11.5px; font-family: inherit; color: var(--ink); cursor: pointer; }
.ai-chip:hover { border-color: var(--primary); color: var(--primary); }

.ai-form { display: flex; gap: 8px; padding: 11px 12px; background: var(--bg); border-top: 1px solid var(--line); }
.ai-form input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; }
.ai-send { width: 38px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; font-size: 13px; }
.ai-send:hover { background: var(--primary-dark); }
@media (max-width: 640px) { .ai-widget { right: 14px; bottom: 80px; } }

/* ---------- admin: chat transcripts ---------- */
.chat-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.chat-line { display: grid; grid-template-columns: 70px 1fr 44px; gap: 10px; align-items: start; font-size: 13.5px; }
.chat-who { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding-top: 8px; }
.chat-body { padding: 9px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); line-height: 1.55; word-break: break-word; }
.chat-time { font-size: 11px; color: var(--muted); padding-top: 9px; text-align: right; }
.r-user .chat-body { background: #ecfdf5; border-color: #a7f3d0; }
.r-assistant .chat-body { background: var(--card); }
.r-tool .chat-body { background: #f8fafc; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.ai-caps { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.9; color: var(--ink); }