/* ==========================================================================
   SHOPMEE — Design System & Global Styles
   ========================================================================== */

:root {
  --color-primary: #9c1c8c;
  --color-primary-dark: #7a1570;
  --color-primary-light: #f9e6f6;
  --color-accent: #ff6b35;
  --color-success: #17a672;
  --color-bg: #ffffff;
  --color-bg-soft: #faf7fb;
  --color-text: #24202a;
  --color-text-muted: #6b6570;
  --color-border: #ece5ec;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(30, 15, 30, 0.06);
  --shadow-md: 0 6px 20px rgba(30, 15, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(30, 15, 30, 0.12);
  --header-h: 64px;
  --bottom-nav-h: 62px;
  --max-width: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  padding-bottom: calc(var(--bottom-nav-h) + 8px);
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 8px; }
ul { padding: 0; margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.section { padding: 32px 0; }
.section-title { font-size: 22px; margin-bottom: 4px; }
.section-sub { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; gap: 8px;}
.section-head .view-all { color: var(--color-primary); font-weight: 600; font-size: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-sm); padding: 12px 20px;
  font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { filter: brightness(0.95); }
.btn--outline { background: #fff; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary-light); }
.btn--whatsapp { background: #25d366; color: #fff; }
.btn--whatsapp:hover { background: #1ebc59; }
.btn--sm { padding: 8px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-resell-link {
  background: none; border: none; color: var(--color-accent); font-weight: 600; font-size: 12.5px;
  padding: 6px 0 0; text-align: left; width: 100%;
}
.btn-resell-link:hover { text-decoration: underline; }

/* Badges */
.badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.badge--discount { position: absolute; top: 8px; left: 8px; background: var(--color-success); color: #fff; }
.badge--tag { background: var(--color-primary-light); color: var(--color-primary); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.site-header__top { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; color: var(--color-primary); flex-shrink: 0; }
.logo__mark {
  width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 800;
}
.logo__text small { display: block; font-size: 9px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.5px; }

.search-bar { position: relative; flex: 1; max-width: 560px; display: none; }
.search-bar input {
  width: 100%; padding: 10px 40px 10px 16px; border: 1.5px solid var(--color-border); border-radius: 24px;
  background: var(--color-bg-soft); outline: none; transition: border-color .15s;
}
.search-bar input:focus { border-color: var(--color-primary); background: #fff; }
.search-bar__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }

.search-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); max-height: 400px; overflow-y: auto; z-index: 200; display: none;
}
.search-suggestions.open { display: block; }
.search-suggestions__item { display: flex; gap: 10px; padding: 10px 14px; align-items: center; }
.search-suggestions__item:hover { background: var(--color-bg-soft); }
.search-suggestions__item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.ss-name { font-size: 13.5px; font-weight: 600; margin: 0; }
.ss-cat { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.search-suggestions__empty { padding: 16px; color: var(--color-text-muted); font-size: 14px; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; border: none; font-size: 20px; color: var(--color-text); flex-shrink: 0;
}
.icon-btn:hover { background: var(--color-bg-soft); }
.cart-count {
  position: absolute; top: -2px; right: -2px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px; display: none; align-items: center; justify-content: center; padding: 0 3px;
}

.header-nav {
  display: none; gap: 24px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-border);
}
.header-nav a { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.header-nav a:hover, .header-nav a.active { color: var(--color-primary); }
.mobile-search-row { padding: 8px 0 10px; }

.desktop-only { display: none; }

@media (min-width: 900px) {
  .search-bar { display: block; }
  .header-nav { display: flex; }
  .mobile-search-row { display: none; }
  .desktop-only { display: inline-flex; }
}

/* ==========================================================================
   Bottom Mobile Nav
   ========================================================================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid var(--color-border);
  display: flex; height: var(--bottom-nav-h); box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--color-text-muted); font-size: 11px; font-weight: 600; position: relative;
}
.bottom-nav__item .bn-icon { font-size: 20px; }
.bottom-nav__item.active { color: var(--color-primary); }
@media (min-width: 900px) { .bottom-nav { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 60%);
  padding: 28px 0 20px;
}
.hero__inner { display: flex; flex-direction: column-reverse; gap: 20px; align-items: center; }
.hero__content { text-align: center; }
.hero__eyebrow { color: var(--color-accent); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.hero__title { font-size: 30px; margin: 6px 0 10px; }
.hero__desc { color: var(--color-text-muted); margin-bottom: 18px; }
.hero__image { width: 100%; max-width: 420px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__image img { width: 100%; height: 260px; object-fit: cover; }

@media (min-width: 900px) {
  .hero__inner { flex-direction: row; text-align: left; }
  .hero__content { text-align: left; flex: 1; }
  .hero__title { font-size: 42px; }
  .hero__image { flex: 1; max-width: 520px; }
  .hero__image img { height: 340px; }
}

/* ==========================================================================
   Categories
   ========================================================================== */
.category-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.category-scroll::-webkit-scrollbar { display: none; }
.category-chip {
  flex-shrink: 0; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.category-chip__icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-light); display: flex; align-items: center;
  justify-content: center; font-size: 28px; transition: transform .15s;
}
.category-chip:hover .category-chip__icon { transform: translateY(-3px); }
.category-chip span { font-size: 12px; font-weight: 600; }

.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .category-grid { grid-template-columns: repeat(6, 1fr); } }
.category-card {
  background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 16px; text-align: center; border: 1px solid var(--color-border);
  transition: box-shadow .15s, transform .15s;
}
.category-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-card .icon { font-size: 30px; display: block; margin-bottom: 6px; }
.category-card .name { font-weight: 600; font-size: 13px; }

/* ==========================================================================
   Product Grid & Cards
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

.product-card {
  background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__image-link { position: relative; display: block; background: var(--color-bg-soft); }
.product-card__image { width: 100%; height: 160px; object-fit: cover; }
@media (min-width: 640px) { .product-card__image { height: 200px; } }
.product-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card__name { font-size: 13.5px; font-weight: 600; display: block; line-clamp: 2; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__desc { font-size: 12px; line-height: 1.35; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 32px; max-height: 32px; margin: 0; }
.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.stars { color: #ff9f1c; letter-spacing: 1px; font-size: 12px; }
.rating-count { color: var(--color-text-muted); }
.product-card__price { display: flex; align-items: center; gap: 8px; }
.price { font-weight: 700; font-size: 15px; }
.mrp { color: var(--color-text-muted); text-decoration: line-through; font-size: 12.5px; }
.product-card__actions { display: flex; gap: 6px; margin-top: 4px; }
.product-card__actions .btn { flex: 1; padding: 8px 6px; font-size: 12.5px; }

.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.empty-state .btn { margin-top: 12px; }

/* ==========================================================================
   Promo / Trust sections
   ========================================================================== */
.promo-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff;
  border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.promo-banner h2 { font-size: 24px; }
.promo-banner p { opacity: 0.9; max-width: 480px; }
@media (min-width: 900px) {
  .promo-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-card { background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 18px; text-align: center; }
.trust-card .icon { font-size: 28px; margin-bottom: 8px; }
.trust-card h4 { font-size: 14px; }
.trust-card p { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #1c1520; color: #e9e3ec; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 40px 0 20px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr 1.6fr; } }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: #cabfd1; font-size: 13.5px; }
.footer-col a:hover { color: #fff; }
.footer-col p { color: #cabfd1; font-size: 13.5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 16px 0; text-align: center; font-size: 12.5px; color: #a89bb0; }

.footer-form { display: flex; flex-direction: column; gap: 10px; }
.footer-form input, .footer-form textarea, .footer-form select {
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  color: #fff; outline: none;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: #a89bb0; }
.footer-form-row { display: flex; gap: 10px; }
.footer-form-row > * { flex: 1; }
.footer-form .btn-group { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Forms (shared)
   ========================================================================== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); outline: none;
  transition: border-color .15s; background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.field-error { color: #d9302f; font-size: 12.5px; margin-top: 4px; display: none; }
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color: #d9302f; }
.form-group.error .field-error { display: block; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.checkbox-row input { width: auto; margin-top: 3px; }

.card-box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }

@media (max-width: 640px) {
  .form-row { flex-direction: column; gap: 0; }
}

/* ==========================================================================
   Page header / breadcrumb
   ========================================================================== */
.page-header { padding: 20px 0 10px; }
.breadcrumb { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 6px; }
.breadcrumb a { color: var(--color-primary); }

/* ==========================================================================
   Filters / Sort bar
   ========================================================================== */
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar select { padding: 9px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: #fff; font-size: 13.5px; }
.filter-toggle-btn { display: none; }
.filters-panel { display: flex; flex-direction: column; gap: 18px; }
.filters-panel .filter-group h4 { font-size: 13.5px; margin-bottom: 8px; }
.filters-panel label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.filters-panel input[type="checkbox"], .filters-panel input[type="radio"] { width: auto; }

.products-layout { display: flex; gap: 24px; align-items: flex-start; }
.products-layout .filters-sidebar { width: 220px; flex-shrink: 0; display: none; }
@media (min-width: 900px) { .products-layout .filters-sidebar { display: block; } }
.products-layout .products-main { flex: 1; min-width: 0; }

/* ==========================================================================
   Product Details Page
   ========================================================================== */
.pd-layout { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 900px) { .pd-layout { flex-direction: row; } }
.pd-gallery { flex: 1; max-width: 480px; }
.pd-gallery__main { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-soft); margin-bottom: 10px; }
.pd-gallery__main img { width: 100%; height: 380px; object-fit: cover; }
.pd-gallery__thumbs { display: flex; gap: 8px; }
.pd-gallery__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; }
.pd-gallery__thumbs img.active { border-color: var(--color-primary); }

.pd-info { flex: 1; }
.pd-info h1 { font-size: 22px; }
.pd-price-row { display: flex; align-items: baseline; gap: 10px; margin: 12px 0; }
.pd-price-row .price { font-size: 26px; }
.pd-price-row .mrp { font-size: 15px; }
.pd-price-row .badge--discount { position: static; }

.option-group { margin: 14px 0; }
.option-group h4 { font-size: 13.5px; margin-bottom: 8px; }
.option-pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.option-pill {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--color-border); font-size: 13.5px; font-weight: 600; cursor: pointer; background: #fff;
}
.option-pill.selected { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

.qty-selector { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); width: fit-content; }
.qty-selector button { width: 36px; height: 36px; background: none; border: none; font-size: 18px; font-weight: 700; }
.qty-selector input { width: 44px; text-align: center; border: none; outline: none; font-weight: 600; }

.pd-actions { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.pd-actions .btn { flex: 1; min-width: 130px; }

.pd-info-blocks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pd-info-block { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--color-text-muted); }
.pd-info-block .icon { font-size: 18px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table tr td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.spec-table tr td:first-child { color: var(--color-text-muted); width: 40%; }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--color-border); margin: 28px 0 16px; }
.tab-btn { background: none; border: none; padding: 10px 0; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--color-primary); border-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   Cart Page
   ========================================================================== */
.cart-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .cart-layout { flex-direction: row; align-items: flex-start; } }
.cart-items { flex: 1.6; display: flex; flex-direction: column; gap: 12px; }
.cart-summary { flex: 1; }
.cart-item { display: flex; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); align-items: center; }
.cart-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__info h4 { font-size: 14px; margin-bottom: 2px; }
.cart-item__meta { font-size: 12px; color: var(--color-text-muted); }
.cart-item__price { font-weight: 700; margin-top: 4px; }
.cart-item__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-item__remove { background: none; border: none; color: #d9302f; font-size: 12.5px; font-weight: 600; }

.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--color-text-muted); }
.summary-row.total { font-size: 17px; font-weight: 700; color: var(--color-text); border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 6px; }
.summary-row .value { color: var(--color-text); font-weight: 600; }
.summary-row.discount .value { color: var(--color-success); }

/* ==========================================================================
   Reseller
   ========================================================================== */
.reseller-hero { background: linear-gradient(135deg, #fff4e8 0%, #fff 60%); border-radius: var(--radius-lg); padding: 28px 22px; margin-bottom: 24px; }
.margin-calc { display: grid; gap: 16px; }
@media (min-width: 800px) { .margin-calc { grid-template-columns: 1fr 1fr; } }
.margin-result { background: var(--color-primary-light); border-radius: var(--radius-md); padding: 20px; }
.margin-result-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(156,28,140,0.25); font-size: 14px; }
.margin-result-row:last-child { border-bottom: none; font-weight: 700; font-size: 16px; }
.margin-type-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.margin-type-toggle button { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: #fff; font-weight: 600; font-size: 13.5px; }
.margin-type-toggle button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.reseller-product-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px; }
@media (min-width: 700px) { .reseller-product-picker { grid-template-columns: repeat(3, 1fr); } }
.rp-pick-card { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; text-align: center; cursor: pointer; background: #fff; }
.rp-pick-card.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.rp-pick-card img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.rp-pick-card p { font-size: 11.5px; font-weight: 600; margin: 0; }

/* ==========================================================================
   Confirmation Screen
   ========================================================================== */
.confirmation { text-align: center; padding: 40px 16px; }
.confirmation .icon { font-size: 56px; margin-bottom: 12px; }
.confirmation h1 { font-size: 22px; }
.confirmation p { color: var(--color-text-muted); max-width: 420px; margin: 0 auto 20px; }
.confirmation .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ==========================================================================
   Toast
   ========================================================================== */
.shopmee-toast {
  position: fixed; bottom: calc(var(--bottom-nav-h) + 16px); left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1c1520; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 999; box-shadow: var(--shadow-lg); pointer-events: none;
}
.shopmee-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px) { .shopmee-toast { bottom: 24px; } }

/* ==========================================================================
   Static content pages
   ========================================================================== */
.policy-page { max-width: 800px; margin: 0 auto; }
.policy-page h2 { margin-top: 28px; font-size: 18px; }
.policy-page p, .policy-page li { color: var(--color-text-muted); font-size: 14.5px; }
.policy-page li { margin-bottom: 6px; }

/* Account */
.account-list { display: flex; flex-direction: column; gap: 10px; }
.account-list a { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: 600; }
.account-list a .icon { font-size: 22px; }
.account-list a:hover { box-shadow: var(--shadow-sm); }


/* ==========================================================================
   Mobile shopping UI — Meesho-style inspiration (SHOPMEE)
   ========================================================================== */
.mobile-filter-strip { display: none; }
.mobile-sort-sheet { display: none; }

@media (max-width: 899px) {
  .products-page { background: #f7f7f8; }
  .products-page .site-header { box-shadow: none; border-bottom: 1px solid #e5e5e7; }
  .products-page .site-header__top { height: 58px; gap: 8px; }
  .products-page .logo { font-size: 17px; gap: 5px; }
  .products-page .logo__mark { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
  .products-page .logo__text small { font-size: 7px; }
  .products-page .header-actions { gap: 1px; }
  .products-page .logo::after { content: "🎁 Refer & Earn"; display: block; font-size: 11px; font-weight: 700; color: var(--color-primary); background: var(--color-primary-light); border-radius: 999px; padding: 5px 7px; margin-left: 3px; white-space: nowrap; }
  .products-page .header-actions .icon-btn { width: 34px; height: 34px; font-size: 19px; }
  .products-page .header-actions::before {
    content: "₹0"; display: flex; align-items: center; justify-content: center; height: 30px;
    padding: 0 7px; border-radius: 9px; background: var(--color-primary-light); color: var(--color-primary);
    font-weight: 800; font-size: 12px; margin-right: 1px;
  }
  .products-page .header-actions::after {
    content: "♡"; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    font-size: 28px; color: #333; line-height: 1;
  }
  .products-page .header-actions .icon-btn[aria-label="Account"] { display: none; }
  .products-page .header-actions .icon-btn[aria-label="Cart"] { order: 4; }
  .products-page .header-actions .icon-btn[aria-label="Cart"]::before { content: "🛒"; }
  .products-page .header-actions .icon-btn[aria-label="Cart"] { font-size: 0; }
  .products-page .header-actions .icon-btn[aria-label="Cart"] .cart-count { font-size: 10px; }

  .products-page .mobile-search-row { padding: 7px 0 10px; }
  .products-page .mobile-search-row .search-bar { display: block; max-width: none; }
  .products-page .mobile-search-row .search-bar input {
    height: 44px; padding: 10px 42px 10px 43px; border: 1.5px solid #d7d7dc; border-radius: 13px;
    background: #fff; font-size: 14px;
  }
  .products-page .mobile-search-row .search-bar::before {
    content: "⌕"; position: absolute; z-index: 2; left: 14px; top: 50%; transform: translateY(-52%);
    font-size: 27px; color: #777;
  }
  .products-page .mobile-search-row .search-bar::after {
    content: "⌕"; position: absolute; z-index: 2; right: 14px; top: 50%; transform: translateY(-52%);
    font-size: 23px; color: #777;
  }
  .products-page .mobile-search-row .search-bar__icon { display: none; }

  .products-page .header-nav { display: none; }
  .products-page main.container { padding-left: 0; padding-right: 0; }
  .products-page .page-header { display: none; }
  .products-page .page-header .breadcrumb { display: none; }
  .products-page .page-header .section-title { font-size: 17px; margin: 0; }
  .products-page .products-layout { display: block; }
  .products-page .products-layout .filters-sidebar { display: none; width: auto; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .products-page .products-layout .filters-sidebar.open-mobile { display: block !important; }
  .products-page .products-main { width: 100%; }
  .products-page .desktop-filter-bar { display: none; }
  .products-page .mobile-filter-strip {
    display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; background: #fff;
    border-top: 1px solid #e2e2e5; border-bottom: 1px solid #ddd; position: sticky; top: 108px; z-index: 90;
  }
  .products-page .mobile-filter-btn {
    min-width: 0; height: 48px; background: #fff; border: 0; border-right: 1px solid #e5e5e8;
    font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .products-page .mobile-filter-btn:last-child { border-right: 0; }

  .products-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: #e6e6e8; margin: 0;
  }
  .products-page .product-card {
    min-width: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: #fff;
  }
  .products-page .product-card:hover { transform: none; box-shadow: none; }
  .products-page .product-card__image-link { aspect-ratio: 1 / 1; background: #f2f2f3; }
  .products-page .product-card__image { width: 100%; height: 100%; object-fit: contain; padding: 0; }
  .products-page .product-card__body { padding: 7px 9px 10px; gap: 3px; }
  .products-page .product-card__name { font-size: 13px; line-height: 1.28; min-height: 33px; }
  .products-page .product-card__desc { display: none; }
  .products-page .product-card__rating { font-size: 11px; gap: 5px; }
  .products-page .stars { font-size: 11px; letter-spacing: 0; }
  .products-page .product-card__price { gap: 6px; flex-wrap: wrap; }
  .products-page .price { font-size: 16px; }
  .products-page .mrp { font-size: 11px; }
  .products-page .product-card__actions { gap: 4px; margin-top: 4px; }
  .products-page .product-card__actions .btn { padding: 7px 4px; font-size: 11px; border-radius: 7px; }
  .products-page .btn-resell-link { display: none; }
  .products-page .badge--discount { top: 7px; left: 7px; padding: 3px 6px; font-size: 10px; border-radius: 5px; }

  .products-page .bottom-nav { height: 64px; }
  .products-page .bottom-nav__item { font-size: 10.5px; }
  .products-page .bottom-nav__item .bn-icon { font-size: 20px; }

  .products-page .mobile-sort-sheet.open { display: block; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.32); }
  .products-page .mobile-sort-sheet__inner {
    position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0;
    padding: 12px 16px 24px; box-shadow: 0 -8px 24px rgba(0,0,0,.14);
  }
  .products-page .mobile-sheet-title { font-size: 16px; font-weight: 800; padding: 8px 0 10px; }
  .products-page .mobile-sort-sheet button {
    display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eee;
    background: #fff; padding: 13px 2px; font-size: 14px;
  }
}

/* ==========================================================================
   Mobile product-detail overflow fix
   ========================================================================== */
@media (max-width: 899px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  #pdRoot, #pdLayout, .pd-layout { width: 100%; max-width: 100%; min-width: 0; }
  .pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .pd-gallery, .pd-info { width: 100%; max-width: 100%; min-width: 0; }
  .pd-gallery__main { width: 100%; }
  .pd-gallery__main img {
    width: 100%; height: auto; max-height: 420px; object-fit: contain;
  }
  .pd-gallery__thumbs {
    width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 3px; scrollbar-width: none;
  }
  .pd-gallery__thumbs::-webkit-scrollbar { display: none; }
  .pd-info { overflow-wrap: anywhere; word-break: normal; }
  .pd-info h1 { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
  .pd-info > p { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
  .pd-price-row { flex-wrap: wrap; }
  .pd-actions { width: 100%; }
  .pd-actions .btn { min-width: 0; flex: 1 1 120px; }
  .tabs { width: 100%; max-width: 100%; overflow-x: auto; white-space: nowrap; gap: 18px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-panel { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  .spec-table { table-layout: fixed; }
  .spec-table td { overflow-wrap: anywhere; word-break: break-word; }
}

/* ==========================================================================
   SHOPMEE Premium Responsive Header — Desktop + Mobile
   ========================================================================== */
.site-header { background:#fff; border-bottom:1px solid #eee7f0; box-shadow:0 3px 14px rgba(35,20,40,.06); }
.header-benefits { background:linear-gradient(90deg,var(--color-primary),#d20c7d 48%,var(--color-accent)); color:#fff; }
.header-benefits__inner { min-height:42px; display:flex; align-items:center; gap:28px; font-size:12px; white-space:nowrap; overflow:hidden; }
.header-benefits__inner > span { display:flex; align-items:center; gap:5px; }
.header-benefits__cta { margin-left:auto; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.18); font-weight:700; }
.site-header__top { min-height:82px; height:auto; gap:18px; }
.logo { gap:10px; color:#10233f; }
.logo__bag { width:54px; height:54px; border-radius:14px; position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#9c1c8c 5%,#e30c80 48%,#ff7a22 100%); box-shadow:0 7px 16px rgba(156,28,140,.22); transform:rotate(-2deg); }
.logo__bag:before { content:""; position:absolute; width:22px; height:13px; left:16px; top:-6px; border:4px solid #ff8a24; border-bottom:0; border-radius:14px 14px 0 0; transform:rotate(7deg); }
.logo__bag span { color:#fff; font-size:30px; font-weight:900; line-height:1; transform:rotate(2deg); }
.logo__text strong { display:block; font-size:30px; letter-spacing:-1.2px; line-height:1; color:#122541; }
.logo__text strong span { background:linear-gradient(90deg,#e10b82,#ff6b35); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo__text small { margin-top:5px; font-size:10px; letter-spacing:.65px; color:#6b6570; font-weight:700; }
.search-bar { max-width:none; height:48px; display:flex; align-items:center; border:1.5px solid #dcd5df; border-radius:26px; background:#fff; overflow:hidden; box-shadow:0 2px 7px rgba(30,15,30,.03); }
.search-bar input { border:0; background:transparent; padding:10px 10px 10px 0; height:100%; outline:none; flex:1; min-width:0; }
.search-bar__leading { font-size:27px; line-height:1; color:#667085; padding:0 11px 2px 15px; transform:rotate(-20deg); }
.search-category { height:28px; border:0; border-left:1px solid #e6e0e7; background:#fff; color:#26364e; font-size:12px; font-weight:700; padding:0 12px; outline:none; }
.search-submit { height:100%; border:0; padding:0 21px; background:linear-gradient(90deg,#b315a0,#ff6b35); color:#fff; font-weight:800; font-size:14px; }
.header-actions { gap:2px; }
.header-action { position:relative; min-width:68px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-left:1px solid #eee8ef; color:#182941; font-size:11px; font-weight:700; }
.header-action__icon { font-size:23px; line-height:1; }
.header-action__label { line-height:1.2; }
.reseller-action { min-width:auto; flex-direction:row; padding:0 13px; border:1px solid var(--color-primary); border-radius:9px; color:var(--color-primary); font-size:13px; margin-right:7px; min-height:38px; }
.cart-count { top:4px; right:11px; }
.header-nav { display:flex; gap:0; min-height:54px; padding:0; border-top:1px solid #eee8ef; align-items:stretch; overflow-x:auto; scrollbar-width:none; }
.header-nav::-webkit-scrollbar { display:none; }
.header-nav a { display:flex; align-items:center; gap:6px; padding:0 14px; color:#25344d; font-size:13px; font-weight:700; white-space:nowrap; border-bottom:3px solid transparent; }
.header-nav a:hover, .header-nav a.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.header-nav .nav-category { min-width:215px; justify-content:space-between; color:#fff; background:linear-gradient(90deg,#a8149a,#ff6b35); border-radius:24px; margin:8px 12px 8px 0; padding:0 18px; border:0; }
.header-nav .nav-category span { font-size:22px; }
.header-nav .nav-category b { font-size:17px; }
.header-nav .nav-more { margin-left:auto; }
.mobile-menu-btn, .mobile-menu-panel { display:none; }
.mobile-search-row { display:none; }
@media (min-width:900px) {
  .search-bar { display:flex; flex:1; }
}
@media (max-width:899px) {
  .header-benefits { display:none; }
  .site-header__top { min-height:60px; height:60px; gap:8px; }
  .mobile-menu-btn { display:flex; width:38px; height:38px; border:0; background:transparent; align-items:center; justify-content:center; font-size:25px; color:#182941; flex-shrink:0; }
  .logo { gap:7px; }
  .logo__bag { width:42px; height:42px; border-radius:11px; }
  .logo__bag:before { width:16px; height:9px; left:12px; top:-5px; border-width:3px; }
  .logo__bag span { font-size:23px; }
  .logo__text strong { font-size:21px; letter-spacing:-.8px; }
  .logo__text small { font-size:7px; margin-top:3px; letter-spacing:.35px; }
  .header-actions { margin-left:auto; }
  .header-action { min-width:42px; min-height:42px; border:0; }
  .header-action__icon { font-size:21px; }
  .header-action__label, .account-action { display:none; }
  .cart-action { display:flex; }
  .cart-count { top:0; right:0; }
  .mobile-search-row { display:block; padding:7px 0 10px; }
  .mobile-search-row .search-bar { display:flex; width:100%; height:44px; }
  .mobile-search-row .search-submit { width:45px; padding:0; font-size:19px; }
  .header-nav { display:none; }
  .mobile-menu-panel { display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .2s ease; border-top:0 solid #eee8ef; }
  .mobile-menu-panel.open { max-height:420px; border-top-width:1px; padding:6px 0 10px; }
  .mobile-menu-panel a { padding:11px 12px; font-weight:700; font-size:14px; border-radius:8px; }
  .mobile-menu-panel a:hover { background:var(--color-primary-light); color:var(--color-primary); }
  .search-category { display:none; }
}
CSS
cat >> /mnt/data/shopmee_latest/src/js/app.js <<'JS'

// Premium responsive header menu
(function(){
  const btn=document.querySelector('.mobile-menu-btn');
  const panel=document.querySelector('.mobile-menu-panel');
  if(btn && panel){
    btn.addEventListener('click',()=>{
      const open=panel.classList.toggle('open');
      btn.setAttribute('aria-expanded',String(open));
      btn.textContent=open?'✕':'☰';
      panel.setAttribute('aria-hidden',String(!open));
    });
  }
})();
JS


/* Seller marketplace entry point */
.seller-action{font-weight:800;white-space:nowrap;}
.mobile-menu-panel .mobile-seller-link{font-weight:800;}
@media (max-width: 980px){.seller-action{display:none !important;}}

/* ==========================================================================
   SHOPMEE Premium Homepage Refresh — responsive desktop + mobile
   ========================================================================== */
.homepage .site-header { box-shadow: 0 5px 24px rgba(60,20,65,.07); }
.homepage .search-bar { border:1px solid #e5dce7; background:#fff; box-shadow:0 4px 16px rgba(60,20,65,.06); }
.homepage .search-bar input { padding:0 18px; font-size:14px; }
.homepage .search-bar input::placeholder { color:#8a8290; }
.homepage .search-bar:focus-within { border-color:#c41a9d; box-shadow:0 0 0 4px rgba(196,26,157,.08); }
.homepage .search-bar__leading, .homepage .search-category, .homepage .search-submit { display:none !important; }
.homepage .hero { padding:24px 0 10px; background:#fff; }
.homepage .hero__inner { max-width:1280px; min-height:360px; border-radius:24px; overflow:hidden; padding:0; background:linear-gradient(115deg,#fff0f8,#f6eefb 55%,#fff); box-shadow:0 14px 40px rgba(80,30,85,.10); }
.homepage .hero__content { padding:42px 34px; z-index:2; }
.homepage .hero__eyebrow { color:#b31691; }
.homepage .hero__title { font-size:clamp(30px,4vw,50px); letter-spacing:-1.4px; }
.homepage .hero__title br { display:none; }
.homepage .hero__desc { max-width:560px; }
.homepage .hero__image { max-width:none; height:100%; border-radius:0; box-shadow:none; }
.homepage .hero__image img { height:360px; object-fit:cover; }
.homepage .section { padding:30px 0; }
.homepage .section-title { font-size:24px; letter-spacing:-.4px; }
.homepage .section-head { margin-bottom:18px; }
.homepage .category-scroll { gap:12px; padding:2px 0 8px; }
.homepage .category-chip { width:112px; }
.homepage .category-chip__photo { width:112px; height:92px; overflow:hidden; border-radius:16px; border:1px solid #eee2ee; background:#f8f4f9; box-shadow:0 5px 15px rgba(50,20,55,.06); }
.homepage .category-chip__photo img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.homepage .category-chip:hover .category-chip__photo img { transform:scale(1.06); }
.homepage .category-chip > span:last-child { margin-top:2px; font-size:12px; font-weight:700; color:#27202c; }
.homepage .category-chip__icon { display:none; }
.homepage .product-card { border-radius:16px; box-shadow:0 4px 18px rgba(45,20,50,.06); }
.homepage .product-card__image { height:205px; object-fit:contain; background:#fbfafc; padding:8px; }
.homepage .product-card__body { padding:12px 13px 14px; }
.homepage .product-card__desc { min-height:0; max-height:32px; }
.homepage .product-card__actions, .homepage .btn-resell-link { display:none !important; }
.homepage .promo-banner { margin-top:4px; padding:34px; border-radius:20px; background:linear-gradient(110deg,#7d1675,#b315a0 55%,#e84b9b); box-shadow:0 12px 32px rgba(156,28,140,.18); }
.homepage .trust-grid { grid-template-columns:repeat(4,1fr); gap:12px; }
.homepage .trust-card { background:#fff; border:1px solid #eee3ef; box-shadow:0 5px 18px rgba(45,20,50,.04); }
@media (min-width:900px){
  .homepage .hero__inner { flex-direction:row; }
  .homepage .hero__content { flex:1; text-align:left; }
  .homepage .hero__image { flex:1.05; }
  .homepage .hero__image img { height:360px; }
}
@media (max-width:899px){
  .homepage .site-header__top { background:#fff; }
  .homepage .mobile-search-row { padding:7px 0 11px; }
  .homepage .mobile-search-row .search-bar { height:44px; border-radius:12px; }
  .homepage .mobile-search-row .search-bar input { padding:0 14px; font-size:13px; }
  .homepage .hero { padding:12px 0 6px; }
  .homepage .hero__inner { min-height:0; border-radius:18px; margin:0 8px; }
  .homepage .hero__content { padding:24px 18px 16px; }
  .homepage .hero__title { font-size:29px; }
  .homepage .hero__desc { font-size:13px; }
  .homepage .hero__image { width:100%; }
  .homepage .hero__image img { height:220px; }
  .homepage .section { padding:24px 0; }
  .homepage .section-title { font-size:20px; }
  .homepage .category-scroll { padding-left:2px; }
  .homepage .category-chip { width:92px; }
  .homepage .category-chip__photo { width:92px; height:78px; border-radius:14px; }
  .homepage .product-grid { gap:10px; }
  .homepage .product-card__image { height:150px; }
  .homepage .product-card__body { padding:9px 10px 11px; }
  .homepage .product-card__name { font-size:12.5px; }
  .homepage .product-card__desc { font-size:11px; }
  .homepage .price { font-size:14px; }
  .homepage .promo-banner { padding:24px 18px; border-radius:18px; }
  .homepage .trust-grid { grid-template-columns:repeat(2,1fr); }
}

/* ========================================================================== 
   SHOPMEE MARKETPLACE REFRESH — ShopKart-inspired, original implementation
   ========================================================================== */
:root{
  --color-primary:#a51d8f;
  --color-primary-dark:#7f126e;
  --color-primary-light:#fcecf8;
  --color-accent:#ff5b2e;
  --color-bg:#fff;
  --color-bg-soft:#fff8fc;
  --color-text:#211d27;
  --color-text-muted:#6f6875;
  --color-border:#eee3ec;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(50,20,50,.06);
  --shadow-md:0 10px 28px rgba(50,20,50,.10);
  --shadow-lg:0 18px 42px rgba(50,20,50,.14);
}
body.homepage{background:#fff8fc;}
.site-header{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 2px 18px rgba(50,20,50,.07);}
.header-benefits{background:#3b163f;color:#fff;font-size:12px;}
.header-benefits__inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;white-space:nowrap;}
.header-benefits__inner span{opacity:.96;}
.header-benefits__cta{color:#fff;font-weight:700;}
.site-header__top{height:76px;gap:18px;}
.logo{gap:10px;color:#231a2a;}
.logo__bag{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#8e197e,#ff5b8d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:21px;box-shadow:0 7px 18px rgba(165,29,143,.2);}
.logo__text strong{font-size:23px;letter-spacing:-.5px;color:#211d27;}
.logo__text strong span{color:#d22a9d;}
.logo__text small{font-size:9px;color:#7b7180;}
.search-bar{max-width:650px;}
.search-bar input{background:#faf7fb;border:1px solid #e8dce7;height:44px;padding-left:18px;border-radius:999px;}
.search-bar input:focus{border-color:#c02ca2;box-shadow:0 0 0 4px rgba(192,44,162,.08);}
.header-actions{gap:4px;}
.header-action{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 10px;border-radius:12px;font-size:12px;font-weight:700;color:#4e4652;}
.header-action:hover{background:#f9edf7;color:var(--color-primary);}
.header-action__icon{font-size:19px;}
.header-nav{gap:8px;padding:11px 0;border-top:1px solid #f0e8ef;overflow-x:auto;scrollbar-width:none;white-space:nowrap;}
.header-nav::-webkit-scrollbar{display:none;}
.header-nav a{padding:8px 12px;border-radius:999px;font-size:13px;}
.header-nav .nav-category{background:#fff0fa;color:#9d1a86;}
.header-nav a:hover,.header-nav a.active{background:#f9edf7;color:#9d1a86;}
.mobile-menu-panel{background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:16px;}

.hero{padding:18px 0 8px;background:#fff8fc;}
.hero__inner{background:linear-gradient(115deg,#fff0f8 0%,#f6eafd 52%,#fff4ee 100%);border:1px solid #f0dceb;border-radius:28px;padding:24px;box-shadow:var(--shadow-sm);overflow:hidden;}
.hero__content{padding:8px 4px;}
.hero__eyebrow{display:inline-block;background:#fff;border:1px solid #f1d6e9;padding:6px 10px;border-radius:999px;font-size:11px;letter-spacing:.8px;color:#a31d8e;}
.hero__title{font-size:34px;letter-spacing:-1px;color:#241d28;}
.hero__desc{max-width:600px;color:#665d69;}
.hero__image{border-radius:22px;box-shadow:var(--shadow-md);border:5px solid rgba(255,255,255,.8);}
.hero__image img{height:290px;}
.hero .btn--primary{border-radius:999px;padding:11px 22px;box-shadow:0 8px 18px rgba(165,29,143,.18);}
.hero .btn--accent{border-radius:999px;padding:11px 22px;}

.section{padding:28px 0;}
.section-title{font-size:24px;letter-spacing:-.4px;}
.section-sub{font-size:13px;}
.section-head{margin-bottom:14px;}
.view-all{background:#fff;border:1px solid #eadde8;padding:7px 12px;border-radius:999px;}
.category-scroll{gap:14px;padding:2px 2px 12px;}
.category-chip{width:100px;gap:8px;}
.category-chip__photo{width:88px;height:88px;border-radius:50%;overflow:hidden;background:#f4e8f2;border:3px solid #fff;box-shadow:0 5px 14px rgba(50,20,50,.09);}
.category-chip__photo img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease;}
.category-chip:hover .category-chip__photo img{transform:scale(1.06);}
.category-chip>span:last-child{font-size:12px;font-weight:700;line-height:1.25;}

.product-grid{gap:14px;}
.product-card{border:1px solid #eee4ec;border-radius:16px;box-shadow:0 3px 14px rgba(50,20,50,.055);}
.product-card:hover{box-shadow:0 12px 28px rgba(50,20,50,.11);transform:translateY(-3px);}
.product-card__image-link{background:#faf7fb;}
.product-card__image{height:185px;object-fit:cover;}
.product-card__body{padding:11px 12px 13px;}
.product-card__name{font-size:13px;}
.product-card__price .price{font-size:16px;color:#211d27;}
.product-card .badge--discount{top:9px;left:9px;background:#e84c43;border-radius:999px;padding:4px 8px;}
.product-card__rating .stars{color:#f39a21;}

.promo-banner{border-radius:24px;background:linear-gradient(120deg,#76226f,#b82291 58%,#e95783);padding:30px;box-shadow:var(--shadow-md);}
.promo-banner h2{font-size:25px;}
.trust-grid{gap:12px;}
.trust-card{background:#fff;border:1px solid #eee3ec;box-shadow:var(--shadow-sm);border-radius:16px;}
.trust-card .icon{background:#fcecf8;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.site-footer{background:#28152d;color:#f9eef8;margin-top:20px;}
.site-footer a{color:#ead7e7;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);}
.bottom-nav{background:rgba(255,255,255,.98);backdrop-filter:blur(12px);}

@media (min-width:900px){
  .hero__inner{flex-direction:row;padding:32px;min-height:390px;}
  .hero__content{flex:1.05;}
  .hero__image{flex:1;max-width:540px;}
  .hero__image img{height:330px;}
  .hero__title{font-size:44px;}
}
@media (max-width:899px){
  .header-benefits__inner span:nth-child(3),.header-benefits__inner span:nth-child(4),.header-benefits__cta{display:none;}
  .header-benefits__inner{justify-content:center;min-height:30px;}
  .site-header__top{height:66px;gap:10px;}
  .logo__text small{display:none;}
  .logo__text strong{font-size:20px;}
  .logo__bag{width:36px;height:36px;font-size:18px;}
  .header-actions .seller-action,.header-actions .reseller-action{display:none;}
  .header-action{padding:7px;}
  .header-action__label{display:none;}
  .hero__inner{padding:16px;}
  .hero__title{font-size:29px;}
  .hero__image img{height:230px;}
  .section{padding:24px 0;}
  .section-title{font-size:21px;}
  .product-card__image{height:165px;}
}

/* ==========================================================================\n   SHOPMEE Premium Responsive Reference — Mobile + Desktop\n   ========================================================================== */
:root{
  --color-primary:#9c1c8c;
  --color-primary-dark:#74136a;
  --color-primary-light:#f8e8f6;
  --color-accent:#ff6b35;
  --color-bg-soft:#fbf8fc;
  --color-border:#eadfea;
  --max-width:1320px;
}

body.homepage{background:#fff;}
.container{width:100%;}

/* Mobile-first header */
.header-benefits{display:none;}
.site-header__top{height:62px;gap:9px;}
.logo{font-size:19px;gap:6px;}
.logo__bag{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;box-shadow:0 5px 14px rgba(156,28,140,.18);}
.logo__bag span{font-weight:900;font-size:16px;}
.logo__text small{font-size:8px;letter-spacing:.25px;}
.header-actions{gap:2px;}
.header-action{min-width:40px;min-height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;}
.header-action__label{display:none;}
.mobile-search-row{padding:7px 0 9px;}
.mobile-search-row .search-bar{display:block;max-width:none;}
.search-bar input{height:44px;border:1px solid #e8dce8;background:#f8f5f9;border-radius:14px;padding:10px 14px;font-size:14px;}
.mobile-menu-btn{width:40px;height:40px;border:0;background:transparent;border-radius:12px;font-size:22px;}

.hero{padding:18px 0 14px;background:linear-gradient(145deg,#fff5fc 0%,#fff 70%);}
.hero__inner{gap:14px;}
.hero__image{max-width:none;border-radius:18px;order:0;box-shadow:0 10px 28px rgba(70,20,70,.10);}
.hero__image img{height:205px;object-fit:cover;}
.hero__content{order:1;text-align:left;width:100%;}
.hero__eyebrow{font-size:11px;letter-spacing:.7px;}
.hero__title{font-size:25px;line-height:1.18;margin:5px 0 8px;}
.hero__desc{font-size:13px;line-height:1.45;margin-bottom:13px;}
.hero__content>div{justify-content:flex-start !important;}
.hero .btn{min-height:42px;padding:10px 16px;border-radius:12px;font-size:14px;}

.section{padding:24px 0;}
.section-head{margin-bottom:13px;}
.section-title{font-size:19px;}
.section-sub{font-size:12px;margin-bottom:0;}
.section-head .view-all{font-size:12px;}
.category-scroll{gap:10px;padding:2px 1px 7px;}
.category-chip{width:72px;gap:6px;}
.category-chip__icon{width:58px;height:58px;font-size:24px;box-shadow:0 3px 10px rgba(50,20,50,.06);}
.category-chip span{font-size:11px;line-height:1.2;}

.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.product-card{border-radius:14px;box-shadow:0 3px 12px rgba(30,15,30,.055);}
.product-card__image{height:180px;}
.product-card__body{padding:9px 9px 11px;gap:3px;}
.product-card__name{font-size:12.5px;line-height:1.28;}
.product-card__desc{display:none;}
.product-card__rating{font-size:10.5px;gap:4px;}
.stars{font-size:10px;}
.product-card__price{gap:5px;}
.price{font-size:14px;}
.mrp{font-size:11px;}
.product-card__actions{display:none;}
.badge--discount{top:7px;left:7px;font-size:10px;padding:3px 6px;border-radius:5px;}

.promo-banner{border-radius:18px;padding:21px 17px;gap:12px;}
.promo-banner h2{font-size:20px;}
.promo-banner p{font-size:13px;}
.promo-banner .btn{width:100%;}
.trust-grid{gap:9px;}
.trust-card{padding:13px 9px;border-radius:13px;}
.trust-card .icon{font-size:23px;margin-bottom:5px;}
.trust-card h4{font-size:12px;}
.trust-card p{font-size:10px;line-height:1.35;}

/* Tablet */
@media (min-width:600px){
  .container{padding-left:22px;padding-right:22px;}
  .hero__image img{height:280px;}
  .hero__title{font-size:32px;}
  .product-card__image{height:220px;}
  .product-card__desc{display:-webkit-box;}
}

/* Desktop: preserve the same visual language, with a spacious marketplace layout */
@media (min-width:900px){
  body.homepage{padding-bottom:0;}
  .header-benefits{display:block;background:#251b27;color:#fff;font-size:12px;}
  .header-benefits__inner{height:34px;display:flex;align-items:center;gap:24px;white-space:nowrap;}
  .header-benefits__inner span{opacity:.92;}
  .header-benefits__cta{margin-left:auto;color:#fff;font-weight:700;}
  .site-header__top{height:72px;gap:18px;}
  .logo{font-size:22px;}
  .logo__bag{width:36px;height:36px;}
  .logo__bag span{font-size:18px;}
  .logo__text small{font-size:9px;}
  .header-actions{gap:5px;}
  .header-action{padding:8px 11px;min-height:42px;border:1px solid transparent;font-size:13px;gap:5px;}
  .header-action:hover{background:var(--color-bg-soft);border-color:var(--color-border);}
  .header-action__label{display:inline;}
  .mobile-menu-btn,.mobile-search-row{display:none;}
  .search-bar{display:block;max-width:none;}
  .site-header .search-bar input{height:46px;border-radius:24px;padding-left:17px;background:#f8f5f9;}
  .header-nav{display:flex;height:48px;gap:25px;overflow:hidden;white-space:nowrap;}
  .header-nav .nav-link,.header-nav .nav-category{font-size:13px;}

  .hero{padding:34px 0 28px;}
  .hero__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:42px;align-items:center;}
  .hero__content{order:0;text-align:left;}
  .hero__image{order:0;max-width:none;}
  .hero__image img{height:360px;}
  .hero__title{font-size:46px;max-width:650px;}
  .hero__desc{font-size:15px;max-width:620px;line-height:1.6;}
  .hero__content>div{justify-content:flex-start !important;}

  .section{padding:38px 0;}
  .section-title{font-size:24px;}
  .section-sub{font-size:13px;}
  .category-scroll{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible;gap:14px;}
  .category-chip{width:auto;}
  .category-chip__icon{width:78px;height:78px;font-size:31px;}
  .category-chip span{font-size:12px;}
  .product-grid{gap:18px;}
  .product-card{border-radius:17px;}
  .product-card__image{height:255px;}
  .product-card__body{padding:12px 13px 14px;}
  .product-card__name{font-size:14px;}
  .product-card__desc{font-size:12px;min-height:32px;max-height:32px;}
  .product-card__rating{font-size:12px;}
  .stars{font-size:12px;}
  .price{font-size:17px;}
  .mrp{font-size:12px;}
  .product-card__actions{display:flex;}
  .product-card__actions .btn{border-radius:9px;}
  .promo-banner{padding:30px 28px;}
}

@media (min-width:1200px){
  .container{padding-left:28px;padding-right:28px;}
  .hero__title{font-size:50px;}
  .product-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .product-card__image{height:270px;}
}

@media (max-width:380px){
  .logo__text small{display:none;}
  .hero__title{font-size:23px;}
  .hero__image img{height:185px;}
  .product-card__image{height:160px;}
}

/* SHOPMEE marketplace homepage refresh — inspired by modern Indian marketplaces, with original branding/content. */
.top-strip{background:#fff7ee;border-bottom:1px solid #f1e4d5;font-size:12px;color:#5e5147}.top-strip__inner{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:14px;white-space:nowrap;overflow:hidden}.top-strip a{font-weight:700;color:var(--color-primary)}
.shopkart-inspired-header{box-shadow:0 2px 12px rgba(30,15,30,.06)}.shop-category-nav{gap:0;justify-content:space-between}.shop-category-nav .nav-link,.shop-category-nav .nav-category{padding:9px 11px;border-radius:8px;color:#3f3940;font-size:13px}.shop-category-nav .nav-link:hover,.shop-category-nav .nav-category:hover{background:#faf7fb;color:var(--color-primary)}.shop-category-nav .nav-category{background:#f8f1f8;font-weight:700}.shop-search-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:22px;color:#777}
.shop-hero{padding:18px 0 24px;background:#f8f7f8}.shop-hero__inner{display:grid;grid-template-columns:1fr;gap:16px}.shop-hero__copy{background:linear-gradient(135deg,#f5e9f4,#fff);border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;justify-content:center}.shop-hero__badge{display:inline-flex;align-self:flex-start;background:#fff;border:1px solid #ead9e8;color:var(--color-primary);font-size:11px;font-weight:800;letter-spacing:.8px;padding:6px 9px;border-radius:999px}.shop-hero h1{font-size:34px;line-height:1.12;margin:12px 0;color:#282329}.shop-hero h1 strong{color:var(--color-primary)}.shop-hero p{max-width:560px;color:#6b6570;font-size:15px;margin-bottom:18px}.shop-hero__actions{display:flex;gap:9px;flex-wrap:wrap}.shop-hero__trust{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#5f5a60;margin-top:16px}.shop-hero__visual{position:relative;min-height:260px;border-radius:18px;overflow:hidden;background:#eee}.shop-hero__visual img{width:100%;height:100%;min-height:260px;object-fit:cover}.hero-floating-card{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);padding:10px 13px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;font-size:12px}.hero-floating-card b{font-size:14px}.hero-floating-card span{color:#6b6570}
.shop-section-head{margin-bottom:13px}.shop-section-head .section-title{font-size:21px}.shop-section-head .section-sub{margin-bottom:0}.shop-category-scroll{gap:12px;padding:2px 0 9px}.shop-category-scroll .category-chip{width:94px}.shop-category-scroll .category-chip__photo{width:78px;height:78px;border-radius:50%;overflow:hidden;background:#f3eef3;border:1px solid #eee5ed}.shop-category-scroll .category-chip__photo img{width:100%;height:100%;object-fit:cover}.shop-category-scroll .category-chip>span:last-child{font-size:12px;line-height:1.25;margin-top:2px}
.shop-section-soft{background:#fafafa;border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1}.shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-product-grid .product-card{border:1px solid #ece8ec;border-radius:10px;box-shadow:none;overflow:hidden;background:#fff}.shop-product-grid .product-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(25,15,25,.08)}.shop-product-grid .product-card__image{height:185px;background:#f6f6f6}.shop-product-grid .product-card__body{padding:9px 10px 10px;gap:3px}.shop-product-grid .product-card__name{font-size:13px}.shop-product-grid .product-card__price{font-size:15px}
.shop-promo-row{display:grid;grid-template-columns:1fr;gap:12px}.shop-promo-card{border-radius:16px;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;min-height:190px}.shop-promo-card h2{font-size:21px;margin:5px 0 8px}.shop-promo-card p{font-size:13px;max-width:520px;color:#686168}.promo-kicker{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--color-primary)}.shop-promo-card--dark{background:#242027;color:#fff}.shop-promo-card--dark p{color:#d4cfd5}.shop-promo-card--dark .promo-kicker{color:#f3a5e9}.shop-promo-card--light{background:#f8f0f8;border:1px solid #eadcea}.shop-trust-grid{grid-template-columns:repeat(2,1fr);gap:10px}.shop-trust-grid .trust-card{border:1px solid #ece8ec;background:#fff;border-radius:12px;padding:16px}.shop-trust-grid .trust-card .icon{font-size:24px}
@media(min-width:900px){.shop-hero__inner{grid-template-columns:1.02fr .98fr;min-height:420px}.shop-hero__copy{padding:42px}.shop-hero h1{font-size:46px}.shop-hero__visual img{min-height:420px}.shop-promo-row{grid-template-columns:1fr 1fr}.shop-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.shop-trust-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:899px){.top-strip__inner span:nth-child(2),.top-strip__inner span:nth-child(3){display:none}.top-strip__inner{justify-content:space-between}.site-header__top{gap:9px}.logo__text small{display:none}.logo__text strong{font-size:19px}.header-action__label{display:none}.shop-category-nav{display:none}.shop-promo-card{align-items:flex-start;flex-direction:column}.shop-promo-card .btn{align-self:flex-start}}
@media(min-width:640px) and (max-width:899px){.shop-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-promo-row{grid-template-columns:1fr 1fr}}


/* ========================================================================
   SHOPMEE homepage — supplied mobile design implementation
   Single search bar + clean marketplace visual system
   ======================================================================== */
.homepage .top-strip{display:none}
.homepage .shopkart-inspired-header{box-shadow:none;border-bottom:1px solid #eee8ef;background:#fff}
.homepage .site-header__top{min-height:68px}
.homepage .site-header__top > .search-bar{display:block;flex:1;max-width:520px}
.homepage .mobile-search-row{display:none}
.homepage .shop-hero{padding:16px 0 10px;background:#fff}
.homepage .shop-hero__copy{background:linear-gradient(135deg,#f8edf7 0%,#fff 82%);border:1px solid #f1e2ef;box-shadow:0 4px 18px rgba(70,30,70,.04)}
.homepage .shop-hero__visual{background:#f4edf4}
.homepage .shop-hero__visual img{object-position:center}
.homepage .shop-section-head .section-title{font-weight:800;color:#1f2430}
.homepage .shop-section-head .section-sub{display:none}
.homepage .shop-category-scroll{display:flex;overflow-x:auto;scrollbar-width:none}
.homepage .shop-category-scroll::-webkit-scrollbar{display:none}
.homepage .shop-category-scroll .category-chip{flex:0 0 86px;width:86px}
.homepage .shop-category-scroll .category-chip__photo{width:76px;height:76px;border-radius:14px}
.homepage .shop-category-scroll .category-chip>span:last-child{font-weight:600;color:#272633}
.homepage .shop-section-soft{background:#fff;border:0}
.homepage .shop-product-grid .product-card{border-radius:14px;box-shadow:0 2px 10px rgba(35,25,40,.05)}
.homepage .shop-product-grid .product-card__image{height:165px}
.homepage .shop-product-grid .product-card__actions{display:none}
.homepage .shop-product-grid .product-card__rating{font-size:11px}
.homepage .shop-product-grid .price{font-size:15px}
.homepage .shop-promo-row{grid-template-columns:1fr}
.homepage .shop-promo-card--dark{display:none}
.homepage .shop-promo-card--light{min-height:84px;padding:14px 16px;flex-direction:row;align-items:center;background:linear-gradient(100deg,#9c1c8c,#c124a6);color:#fff;border:0;border-radius:14px}
.homepage .shop-promo-card--light .promo-kicker{color:#fff}
.homepage .shop-promo-card--light h2{font-size:17px;margin:0}
.homepage .shop-promo-card--light p{display:none}
.homepage .shop-promo-card--light .btn{background:#fff;color:#a51e91;border-color:#fff;white-space:nowrap;padding:9px 14px}

@media(max-width:899px){
  .homepage .container{padding-left:28px;padding-right:28px}
  .homepage .site-header__top{height:68px;min-height:68px;gap:12px}
  .homepage .site-header__top > .search-bar{display:none}
  .homepage .mobile-search-row{display:block;padding:7px 0 14px}
  .homepage .mobile-search-row .search-bar{display:block;width:100%;height:50px;border-radius:17px;background:#fbf8fb;border:1.5px solid #eaddea;box-shadow:0 2px 8px rgba(60,30,60,.04)}
  .homepage .mobile-search-row .search-bar input{height:50px;width:100%;box-sizing:border-box;border:0;background:transparent;padding:0 48px 0 16px;font-size:15px;color:#34303a;outline:none}
  .homepage .mobile-search-row .shop-search-icon{right:16px;font-size:25px;color:#777}
  .homepage .mobile-menu-btn{font-size:0;width:32px;height:32px;position:relative;border:0;background:transparent;flex:0 0 32px}
  .homepage .mobile-menu-btn:before{content:'☰';font-size:30px;position:absolute;inset:0;line-height:32px;color:#202734}
  .homepage .logo{gap:7px;min-width:0}
  .homepage .logo__mark{width:42px;height:42px;border-radius:13px;font-size:21px}
  .homepage .logo__text strong{font-size:21px}
  .homepage .header-actions{margin-left:auto;gap:4px}
  .homepage .header-action{padding:4px;width:35px;height:40px}
  .homepage .header-action__icon{font-size:24px}
  .homepage .cart-count{right:0}
  .homepage .shop-hero{padding-top:8px}
  .homepage .shop-hero__inner{gap:0}
  .homepage .shop-hero__copy{padding:28px 24px 24px;border-radius:22px 22px 0 0}
  .homepage .shop-hero__visual{min-height:220px;border-radius:0 0 22px 22px}
  .homepage .shop-hero__visual img{min-height:220px;height:220px}
  .homepage .shop-hero h1{font-size:37px}
  .homepage .shop-hero p{font-size:15px;line-height:1.55}
  .homepage .shop-hero__trust{font-size:11px;gap:10px}
  .homepage .section{padding:25px 0}
  .homepage .shop-section-head{margin-bottom:10px}
  .homepage .shop-section-head .section-title{font-size:21px}
  .homepage .shop-category-scroll{margin-right:-28px;padding-right:28px}
  .homepage .shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .homepage .shop-product-grid .product-card__image{height:160px}
  .homepage .shop-product-grid .product-card__body{padding:8px 9px 10px}
  .homepage .shop-product-grid .product-card__name{font-size:13px}
  .homepage .shop-product-grid .product-card__desc{display:none}
  .homepage .shop-promo-card--light{margin-top:2px}
}
@media(min-width:900px){
  .homepage .mobile-search-row{display:none}
  .homepage .shop-hero{padding:22px 0 10px}
  .homepage .shop-hero__inner{grid-template-columns:1.1fr .9fr}
  .homepage .shop-hero__copy{border-radius:22px 0 0 22px}
  .homepage .shop-hero__visual{border-radius:0 22px 22px 0}
}

/* FEEL SHOPKART1 — final homepage responsive overrides */
.homepage .site-header { background:#fff; border-bottom:1px solid #eee8ef; box-shadow:none; }
.homepage .site-header__top { min-height:76px; height:76px; gap:18px; }
.homepage .mobile-menu-btn { flex:0 0 auto; }
.homepage .logo { flex:0 0 auto; }
.homepage .logo__text small { display:none; }
.homepage .site-header__top > .search-bar { display:flex; }
.homepage .mobile-search-row { display:none; }
.homepage .shop-category-nav { display:flex; }
.homepage .shop-hero { background:#fff; padding:18px 0 28px; }
.homepage .shop-hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:0; min-height:420px; }
.homepage .shop-hero__copy { border-radius:22px 0 0 22px; padding:42px; background:linear-gradient(135deg,#f6e8f4,#fff); }
.homepage .shop-hero__visual { min-height:420px; border-radius:0 22px 22px 0; background:#f8edf7; }
.homepage .shop-hero__visual img { min-height:420px; object-fit:cover; }
.homepage .hero-floating-card { display:none; }
.homepage .shop-category-scroll { display:flex; overflow-x:auto; scrollbar-width:none; }
.homepage .shop-category-scroll::-webkit-scrollbar { display:none; }
.homepage .shop-category-scroll .category-chip { flex:0 0 112px; width:112px; }
.homepage .shop-category-scroll .category-chip__photo { width:112px; height:96px; border-radius:16px; }
.homepage .shop-product-grid .product-card { min-width:0; }
.homepage .shop-product-grid .product-card__desc { display:none; }
.homepage .shop-product-grid .product-card__image { height:185px; }

@media (max-width:899px) {
  .homepage .site-header__top { min-height:60px; height:60px; gap:9px; padding:0 0; }
  .homepage .site-header__top > .search-bar { display:none; }
  .homepage .mobile-search-row { display:block; padding:7px 0 11px; }
  .homepage .mobile-search-row .search-bar { display:flex; width:100%; max-width:none; height:44px; border-radius:14px; }
  .homepage .mobile-search-row .search-bar input { height:100%; padding:0 14px; font-size:13px; }
  .homepage .shop-category-nav { display:none; }
  .homepage .shop-hero { padding:12px 0 20px; }
  .homepage .shop-hero__inner { grid-template-columns:1fr; min-height:0; gap:0; }
  .homepage .shop-hero__copy { border-radius:18px 18px 0 0; padding:24px 20px 18px; }
  .homepage .shop-hero h1 { font-size:31px; }
  .homepage .shop-hero p { font-size:14px; line-height:1.55; }
  .homepage .shop-hero__visual { min-height:230px; height:230px; border-radius:0 0 18px 18px; }
  .homepage .shop-hero__visual img { min-height:230px; height:230px; object-fit:cover; object-position:center; }
  .homepage .shop-category-scroll .category-chip { flex:0 0 92px; width:92px; }
  .homepage .shop-category-scroll .category-chip__photo { width:92px; height:78px; border-radius:14px; }
  .homepage .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .homepage .shop-product-grid .product-card__image { height:150px; }
  .homepage .shop-product-grid .product-card__body { padding:9px; }
  .homepage .shop-product-grid .product-card__name { font-size:12px; line-height:1.3; }
  .homepage .shop-product-grid .product-card__price { font-size:15px; }
  .homepage .shop-section-head .section-title { font-size:18px; }
  .homepage .shop-section-head .section-sub { font-size:11px; }
  .homepage .shop-promo-row { grid-template-columns:1fr; }
}
@media (min-width:640px) and (max-width:899px) {
  .homepage .shop-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:900px) {
  .homepage .shop-product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  .homepage .shop-product-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}


/* SHOPMEE homepage search: exactly one visible search bar at a time. */
@media (max-width: 899px) {
  .site-header__top > .search-bar { display: none !important; }
  .mobile-search-row { display: block !important; padding: 10px 0 12px; }
  .mobile-search-row .search-bar { display: block !important; max-width: none; width: 100%; }
  .mobile-search-row .search-bar input {
    min-height: 48px;
    padding: 12px 44px 12px 18px;
    border-radius: 24px;
    background: #fff;
    border: 1.5px solid var(--color-border);
  }
}
@media (min-width: 900px) {
  .mobile-search-row { display: none !important; }
}

/* ===== SHOPMEE full customer portal additions ===== */
.form-help{font-size:12px;color:var(--color-text-muted);display:block;margin-top:8px}.payment-option{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--color-border);border-radius:12px;margin:8px 0;cursor:pointer}.payment-option small{display:block;color:var(--color-text-muted);margin-top:3px}.status-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#eee;color:#555}.status-pending,.status-placed{background:#fff1c7;color:#7b5a00}.status-processing{background:#e8f0ff;color:#2455a6}.status-shipped{background:#e8f7ef;color:#17663b}.status-delivered{background:#dcf7e8;color:#146c3a}.status-cancelled{background:#ffe5e5;color:#9c2222}.order-card{background:var(--color-surface,#fff);border:1px solid var(--color-border);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.order-card__head,.order-card__body,.order-card__foot,.section-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.order-card__head small,.order-card__foot{color:var(--color-text-muted);font-size:12px}.order-card__head small{display:block;margin-top:4px}.order-card__body{padding:14px 0}.order-card__body p{margin:4px 0;font-size:14px}.order-card__foot{border-top:1px solid var(--color-border);padding-top:12px}.order-detail-items{margin:16px 0}.wishlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wishlist-card{display:grid;grid-template-columns:110px 1fr;gap:14px}.wishlist-card img{width:110px;height:110px;object-fit:cover;border-radius:12px}.wishlist-card h3{font-size:15px;margin:0 0 8px}.wishlist-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.address-card{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--color-border)}.address-card p{margin:5px 0;font-size:13px;color:var(--color-text-muted)}.address-actions{display:flex;gap:7px;align-items:flex-start}.check-row{display:flex!important;align-items:center;gap:8px;margin:10px 0}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;display:grid;place-items:center;padding:16px}.dialog{position:relative;width:min(680px,100%);max-height:90vh;overflow:auto}.dialog-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;cursor:pointer}.success-page,.error-page{min-height:70vh;display:grid;place-items:center}.success-card,.error-page .card-box{width:min(650px,100%);text-align:center}.success-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#dff6e8;color:#16864b;font-size:38px;font-weight:900}.success-summary{padding:16px;border:1px solid var(--color-border);border-radius:14px;margin:18px 0;text-align:left}.success-summary p{margin:7px 0}.delivery-timeline{display:grid;gap:10px;text-align:left;margin:18px 0}.delivery-timeline>div{display:flex;gap:12px;align-items:flex-start}.delivery-timeline strong{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:#fff;flex:0 0 30px}.delivery-timeline small{display:block;color:var(--color-text-muted);margin-top:3px}.error-code{font-size:72px;font-weight:900;line-height:1;color:var(--color-primary)}.policy-page{max-width:900px}.policy-content h2{margin-top:24px}.footer-links{display:flex;gap:14px;flex-wrap:wrap;padding:18px 0}.footer-links a{color:inherit}.footer-sep{opacity:.5}.btn-group{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.profile-form{max-width:700px}
@media(max-width:700px){.wishlist-grid{grid-template-columns:1fr}.wishlist-card{grid-template-columns:90px 1fr}.wishlist-card img{width:90px;height:90px}.order-card__body{align-items:flex-start}.address-card{display:block}.address-actions{margin-top:10px}.header-nav{overflow:auto}.footer-links{font-size:13px}}
/* SHOPMEE reseller workflow */
.resale-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.resale-choice{border:1px solid var(--color-border);border-radius:12px;padding:13px;cursor:pointer;display:flex;align-items:center;gap:9px;font-weight:700;background:var(--color-bg-soft)}.resale-choice input{accent-color:var(--color-primary)}.resale-choice.active{border-color:var(--color-primary);background:var(--color-primary-light)}.resale-panel{border:1px dashed var(--color-primary);border-radius:12px;padding:14px;margin-top:10px}.margin-value{font-size:22px;font-weight:800;padding:10px 0;color:var(--color-accent)}
.reseller-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.btn--whatsapp{background:#25D366;color:#fff;border-color:#25D366}.timeline{display:grid;gap:10px;margin:14px 0}.timeline-step{display:flex;gap:12px;align-items:flex-start}.timeline-dot{width:14px;height:14px;border-radius:50%;background:#ddd;margin-top:4px;flex:0 0 14px}.timeline-step.active .timeline-dot{background:var(--color-primary)}.timeline-step.done .timeline-dot{background:#16a34a}.status-badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#eee}.status-badge.pending{background:#fff3cd}.status-badge.processing{background:#dbeafe}.status-badge.shipped{background:#e0e7ff}.status-badge.delivered{background:#dcfce7}.status-badge.cancelled{background:#fee2e2}.earnings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:700px){.earnings-grid{grid-template-columns:repeat(4,1fr)}}.earning-card{padding:14px;border:1px solid var(--color-border);border-radius:12px}.earning-card strong{font-size:20px;display:block;margin-top:4px}.drawer{position:fixed;inset:0;z-index:500;pointer-events:none}.drawer.open{pointer-events:auto}.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:.2s}.drawer.open .drawer__backdrop{opacity:1}.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,94vw);background:#fff;transform:translateX(100%);transition:.25s;padding:18px;overflow:auto}.drawer.open .drawer__panel{transform:translateX(0)}
.shop-banner-slider{position:relative;overflow:hidden}.shop-slide{display:none}.shop-slide.active{display:block}.shop-slider-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}.shop-slider-dots button{width:8px;height:8px;border:0;border-radius:50%;background:#bbb;padding:0}.shop-slider-dots button.active{background:var(--color-primary);width:22px;border-radius:8px}

/* Final accessibility/visibility fix: hidden dialogs must never be forced visible. */
[hidden] { display: none !important; }
body.shopmee-modal-open { overflow: hidden; }