/* ===========================================================
   AONE BAZAAR — LAYOUT & COMPONENTS
=========================================================== */

/* ---------------- HEADER ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  white-space: nowrap;
}

.brand-tagline {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 600;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--green-100);
  color: var(--green-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#userGreeting {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-right: 4px;
  white-space: nowrap;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-sunken);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--green-100); transform: translateY(-1px); }

.cart-badge {
  background: var(--marigold-600);
  color: var(--indigo-900);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.logout-btn { color: var(--danger-600); }

/* ---------------- HERO ---------------- */
.hero {
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg, var(--paper) 38%, rgba(251, 249, 244, 0.75) 60%, rgba(251, 249, 244, 0.35) 100%),
    url("https://i.postimg.cc/Rhbvr9pG/image-(3).webp");
  background-size: cover;
  background-position: 78% center;
}

@media (max-width: 900px) {
  .hero {
    background:
      linear-gradient(180deg, var(--paper) 55%, rgba(251, 249, 244, 0.6) 80%, rgba(251, 249, 244, 0.4) 100%),
      url("https://i.postimg.cc/Rhbvr9pG/image-(3).webp");
    background-size: cover;
    background-position: center 30%;
  }
}

.hero-intro {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.hero-intro h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin: 14px 0 12px;
}

.hero-intro h1 span {
  color: var(--green-700);
  font-style: italic;
}

.hero-intro p {
  font-size: 1.05rem;
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------------- DELIVERY AVAILABILITY CHECK ---------------- */
.delivery-check-box {
  max-width: 460px;
  margin: 0 auto 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  text-align: center;
}

.delivery-check-label {
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 12px;
}

.delivery-check-row {
  display: flex;
  gap: 10px;
}

.delivery-check-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.delivery-check-input-wrap .input-pill {
  width: 100%;
}

.delivery-area-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  max-height: 220px;
  overflow-y: auto;
  text-align: left;
}

.delivery-area-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.delivery-area-suggestion:last-child { border-bottom: none; }
.delivery-area-suggestion i { color: var(--green-700); font-size: 0.8rem; }
.delivery-area-suggestion:hover { background: var(--green-100); }

.delivery-check-message {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.delivery-check-yes {
  color: var(--green-700);
  font-weight: 700;
}
.delivery-check-yes i { margin-right: 4px; }
.delivery-check-eta {
  display: inline-block;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 2px;
}

.delivery-check-no {
  color: var(--danger, #c0392b);
  font-weight: 700;
}
.delivery-check-no i { margin-right: 4px; }

.delivery-check-partial {
  color: var(--marigold-700, #b8860b);
  font-weight: 700;
  margin-bottom: 10px;
}
.delivery-check-partial i { margin-right: 4px; }

.delivery-check-cta-btn {
  display: flex;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}

.delivery-check-warn {
  color: var(--ink-faint);
}

.delivery-check-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box !important;
  color: #25D366;
  border-color: #25D366;
}
.delivery-check-wa-btn:hover { background: #e9fbf1; }

#deliveryCheckoutWarning {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fdecea;
  border: 1px solid #f3c6c1;
  border-radius: var(--radius-sm);
}
#deliveryCheckoutWarning .delivery-check-message { margin-top: 0; }

.payment-screenshot-upload {
  margin-top: 14px;
}

.payment-screenshot-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.payment-screenshot-label:hover { border-color: var(--green-700); color: var(--green-700); }
.payment-screenshot-label.has-file {
  border-style: solid;
  border-color: var(--green-700);
  color: var(--green-700);
  background: var(--green-100);
}

.payment-screenshot-preview {
  display: block;
  max-width: 140px;
  max-height: 140px;
  margin: 10px auto 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  object-fit: contain;
}

#paymentScreenshotWarning {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fdecea;
  border: 1px solid #f3c6c1;
  border-radius: var(--radius-sm);
}
#paymentScreenshotWarning .delivery-check-message { margin-top: 0; }

.shake-attention {
  animation: shake-attention 0.4s ease;
}
@keyframes shake-attention {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Store picker cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  align-self: flex-start;
  margin: 18px 0 -14px 18px;
  z-index: 2;
  font-size: 0.95rem;
}

.card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.card-body {
  padding: 26px 20px 22px;
  text-align: center;
}

.card-body p {
  font-size: 0.9rem;
  margin-bottom: 16px;
}

/* ---------------- STORE / PRODUCTS ---------------- */
.store {
  padding: 32px 0 72px;
}

.store .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.backBtn {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.backBtn:hover { background: var(--green-100); }

#storeTitle {
  font-size: 1.8rem;
  margin-bottom: 0;
}

.store-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.store-search-wrap {
  position: relative;
  max-width: 360px;
}

.store-search-input {
  max-width: 360px;
  margin-bottom: 14px;
}

.store-search-suggestions {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.store-search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}
.store-search-suggestion-item:hover { background: var(--surface-sunken); }
.store-search-suggestion-item img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-sunken);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* Sits in the exact spot the category tile grid occupies, shown only
   while that grid is collapsed (a specific category/sub-category is
   selected) — reads as "the categories are folded away here",
   tapping it unfolds them again right where they were. */
.category-collapsed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.category-collapsed-bar i:first-child { color: var(--green-700); font-size: 1rem; }
.category-collapsed-bar span { flex: 1; }
.category-collapsed-bar-chevron { font-size: 0.8rem; color: var(--ink-faint); }
.category-collapsed-bar:hover { border-color: var(--green-700); background: var(--green-100, var(--surface-sunken)); }

.brand-filter {
  display: block;
  max-width: 260px;
  font-weight: 600;
  font-size: 0.88rem;
}

.price-filter {
  display: block;
  max-width: 220px;
  font-weight: 600;
  font-size: 0.88rem;
}

.sort-filter {
  display: block;
  max-width: 220px;
  font-weight: 600;
  font-size: 0.88rem;
}

/* ---------------- STORE CATEGORY SECTIONS (grouped square tiles) ---------------- */
.category-all-products-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.category-all-products-btn:hover { border-color: var(--green-700); color: var(--green-700); }
.category-all-products-btn.active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}

.category-section {
  margin-bottom: 28px;
}

.category-section-title,
.category-section-title-static {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.category-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.category-section-title i {
  font-size: 0.8rem;
  color: var(--ink-faint);
  transition: transform var(--fast) var(--ease);
}
.category-section-title:hover { color: var(--green-700); }
.category-section-title:hover i { transform: translateX(2px); color: var(--green-700); }

/* ---------------- CATEGORY DETAIL PAGE (sidebar + products) ---------------- */
.store-content-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

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

.category-detail-sidebar {
  flex: 0 0 auto;
  width: 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-right: 10px;
  position: sticky;
  top: 90px;
}

.category-detail-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: center;
  padding: 12px 8px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.category-detail-sidebar-img-wrap {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.category-detail-sidebar-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-detail-sidebar-item.active .category-detail-sidebar-img-wrap {
  border-color: var(--green-700);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--green-100);
}

.category-detail-sidebar-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.category-detail-sidebar-label-en {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-weight: 700;
}

.category-detail-sidebar-label-hi {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-weight: 500;
  font-size: 0.88em;
  color: var(--ink-faint);
}
.category-detail-sidebar-item:hover { background: var(--surface-sunken); }
.category-detail-sidebar-item.active {
  background: var(--green-100);
  border-left-color: var(--green-700);
  color: var(--green-700);
}
.category-detail-sidebar-item.active .category-detail-sidebar-label-hi {
  color: var(--green-700);
}

.category-square-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.category-square-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.category-square-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.category-square-tile.active .category-square-img-wrap,
.category-square-tile:hover .category-square-img-wrap {
  box-shadow: 0 0 0 2px var(--green-700);
  transform: translateY(-2px);
}

.category-square-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-square-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.15;
}
.category-square-tile.active .category-square-label { color: var(--green-700); }

/* ---------------- STORE CATEGORY OVERVIEW CONTAINER ----------------
   Holds the "Show All Products" button + stacked category sections —
   plain block flow, not a grid; each section's own tiles get their
   grid layout from .category-square-grid nested inside it. */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 14px 10px;
  margin-bottom: 20px;
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 76px;
  width: 100%;
  margin: 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.category-tile-thumb {
  position: relative;
  width: 100%;
}

.category-tile-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.category-tile:hover .category-tile-img-wrap {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-700);
}
.category-tile:active .category-tile-img-wrap { transform: scale(0.96); }

.category-tile.active .category-tile-img-wrap {
  border-color: var(--green-700);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--green-100);
}
.category-tile.active .category-tile-label { color: var(--green-700); }

.category-tile-all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-700);
  color: #fff;
  font-size: 1.15rem;
}

.category-tile-back-btn .category-tile-all {
  background: var(--surface-sunken);
  color: var(--ink);
  border-color: var(--line-strong);
}

.category-tile-subs-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--marigold-600);
  color: var(--indigo-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  border: 2px solid var(--paper);
}

.category-tiles-heading {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green-900);
  margin-bottom: 2px;
}

.category-tile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

/* ---------------- PAGINATION ---------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 24px 0 6px;
  flex-wrap: wrap;
}

.pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}

.pagination button:hover:not(:disabled) { background: var(--green-100); border-color: var(--green-700); color: var(--green-700); }
.pagination button.active { background: var(--green-700); border-color: var(--green-700); color: #fff; box-shadow: 0 2px 6px rgba(15, 74, 43, 0.2); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

.product {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
  animation: fade-up 320ms var(--ease) both;
}

.product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.product img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.product h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.name-hi {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85em;
}

.mega-menu-hi {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85em;
}

.product > p {
  font-weight: 700;
  color: var(--green-700);
  margin: 0;
  font-size: 1rem;
}

.mrp-strike {
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: line-through;
  margin-left: 4px;
}

.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--marigold-600);
  color: var(--indigo-900);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.extra-zone-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  background: #e6ebf5;
  color: var(--indigo-800);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.extra-zone-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--indigo-800);
  color: #fff;
  font-size: 0.72rem;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--green-700);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
}

.variant-select {
  width: 100%;
  max-width: 100%;
  padding: 8px 34px 8px 12px;
  background-position: right 10px center;
  background-size: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.variant-select:disabled { opacity: 0.5; }

.out-of-stock-btn {
  background: var(--surface-sunken) !important;
  color: var(--ink-faint) !important;
  cursor: not-allowed;
}

.product-out-of-stock {
  opacity: 0.6;
}
.product-out-of-stock img {
  filter: grayscale(60%);
}

.product button {
  border: none;
  border-radius: 999px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 0.82rem;
  width: 100%;
  cursor: pointer;
  transition: filter var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.product button:first-of-type ~ button {
  margin-top: -4px;
}

.product > button {
  background: var(--surface-sunken);
  color: var(--ink);
}

.product > button + button {
  background: var(--green-700);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 74, 43, 0.15), 0 3px 8px rgba(15, 74, 43, 0.14);
}

.product > button:hover { filter: brightness(0.96); transform: translateY(-1px); }
.product > button:active { transform: translateY(0); }

/* ---------------- FLOATING CART BAR ---------------- */
#cartBar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 45;
  background: var(--indigo-900);
  color: #fff;
  border-radius: 999px;
  padding: 12px 10px 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
}

#cartSummary { font-weight: 600; font-size: 0.9rem; }

#cartBar button {
  background: var(--marigold-600);
  color: var(--indigo-900);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------------- WHATSAPP FLOAT ---------------- */
#whatsappFloat {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 46;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--fast) var(--ease);
}
#whatsappFloat:hover { transform: scale(1.08); }

.back-to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 46;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-700);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility 0s linear 0.2s;
}
.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.back-to-top-btn:hover { transform: translateY(-2px) scale(1.06); }
.back-to-top-btn.visible:hover { transform: translateY(-2px) scale(1.06); }

/* ---------------- MODAL (generic) ---------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 32, 58, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  opacity: 1;
  transform: scale(1) translateY(0); /* guaranteed resting position/opacity, independent of the animation below */
  animation: pop-in var(--med) var(--ease);
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-content h3 {
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
  margin-bottom: 12px;
}

.modal-content > button,
.modal-content .btn {
  width: 100%;
  margin-top: 4px;
}

.modal-content button[onclick^="close"] {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-sunken);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.modal-content button[onclick^="close"]:hover { background: var(--danger-100); color: var(--danger-600); transform: rotate(90deg); }

.closeTop {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-sunken);
  font-size: 1.1rem;
}

/* ---------------- CART DRAWER ---------------- */
.cart-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 32, 58, 0.45);
  display: flex;
  justify-content: flex-end;
}

.cart-box {
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* the WHOLE drawer scrolls now, not just the items list —
                        otherwise content added below (like the UPI payment
                        step) could push the "I've Paid" button out of reach
                        with no way to scroll down to it */
  box-shadow: var(--shadow-lg);
  transform: translateX(0); /* guaranteed resting position, independent of the animation below */
  animation: slide-in var(--med) var(--ease);
}

@keyframes slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  flex-shrink: 0;
}

.cart-header span {
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
}

.cart-items {
  padding: 10px 22px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item-name { font-weight: 600; font-size: 0.94rem; }
.cart-item-price { color: var(--green-700); font-weight: 700; font-size: 0.9rem; }

.qty-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-controls button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-weight: 700;
}

.cart-summary {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}

.cart-form {
  padding: 0 22px;
}

.cart-form input,
.cart-form textarea {
  margin-bottom: 10px;
}

.saved-address-select {
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--green-700);
}

.save-address-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: -2px 0 10px;
  cursor: pointer;
}
.save-address-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green-700);
}

.place-order-btn {
  margin: 6px 22px 22px;
  background: var(--marigold-600);
  color: var(--indigo-900);
  border: none;
  border-radius: 999px;
  padding: 13px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(201, 112, 26, 0.18), 0 4px 12px rgba(201, 112, 26, 0.16);
  transition: all var(--fast) var(--ease);
}
.place-order-btn:hover { background: var(--marigold-700); color: #fff; box-shadow: 0 2px 6px rgba(201, 112, 26, 0.22), 0 10px 22px rgba(201, 112, 26, 0.2); transform: translateY(-1px); }
.place-order-btn:active { transform: translateY(0); }

/* ---------------- PRODUCT DETAIL MODAL ---------------- */
#productModal .modal-content { max-width: 420px; }

.imgContainer {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.zoomImg {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: var(--surface-sunken);
  cursor: zoom-in;
}

#lens {
  display: none;
  position: absolute;
  width: 110px;
  height: 110px;
  border: 2px solid var(--marigold-600);
  border-radius: 50%;
  pointer-events: none;
  background-repeat: no-repeat;
}

#thumbs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

#detailName { margin-top: 14px; }
#detailPrice { font-weight: 700; color: var(--green-700); font-size: 1.15rem; }

/* Full screen viewer */
#fullScreenViewer {
  background: rgba(18, 32, 58, 0.92);
}
#fullScreenViewer .modal-content {
  background: transparent;
  box-shadow: none;
  max-width: 90vw;
}
#fullScreenViewer img {
  max-height: 82vh;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

/* ---------------- ADMIN ---------------- */
#adminBox .modal-content { max-width: 560px; text-align: left; }

.admin-orders-btn {
  position: relative;
  background: var(--indigo-800);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  margin-bottom: 18px;
}

.admin-badge {
  background: var(--marigold-600);
  color: var(--indigo-900);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}

#adminBox h3 {
  font-size: 1.05rem;
  margin-top: 18px;
}

.order-card-admin,
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--paper);
}

.order-header,
.order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* ---------------- ORDER STATUS TRACKER ---------------- */
.order-tracker {
  display: flex;
  align-items: flex-start;
  margin: 12px 0 16px;
}

.tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 58px;
}

.tracker-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 2px solid var(--line-strong);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.tracker-step span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
}

.tracker-step.completed .tracker-dot {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.tracker-step.completed span { color: var(--green-700); }

.tracker-step.current .tracker-dot {
  background: var(--marigold-600);
  border-color: var(--marigold-600);
  color: var(--indigo-900);
  box-shadow: 0 0 0 4px var(--marigold-100);
}
.tracker-step.current span { color: var(--marigold-700); font-weight: 700; }

.tracker-line {
  flex: 1;
  height: 3px;
  background: var(--line-strong);
  margin-top: 12px;
  border-radius: 2px;
}
.tracker-line.completed { background: var(--green-700); }

.order-cancelled-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--danger-100);
  color: var(--danger-600);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 10px 0 14px;
}

.reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1.5px solid var(--green-700);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.reorder-btn:hover { background: var(--green-700); color: #fff; }
.reorder-btn:active { transform: scale(0.97); }

.order-id { font-weight: 700; }

.order-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  background: var(--surface-sunken);
}
.order-status.NEW { background: var(--marigold-100); color: var(--marigold-700); }
.order-status.PROCESSING { background: #dde8fb; color: #2554a6; }
.order-status.DELIVERED { background: var(--green-100); color: var(--green-900); }

.order-body div { font-size: 0.87rem; margin-bottom: 3px; color: var(--ink-soft); }
.order-date { font-size: 0.78rem; color: var(--ink-faint); margin-top: 4px; }

.order-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.order-actions .btn,
.order-actions button {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}
.order-actions .processing { background: #dde8fb; color: #2554a6; }
.order-actions .delivered { background: var(--green-100); color: var(--green-900); }
.order-actions .invoice { background: var(--indigo-800); color: #fff; }

.pm-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  background: var(--paper);
}
.pm-actions { display: flex; gap: 8px; margin-top: 8px; }
.pm-actions button {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-sunken);
}

.edit-preview {
  width: 90px;
  height: 90px;
  object-fit: contain;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  display: none;
  margin-bottom: 10px;
}

/* ---------------- MY ORDERS ---------------- */
.order-items { margin: 6px 0; }
.order-item { font-size: 0.85rem; color: var(--ink-soft); padding: 2px 0; }

.order-item-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--marigold-700, #b45309);
  background: var(--marigold-100, #fef3c7);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.order-item-review-btn:hover { filter: brightness(0.97); }

.order-item-reviewed-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-700);
}

.inline-review-form {
  margin: 8px 0 4px;
  padding: 10px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.inline-star-input {
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--ink-faint);
  cursor: pointer;
  margin-bottom: 6px;
}
.inline-star-input span { transition: color 0.1s; }
.inline-star-input span.filled { color: var(--marigold-600); }

.inline-review-form textarea {
  width: 100%;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  resize: vertical;
  margin-bottom: 8px;
}

.inline-review-actions { display: flex; gap: 8px; }
.inline-review-actions .btn { width: auto; padding: 6px 14px; font-size: 0.8rem; }

.inline-review-thanks {
  color: var(--green-700);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

/* ---------------- SIMPLE PAGES (about / contact) ---------------- */
.page-hero {
  padding: 48px 0 30px;
  text-align: center;
}

.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

.legal-page {
  padding: 20px 0 60px;
}

.legal-content {
  max-width: 760px;
}

.legal-content h3 {
  font-size: 1.15rem;
  margin-top: 32px;
  margin-bottom: 10px;
  color: var(--green-900);
}

.legal-content p,
.legal-content li {
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal-content ul {
  padding-left: 22px;
  margin-bottom: 1em;
}

.legal-content li { margin-bottom: 6px; }

.section {
  padding: 46px 0;
}

.section-light { background: var(--surface); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
}

.info-card h4 { margin-bottom: 8px; font-size: 1.05rem; }
.info-card p { margin: 0; font-size: 0.92rem; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.value-card {
  text-align: center;
  padding: 26px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
}

.value-card .glyph {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--marigold-400) !important;
  font-weight: 600;
}

/* ---------------- FOOTER ---------------- */
.footer {
  background: var(--indigo-900);
  color: #cdd6e5;
  padding-top: 52px;
}

.footer-v2 {
  background: var(--green-900);
  color: #cfe3d6;
}

.footer-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.9fr 1.1fr 0.8fr;
  gap: 28px;
}

.footer-v2-grid { align-items: start; }

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: #fff;
  object-fit: contain;
  padding: 3px;
}

.footer-v2 .footer-col h2 { margin-bottom: 2px; }

.footer-tagline {
  color: var(--green-400, #7ed6a0);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.footer-stats {
  display: flex;
  gap: 18px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.footer-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-400, #7ed6a0);
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.footer-stat strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* Scoped to the number/label's own <div> — not ".footer-stat span" —
   because the icon circle above is *also* a <span> and a direct
   child of .footer-stat; the old bare-span selector matched it too
   (with higher specificity than .footer-stat-icon), recoloring it
   grey, shrinking it, and breaking its centering so the icon glyph
   rendered outside the visible circle. */
.footer-stat div span {
  display: block;
  font-size: 0.72rem;
  color: #a9c3ae;
}

.footer-motto {
  font-family: var(--font-display, serif);
  font-style: italic;
  color: var(--green-400, #7ed6a0);
  font-size: 0.95rem;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-motto i { margin-left: 4px; }

.footer-col h2 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.footer-col h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 10px;
}
.footer-v2 .footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--green-400, #7ed6a0);
}

.footer-col p { color: #a9b4c7; font-size: 0.88rem; }
.footer-v2 .footer-col p { color: #b7d0bd; line-height: 1.55; }

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  cursor: pointer;
  padding: 5px 0;
  font-size: 0.9rem;
  color: #a9b4c7;
  transition: color var(--fast) var(--ease);
}
.footer-col li:hover { color: var(--marigold-400); }

.footer-v2 .footer-col li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #dcefe0;
  padding: 7px 0;
}
.footer-v2 .footer-col li i {
  font-size: 0.65rem;
  color: var(--green-400, #7ed6a0);
  flex: 0 0 auto;
}
.footer-v2 .footer-col li:hover { color: var(--marigold-400); }
.footer-v2 .footer-col li a { color: inherit; text-decoration: none; }

.footer-li-sub {
  display: block;
  font-size: 0.74rem;
  color: #93b299;
  font-weight: 400;
}

.footer-contact-list li,
.footer-contact-item {
  cursor: default;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
}

.footer-contact-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-400, #7ed6a0);
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.footer-contact-item a,
.footer-contact-item > span:not(.footer-contact-icon) {
  color: #dcefe0;
  font-size: 0.88rem;
  text-decoration: none;
  line-height: 1.5;
}
.footer-contact-item a:hover { color: var(--marigold-400); }

.footer-follow-note {
  margin-top: 10px;
  font-size: 0.82rem;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--indigo-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--fast) var(--ease);
}
.socials a:hover { background: var(--marigold-600); color: var(--indigo-900); }
.footer-v2 .socials a { background: rgba(255, 255, 255, 0.1); }
.footer-v2 .socials a:hover { background: var(--marigold-600); color: var(--green-900); }

.footer-bottom {
  margin-top: 40px;
  border-top: 1px solid var(--indigo-700);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  color: #8794ab;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.footer-v2 .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #a9c3ae;
}
.footer-payment { font-size: 0.8rem; }

.footer-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--marigold-600);
  background: transparent;
  color: var(--marigold-400);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.footer-share-btn:hover { background: var(--marigold-600); color: var(--indigo-900); }
.footer-share-btn:active { transform: scale(0.97); }
.footer-v2 .footer-share-btn:hover { color: var(--green-900); }

.footer-credit a { color: var(--marigold-400); font-weight: 600; }

/* ---------------- WISHLIST / REVIEWS / COUPON ---------------- */
.wishlist-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease);
}
.wishlist-heart:hover { transform: scale(1.1); }
.wishlist-heart.active { color: var(--danger-600); }

.share-icon-btn {
  position: absolute;
  top: 56px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease);
}
.share-icon-btn:hover { transform: scale(1.1); background: var(--green-100); color: var(--green-700); }

.product-card-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  z-index: 2;
}

.product-description {
  margin: 10px 0;
}

.product-specs {
  margin: 10px 0;
}

/* ---------------- ACCORDION (Description / Specifications) ---------------- */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  padding: 16px 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.accordion-header:hover { color: var(--green-700); }

.accordion-icon {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--green-700);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.accordion-content.open {
  max-height: 3000px;
}

.accordion-content-inner {
  padding-bottom: 18px;
}

.product-description p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.94rem;
  margin: 0 0 10px;
}
.product-description h3 {
  font-size: 1.02rem;
  margin: 16px 0 8px;
  color: var(--green-900);
}
.product-description ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.product-description li {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.94rem;
  margin-bottom: 4px;
}
.product-description .description-hi {
  color: var(--ink-faint);
  font-size: 0.88rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.product-description .description-hi h3 { color: var(--ink-soft); }

.specs-table {
  width: 100%;
  border-collapse: collapse;
}
.specs-table tr:nth-child(odd) { background: var(--surface-sunken); }
.specs-table td {
  padding: 10px 14px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.specs-label {
  font-weight: 600;
  color: var(--ink);
  width: 42%;
}
.specs-value {
  color: var(--ink-soft);
}

.review-summary-box {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin: 4px 0 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.review-summary-left {
  flex: 0 0 auto;
  text-align: center;
  min-width: 100px;
}

.review-avg-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.review-avg-stars {
  color: var(--marigold-600);
  font-size: 1rem;
  letter-spacing: 2px;
  margin: 6px 0 4px;
}

.review-count-text {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.review-summary-bars {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.rating-bar-label {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.rating-bar-label i { font-size: 0.68rem; color: var(--marigold-600); }

.rating-bar-track {
  flex: 1;
  height: 7px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.rating-bar-fill { height: 100%; background: var(--marigold-600); border-radius: 999px; }

.rating-bar-count { flex: 0 0 20px; text-align: right; }

.review-form {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

.star-input {
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  margin-bottom: 10px;
}
.star-input span.filled { color: var(--marigold-600); }

.reviews-list {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 4px;
}

.review-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.review-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.review-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-700);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.review-rating-badge i { font-size: 0.68rem; }

.review-card-name { font-weight: 600; font-size: 0.86rem; }

.review-card-date {
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-left: auto;
}

.review-card-comment {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.review-card-photo {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  border: 1px solid var(--line);
}

.review-photo-picker { margin: 10px 0; }

.review-photo-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-700);
  cursor: pointer;
}

.review-photo-preview-wrap {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}
.review-photo-preview-wrap img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
}
.review-photo-preview-wrap button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--danger-600, #c0392b);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.inline-review-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--green-700);
  cursor: pointer;
  margin-bottom: 8px;
}

.inline-review-photo-preview-wrap {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
}
.inline-review-photo-preview-wrap img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
}
.inline-review-photo-preview-wrap button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--danger-600, #c0392b);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.coupon-row {
  display: flex;
  gap: 8px;
  padding: 0 22px;
  margin-bottom: 6px;
}
.coupon-row input {
  flex: 1;
  min-width: 0;
}
.coupon-row .btn {
  flex-shrink: 0;
}

.coupon-message {
  padding: 0 22px;
  font-size: 0.82rem;
  min-height: 18px;
  margin-bottom: 6px;
}
.coupon-message.ok { color: var(--green-700); }
.coupon-message.err { color: var(--danger-600); }

.coupon-remove-link {
  color: var(--danger-600);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  margin-left: 4px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.cart-summary-discount { color: var(--green-700); }

.cart-min-order-warning {
  color: var(--danger, #c0392b);
  font-weight: 700;
}

/* ---------------- WISHLIST MODAL LIST ---------------- */
.wishlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.wishlist-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}
.wishlist-item .info { flex: 1; }
.wishlist-item .info b { display: block; font-size: 0.92rem; }
.wishlist-item .info span { font-size: 0.85rem; color: var(--green-700); font-weight: 700; }

/* ---------------- FEATURED HOMEPAGE SECTIONS ---------------- */
.featured-section {
  padding: 36px 0;
}
.featured-section:nth-of-type(odd) {
  background: var(--surface);
}

.featured-section-title {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.section-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.section-header-row .featured-section-title {
  margin-bottom: 0;
}

.view-all-link {
  background: none;
  border: none;
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 0;
}
.view-all-link:hover { text-decoration: underline; }

.card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--marigold-700, #b8860b);
  margin: 2px 0;
}
.card-rating i { font-size: 0.72rem; }
.card-rating-count {
  color: var(--ink-faint);
  font-weight: 500;
}

/* ---------------- WHY SHOP STRIP + DELIVERY AREA ---------------- */
.why-shop-section {
  padding: 24px 0;
  background: var(--surface);
}

.why-shop-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.why-shop-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--green-100);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.why-shop-strip-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-700);
  font-size: 1.35rem;
}

.why-shop-strip-item strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

/* Scoped to the text block's own <div> — not ".why-shop-strip-item
   span" — because the icon circle above is *also* a <span> and a
   direct child of .why-shop-strip-item; the old bare-span selector
   was matching it too (with higher specificity than
   .why-shop-strip-icon), quietly shrinking it, recoloring it grey,
   and breaking its centering so the icon glyph rendered outside the
   visible circle. */
.why-shop-strip-item div span {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 1px;
}

.delivery-area-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin: 20px auto 0;
  max-width: 520px;
  background: var(--green-100);
  border-radius: 999px;
  padding: 12px 22px;
}

.delivery-area-icon {
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.delivery-area-note p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--green-900, var(--ink));
}

.featured-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
.featured-row::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, new Edge */
}

.featured-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.featured-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.featured-card h4 {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}

.featured-card p {
  font-weight: 700;
  color: var(--green-700);
  font-size: 0.92rem;
  margin: 0;
}

.featured-card > button {
  border: none;
  border-radius: 999px;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.8rem;
  background: var(--green-700);
  color: #fff;
}

/* ---------------- STANDALONE PRODUCT PAGE ---------------- */
.variant-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

.variant-selector button {
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.variant-selector button:hover { border-color: var(--green-700); }

.variant-selector button.active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}

.product-page-section {
  padding: 32px 0 72px;
}

.product-page-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: start;
}

.product-page-layout .imgContainer {
  border-radius: var(--radius-lg);
}

/* Keeps the photo (and thumbnails) in view while the longer
   description/specs column on the right scrolls past it — only
   makes sense in the two-column desktop layout; the mobile
   single-column stack below cancels this back out. */
.product-page-layout > :first-child {
  position: sticky;
  top: 90px;
}

.product-page-layout .zoomImg {
  height: 380px;
}

#detailName.page-title {
  font-size: 1.8rem;
  margin-top: 10px;
}

#detailPrice.page-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-700);
  margin-bottom: 16px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

.breadcrumb a { color: var(--green-700); }

@media (max-width: 760px) {
  .product-page-layout {
    grid-template-columns: 1fr;
  }
  .product-page-layout .zoomImg {
    height: 260px;
  }
  .product-page-layout > :first-child {
    position: static;
  }
}

/* ---------------- SITE CONTENT ADMIN FORM ---------------- */
.content-field {
  margin-bottom: 14px;
}
.content-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.content-field input,
.content-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

/* ---------------- PROMO BANNER ---------------- */
.promo-banner {
  background: var(--marigold-600);
  color: var(--indigo-900);
  text-align: center;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 16px;
}

.abandoned-cart-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--green-100);
  color: var(--green-900, var(--ink));
  font-weight: 600;
  font-size: 0.88rem;
  padding: 12px 16px;
  position: relative;
}

.abandoned-cart-dismiss {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px;
}
.abandoned-cart-dismiss:hover { color: var(--ink); }

/* ---------------- MEGA MENU ---------------- */
.mega-menu-wrap {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(880px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 28px;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 28px;
  animation: pop-in var(--med) var(--ease);
}

.mega-menu-group h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-700);
  border-bottom: 2px solid var(--green-100);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.mega-menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-group li {
  padding: 4px 0;
}

.mega-menu-group a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease);
}
.mega-menu-group a:hover { color: var(--green-700); }

.mega-menu-icon {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: var(--green-700);
  font-size: 0.85rem;
}

.mega-menu-icon-img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.mega-menu-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
  padding: 20px 0;
}

/* The mega menu's normal styling positions it as an absolute
   dropdown anchored to the header button — inside the "Categories"
   modal it just needs to sit as regular flowing content instead. */
.mega-menu-mobile {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 18px;
  animation: none;
}

/* ---------------- PAYMENT CHOICE (half / full) ---------------- */
.payment-choice-row {
  display: flex;
  gap: 10px;
  padding: 0 22px;
}

.payment-choice-row button {
  flex: 1;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}

.payment-choice-row button:hover { border-color: var(--green-600); }

.payment-choice-row button span {
  font-size: 1rem;
  color: var(--green-700);
  font-weight: 700;
}

.payment-choice-row button.active {
  border-color: var(--green-700);
  background: var(--green-100);
  box-shadow: 0 2px 8px rgba(15, 74, 43, 0.12);
}

/* ---------------- MOBILE NAV ---------------- */
.mobile-nav-toggle {
  display: none;
  border: none;
  background: var(--surface-sunken);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--ink);
  flex-shrink: 0;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .mobile-nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 18px;
    box-shadow: var(--shadow-md);
    z-index: 45;
    /* Being position:absolute takes this out of normal document
       flow, so the page's own scrollbar never grows to fit a long
       dropdown — it just gets cut off at the viewport edge with no
       way to reach the rest. Making the dropdown scroll internally
       fixes that regardless of how many categories it lists.
       The fixed mobile bottom-nav bar (~70px) also eats into the
       bottom of the viewport, so that has to be subtracted too —
       otherwise the last few categories end up hidden behind it
       even while the dropdown itself thinks it's fully scrolled. */
    max-height: calc(100vh - 90px - 76px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }

  .main-nav.mobile-open { display: flex; }

  .main-nav a {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
  }

  .mega-menu-wrap { width: 100%; }
  .mega-menu-wrap .icon-btn { width: 100%; justify-content: center; }

  .mega-menu {
    position: static;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    box-shadow: none;
    border: none;
    padding: 6px 0 0;
    margin-top: 8px;
    grid-template-columns: 1fr;
    gap: 16px;
    animation: none;
  }

  .cards { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr 1fr; }

  /* ---- Tighter, punchier hero on mobile — the desktop version has
     a lot of breathing room that just reads as empty space on a
     phone screen. ---- */
  .hero { padding: 32px 0 40px; }
  .hero-intro { margin-bottom: 28px; }
  .hero-intro h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); line-height: 1.15; margin: 10px 0 10px; }
  .hero-intro p { font-size: 0.95rem; }
  .trust-chips { gap: 8px; }
  .trust-chip { font-size: 0.78rem; padding: 7px 12px; }

  /* ---- Section rhythm — less dead air between blocks on a phone ---- */
  .section { padding: 32px 0; }
  .page-hero { padding: 32px 0 22px; }

  /* ---- Store-picker cards feel more "native app" with softer
     corners and a shorter image — and since hover doesn't exist on
     touch, swap that lift-on-hover for a gentle press-down instead. ---- */
  .card { border-radius: 20px; }
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
  .card img { height: 140px; }
  .card-body { padding: 20px 18px 18px; }

  /* ---- Product grid — a touch tighter so more fits per row without
     feeling cramped, and cards get the same soft-corner treatment. ---- */
  .products { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
  .product { border-radius: 16px; padding: 12px; }
  .product:hover { transform: none; box-shadow: none; }
  .product:active { transform: scale(0.98); }
  .product h4 { font-size: 0.88rem; }

  /* ---- Comfortable tap targets everywhere — 44px is the standard
     minimum for a finger-friendly button. ---- */
  .categories button,
  .icon-btn,
  .btn-sm {
    min-height: 40px;
  }
  .btn { min-height: 44px; }

  .categories button:active { transform: scale(0.96); }
  .icon-btn:active { transform: scale(0.96); }

  /* Wishlist / Orders / Cart move down to the bottom nav bar on
     mobile — that's what was crowding the header and pushing the
     brand name off-screen. Logout moves into the bottom nav too —
     !important here because this needs to win over the base
     .icon-btn / .logout-btn rules regardless of their own specificity
     or source order. */
  .header-actions .icon-btn,
  .header-actions .logout-btn,
  #userGreeting {
    display: none !important;
  }

  /* The container itself also needs to go, not just its children —
     otherwise it still sits in the header's flex row as an empty
     box, leaving a gap between the hamburger button and the actual
     right edge instead of the hamburger being flush against it. */
  .header-actions {
    display: none !important;
  }

  .mobile-nav-logout { display: none; }

  /* "All Categories" and Logout both moved to the bottom nav bar
     (Categories, Logout) — no need for them a second time inside
     the hamburger dropdown too. */
  .mega-menu-wrap { display: none; }

  .mobile-bottom-nav { display: flex !important; }
  body { padding-bottom: 70px; }
  #whatsappFloat { bottom: 80px; }
  .back-to-top-btn { bottom: 146px; }
  #cartBar { bottom: 80px; }
}

@media (min-width: 901px) {
  .mobile-nav-logout { display: none; }
  .category-square-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------- MOBILE BOTTOM NAV ---------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 20px rgba(28, 27, 24, 0.1);
  padding: 8px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  padding: 6px 1px;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.mobile-bottom-nav-item i { font-size: 1.02rem; transition: transform var(--fast) var(--ease); }

.mobile-bottom-nav-item.active,
.mobile-bottom-nav-item:active {
  color: var(--green-700);
}

.mobile-bottom-nav-item.active { background: var(--green-100); }
.mobile-bottom-nav-item.active i { transform: translateY(-1px); }
.mobile-bottom-nav-item:active { transform: scale(0.94); }

.mobile-bottom-nav-item .cart-badge {
  position: absolute;
  top: 0;
  right: 22%;
  font-size: 0.6rem;
  padding: 0 5px;
}

@media (min-width: 901px) {
  .mobile-bottom-nav { display: none !important; }
}

@media (max-width: 560px) {
  .header-actions .icon-btn span.label { display: none; }
  #userGreeting { display: none; }
  .products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cart-box { max-width: 100%; }

  /* Tiles get tight on phones — smaller minimum column and a
     slightly smaller tile cap so 4-5 fit per row with breathing
     room, instead of squeezing the desktop sizing down. */
  .category-tiles {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 12px 8px;
  }
  .category-tile { max-width: 68px; }
  .category-tile-label { font-size: 0.62rem; }

  .category-square-grid { gap: 10px; }
  .category-square-label { font-size: 0.72rem; }

  .store-content-row { gap: 8px; }
  .category-detail-sidebar {
    width: 112px;
    top: 70px;
    padding-right: 6px;
  }
  .category-detail-sidebar-item { padding: 8px 4px; font-size: 0.66rem; gap: 4px; line-height: 1.2; }
  .category-detail-sidebar-img-wrap { width: 44px; height: 44px; }

  .why-shop-strip { grid-template-columns: repeat(2, 1fr); }
  .why-shop-strip-item { padding: 12px 14px; }
  .why-shop-strip-icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .delivery-area-note { flex-direction: column; gap: 4px; padding: 14px 18px; }
  .delivery-check-box { padding: 14px 16px; margin-bottom: 24px; }
  .delivery-check-row { flex-direction: column; }

  .brand-tagline { display: none; }
  .brand-name { font-size: 1rem; white-space: nowrap; }
  .brand img { width: 42px; height: 42px; }
  .site-header .container { gap: 6px; padding-left: 14px; padding-right: 14px; }
  .mobile-nav-toggle { width: 36px; height: 36px; }

  /* ---- Footer — instead of just stacking every section with the
     same spacing (which reads as a wall of text), give each block
     its own card-like section with a soft divider, and roomier tap
     targets for the Quick Links. ---- */
  .footer { padding-top: 36px; }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-col {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-col:first-child { padding-top: 0; }
  .footer-col:last-child { border-bottom: none; padding-bottom: 4px; }
  .footer-col h2 { font-size: 1.15rem; }
  .footer-col li { padding: 8px 0; font-size: 0.95rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 28px;
  }
}

/* ---------------- SKELETON LOADING ---------------- */
.shimmer {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--line) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer-sweep 1.4s ease infinite;
}

@keyframes shimmer-sweep {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.skeleton-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 12px;
  border: 1px solid var(--line);
}

.skeleton-img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.skeleton-line {
  height: 11px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.skeleton-tile .skeleton-img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 0;
}

.skeleton-row-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}

/* ---------------- EMPTY STATES ---------------- */
.empty-state {
  text-align: center;
  padding: 52px 20px;
  color: var(--ink-faint);
  grid-column: 1 / -1;
}

.empty-state-icon {
  font-size: 2.4rem;
  color: var(--line-strong);
  margin-bottom: 14px;
}

.empty-state-message {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
}

.empty-state-subtext {
  font-size: 0.86rem;
  margin: 6px 0 0;
  color: var(--ink-faint);
}

/* ---------------- ENTRANCE ANIMATIONS ---------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.product,
.category-tile,
.cards .card,
.featured-card {
  animation: fadeInUp 0.36s ease both;
}

.product:nth-child(1)  { animation-delay: 0.02s; }
.product:nth-child(2)  { animation-delay: 0.05s; }
.product:nth-child(3)  { animation-delay: 0.08s; }
.product:nth-child(4)  { animation-delay: 0.11s; }
.product:nth-child(5)  { animation-delay: 0.14s; }
.product:nth-child(6)  { animation-delay: 0.17s; }
.product:nth-child(7)  { animation-delay: 0.20s; }
.product:nth-child(8)  { animation-delay: 0.23s; }
.product:nth-child(9)  { animation-delay: 0.26s; }
.product:nth-child(10) { animation-delay: 0.29s; }
.product:nth-child(n+11) { animation-delay: 0.32s; }

.category-tile:nth-child(1)  { animation-delay: 0.02s; }
.category-tile:nth-child(2)  { animation-delay: 0.045s; }
.category-tile:nth-child(3)  { animation-delay: 0.07s; }
.category-tile:nth-child(4)  { animation-delay: 0.095s; }
.category-tile:nth-child(5)  { animation-delay: 0.12s; }
.category-tile:nth-child(6)  { animation-delay: 0.145s; }
.category-tile:nth-child(7)  { animation-delay: 0.17s; }
.category-tile:nth-child(8)  { animation-delay: 0.195s; }
.category-tile:nth-child(n+9) { animation-delay: 0.22s; }

.cards .card:nth-child(1) { animation-delay: 0.05s; }
.cards .card:nth-child(2) { animation-delay: 0.12s; }
.cards .card:nth-child(3) { animation-delay: 0.19s; }

.featured-card:nth-child(1) { animation-delay: 0.02s; }
.featured-card:nth-child(2) { animation-delay: 0.06s; }
.featured-card:nth-child(3) { animation-delay: 0.10s; }
.featured-card:nth-child(4) { animation-delay: 0.14s; }
.featured-card:nth-child(n+5) { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .product, .category-tile, .cards .card, .featured-card, .shimmer {
    animation: none !important;
  }
}