/* Layout: HYPERMARKET — Structural & Component Styling */
html[data-layout="hypermarket"] body {
  font-family: 'Plus Jakarta Sans', 'SolaimanLipi', system-ui, -apple-system, sans-serif;
  background: var(--body-bg, #f8fafc);
}

/* Top Utility Bar */
.hm-utility {
  background: var(--surface, #0f172a);
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hm-util-link {
  color: #cbd5e1; text-decoration: none; transition: color .15s ease;
}
.hm-util-link:hover { color: #ffffff; }
.hm-util-sep { color: #475569; }

/* Sticky Main Header */
.hm-header {
  background: color-mix(in srgb, var(--card-bg, #ffffff) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.hm-brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand, #0d7a5f), var(--brand-dark, #07624b));
  color: var(--brand-ink, #ffffff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; box-shadow: 0 4px 12px var(--brand-glow);
}

/* Department Mega Search */
.hm-search {
  max-width: 680px;
}
.hm-search .hm-cat-select {
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--brand, #0d7a5f);
  border-right: 0;
  background: var(--surface, #f8fafc);
  font-size: .83rem; font-weight: 600; color: var(--ink-2, #334155);
  padding: 0 .75rem; max-width: 170px; cursor: pointer;
}
.hm-search .form-control {
  border-radius: 0;
  border-color: var(--brand, #0d7a5f);
  font-size: .88rem; min-height: 42px;
}
@media (max-width: 767.98px) {
  .hm-search .form-control { border-radius: 12px 0 0 12px; }
}
.hm-search .btn-primary {
  border-radius: 0 12px 12px 0;
  padding: 0 1.25rem; font-weight: 600; font-size: .88rem;
}

/* Header Icons & Cart Pill */
.hm-icons .header-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface, #f8fafc);
  transition: all .15s ease;
}
.hm-icons .header-icon:hover {
  background: var(--brand-light, #e6f6f1);
  color: var(--brand, #0d7a5f);
  transform: translateY(-1px);
}
.hm-cart-pill {
  background: var(--brand, #0d7a5f) !important;
  color: var(--brand-ink, #ffffff) !important;
}

@media (max-width: 767.98px) {
  .hm-header .container > .d-flex {
    column-gap: 4px !important;
    row-gap: 8px !important;
  }
  .hm-burger {
    width: 35px; height: 35px; min-width: 35px; min-height: 35px;
    border-radius: 9px; font-size: 1.25rem;
  }
  .hm-brand-mark {
    width: 35px; height: 35px; border-radius: 9px; font-size: 1.15rem;
  }
  .hm-header .brand-logo {
    max-height: 34px; max-width: 115px;
  }
  .hm-icons {
    gap: 4px !important;
  }
  .hm-icons .header-icon {
    width: 35px; height: 35px; min-width: 35px; min-height: 35px;
    border-radius: 9px; font-size: 1.1rem;
  }
  .hm-icons .lang-switch {
    font-size: .75rem; margin-right: 2px !important;
  }
}

@media (max-width: 400px) {
  .hm-header .container > .d-flex {
    column-gap: 2px !important;
  }
  .hm-burger {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
    font-size: 1.15rem; border-radius: 8px;
  }
  .hm-brand-mark {
    width: 32px; height: 32px; font-size: 1.05rem; border-radius: 8px;
  }
  .hm-header .brand-logo {
    max-height: 30px; max-width: 95px;
  }
  .hm-icons {
    gap: 2px !important;
  }
  .hm-icons .header-icon {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
    border-radius: 8px; font-size: 1.02rem;
  }
}

/* Mega Navigation Bar & Mega Menu */
.hm-navbar {
  background: var(--card-bg, #ffffff);
  border-bottom: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.hm-dept-btn {
  background: linear-gradient(135deg, var(--brand, #0d7a5f), var(--brand-dark, #07624b)) !important;
  color: var(--brand-ink, #ffffff) !important;
  font-weight: 700; font-size: .88rem;
  padding: .55rem 1.25rem; border-radius: 10px;
  box-shadow: 0 4px 12px var(--brand-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hm-dept-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--brand-glow);
}
.hm-mega-menu {
  min-width: 720px; max-width: 900px;
  border-radius: 18px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.18) !important;
}
.hm-mega-item {
  background: var(--surface, #f8fafc);
  transition: all .15s ease; border: 1px solid transparent;
}
.hm-mega-item:hover {
  background: var(--brand-light, #e6f6f1);
  border-color: var(--brand-glow);
  transform: translateX(2px);
}
.hm-mega-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #ffffff; color: var(--brand, #0d7a5f);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.hm-mega-banner {
  background: linear-gradient(135deg, #0f172a 0%, var(--brand-dark, #07624b) 100%);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.hm-mega-banner .btn {
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  color: var(--brand, #0d7a5f) !important;
}
.hm-mega-banner .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Nav Links */
.hm-nav-links .nav-link {
  font-weight: 600; font-size: .88rem;
  color: var(--ink-2, #334155);
  padding: .65rem .9rem;
  transition: color .15s ease;
}
.hm-nav-links .nav-link:hover {
  color: var(--brand, #0d7a5f);
}

/* Product Cards & Grid in Hypermarket */
html[data-layout="hypermarket"] .card {
  border-radius: 16px;
  border: 1px solid var(--line, #e2e8f0);
  transition: transform .18s ease, box-shadow .18s ease;
}
html[data-layout="hypermarket"] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12);
}

/* Hypermarket Product Card */
.hm-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.14);
}
.hm-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface, #f8fafc);
}
.hm-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}
.hm-card:hover .hm-thumb img { transform: scale(1.04); }
.hm-discount-badge {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--brand, #0d7a5f); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 999px;
}
.hm-card-body {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hm-name {
  font-weight: 600; font-size: .87rem; line-height: 1.3;
  color: var(--ink, #0f172a); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .35rem;
}
.hm-name:hover { color: var(--brand, #0d7a5f); }
.hm-price-row { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .4rem; }

/* Mobile hamburger — theme-aware (not Bootstrap btn-light) */
.hm-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  background: var(--surface, #f8fafc);
  color: var(--ink, #0f172a);
  font-size: 1.45rem;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.hm-burger:hover,
.hm-burger:focus-visible {
  background: var(--brand-tint, #e6f6f1);
  color: var(--brand, #0d7a5f);
  outline: none;
}
html[data-theme="dark"] .hm-burger {
  background: color-mix(in srgb, var(--surface, #161e26) 88%, #fff 8%);
  color: var(--ink, #e6edf3);
  box-shadow: inset 0 0 0 1px var(--line, #223040);
}
html[data-theme="dark"] .hm-burger:hover,
html[data-theme="dark"] .hm-burger:focus-visible {
  background: var(--brand-tint, #10322a);
  color: var(--brand, #1fae8a);
}

/* Mobile department drawer — light + dark */
.hm-drawer {
  background: var(--card-bg, #ffffff);
  color: var(--ink, #0f172a);
  max-width: min(340px, 92vw);
  border-right: 1px solid var(--line, #e2e8f0);
}
.hm-drawer-head {
  background: linear-gradient(135deg, var(--brand, #0d7a5f), var(--brand-dark, #07624b));
  color: var(--brand-ink, #ffffff);
  border-bottom: 0;
}
.hm-drawer-head .offcanvas-title { color: inherit; }
.hm-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  transition: background .15s ease;
}
.hm-drawer-close:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.hm-drawer-block { border-bottom: 1px solid var(--line, #e2e8f0); }
.hm-drawer-help { border-bottom: 0; }
.hm-drawer-label {
  padding: .7rem 1rem .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #66727e);
  background: var(--surface, #f8fafc);
  border-bottom: 1px solid var(--line-soft, #f1f4f6);
}
.hm-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .72rem 1rem;
  color: var(--ink, #0f172a);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line-soft, #f1f4f6);
  transition: background .12s ease, color .12s ease;
}
.hm-drawer-link:last-child { border-bottom: 0; }
.hm-drawer-link > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.hm-drawer-link > span > i:first-child,
.hm-drawer-link > span > [class*="bi-"]:first-child {
  color: var(--brand, #0d7a5f);
  width: 1.15rem;
  text-align: center;
  flex-shrink: 0;
}
.hm-drawer-link .bi-chevron-right {
  color: var(--muted, #66727e);
  font-size: .75rem;
  flex-shrink: 0;
}
.hm-drawer-link:hover {
  background: var(--brand-tint, #e6f6f1);
  color: var(--brand, #0d7a5f);
}
.hm-drawer-link-all {
  font-weight: 700;
  color: var(--brand, #0d7a5f);
  background: color-mix(in srgb, var(--brand, #0d7a5f) 8%, transparent);
}
html[data-theme="dark"] .hm-drawer {
  background: var(--card-bg, #101820);
  color: var(--ink, #e6edf3);
  border-right-color: var(--line, #223040);
  box-shadow: 8px 0 28px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .hm-drawer-label {
  background: var(--surface, #161e26);
  color: var(--muted, #94a3b1);
  border-bottom-color: var(--line, #223040);
}
html[data-theme="dark"] .hm-drawer-block { border-bottom-color: var(--line, #223040); }
html[data-theme="dark"] .hm-drawer-link {
  color: var(--ink, #e6edf3);
  border-bottom-color: var(--line-soft, #1b2632);
}
html[data-theme="dark"] .hm-drawer-link:hover {
  background: var(--brand-tint, #10322a);
  color: var(--brand, #1fae8a);
}
html[data-theme="dark"] .hm-drawer-link-all {
  background: color-mix(in srgb, var(--brand, #1fae8a) 14%, transparent);
  color: var(--brand, #1fae8a);
}
html[data-theme="dark"] .hm-mega-icon {
  background: var(--surface, #161e26);
  color: var(--brand, #1fae8a);
  box-shadow: none;
}
.hm-mega-name { color: var(--ink, #0f172a); }
html[data-theme="dark"] .hm-mega-name { color: var(--ink, #e6edf3); }
html[data-theme="dark"] .hm-mega-item {
  background: var(--surface, #161e26);
}
html[data-theme="dark"] .hm-mega-item:hover {
  background: var(--brand-tint, #10322a);
}