/* Custom styles for the data-driven storefront + admin panel.
   Kept separate from the BizLand template's style.css so template updates
   (if ever re-applied) don't clobber these. Accent color (#ea3810) matches
   the template's existing hero button color. */

:root {
  --accent: #ea3810;
  --accent-dark: #c22e0a;
  --ok: #2e8b3d;
  --warn: #c9971b;
  --danger: #c0392b;
  --muted: #6c757d;
}

/* ---------- Mobile hero override ----------
   The BizLand template forces #hero to height:100vh (and 120vh on short
   viewports) below 768px — fine for a marketing landing page, wrong for a
   product catalog where people want to reach the price list quickly. This
   was forcing mobile visitors to scroll past more than one full screen of
   background image before reaching any real content. Overriding via our own
   stylesheet (loaded after style.css) rather than editing the vendor file. */

@media (max-width: 768px) {
  #hero {
    height: auto;
    min-height: 0;
    padding: 90px 0 50px;
  }
}

@media (max-height: 500px) {
  #hero {
    height: auto;
    min-height: 0;
  }
}

/* ---------- Product grid & cards ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .product-grid { grid-template-columns: 1fr; }
}

.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
}

.product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-card__name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-card__mrp {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 13px;
}

.product-card__final {
  color: var(--accent);
  font-weight: 700;
  font-size: 17px;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge--out_of_stock { background: #fff3cd; color: var(--warn); }
.status-badge--sold_out { background: #fde2e0; color: var(--danger); }

/* ---------- Quantity stepper + add-to-cart ---------- */

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.qty-stepper button {
  width: 34px;
  height: 34px;
  border: none;
  background: #f7f7f7;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.qty-stepper button:hover { background: #eee; }

.qty-stepper input {
  width: 44px;
  height: 34px;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  -moz-appearance: textfield;
}

.btn-add-cart {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-add-cart:hover { background: var(--accent-dark); }
.btn-add-cart:disabled { background: #ccc; cursor: not-allowed; }

/* ---------- Category filter chips ---------- */

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.category-chip {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.category-chip:hover,
.category-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Cart nav badge ---------- */

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: top;
}

/* ---------- Floating WhatsApp button ---------- */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
}

/* ---------- Floating cart summary ----------
   Total amount must stay visible at all times (not icon-only, not
   hover/tap-to-reveal) — shoppers should see it building up as they browse,
   on every screen size, without needing to interact with it first. */

.cart-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 100px;
  background: #1f2430;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease;
}

.cart-float:hover {
  color: #fff;
  transform: scale(1.04);
}

.cart-float i {
  font-size: 22px;
  color: var(--accent);
}

.cart-float__info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cart-float__count {
  font-size: 11px;
  color: #cfd3dc;
}

.cart-float__total {
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 575px) {
  /* WhatsApp is on the right, cart on the left — both stay fully labeled,
     just pulled in slightly so they don't crowd a narrow screen. */
  .cart-float { left: 12px; bottom: 12px; padding: 8px 14px 8px 12px; }
  .whatsapp-float { right: 12px; bottom: 12px; width: 50px; height: 50px; font-size: 24px; }
}

/* ---------- Cart / order review table ---------- */

.cart-table img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }

.cart-summary {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 16px 20px;
}

/* ---------- Alerts / form feedback ---------- */

.form-feedback {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.form-feedback--error { background: #fde2e0; color: var(--danger); }
.form-feedback--success { background: #e3f5e6; color: var(--ok); }

/* ---------- Admin panel shell ---------- */

.admin-body { background: #f4f6f9; min-height: 100vh; }

.admin-shell {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 230px;
  background: #1f2430;
  color: #cfd3dc;
  flex-shrink: 0;
}

.admin-sidebar .brand {
  padding: 18px 20px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-sidebar a {
  display: block;
  padding: 10px 20px;
  color: #cfd3dc;
  text-decoration: none;
  font-size: 14px;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

.admin-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-content { padding: 24px; }

.admin-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 20px;
  margin-bottom: 20px;
}

.stat-tile {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 18px 20px;
}

.stat-tile .label { font-size: 13px; color: var(--muted); }
.stat-tile .value { font-size: 26px; font-weight: 700; color: #1f2430; }

@media (max-width: 767px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; }
}