/* =========================================================
   A ONE MART — Design System
   Clean Home, Better Life
   ========================================================= */

/* Author styles beat the UA stylesheet regardless of specificity, so any
   .btn{display:inline-flex}-style rule silently wins over the browser's own
   [hidden]{display:none} the moment a hidden element also carries that
   class — the element stays fully visible, `hidden` attribute or not. Hit
   twice in one session (product.php's description toggle, checkout's wizard
   Back button) before landing here as one global fix, matching the same
   guard admin.css already carries for the identical reason. */
[hidden] { display: none !important; }

:root {
  --navy: #0f1a4d;
  --navy-2: #16225e;
  --navy-soft: #1e2a66;
  --green: #43a047;
  --green-2: #6dbf3f;
  --green-soft: #e8f5e9;
  --white: #ffffff;
  --bg-soft: #f6f9f7;
  --bg-tint: #eef4f0;
  --text-dark: #1b2340;
  --text-muted: #5b6478;
  --border: #e3e8e6;
  --danger: #d64545;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(15, 26, 77, 0.08);
  --shadow-lift: 0 14px 34px rgba(15, 26, 77, 0.15);
  --maxw: 1240px;
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bottom-nav-h: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 70px 0; }
.section-tight { padding: 46px 0; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.eyebrow {
  display: inline-block;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 10px;
}
.section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 10px;
}
.section-head p { color: var(--text-muted); font-size: 1rem; }

.bg-soft { background: var(--bg-soft); }
.bg-navy { background: var(--navy); color: var(--white); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn-primary { background: var(--green); color: var(--white); box-shadow: 0 8px 20px rgba(67,160,71,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(67,160,71,.36); background: #388e3c; }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 8px 20px rgba(15,26,77,.25); }
.btn-navy:hover { transform: translateY(-2px); background: var(--navy-2); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--navy); transform: translateY(-2px); }
.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-whatsapp { background: #25D366; color: var(--white); box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.btn-whatsapp:hover { transform: translateY(-2px); background: #1ebc59; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* =========== TOP BAR =========== */
.topbar {
  background: var(--navy);
  color: #cfd6ef;
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar a { color: #cfd6ef; transition: color .15s; }
.topbar a:hover { color: var(--green-2); }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar-social { display: flex; gap: 12px; }
.topbar-social a { font-size: 1rem; }

/* =========== HEADER / NAVBAR =========== */
.header {
  background: var(--white);
  box-shadow: 0 2px 12px rgba(15,26,77,.06);
  position: sticky;
  top: 0;
  z-index: 500;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
  transition: padding .2s ease;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 52px; width: 52px; border-radius: 50%; object-fit: cover; transition: height .2s ease, width .2s ease; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; transition: opacity .15s ease, max-width .2s ease; overflow: hidden; }
.header.is-scrolled .navbar { padding: 7px 0; }
.header.is-scrolled .brand img { height: 34px; width: 34px; }
.header.is-scrolled .brand-text { opacity: 0; max-width: 0; }
@media (min-width: 993px) {
  .header.is-scrolled .brand-text { opacity: 1; max-width: 220px; }
}
.brand-text strong { font-size: 1.18rem; color: var(--navy); font-weight: 800; letter-spacing: .3px; }
.brand-text span { font-size: 0.72rem; color: var(--green); font-weight: 600; }

/* =========== SEARCH BAR =========== */
.search-form { flex: 1 1 auto; max-width: 640px; margin: 0 8px; }
.search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-tint);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  transition: border-color .15s, background .15s;
}
.search-bar:focus-within { border-color: var(--green); background: var(--white); }
.search-bar input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 0.94rem;
  color: var(--text-dark);
  min-width: 0;
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar button {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
}
.search-bar button:hover { background: var(--green-2); }

/* =========== CATEGORY ICON NAV (secondary bar) =========== */
.category-nav {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.category-nav .container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.category-nav .container::-webkit-scrollbar { display: none; }
.category-nav a {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--text-dark);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  transition: color .15s, background .15s;
  animation: navPillIn .35s ease backwards;
}
.category-nav a:nth-child(1) { animation-delay: .02s; }
.category-nav a:nth-child(2) { animation-delay: .06s; }
.category-nav a:nth-child(3) { animation-delay: .1s; }
.category-nav a:nth-child(4) { animation-delay: .14s; }
.category-nav a:nth-child(5) { animation-delay: .18s; }
.category-nav a:nth-child(6) { animation-delay: .22s; }
.category-nav a:nth-child(7) { animation-delay: .26s; }
.category-nav a:nth-child(8) { animation-delay: .3s; }
@keyframes navPillIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .category-nav a { animation: none; }
}
.category-nav a:hover, .category-nav a.active { color: var(--green); background: var(--green-soft); }
.category-nav a i {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--navy);
  font-size: 1.05rem;
  transition: background .15s, color .15s;
}
.category-nav a:hover i, .category-nav a.active i { background: var(--green); color: var(--white); }

.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-menu a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  position: relative;
  padding: 6px 0;
  transition: color .15s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--green); }
.nav-menu a.active::after, .nav-menu a:hover::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--green); border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--navy);
  font-size: 1.15rem;
  transition: background .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: var(--green); color: var(--white); transform: translateY(-2px); }
.cart-badge, .wishlist-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--green);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
  padding: 0 3px;
}
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-tint);
  align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--navy);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 10px 20px 18px;
}
.mobile-nav a {
  padding: 12px 4px;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a.active { color: var(--green); }
.mobile-nav.open { display: flex; }

/* =========== BOTTOM MOBILE NAV =========== */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(15,26,77,.10);
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  animation: bottomNavRise .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes bottomNavRise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav { animation: none; }
}
.bottom-nav-indicator {
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 40px;
  border-radius: 0 0 4px 4px;
  background: var(--green);
  opacity: 0;
  transition: transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .2s;
  pointer-events: none;
}
.bottom-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 7px 2px 4px;
  border: none; background: none;
  font-family: inherit;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: .1px;
}
.bottom-nav-icon-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 3px 16px;
  border-radius: 14px;
  transition: background .25s ease;
}
.bottom-nav-item i {
  font-size: 1.14rem;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .2s;
}
.bottom-nav-label { transition: color .2s; white-space: nowrap; }
.bottom-nav-item.active { color: var(--green); }
.bottom-nav-item.active .bottom-nav-icon-wrap { background: var(--green-soft); }
.bottom-nav-item.active i { transform: scale(1.1); }
.bottom-nav-item:active i { transform: scale(.86); }
.bottom-nav-badge {
  position: absolute;
  top: -2px; right: 6px;
  background: var(--green);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  min-width: 15px; height: 15px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
  padding: 0 2px;
}

/* =========== MORE PAGE (mobile "More" tab destination) =========== */
.more-page { max-width: 620px; }
.more-section { margin-bottom: 24px; }
.more-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  padding: 0 4px 10px;
}
.more-list {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.more-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .15s;
}
.more-row:last-child { border-bottom: none; }
.more-row:hover { background: var(--bg-tint); }
.more-row > i:first-child {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.more-row-trailing {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.more-row-badge {
  position: static;
  background: var(--green);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: none;
}

/* =========== VISITING CARD (contact page) =========== */
.visiting-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-bottom: 24px;
}
.visiting-card img { display: block; width: 100%; height: auto; }

/* =========== HERO: product/offer promotional carousel =========== */
.hero-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  height: 420px;
}
.hero-track { display: flex; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.hero-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #1a2a70 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero-slide::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(109,191,63,.2), transparent 70%);
  top: -140px; right: -100px;
  border-radius: 50%;
  pointer-events: none;
}
.hero-slide.skeleton-slide { background: var(--bg-soft); }
.hero-slide.skeleton-slide::before { display: none; }
.hero-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  height: 100%;
  position: relative;
  z-index: 2;
}
.hero-slide-badge {
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.hero-slide-badge-trending { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.hero-slide-info h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
}
.hero-slide-info p {
  color: #c7cfec;
  font-size: 0.96rem;
  margin-bottom: 16px;
}
.hero-slide-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.hero-slide-price .price-now { font-size: 1.7rem; font-weight: 800; color: var(--white); }
.hero-slide-price .price-mrp { font-size: 1rem; color: #97a1c9; text-decoration: line-through; }
.hero-slide-price .price-off { font-size: 0.85rem; font-weight: 700; color: var(--green-2); }
.hero-slide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-slide-media {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;
}
.hero-slide-media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.3));
  user-select: none; -webkit-user-drag: none;
}
.hero-slide-media-icon .hero-illustration {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  color: var(--green-2);
}
.hero-slide-banner .hero-slide-info h2 { max-width: 460px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(15,26,77,.55); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; z-index: 3; opacity: 0; transition: opacity .2s, background .2s;
}
.hero-carousel:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: var(--green); }
.hero-arrow-prev { left: 14px; }
.hero-arrow-next { right: 14px; }
.hero-carousel[data-count="1"] .hero-arrow, .hero-carousel[data-count="1"] .hero-dots { display: none; }
.hero-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: background .2s, width .2s;
}
.hero-dots button.active { background: var(--white); width: 22px; border-radius: 5px; }
/* The 420px base height was sized for the mobile stacked layout — on a
   genuine desktop viewport (2-column .hero-slide-inner, larger clamp()
   font sizes) the badge+title+desc+price+buttons stack is taller than that
   and the actions row got clipped by this container's overflow:hidden. */
@media (min-width: 993px) {
  .hero-carousel { height: 480px; }
}
@media (max-width: 480px) {
  .hero-arrow { opacity: 1; width: 34px; height: 34px; font-size: 0.8rem; }
}

/* =========== SKELETON LOADING + CARD ENTRANCE ANIMATION =========== */
.skeleton-block {
  display: block;
  background: linear-gradient(90deg, var(--bg-tint) 25%, var(--border) 37%, var(--bg-tint) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.lg { height: 18px; }
.skeleton-line.sm { height: 10px; }
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card-in { animation: cardFadeIn .45s ease backwards; }
.product-grid .card-in:nth-child(1), .cat-grid .card-in:nth-child(1) { animation-delay: .03s; }
.product-grid .card-in:nth-child(2), .cat-grid .card-in:nth-child(2) { animation-delay: .07s; }
.product-grid .card-in:nth-child(3), .cat-grid .card-in:nth-child(3) { animation-delay: .11s; }
.product-grid .card-in:nth-child(4), .cat-grid .card-in:nth-child(4) { animation-delay: .15s; }
.product-grid .card-in:nth-child(5) { animation-delay: .19s; }
.product-grid .card-in:nth-child(6) { animation-delay: .23s; }
.product-grid .card-in:nth-child(7) { animation-delay: .27s; }
.product-grid .card-in:nth-child(8) { animation-delay: .31s; }
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; background: var(--bg-tint); }
  .card-in { animation: none; }
}

/* =========== CATEGORIES =========== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.cat-icon {
  width: 66px; height: 66px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--green-soft), #dcefe0);
  color: var(--green);
}
.cat-icon-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--bg-tint); }
.cat-icon-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 6px; font-weight: 700; }
.cat-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.cat-card a { font-size: 0.85rem; font-weight: 700; color: var(--green); }

/* =========== PRODUCTS =========== */
.filter-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.filter-btn {
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--bg-tint);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all .15s;
  border: 2px solid transparent;
}
.filter-btn:hover { border-color: var(--green); }
.filter-btn.active { background: var(--green); color: var(--white); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-tint);
  overflow: hidden;
  padding: 14px;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-emoji {
  position: absolute;
  top: 12px; left: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.badge-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: .3px;
}
.badge-tag.trending { background: var(--green); }
.product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-cat { font-size: 0.72rem; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.product-body h3 {
  font-size: 1rem; color: var(--navy); font-weight: 700;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 2.6em;
}
.product-body p {
  font-size: 0.83rem; color: var(--text-muted); flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.price-now { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.price-old { font-size: 0.85rem; color: #a3aab8; text-decoration: line-through; }
.product-actions { display: flex; gap: 8px; margin-top: 10px; }
.product-actions .btn { flex: 1; padding: 10px 12px; font-size: 0.82rem; }

.view-all-wrap { text-align: center; margin-top: 40px; }

/* =========== WHY CHOOSE US =========== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.why-icon {
  min-width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.why-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.why-card p { font-size: 0.86rem; color: var(--text-muted); }

/* =========== ABOUT =========== */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.about-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); }
.about-copy h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--navy); font-weight: 800; margin-bottom: 16px; }
.about-copy p { color: var(--text-muted); margin-bottom: 16px; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.about-points li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.about-points li i { color: var(--green); }

/* =========== ORDER PROCESS =========== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.step-card { text-align: center; position: relative; }
.step-num {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  border: 2px solid var(--green);
}
.step-card h4 { font-size: 0.92rem; color: var(--navy); margin-bottom: 6px; }
.step-card p { font-size: 0.78rem; color: var(--text-muted); }

/* =========== CTA STRIP =========== */
.cta-strip {
  background: linear-gradient(120deg, var(--green) 0%, var(--green-2) 100%);
  color: var(--white);
  border-radius: 22px;
  padding: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-strip h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.cta-strip p { opacity: .92; }
.cta-strip-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========== FOOTER =========== */
.footer { background: var(--navy); color: #c6cde8; }
.footer-top { padding: 60px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; }
.footer-brand strong { color: var(--white); font-size: 1.1rem; font-weight: 800; }
.footer p.desc { font-size: 0.86rem; line-height: 1.7; margin-bottom: 16px; color: #aeb6d9; }
.footer h4 { color: var(--white); font-size: 1rem; margin-bottom: 18px; font-weight: 700; }
.footer ul li { margin-bottom: 11px; font-size: 0.88rem; }
.footer ul li a:hover { color: var(--green-2); }
.footer .contact-item { display: flex; gap: 10px; margin-bottom: 14px; font-size: 0.87rem; align-items: flex-start; }
.footer .contact-item i { color: var(--green-2); margin-top: 3px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.footer-social a:hover { background: var(--green); transform: translateY(-3px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #98a1c7;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-credit {
  font-size: 0.74rem;
  color: #6b729a;
}
.footer-credit a {
  color: #8a91bd;
  text-decoration: none;
}
.footer-credit a:hover {
  color: var(--green, #43a047);
  text-decoration: underline;
}

/* =========== WHATSAPP FLOAT =========== */
.wa-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  background: #25D366;
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 10px 24px rgba(37,211,102,.42);
  z-index: 400;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 10px 24px rgba(37,211,102,.42); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 10px 24px rgba(37,211,102,.42); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 10px 24px rgba(37,211,102,.42); }
}

/* =========== TOAST =========== */
.toast {
  position: fixed;
  top: 90px; right: 24px;
  background: var(--navy);
  color: var(--white);
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  z-index: 900;
  display: flex; align-items: center; gap: 10px;
  transform: translateX(140%);
  transition: transform .3s ease;
}
.toast.show { transform: translateX(0); }
.toast i { color: var(--green-2); }

/* =========== BREADCRUMB / PAGE HEAD =========== */
.page-head {
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color: var(--white);
  padding: 46px 0;
  text-align: center;
}
.page-head h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 8px; }
.page-head .crumbs { font-size: 0.85rem; color: #b9c1e6; }
.page-head .crumbs a:hover { color: var(--green-2); }

/* =========== CART PAGE =========== */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: flex-start; }
.cart-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cart-table th { background: var(--bg-tint); text-align: left; padding: 14px 16px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); }
.cart-table td { padding: 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.cart-product { display: flex; align-items: center; gap: 14px; }
.cart-product img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg-tint); }
.cart-product-name { font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.cart-product-cat { font-size: 0.76rem; color: var(--text-muted); }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 50px; overflow: hidden; }
.qty-control button { width: 30px; height: 30px; font-size: 1rem; color: var(--navy); font-weight: 700; }
.qty-control button:hover { background: var(--bg-tint); }
.qty-control span { width: 32px; text-align: center; font-weight: 700; font-size: 0.88rem; }
.remove-btn { color: var(--danger); font-size: 1.05rem; }
.remove-btn:hover { transform: scale(1.15); }

.summary-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  position: sticky;
  top: 90px;
}
.summary-card h3 { color: var(--navy); font-size: 1.05rem; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; }
.summary-row.total { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 6px; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
/* =========== CATEGORY BROWSER (Flipkart-style two-column) =========== */
.cat-browse {
  display: grid;
  /* ~28% to the rail, floored at 84px so it can't crush the image+label —
     the remaining ~72% is what the product grid actually gets to work
     with, which is the number that matters on a narrow phone. min-width:0
     on both tracks' content (below) is what actually stops overflow;
     minmax() alone doesn't guarantee it once real content is inside. */
  grid-template-columns: minmax(84px, 28%) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(15,26,77,.05), 0 10px 28px rgba(15,26,77,.06);
  min-height: 60vh;
  /* Lets the rail stick instead of stretching to the row height. Note this
     container must NOT have overflow:hidden — that would clip position:sticky. */
  align-items: start;
}
.cat-rail {
  min-width: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  border-radius: 20px 0 0 20px;
  /* Cards, so they need their own spacing rather than sitting flush. */
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 6px;
  /* The rail stays put while the product panel scrolls. It only scrolls on its
     own once there are more categories than fit the viewport. */
  position: sticky;
  top: 10px;
  align-self: start;
  max-height: calc(100vh - var(--bottom-nav-h) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (min-width: 993px) {
  /* The header is sticky at this width, so clear it. */
  .cat-rail { top: 92px; max-height: calc(100vh - 110px); }
}
/* Each category is its own card in the rail, with the active one outlined in
   green and marked by a short underline beneath the label. */
.cat-rail-item {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 4px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* A category label wraps like a normal sentence — up to 3 lines is fine —
   never mid-word. The site-wide overflow-wrap:anywhere reset
   (production.css) exists for long unbroken strings like URLs; a category
   name is never that, so it's switched back to normal here. */
.cat-rail-label {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
  overflow-wrap: normal; word-break: normal;
}
.cat-rail-item:hover { border-color: #cfdad4; box-shadow: 0 4px 12px rgba(15,26,77,.06); }
.cat-rail-item.active {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--navy);
  font-weight: 700;
}
.cat-rail-item.active::after {
  content: "";
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 99px;
  background: var(--green);
}
.cat-rail-img {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
/* contain so a category's packshot is never cropped, matching the tiles */
.cat-rail-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; }

.cat-panel { min-width: 0; padding: 12px; overflow: hidden; }
.cat-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cat-panel-head h2 { color: var(--navy); font-size: 1.15rem; font-weight: 800; overflow-wrap: normal; word-break: normal; }
.cat-panel-head a { font-size: 0.8rem; font-weight: 700; color: var(--green); white-space: nowrap; overflow-wrap: normal; }
.cat-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .cat-panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .cat-browse { grid-template-columns: 150px minmax(0, 1fr); }
  .cat-panel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-rail-item { font-size: 0.78rem; }
  .cat-rail-img { width: 66px; height: 66px; }
}
/* Full row height so every tile in a row is the same size, with the action
   pinned to the bottom — otherwise a long name makes one card taller than
   its neighbour and the prices stop lining up across the row. */
.cat-tile {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 8px 8px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,26,77,.04), 0 6px 16px rgba(15,26,77,.06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.cat-tile:hover { box-shadow: 0 4px 10px rgba(15,26,77,.07), 0 14px 30px rgba(15,26,77,.10); transform: translateY(-2px); }
/* Grows to fill the card so the price's margin-top:auto pushes it to the
   bottom of the link, keeping prices on one line across a row while the
   Add to Cart button stays pinned to the very bottom of the card. */
.cat-tile-link { min-width: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.cat-tile-wish {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--text-muted);
  font-size: .85rem; cursor: pointer;
  transition: color .15s, transform .15s;
}
.cat-tile-wish:hover { transform: scale(1.1); }
.cat-tile-wish.active { color: #e53935; }
.cat-tile-img {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  /* Light tinted ground, not pure white, so the packshot reads as sitting
     "in" the card rather than floating on an identical white background. */
  background: var(--bg-tint);
}
/* contain, not cover: product packshots must never be cropped */
.cat-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
/* This is the element the bug report was actually about: at the narrow
   width this column gets on a phone, the site-wide overflow-wrap:anywhere
   reset (production.css, meant for things like long emails/URLs) was
   letting "Add to Cart" fragment mid-word instead of just staying put.
   white-space:nowrap is the real fix — a short, known label should never
   wrap at all, only shrink via font-size at the narrowest breakpoint below. */
.cat-tile-add {
  margin-top: 10px;
  width: 100%;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px;
  border: 0; border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
  font-family: inherit; font-size: .74rem; font-weight: 700;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  cursor: pointer; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.cat-tile-add:hover { background: var(--green); color: var(--white); }
.cat-tile-add:active { transform: scale(.97); }
.cat-tile-add:disabled { background: var(--bg-tint); color: var(--text-muted); cursor: not-allowed; }
.cat-tile-add:disabled:hover { background: var(--bg-tint); color: var(--text-muted); }
.cat-tile-add i { font-size: .82em; }
/* Extra headroom from here up (tablet/desktop): larger rail thumbnails,
   more grid columns and the roomier spacing the tightened mobile rules
   above gave up. */
@media (min-width: 480px) {
  .cat-tile { padding: 12px 12px 14px; border-radius: var(--radius); }
  .cat-tile-add { font-size: .8rem; padding: 9px 10px; gap: 7px; }
}
@media (max-width: 359px) {
  /* The floor: iPhone SE-class widths. Shrink the label rather than let it
     wrap — an 11-character button label has no natural break point that
     would look intentional. */
  .cat-tile-add { font-size: .66rem; padding: 7px 3px; gap: 3px; }
}
/* Clamped to two lines, with min-height so a one-line name still reserves
   the same space — same treatment as the product cards on the homepage. */
.cat-tile-name {
  font-size: 0.78rem; font-weight: 600; color: var(--text-dark); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 2.6em;
  /* Wraps at word boundaries like a sentence, never mid-word — see the note
     on .cat-tile-add above about why this needs to override the site-wide
     default here. */
  overflow-wrap: normal; word-break: normal;
}
/* nowrap keeps ₹ glued to the number it prices; if the pair (plus a struck-
   through MRP) doesn't fit one line, wrapping onto a second line is fine —
   only fragmenting the digits themselves is the thing to prevent. */
.cat-tile-price { font-size: 0.82rem; font-weight: 800; color: var(--navy); margin-top: auto; overflow-wrap: normal; word-break: normal; }
.cat-tile-price, .cat-tile-price .old { white-space: nowrap; }
.cat-tile-price .old { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); text-decoration: line-through; margin-left: 5px; }
@media (max-width: 359px) {
  /* Verified by measurement, not guesswork: at this width the tile column
     is ~80px, and 10+ character names like "Humidifier" or "Freshener"
     were still catching the site-wide overflow-wrap:anywhere and breaking
     mid-word even with word-break:normal set — normal only chooses WHERE
     it's allowed to break, it doesn't stop overflow-wrap from finding a
     forced break point when nothing else fits. Dropping the font size a
     touch buys enough room that whole words fit their line. */
  .cat-tile-name { font-size: .72rem; }
}
@media (min-width: 480px) {
  .cat-tile-name { font-size: 0.82rem; }
  .cat-tile-price { font-size: 0.86rem; }
  .cat-tile-price .old { font-size: 0.74rem; }
}

/* Shown when a product's image file is missing — a calm branded placeholder
   instead of a broken-image icon with sprawling alt text. */
.img-missing {
  object-fit: contain !important;
  padding: 18%;
  background: var(--bg-tint);
  opacity: .45;
}
.coupon-box { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input-row input {
  flex: 1; min-width: 0;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.88rem;
  text-transform: uppercase;
  color: var(--text-dark);
  background: var(--white);
}
.coupon-input-row input:focus { outline: none; border-color: var(--green); }
.coupon-input-row input:read-only { background: var(--bg-tint); color: var(--text-muted); }
.coupon-input-row .btn { flex: none; padding: 11px 18px; font-size: 0.85rem; }
.coupon-msg { font-size: 0.78rem; margin-top: 8px; line-height: 1.4; }
.coupon-msg.ok { color: var(--green); font-weight: 600; }
.coupon-msg.err { color: var(--danger); }
.empty-cart { text-align: center; padding: 60px 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.empty-cart i { font-size: 3rem; color: var(--border); margin-bottom: 16px; }
.empty-cart h3 { color: var(--navy); margin-bottom: 8px; }
.empty-cart p { color: var(--text-muted); margin-bottom: 22px; }

/* =========== CHECKOUT =========== */
.checkout-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: flex-start; }
.account-banner {
  background: linear-gradient(135deg, var(--bg-tint), var(--green-soft));
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-bottom: 18px;
}
.account-banner h2 { color: var(--navy); font-size: 1.25rem; margin-bottom: 3px; }
.account-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 600px) { .account-quick-grid { grid-template-columns: repeat(4, 1fr); } }
.account-quick-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.account-quick-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.account-quick-card i { font-size: 1.4rem; color: var(--green); }
.form-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.form-card h3 { color: var(--navy); margin-bottom: 18px; font-size: 1.08rem; display: flex; align-items: center; gap: 10px; }
.form-card h3 .step-chip { background: var(--green); color: var(--white); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.form-group label .opt { color: var(--text-muted); font-weight: 400; }
.form-group input, .form-group textarea, .form-group select {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-dark);
  transition: border-color .15s;
  background: var(--white);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--green); }
.form-group textarea { resize: vertical; min-height: 80px; }
.phone-number-control { display: flex; align-items: stretch; }
.phone-number-control .country-code { display: flex; align-items: center; padding: 12px 13px; border: 1.5px solid var(--border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--bg-tint); color: var(--navy); font-size: .9rem; font-weight: 800; white-space: nowrap; user-select: none; }
.phone-number-control input { min-width: 0; flex: 1; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.phone-number-control:focus-within .country-code { border-color: var(--green); }
.field-help { color: var(--text-muted); font-size: .72rem; line-height: 1.35; }
.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.badge.gray { background: var(--bg-tint); color: var(--text-muted); }
.badge.blue { background: #e3f2fd; color: #1565c0; }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red { background: #ffebee; color: #c62828; }
.order-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.order-item:last-child { border-bottom: none; }
.empty { text-align: center; padding: 30px; color: var(--text-muted); }
.file-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
  position: relative;
}
.file-upload:hover { border-color: var(--green); }
.file-upload i { font-size: 1.6rem; color: var(--green); margin-bottom: 8px; display: block; }
.file-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-upload .file-name { margin-top: 8px; font-size: 0.82rem; font-weight: 700; color: var(--navy); }

.qr-box {
  background: var(--bg-tint);
  border: 2px dashed #b9c6be;
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  margin-bottom: 18px;
}
.qr-placeholder {
  width: 168px; height: 168px;
  margin: 0 auto 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: #9aa2b6;
}
.qr-placeholder i { font-size: 2.6rem; color: var(--navy); opacity: .35; }
.qr-placeholder span { font-size: 0.68rem; font-weight: 700; text-align: center; padding: 0 10px; color: var(--text-muted); }
.qr-box .amount { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.qr-box .upi { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.pay-steps { text-align: left; max-width: 320px; margin: 0 auto; }
.pay-steps li { display: flex; gap: 10px; font-size: 0.85rem; color: var(--text-dark); margin-bottom: 10px; align-items: flex-start; }
.pay-steps li .n { min-width: 22px; height: 22px; background: var(--navy); color: var(--white); border-radius: 50%; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.payment-methods { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pm-option {
  flex: 1;
  min-width: 160px;
  border: 2px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}
.pm-option i { color: var(--text-muted); font-size: 1.2rem; }
.pm-option.disabled { opacity: .5; border-color: var(--border); background: var(--bg-tint); color: var(--text-muted); }
.pm-option.disabled i { color: var(--text-muted); }
.pm-selectable { cursor: pointer; transition: border-color .15s, background .15s; }
.pm-selectable input[type="radio"] { width: 18px; height: 18px; accent-color: var(--green); margin-right: 2px; }
.pm-selectable.pm-active { border-color: var(--green); background: var(--green-soft); }
.pm-selectable.pm-active i { color: var(--green); }

.order-summary-list { max-height: 260px; overflow-y: auto; margin-bottom: 16px; }
.order-summary-item { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; padding: 10px 0; border-bottom: 1px solid var(--border); }
.order-summary-item .qty { color: var(--text-muted); }

/* Success Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,26,77,.55);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: 18px;
  padding: 40px 32px;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-lift);
}
.modal-box .check-circle {
  width: 78px; height: 78px;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 20px;
}
.modal-box h2 { color: var(--navy); margin-bottom: 10px; font-size: 1.3rem; }
.modal-box p { color: var(--text-muted); margin-bottom: 24px; font-size: 0.92rem; }
.modal-box .order-id { background: var(--bg-tint); border-radius: 10px; padding: 10px 16px; font-weight: 700; color: var(--navy); margin-bottom: 22px; font-size: 0.9rem; }
.modal-actions { display: flex; gap: 10px; flex-direction: column; }

/* =========== ABOUT PAGE / CONTACT PAGE extras =========== */
.trust-badges { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 26px; }
.trust-badges div { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.trust-badges i { color: var(--green); font-size: 1.3rem; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-info-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-bottom: 20px; }
.contact-info-card .row { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.contact-info-card .row:last-child { margin-bottom: 0; }
.contact-info-card .row i { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-info-card .row h4 { color: var(--navy); font-size: 0.92rem; margin-bottom: 3px; }
.contact-info-card .row p, .contact-info-card .row a { color: var(--text-muted); font-size: 0.88rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: none; width: 100%; height: 260px; }

.ig-card {
  background: linear-gradient(135deg, #833ab4, #fd1d1d 50%, #fcb045);
  border-radius: var(--radius);
  padding: 30px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 22px;
}
.ig-qr {
  width: 96px; height: 96px;
  background: var(--white);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ig-qr i { font-size: 2.2rem; color: #833ab4; }
.ig-card h4 { font-size: 1.1rem; margin-bottom: 4px; }
.ig-card p { font-size: 0.85rem; opacity: .95; margin-bottom: 10px; }

/* =========== 404 / GENERIC =========== */
.not-found { text-align: center; padding: 100px 20px; }
.not-found h1 { font-size: 5rem; color: var(--navy); font-weight: 800; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
  .hero-carousel { height: 560px; }
  .hero-slide-inner { grid-template-columns: 1fr; text-align: center; gap: 10px; padding: 20px 0; }
  .hero-slide-media { order: -1; padding: 10px 0; max-height: 260px; }
  .hero-slide-price { justify-content: center; }
  .hero-slide-actions { justify-content: center; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-height: 340px; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .hamburger { display: flex; }
  /* Single-row compact header (Flipkart-style): small logo + search side by side,
     never wrapping the search bar onto its own tall second row. */
  .navbar { flex-wrap: nowrap; gap: 10px; padding: 10px 0; }
  .brand { flex: none; transition: opacity .2s ease, width .2s ease; }
  .brand-text { display: none; }
  .brand img { height: 40px; width: 40px; }
  .search-form { flex: 1 1 auto; max-width: none; margin: 0; min-width: 0; }
  .search-bar { padding: 3px 3px 3px 14px; }
  .search-bar input { font-size: 0.88rem; }
  .search-bar button { width: 36px; height: 36px; font-size: 0.9rem; }
  /* Search bar lives only on the Home header on mobile (Flipkart pattern:
     inner pages have no search). Home's header is the one with .category-nav. */
  .header:not(:has(.category-nav)) .search-form { display: none; }
  /* Inner pages have nothing worth pinning once the search bar is gone — a
     sticky logo-only bar just leaves a blank white strip stuck at the top
     while scrolling, so let it scroll away with the rest of the page. */
  .header:not(:has(.category-nav)) { position: static; }
  /* Scrolled state on Home: only the search bar stays pinned, logo collapses. */
  .header.is-scrolled .navbar { padding: 7px 0; }
  .header.is-scrolled .brand { opacity: 0; width: 0; overflow: hidden; }
  /* The category icon row is not rendered on mobile at all. Its animated
     max-height collapse was the scroll jank: animating max-height on a wide
     horizontally-scrolling flex row forces a full layout pass every frame,
     and it fought the sticky header on every small scroll. The bottom nav
     and the Categories page already cover this navigation on mobile, so the
     row earns nothing here.

     Hidden rather than removed from the markup on purpose: the rules above
     use :has(.category-nav) to tell Home's header apart from an inner
     page's. :has() matches on DOM structure, not on what is painted, so
     display:none keeps that detection working. Removing the element would
     silently hide the mobile search bar and the whole header instead. */
  .category-nav { display: none; }
}

@media (max-width: 768px) {
  .section { padding: 50px 0; }
  .topbar .topbar-left { display: none; }
  .topbar .container { justify-content: center; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-strip { flex-direction: column; text-align: center; padding: 32px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; padding: 46px 0 30px; }
  .hero-carousel { height: 440px; margin: 14px; border-radius: 18px; box-shadow: var(--shadow-lift); }
  .hero-slide-badge { padding: 5px 14px; font-size: 0.75rem; margin-bottom: 10px; }
  .hero-slide-info p { margin-bottom: 12px; }
  .hero-slide-price { margin-bottom: 16px; }
  .bottom-nav { display: flex; }
  body:has(.bottom-nav) { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(var(--bottom-nav-h) + 14px); }
  header:has(~ .bottom-nav) .nav-actions { display: none; }
  /* On inner pages the bottom nav already handles navigation, so the header
     is reduced to a lone logo and the topbar to a marketing line — two empty
     bands stacked above the page title. Drop both and let the content start
     immediately. Scoped to pages that actually have the bottom nav, so
     checkout (which has no bottom nav) keeps its header. */
  body:has(.bottom-nav):not(:has(.category-nav)) .topbar,
  body:has(.bottom-nav):not(:has(.category-nav)) .header { display: none; }
  /* A slim title strip instead of a tall hero band. */
  .page-head { padding: 20px 0; }
  .page-head h1 { font-size: 1.35rem; margin-bottom: 4px; }
  .page-head .crumbs { font-size: 0.78rem; }
  .form-grid { grid-template-columns: 1fr; }
  .ig-card { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  /* Price, Quantity, Subtotal and Delete used to each get their own
     full-width bordered row — four stacked "label: value" blocks per item,
     so a single product filled almost a whole screen. They now sit in one
     row together (label stacked above value instead of beside it), with
     only the product cell kept on its own line above. */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table { border-radius: 0; box-shadow: none; }
  .cart-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--white);
  }
  .cart-table td { border-top: none; border-bottom: none; padding: 10px 12px; }
  .cart-table td.cart-product-cell { flex: 1 1 100%; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .cart-table td[data-label]:not(.cart-product-cell) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
  }
  .cart-table td[data-label]:not(.cart-product-cell)::before {
    content: attr(data-label);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
  }
  /* :not(.cart-product-cell) repeated here isn't decorative — the general
     rule above carries the same clause, which counts toward specificity even
     though :not() itself doesn't. Without it these lose the specificity tie
     (3 vs 2) despite coming later in the file, flex:1 1 0 wins instead, and
     the quantity stepper gets compressed narrower than its own +/- buttons
     need — exactly what shipped and clipped the + button out of view. */
  .cart-table td[data-label="Quantity"]:not(.cart-product-cell) { flex: 0 0 auto; }
  .cart-table td[data-label=""]:not(.cart-product-cell) { flex: 0 0 auto; padding-inline: 6px 12px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-body { padding: 12px; }
  .product-actions { flex-direction: column; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .hero-carousel { height: 420px; margin: 12px; border-radius: 16px; }
  .hero-slide-inner { padding: 14px 0; gap: 6px; }
  .hero-slide-badge { font-size: 0.7rem; padding: 4px 12px; margin-bottom: 8px; }
  .hero-slide-info h2 { margin-bottom: 6px; }
  .hero-slide-info p { font-size: 0.82rem; margin-bottom: 10px; }
  .hero-slide-price { margin-bottom: 12px; }
  .hero-slide-price .price-now { font-size: 1.4rem; }
  .hero-slide-actions { flex-direction: row; }
  .hero-slide-actions .btn-outline { display: none; }
  .hero-slide-actions .btn { width: 100%; }
  .hero-slide-media { max-height: 160px; padding: 8px 0; }
  .hero-slide-media-icon .hero-illustration { width: 110px; height: 110px; font-size: 2.4rem; }
  .cta-strip-actions { flex-direction: column; width: 100%; }
  .cta-strip-actions .btn { width: 100%; }
  .brand-text strong { font-size: 1rem; }
  .brand img { height: 42px; width: 42px; }
  .wa-float { width: 50px; height: 50px; font-size: 1.4rem; right: 16px; }
  .bottom-nav-label { font-size: 0.6rem; }
  .bottom-nav-item i { font-size: 1.12rem; }
  .category-nav a { width: 68px; font-size: 0.68rem; }
  .category-nav a i { width: 36px; height: 36px; font-size: 0.95rem; }
  .hero-illustration-center { width: 128px; height: 128px; }
  .hero-illustration-center img { width: 72px; height: 72px; }
  .hero-illustration-badge { width: 58px; height: 58px; font-size: 1.3rem; }
}

/* =========== WISHLIST HEART (product cards) =========== */
.wish-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  z-index: 2;
  transition: transform .15s, color .15s;
}
.wish-btn:hover { transform: scale(1.1); }
.wish-btn.active { color: #e53935; }

/* =========== PRODUCT DETAIL: GALLERY + ZOOM =========== */
.product-media-main {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-tint);
  display: flex; align-items: center; justify-content: center;
}
.product-media-main img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.pd-zoom-btn {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow);
}
.pd-zoom-btn:hover { background: var(--green); }
.product-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.product-thumb-btn {
  width: 72px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-tint);
  flex-shrink: 0;
}
.product-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-btn.active { border-color: var(--green); }
.pd-zoom-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,15,35,.95);
  z-index: 1000;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.pd-zoom-overlay.open { display: flex; }
.pd-zoom-track { display: flex; width: 100%; height: 100%; touch-action: pan-y; transition: transform .32s cubic-bezier(.4,0,.2,1); }
.pd-zoom-track.dragging { transition: none; cursor: grabbing; }
.pd-zoom-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px; box-sizing: border-box; }
.pd-zoom-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.pd-zoom-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  z-index: 2;
}
.pd-zoom-close:hover { background: rgba(255,255,255,.28); }
.pd-zoom-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  z-index: 2;
}
.pd-zoom-arrow:hover { background: rgba(255,255,255,.28); }
.pd-zoom-prev { left: 18px; }
.pd-zoom-next { right: 18px; }
.pd-zoom-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.9);
  font-size: 0.8rem; font-weight: 700;
  background: rgba(255,255,255,.14);
  padding: 6px 16px;
  border-radius: 99px;
  z-index: 2;
}
@media (max-width: 640px) {
  .pd-zoom-slide { padding: 90px 24px; }
  .pd-zoom-arrow { display: none; }
}
.product-secondary-actions { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.btn-icon-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-muted);
}
.btn-icon-text i { font-size: 1rem; }
.btn-icon-text:hover { color: var(--navy); }
.btn-icon-text.active { color: #e53935; }
.btn-icon-text.active i { color: #e53935; }

@media (max-width: 640px) {
  .product-media-main { aspect-ratio: 1 / 1; border-radius: 14px; }
  .product-thumb-btn { width: 58px; height: 58px; }
}
cat >> css/style.css <<'CSSEOF'

/* =========== SEARCH AUTOCOMPLETE =========== */
.search-form { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  z-index: 600;
  overflow: hidden;
  max-height: 62vh;
  overflow-y: auto;
  display: none;
}
.search-suggest.open { display: block; }
.search-suggest-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  text-align: left;
  width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit;
  cursor: pointer;
}
.search-suggest-item:last-child { border-bottom: none; }
.search-suggest-item:hover,
.search-suggest-item.active { background: var(--bg-tint); }
.search-suggest-item img {
  width: 40px; height: 40px; flex: none;
  border-radius: 8px; object-fit: contain;
  background: var(--bg-tint); padding: 3px;
}
.search-suggest-text { min-width: 0; flex: 1; }
.search-suggest-name {
  font-size: 0.86rem; font-weight: 600; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest-meta { font-size: 0.72rem; color: var(--text-muted); }
.search-suggest-price { font-size: 0.85rem; font-weight: 800; color: var(--navy); flex: none; }
.search-suggest-empty { padding: 16px 14px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.search-suggest-all {
  display: block; width: 100%;
  padding: 11px 13px;
  background: var(--bg-soft); border: 0; border-top: 1px solid var(--border);
  font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--green);
  cursor: pointer; text-align: center;
}

/* =========== SHOP TOOLBAR (sort + count) =========== */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.shop-count { font-size: 0.85rem; color: var(--text-muted); }
.shop-sort { display: flex; align-items: center; gap: 8px; }
.shop-sort label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.shop-sort select {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit; font-size: 0.85rem; color: var(--text-dark);
  cursor: pointer;
}
.shop-sort select:focus { outline: none; border-color: var(--green); }
.shop-more-wrap { text-align: center; margin-top: 28px; }

/* =========== ACCESSIBILITY =========== */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: 12px 18px; z-index: 9999; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================================================
   PAYMENT VERIFICATION
   A prepaid order is not confirmed until a person at the shop has matched
   the payment. Nothing here may look like a completed transaction before
   that has happened — which is the whole reason the modal has two states.
   ======================================================================= */
.file-upload .req {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #c62828;
}
.screenshot-why { margin-top: 8px; }

/* The pending variant of the order modal: a clock in amber, not a tick in
   green. Same box, different claim. */
.modal-box.is-pending .check-circle { background: #fff3dc; color: #a9700a; }
.modal-box.is-pending h2 { color: #8a5a00; }

.verify-steps { text-align: left; margin: 16px 0 4px; display: grid; gap: 12px; }
.vs-row { display: flex; gap: 12px; align-items: flex-start; }
.vs-row .vs-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  margin-top: 5px; background: #dfe4ee; box-shadow: 0 0 0 3px #f2f5fa;
}
.vs-row.is-done .vs-dot { background: #2e7d32; box-shadow: 0 0 0 3px #e6f4e8; }
.vs-row.is-now .vs-dot { background: #d99100; box-shadow: 0 0 0 3px #fff3dc; }
.vs-row strong { display: block; font-size: .92rem; }
.vs-row em { font-style: normal; font-size: .82rem; color: #697386; }

/* --- Order status page -------------------------------------------------- */
.os-wrap { max-width: 660px; }
.os-sub { color: #697386; margin-bottom: 18px; }
.os-form { display: grid; gap: 12px; margin-bottom: 22px; }
.os-field { display: grid; gap: 6px; }
.os-field label { font-size: .8rem; font-weight: 700; color: var(--navy, #0f1a4d); }
.os-field input {
  width: 100%; min-height: 46px; padding: 10px 13px;
  border: 1px solid #c3cddd; border-radius: 9px; background: #fff; outline: none;
}
.os-field input:focus { border-color: #43a047; box-shadow: 0 0 0 3px rgba(67,160,71,.15); }

.os-alert { padding: 12px 15px; border-radius: 9px; margin-bottom: 18px; font-size: .9rem; font-weight: 600; }
.os-alert.is-bad { background: #fdeceb; color: #9d1f1f; border: 1px solid #f2c9c6; }
.os-alert.is-good { background: #e8f5ec; color: #1d6b28; border: 1px solid #bfe3cb; }

.os-card { border: 1px solid #dfe4ee; border-radius: 12px; padding: 20px; background: #fff; }
.os-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.os-code { font-size: 1.05rem; font-weight: 800; color: var(--navy, #0f1a4d); }
.os-meta { font-size: .82rem; color: #697386; }
.os-total { font-size: 1.25rem; font-weight: 800; color: var(--navy, #0f1a4d); }

/* Three steps, so "we are checking" is a place on a path rather than a
   vague message. */
.os-track { list-style: none; display: flex; margin: 20px 0 14px; padding: 0; }
.os-track li { flex: 1 1 0; position: relative; text-align: center; font-size: .78rem; color: #99a2b5; }
.os-track li span {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #dfe4ee; margin: 0 auto 8px; position: relative; z-index: 1;
}
.os-track li::before {
  content: ''; position: absolute; top: 6px; left: 0; right: 50%; height: 2px; background: #dfe4ee;
}
.os-track li:first-child::before { display: none; }
.os-track li.is-done, .os-track li.is-now { color: #2b3446; font-weight: 700; }
.os-track li.is-done span { background: #2e7d32; }
.os-track li.is-now span { background: #d99100; }
.os-track li.is-done::before { background: #2e7d32; }

.os-note { font-size: .92rem; color: #45516b; margin: 0 0 16px; }
.os-note.is-good { color: #1d6b28; font-weight: 600; }
.os-note.is-bad { color: #9d1f1f; font-weight: 600; }
.os-hint { font-size: .86rem; color: #697386; }

.os-upload {
  display: grid; gap: 10px; padding: 16px;
  border: 1px dashed #c3cddd; border-radius: 10px; background: #fbfcfe; margin-bottom: 14px;
}
.os-upload label { font-size: .82rem; font-weight: 700; color: var(--navy, #0f1a4d); }

@media (max-width: 560px) {
  .os-track li { font-size: .7rem; }
  .os-head { flex-direction: column; }
}